gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

button tweaks

Browse Source
This commit is contained in:
zadam 2021-05-28 22:47:59 +02:00
parent 7fcf90437a
commit a3d44fbdef
8 changed files with 110 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/public/app/layouts/desktop_layout.js
View File

@ -35,6 +35,7 @@ import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js"; import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js"; import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js"; import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js";
import ShowNoteSourceButton from "../widgets/buttons/show_note_source.js";
export default class DesktopLayout { export default class DesktopLayout {
constructor(customWidgets) { constructor(customWidgets) {
@ -69,7 +70,7 @@ export default class DesktopLayout {
.child(new ProtectedSessionStatusWidget()) .child(new ProtectedSessionStatusWidget())
.child(new SyncStatusWidget()) .child(new SyncStatusWidget())
.child(new SidebarToggleWidget()) .child(new SidebarToggleWidget())
.css("width", "50px") .css("width", "54px")
) )
.child(new SidePaneContainer('left') .child(new SidePaneContainer('left')
.hideInZenMode() .hideInZenMode()
@ -114,11 +115,9 @@ export default class DesktopLayout {
.button(new ButtonWidget() .button(new ButtonWidget()
.icon('bx bx-history') .icon('bx bx-history')
.title("Note Revisions") .title("Note Revisions")
.command("showNoteRevisions")) .command("showNoteRevisions")
.button(new ButtonWidget() // FIXME should be displayed only when applicable .titlePlacement("bottom"))
.icon('bx bx-code') .button(new ShowNoteSourceButton())
.title("Show Note Source")
.command("showNoteSource"))
.button(new NoteActionsWidget()) .button(new NoteActionsWidget())
) )
.child(new NoteUpdateStatusWidget()) .child(new NoteUpdateStatusWidget())

17
src/public/app/widgets/buttons/button_widget.js
View File

@ -1,12 +1,8 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = ` const TPL = `<span class="button-widget icon-action bx"
<span class="button-widget"
data-toggle="tooltip" data-toggle="tooltip"
title=""> title=""></span>`;
<span class="bx"></span>
</span>
`;
export default class ButtonWidget extends NoteContextAwareWidget { export default class ButtonWidget extends NoteContextAwareWidget {
isEnabled() { isEnabled() {
@ -44,11 +40,14 @@ export default class ButtonWidget extends NoteContextAwareWidget {
} }
refreshIcon() { refreshIcon() {
for (const className of this.$widget[0].classList) {
if (className.startsWith("bx-")) {
this.$widget.removeClass(className);
}
}
this.$widget this.$widget
.attr("title", this.settings.title) .attr("title", this.settings.title)
this.$widget.find("span.bx")
.removeClass()
.addClass("bx")
.addClass(this.settings.icon); .addClass(this.settings.icon);
} }

134
src/public/app/widgets/buttons/global_menu.js
View File

@ -2,99 +2,79 @@ import BasicWidget from "../basic_widget.js";
import utils from "../../services/utils.js"; import utils from "../../services/utils.js";
const TPL = ` const TPL = `
<div class="global-menu-wrapper"> <div class="dropdown global-menu dropright">
<style> <style>
.global-menu-wrapper {
box-sizing: border-box;
}
.global-menu {
box-sizing: border-box;
}
.global-menu button {
padding: 15px 15px;
font-size: 150%;
border: none;
border-radius: 0 !important;
}
.global-menu button:hover {
background-color: var(--hover-item-background-color);
}
.global-menu .dropdown-menu { .global-menu .dropdown-menu {
width: 20em; width: 20em;
} }
</style> </style>
<div class="dropdown global-menu dropright"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="icon-action bx bx-menu" title="Menu"></button>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm bx bx-menu" title="Menu"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item options-button" data-trigger-command="showOptions">
<span class="bx bx-slider"></span>
Options
</a>
<a class="dropdown-item" data-trigger-command="openNewWindow"> <div class="dropdown-menu dropdown-menu-right">
<span class="bx bx-window-open"></span> <a class="dropdown-item options-button" data-trigger-command="showOptions">
Open new window <span class="bx bx-slider"></span>
<kbd data-command="openNewWindow"></kbd> Options
</a> </a>
<a class="dropdown-item open-dev-tools-button" data-trigger-command="openDevTools"> <a class="dropdown-item" data-trigger-command="openNewWindow">
<span class="bx bx-terminal"></span> <span class="bx bx-window-open"></span>
Open Dev Tools Open new window
<kbd data-command="openDevTools"></kbd> <kbd data-command="openNewWindow"></kbd>
</a> </a>
<a class="dropdown-item" data-trigger-command="showSQLConsole"> <a class="dropdown-item open-dev-tools-button" data-trigger-command="openDevTools">
<span class="bx bx-data"></span> <span class="bx bx-terminal"></span>
Open SQL Console Open Dev Tools
<kbd data-command="showSQLConsole"></kbd> <kbd data-command="openDevTools"></kbd>
</a> </a>
<a class="dropdown-item" data-trigger-command="showBackendLog"> <a class="dropdown-item" data-trigger-command="showSQLConsole">
<span class="bx bx-empty"></span> <span class="bx bx-data"></span>
Show backend log Open SQL Console
<kbd data-command="showBackendLog"></kbd> <kbd data-command="showSQLConsole"></kbd>
</a> </a>
<a class="dropdown-item" data-trigger-command="reloadFrontendApp" <a class="dropdown-item" data-trigger-command="showBackendLog">
title="Reload can help with some visual glitches without restarting the whole app."> <span class="bx bx-empty"></span>
<span class="bx bx-empty"></span> Show backend log
Reload frontend <kbd data-command="showBackendLog"></kbd>
<kbd data-command="reloadFrontendApp"></kbd> </a>
</a>
<a class="dropdown-item" data-trigger-command="toggleZenMode"> <a class="dropdown-item" data-trigger-command="reloadFrontendApp"
<span class="bx bx-empty"></span> title="Reload can help with some visual glitches without restarting the whole app.">
Toggle Zen mode <span class="bx bx-empty"></span>
<kbd data-command="toggleZenMode"></kbd> Reload frontend
</a> <kbd data-command="reloadFrontendApp"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="toggleFullscreen"> <a class="dropdown-item" data-trigger-command="toggleZenMode">
<span class="bx bx-empty"></span> <span class="bx bx-empty"></span>
Toggle fullscreen Toggle Zen mode
<kbd data-command="toggleFullscreen"></kbd> <kbd data-command="toggleZenMode"></kbd>
</a> </a>
<a class="dropdown-item" data-trigger-command="showHelp"> <a class="dropdown-item" data-trigger-command="toggleFullscreen">
<span class="bx bx-info-circle"></span> <span class="bx bx-empty"></span>
Show Help Toggle fullscreen
<kbd data-command="showHelp"></kbd> <kbd data-command="toggleFullscreen"></kbd>
</a> </a>
<a class="dropdown-item show-about-dialog-button"> <a class="dropdown-item" data-trigger-command="showHelp">
<span class="bx bx-empty"></span> <span class="bx bx-info-circle"></span>
About Trilium Notes Show Help
</a> <kbd data-command="showHelp"></kbd>
</a>
<a class="dropdown-item logout-button" data-trigger-command="logout"> <a class="dropdown-item show-about-dialog-button">
<span class="bx bx-log-out"></span> <span class="bx bx-empty"></span>
Logout About Trilium Notes
</a> </a>
</div>
<a class="dropdown-item logout-button" data-trigger-command="logout">
<span class="bx bx-log-out"></span>
Logout
</a>
</div> </div>
</div> </div>
`; `;

13
src/public/app/widgets/buttons/note_actions.js
View File

@ -3,15 +3,7 @@ import utils from "../../services/utils.js";
const TPL = ` const TPL = `
<div class="dropdown note-actions"> <div class="dropdown note-actions">
<style> <style>
.note-actions-button {
font-size: 120% !important;
}
.note-actions-button::after {
display: none !important; // disabling the standard caret
}
.note-actions .dropdown-menu { .note-actions .dropdown-menu {
width: 15em; width: 15em;
} }
@ -24,12 +16,11 @@ const TPL = `
</style> </style>
<button type="button" data-toggle="dropdown" aria-haspopup="true" <button type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="note-actions-button btn btn-sm dropdown-toggle bx bx-dots-vertical-rounded"></button> aria-expanded="false" class="icon-action bx bx-dots-vertical-rounded"></button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a> <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
<a data-trigger-command="findInText" class="dropdown-item">Search in note <kbd data-command="findInText"></a> <a data-trigger-command="findInText" class="dropdown-item">Search in note <kbd data-command="findInText"></a>
<a data-trigger-command="showLinkMap" class="dropdown-item show-link-map-button"><kbd data-command="showLinkMap"></kbd> Link map</a>
<a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"><kbd data-command="openNoteExternally"></kbd> Open note externally</a> <a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"><kbd data-command="openNoteExternally"></kbd> Open note externally</a>
<a class="dropdown-item import-files-button">Import files</a> <a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button">Export note</a> <a class="dropdown-item export-note-button">Export note</a>

16
src/public/app/widgets/buttons/show_note_source.js Normal file
View File

@ -0,0 +1,16 @@
import ButtonWidget from "./button_widget.js";
export default class ShowNoteSourceButton extends ButtonWidget {
isEnabled() {
return super.isEnabled() && this.note && ['text', 'relation-map'].includes(this.note.type);
}
constructor() {
super();
this.icon('bx bx-code')
.title("Show Note Source")
.command("showNoteSource")
.titlePlacement("bottom");
}
}

7
src/public/app/widgets/containers/collapsible_section_container.js
View File

@ -57,15 +57,14 @@ const TPL = `
.section-button-container { .section-button-container {
display: flex; display: flex;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
margin-right: 10px; margin-right: 5px;
} }
.section-button-container .bx { .section-button-container .icon-action {
padding: 5px; padding: 5px;
font-size: 150%;
position: relative; position: relative;
top: -3px; top: -3px;
margin-right: 5px; margin-left: 10px;
} }
.section-body { .section-body {

2
src/public/app/widgets/type_property_widgets/note_info_widget.js
View File

@ -46,7 +46,7 @@ const TPL = `
<th title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">Note size:</th> <th title="Note size provides rough estimate of storage requirements for this note. It takes into account note's content and content of its note revisions.">Note size:</th>
<td> <td colspan="3">
<button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;"> <button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
<span class="bx bx-calculator"></span> calculate <span class="bx bx-calculator"></span> calculate
</button> </button>

43
src/public/stylesheets/style.css
View File

@ -24,14 +24,6 @@ code, kbd, pre, samp {
font-family: var(--font-family-monospace); font-family: var(--font-family-monospace);
} }
button.btn, button.btn-sm {
font-size: inherit;
}
.btn-micro {
padding: 0 10px 0 10px;
}
.input-group-text { .input-group-text {
background-color: var(--accented-background-color) !important; background-color: var(--accented-background-color) !important;
color: var(--muted-text-color) !important; color: var(--muted-text-color) !important;
@ -81,11 +73,6 @@ button.close:hover {
overflow-x: hidden; overflow-x: hidden;
} }
.icon-action:hover:not(.disabled) {
text-decoration: none;
border-color: var(--button-border-color);
}
.icon-action { .icon-action {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
@ -93,6 +80,12 @@ button.close:hover {
cursor: pointer; cursor: pointer;
font-size: 1.5em; font-size: 1.5em;
color: var(--main-text-color); color: var(--main-text-color);
background: var(--button-background-color);
}
.icon-action:hover:not(.disabled) {
text-decoration: none;
border-color: var(--button-border-color);
} }
.icon-action.disabled { .icon-action.disabled {
@ -237,6 +230,15 @@ div.ui-tooltip {
.btn { .btn {
border-radius: var(--button-border-radius); border-radius: var(--button-border-radius);
border-color: var(--button-border-color);
}
button.btn, button.btn-sm {
font-size: inherit;
}
.btn-micro {
padding: 0 10px 0 10px;
} }
.btn.btn-primary { .btn.btn-primary {
@ -260,10 +262,6 @@ div.ui-tooltip {
color: var(--button-text-color); color: var(--button-text-color);
} }
.btn:not(.btn-primary):hover {
border-color: var(--button-border-color);
}
.btn.active:not(.btn-primary) { .btn.active:not(.btn-primary) {
background-color: var(--button-disabled-background-color) !important; background-color: var(--button-disabled-background-color) !important;
opacity: 0.4; opacity: 0.4;
@ -885,20 +883,15 @@ ul.fancytree-container li {
margin: 10px; margin: 10px;
} }
.button-widget .bx { #launcher-pane .icon-action {
font-size: 120%;
}
#launcher-pane .button-widget .bx {
font-size: 150%; font-size: 150%;
display: inline-block; display: inline-block;
position: relative;
padding: 15px 15px; padding: 15px 15px;
cursor: pointer; cursor: pointer;
border: none;
} }
.button-widget:hover .bx { #launcher-pane .icon-action:hover {
background-color: var(--hover-item-background-color); background-color: var(--hover-item-background-color);
} }