fixed buttons
This commit is contained in:
+15
-5
@@ -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
@@ -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
@@ -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 } = {}) {
|
||||||
|
|||||||
Reference in New Issue
Block a user