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; 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; width: auto;
} }
@@ -2959,6 +2961,10 @@ dialog::backdrop {
gap: 7px; gap: 7px;
} }
.file-actions .primary-button {
width: auto;
}
.file-actions button, .file-actions button,
.file-secondary-actions__buttons button { .file-secondary-actions__buttons button {
white-space: nowrap; white-space: nowrap;
@@ -3074,7 +3080,9 @@ dialog::backdrop {
line-height: 1.5; line-height: 1.5;
} }
.files-state .action-button { .files-state .primary-button,
.files-state .secondary-button,
.files-state .danger-button {
margin-top: 14px; margin-top: 14px;
} }
@@ -3177,7 +3185,9 @@ dialog::backdrop {
gap: 6px; 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; padding-inline: 9px;
} }
@@ -3264,11 +3274,11 @@ dialog::backdrop {
line-height: 1.4; line-height: 1.4;
} }
.video-choice-actions>.action-button--primary span { .video-choice-actions>.primary-button span {
color: var(--on-accent); color: var(--on-accent);
} }
.video-choice-actions>.action-button--secondary span { .video-choice-actions>.secondary-button span {
color: var(--text-secondary); color: var(--text-secondary);
} }
+1 -1
View File
@@ -332,7 +332,7 @@
<p>Copy a direct link or ready Markdown/Alias code.</p> <p>Copy a direct link or ready Markdown/Alias code.</p>
</div> </div>
<div class="files-head-actions"> <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> type="button">Upload file</button>
<button id="close-files" class="icon-button" type="button" aria-label="Close files">×</button> <button id="close-files" class="icon-button" type="button" aria-label="Close files">×</button>
</div> </div>
+15 -15
View File
@@ -103,10 +103,10 @@ function createVideoInsertDialog() {
</div> </div>
<p class="dialog-copy" data-video-file-name></p> <p class="dialog-copy" data-video-file-name></p>
<div class="video-choice-actions"> <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> <strong>Embedded player</strong><span>Play the video directly in the note.</span>
</button> </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> <strong>Download link</strong><span>Insert a link that downloads the original file.</span>
</button> </button>
</div> </div>
@@ -156,23 +156,23 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, getUploadMaxS
function fileActionButtons(file) { function fileActionButtons(file) {
const attributes = `data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}"`; const attributes = `data-url="${escapeHtml(file.url)}" data-name="${escapeHtml(file.filename)}" data-mime="${escapeHtml(file.mime_type)}"`;
const primaryInsert = isVideo(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="primary-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="auto" ${attributes}>${escapeHtml(t("files.addToNote", {}, "Add to note"))}</button>`;
const secondaryInsert = isVideo(file.mime_type) 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) 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="secondary-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="secondary-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="secondary-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="secondary-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="secondary-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="markdown" aria-pressed="false" ${attributes}>${escapeHtml(t("files.markdown", {}, "Markdown"))}</button>`;
const deleteButton = canDelete() 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 { 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}`, 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-secondary-actions__buttons">${actions.secondary}</div>
<div class="file-code" hidden> <div class="file-code" hidden>
<input class="file-code-value" type="text" readonly aria-label="${escapeHtml(generatedCodeLabel)}" spellcheck="false"> <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>
</div> </div>
</article>`; </article>`;
@@ -263,7 +263,7 @@ export function bindNoteFiles({ editor, endpoints, getAccessToken, getUploadMaxS
if (search && !filesLoaded) search.disabled = true; if (search && !filesLoaded) search.disabled = true;
if (summary) summary.textContent = t("files.loadFailed", {}, "Could not load files"); if (summary) summary.textContent = t("files.loadFailed", {}, "Could not load files");
if (filesLoaded) return; 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 } = {}) { async function loadFiles({ open = false } = {}) {