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.$wrapper.empty();
this.children = []; this.children = [];
const $helpButton = $( const $helpButton = $(`
'<button class="attachment-help-button" type="button" data-help-page="attachments.html" title="' + <button class="attachment-help-button icon-action bx bx-help-circle"
t("attachment_detail.open_help_page") + type="button" data-help-page="attachments.html"
'"><span class="bx bx-help-circle"></span></button>' title="${t("attachment_detail.open_help_page")}"
); </button>
`);
utils.initHelpButtons($helpButton); utils.initHelpButtons($helpButton);
this.$linksWrapper.empty().append( this.$linksWrapper.empty().append(

View File

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

View File

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