fixed buttons

This commit is contained in:
Mateusz Gruszczyński
2026-09-20 16:21:52 +02:00
parent 099840d66a
commit 6329ac33d1
3 changed files with 31 additions and 21 deletions
+15 -5
View File
@@ -2854,7 +2854,9 @@ dialog::backdrop {
flex: 0 0 auto;
}
.files-head-actions .action-button {
.files-head-actions .primary-button,
.files-head-actions .secondary-button,
.files-head-actions .danger-button {
width: auto;
}
@@ -2959,6 +2961,10 @@ dialog::backdrop {
gap: 7px;
}
.file-actions .primary-button {
width: auto;
}
.file-actions button,
.file-secondary-actions__buttons button {
white-space: nowrap;
@@ -3074,7 +3080,9 @@ dialog::backdrop {
line-height: 1.5;
}
.files-state .action-button {
.files-state .primary-button,
.files-state .secondary-button,
.files-state .danger-button {
margin-top: 14px;
}
@@ -3177,7 +3185,9 @@ dialog::backdrop {
gap: 6px;
}
.files-head-actions .action-button {
.files-head-actions .primary-button,
.files-head-actions .secondary-button,
.files-head-actions .danger-button {
padding-inline: 9px;
}
@@ -3264,11 +3274,11 @@ dialog::backdrop {
line-height: 1.4;
}
.video-choice-actions>.action-button--primary span {
.video-choice-actions>.primary-button span {
color: var(--on-accent);
}
.video-choice-actions>.action-button--secondary span {
.video-choice-actions>.secondary-button span {
color: var(--text-secondary);
}
+1 -1
View File
@@ -332,7 +332,7 @@
<p>Copy a direct link or ready Markdown/Alias code.</p>
</div>
<div class="files-head-actions">
<button id="files-upload-button" class="action-button action-button--primary compact-button"
<button id="files-upload-button" class="primary-button"
type="button">Upload file</button>
<button id="close-files" class="icon-button" type="button" aria-label="Close files">×</button>
</div>
+15 -15
View File
@@ -103,10 +103,10 @@ function createVideoInsertDialog() {
</div>
<p class="dialog-copy" data-video-file-name></p>
<div class="video-choice-actions">
<button type="button" class="action-button action-button--primary" data-video-choice="player">
<button type="button" class="primary-button" data-video-choice="player">
<strong>Embedded player</strong><span>Play the video directly in the note.</span>
</button>
<button type="button" class="action-button action-button--secondary" data-video-choice="download">
<button type="button" class="secondary-button" data-video-choice="download">
<strong>Download link</strong><span>Insert a link that downloads the original file.</span>
</button>
</div>
@@ -156,23 +156,23 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, getUploadMaxS
function fileActionButtons(file) {
const attributes = `data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}"`;
const primaryInsert = isVideo(file.mime_type)
? `<button class="action-button action-button--primary compact-button file-primary-action" data-add-file-to-note data-insert-mode="player" ${attributes}>${escapeHtml(t("files.addPlayer", {}, "Add player"))}</button>`
: `<button class="action-button action-button--primary compact-button file-primary-action" data-add-file-to-note data-insert-mode="auto" ${attributes}>${escapeHtml(t("files.addToNote", {}, "Add to note"))}</button>`;
? `<button class="primary-button file-primary-action" data-add-file-to-note data-insert-mode="player" ${attributes}>${escapeHtml(t("files.addPlayer", {}, "Add player"))}</button>`
: `<button class="primary-button file-primary-action" data-add-file-to-note data-insert-mode="auto" ${attributes}>${escapeHtml(t("files.addToNote", {}, "Add to note"))}</button>`;
const secondaryInsert = isVideo(file.mime_type)
? `<button class="action-button action-button--secondary compact-button" data-add-file-to-note data-insert-mode="download" ${attributes}>${escapeHtml(t("files.addDownload", {}, "Add download"))}</button>`
? `<button class="secondary-button" data-add-file-to-note data-insert-mode="download" ${attributes}>${escapeHtml(t("files.addDownload", {}, "Add download"))}</button>`
: "";
const codeButtons = isVideo(file.mime_type)
? `<button class="action-button action-button--secondary compact-button" data-show-file-code="link" aria-pressed="false" ${attributes}>${escapeHtml(t("files.link", {}, "Link"))}</button>
<button class="action-button action-button--secondary compact-button" data-show-file-code="player" aria-pressed="false" ${attributes}>${escapeHtml(t("files.playerCode", {}, "Player code"))}</button>
<button class="action-button action-button--secondary compact-button" data-show-file-code="download" aria-pressed="false" ${attributes}>${escapeHtml(t("files.downloadCode", {}, "Download code"))}</button>`
: `<button class="action-button action-button--secondary compact-button" data-show-file-code="link" aria-pressed="false" ${attributes}>${escapeHtml(t("files.link", {}, "Link"))}</button>
<button class="action-button action-button--secondary compact-button" data-show-file-code="alias" aria-pressed="false" ${attributes}>${escapeHtml(t("files.alias", {}, "Alias"))}</button>
<button class="action-button action-button--secondary compact-button" data-show-file-code="markdown" aria-pressed="false" ${attributes}>${escapeHtml(t("files.markdown", {}, "Markdown"))}</button>`;
? `<button class="secondary-button" data-show-file-code="link" aria-pressed="false" ${attributes}>${escapeHtml(t("files.link", {}, "Link"))}</button>
<button class="secondary-button" data-show-file-code="player" aria-pressed="false" ${attributes}>${escapeHtml(t("files.playerCode", {}, "Player code"))}</button>
<button class="secondary-button" data-show-file-code="download" aria-pressed="false" ${attributes}>${escapeHtml(t("files.downloadCode", {}, "Download code"))}</button>`
: `<button class="secondary-button" data-show-file-code="link" aria-pressed="false" ${attributes}>${escapeHtml(t("files.link", {}, "Link"))}</button>
<button class="secondary-button" data-show-file-code="alias" aria-pressed="false" ${attributes}>${escapeHtml(t("files.alias", {}, "Alias"))}</button>
<button class="secondary-button" data-show-file-code="markdown" aria-pressed="false" ${attributes}>${escapeHtml(t("files.markdown", {}, "Markdown"))}</button>`;
const deleteButton = canDelete()
? `<button class="action-button action-button--danger compact-button" data-delete-file="${file.id}" data-file-name="${escapeHtml(file.filename)}">${escapeHtml(t("files.delete", {}, "Delete file"))}</button>`
? `<button class="danger-button" data-delete-file="${file.id}" data-file-name="${escapeHtml(file.filename)}">${escapeHtml(t("files.delete", {}, "Delete file"))}</button>`
: "";
return {
primary: `${primaryInsert}<button class="action-button action-button--secondary compact-button file-more-button" type="button" data-toggle-file-actions aria-expanded="false">${escapeHtml(t("common.more", {}, "More"))}</button>`,
primary: `${primaryInsert}<button class="secondary-button file-more-button" type="button" data-toggle-file-actions aria-expanded="false">${escapeHtml(t("common.more", {}, "More"))}</button>`,
secondary: `${secondaryInsert}${codeButtons}${deleteButton}`,
};
}
@@ -218,7 +218,7 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, getUploadMaxS
<div class="file-secondary-actions__buttons">${actions.secondary}</div>
<div class="file-code" hidden>
<input class="file-code-value" type="text" readonly aria-label="${escapeHtml(generatedCodeLabel)}" spellcheck="false">
<button class="action-button action-button--secondary file-code-copy" data-copy-generated>${escapeHtml(t("share.copy", {}, "Copy"))}</button>
<button class="secondary-button file-code-copy" data-copy-generated>${escapeHtml(t("share.copy", {}, "Copy"))}</button>
</div>
</div>
</article>`;
@@ -263,7 +263,7 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, getUploadMaxS
if (search && !filesLoaded) search.disabled = true;
if (summary) summary.textContent = t("files.loadFailed", {}, "Could not load files");
if (filesLoaded) return;
list.innerHTML = `<div class="files-state files-state--error"><div class="files-state-mark" aria-hidden="true">!</div><strong>${escapeHtml(t("files.loadFailed", {}, "Could not load files"))}</strong><span>${escapeHtml(error?.message || "")}</span><button class="action-button action-button--secondary compact-button" type="button" data-files-retry>${escapeHtml(t("files.retry", {}, "Try again"))}</button></div>`;
list.innerHTML = `<div class="files-state files-state--error"><div class="files-state-mark" aria-hidden="true">!</div><strong>${escapeHtml(t("files.loadFailed", {}, "Could not load files"))}</strong><span>${escapeHtml(error?.message || "")}</span><button class="secondary-button" type="button" data-files-retry>${escapeHtml(t("files.retry", {}, "Try again"))}</button></div>`;
}
async function loadFiles({ open = false } = {}) {