use icons instead of text links for header actions

This commit is contained in:
zadam 2020-10-15 20:37:55 +02:00
parent ad878c078e
commit bf9bfe920a
5 changed files with 23 additions and 11 deletions

View File

@ -62,14 +62,19 @@ const RIGHT_PANE_CSS = `
}
#right-pane .widget-header-action {
color: var(--link-color) !important;
cursor: pointer;
color: var(--main-text-color) !important;
text-decoration: none;
font-size: large;
position: relative;
top: 2px;
}
#right-pane .widget-help {
color: var(--muted-text-color);
position: relative;
top: 2px;
font-size: large;
}
#right-pane .widget-help.no-link:hover {
@ -82,6 +87,7 @@ const RIGHT_PANE_CSS = `
color: var(--main-text-color) !important;
position: relative;
top: 2px;
font-size: large;
}
#right-pane .widget-toggle-button:hover {

View File

@ -77,13 +77,7 @@ export default class CollapsibleWidget extends TabAwareWidget {
}
this.$headerActions = this.$widget.find('.widget-header-actions');
let headerActions = this.headerActions;
if (headerActions.length > 0) {
headerActions = ["(", ...headerActions, ")"];
}
this.$headerActions.append(...headerActions);
this.$headerActions.append(this.headerActions);
this.initialized = this.doRenderBody();

View File

@ -24,7 +24,11 @@ export default class LinkMapWidget extends CollapsibleWidget {
}
get headerActions() {
const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
const $showFullButton = $("<a>")
.addClass("bx bx-map-alt")
.addClass('widget-header-action')
.attr('title', 'Show full link map');
$showFullButton.on('click', async () => {
const linkMapDialog = await import("../../dialogs/link_map.js");
linkMapDialog.showDialog();

View File

@ -21,7 +21,11 @@ class NoteRevisionsWidget extends CollapsibleWidget {
}
get headerActions() {
const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
const $showFullButton = $("<a>")
.addClass("bx bx-list-ul")
.addClass('widget-header-action')
.attr('title', 'Show Note revisions dialog');
$showFullButton.on('click', async () => {
const attributesDialog = await import("../../dialogs/note_revisions.js");
attributesDialog.showCurrentNoteRevisions(this.noteId);

View File

@ -15,7 +15,11 @@ export default class WhatLinksHereWidget extends CollapsibleWidget {
}
get headerActions() {
const $showFullButton = $("<a>").append("show link map").addClass('widget-header-action');
const $showFullButton = $("<a>")
.addClass("bx bx-map-alt")
.addClass('widget-header-action')
.attr('title', 'Show full link map');
$showFullButton.on('click', async () => {
const linkMapDialog = await import("../../dialogs/link_map.js");
linkMapDialog.showDialog();