client: use the icon action style for the help buttons of the attachment pages

This commit is contained in:
Adorian Doran 2025-02-06 17:29:41 +02:00
parent ef0431fc58
commit 8ca00c2138
3 changed files with 22 additions and 19 deletions

View File

@ -48,11 +48,12 @@ export default class AttachmentDetailTypeWidget extends TypeWidget {
this.$wrapper.empty();
this.children = [];
const $helpButton = $(
'<button class="attachment-help-button" type="button" data-help-page="attachments.html" title="' +
t("attachment_detail.open_help_page") +
'"><span class="bx bx-help-circle"></span></button>'
);
const $helpButton = $(`
<button class="attachment-help-button icon-action bx bx-help-circle"
type="button" data-help-page="attachments.html"
title="${t("attachment_detail.open_help_page")}"
</button>
`);
utils.initHelpButtons($helpButton);
this.$linksWrapper.empty().append(

View File

@ -40,11 +40,12 @@ export default class AttachmentListTypeWidget extends TypeWidget {
}
async doRefresh(note) {
const $helpButton = $(
'<button class="attachment-help-button" type="button" data-help-page="attachments.html" title="' +
t("attachment_list.open_help_page") +
'"><span class="bx bx-help-circle"></span></button>'
);
const $helpButton = $(`
<button class="attachment-help-button icon-action bx bx-help-circle"
type="button" data-help-page="attachments.html"
title="${t("attachment_list.open_help_page")}">
</button>
`);
utils.initHelpButtons($helpButton);
const noteLink = await linkService.createLink(this.noteId); // do separately to avoid race condition between empty() and .append()
@ -52,7 +53,7 @@ export default class AttachmentListTypeWidget extends TypeWidget {
this.$linksWrapper.empty().append(
$("<div>").append(t("attachment_list.owning_note"), noteLink),
$("<div>").append(
$(`<div class="attachment-actions-toolbar">`).append(
$('<button class="btn btn-sm">')
.text(t("attachment_list.upload_attachments"))
.on("click", () => this.triggerCommand("showUploadAttachmentsDialog", { noteId: this.noteId })),

View File

@ -1536,15 +1536,16 @@ textarea {
display: none !important;
}
.attachment-actions-toolbar {
display: flex;
align-items: center;
}
.attachment-help-button {
font-size: xx-large;
border: 0;
background: none;
cursor: pointer;
color: var(--main-text-color);
margin-left: 20px;
position: relative;
top: 8px;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
font-size: 1em;
}
.jump-to-note-dialog .modal-header {