zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-02-22 22:13:07 +08:00
Code Issues Projects Releases Packages 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 NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js";
import ShowNoteSourceButton from "../widgets/buttons/show_note_source.js";
export default class DesktopLayout {
constructor(customWidgets) {
@ -69,7 +70,7 @@ export default class DesktopLayout {
.child(new ProtectedSessionStatusWidget())
.child(new SyncStatusWidget())
.child(new SidebarToggleWidget())
.css("width", "50px")
.css("width", "54px")
)
.child(new SidePaneContainer('left')
.hideInZenMode()
@ -114,11 +115,9 @@ export default class DesktopLayout {
.button(new ButtonWidget()
.icon('bx bx-history')
.title("Note Revisions")
.command("showNoteRevisions"))
.button(new ButtonWidget() // FIXME should be displayed only when applicable
.icon('bx bx-code')
.title("Show Note Source")
.command("showNoteSource"))
.command("showNoteRevisions")
.titlePlacement("bottom"))
.button(new ShowNoteSourceButton())
.button(new NoteActionsWidget())
)
.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";
const TPL = `
<span class="button-widget"
const TPL = `<span class="button-widget icon-action bx"
data-toggle="tooltip"
title="">
<span class="bx"></span>
</span>
`;
title=""></span>`;
export default class ButtonWidget extends NoteContextAwareWidget {
isEnabled() {
@ -44,11 +40,14 @@ export default class ButtonWidget extends NoteContextAwareWidget {
}
refreshIcon() {
for (const className of this.$widget[0].classList) {
if (className.startsWith("bx-")) {
this.$widget.removeClass(className);
}
}
this.$widget
.attr("title", this.settings.title)
this.$widget.find("span.bx")
.removeClass()
.addClass("bx")
.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";
const TPL = `
<div class="global-menu-wrapper">
<div class="dropdown global-menu dropright">
<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 {
width: 20em;
}
</style>
<div class="dropdown global-menu dropright">
<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>
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="icon-action bx bx-menu" title="Menu"></button>
<a class="dropdown-item" data-trigger-command="openNewWindow">
<span class="bx bx-window-open"></span>
Open new window
<kbd data-command="openNewWindow"></kbd>
</a>
<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 open-dev-tools-button" data-trigger-command="openDevTools">
<span class="bx bx-terminal"></span>
Open Dev Tools
<kbd data-command="openDevTools"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="openNewWindow">
<span class="bx bx-window-open"></span>
Open new window
<kbd data-command="openNewWindow"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="showSQLConsole">
<span class="bx bx-data"></span>
Open SQL Console
<kbd data-command="showSQLConsole"></kbd>
</a>
<a class="dropdown-item open-dev-tools-button" data-trigger-command="openDevTools">
<span class="bx bx-terminal"></span>
Open Dev Tools
<kbd data-command="openDevTools"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="showBackendLog">
<span class="bx bx-empty"></span>
Show backend log
<kbd data-command="showBackendLog"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="showSQLConsole">
<span class="bx bx-data"></span>
Open SQL Console
<kbd data-command="showSQLConsole"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="reloadFrontendApp"
title="Reload can help with some visual glitches without restarting the whole app.">
<span class="bx bx-empty"></span>
Reload frontend
<kbd data-command="reloadFrontendApp"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="showBackendLog">
<span class="bx bx-empty"></span>
Show backend log
<kbd data-command="showBackendLog"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="toggleZenMode">
<span class="bx bx-empty"></span>
Toggle Zen mode
<kbd data-command="toggleZenMode"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="reloadFrontendApp"
title="Reload can help with some visual glitches without restarting the whole app.">
<span class="bx bx-empty"></span>
Reload frontend
<kbd data-command="reloadFrontendApp"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="toggleFullscreen">
<span class="bx bx-empty"></span>
Toggle fullscreen
<kbd data-command="toggleFullscreen"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="toggleZenMode">
<span class="bx bx-empty"></span>
Toggle Zen mode
<kbd data-command="toggleZenMode"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="showHelp">
<span class="bx bx-info-circle"></span>
Show Help
<kbd data-command="showHelp"></kbd>
</a>
<a class="dropdown-item" data-trigger-command="toggleFullscreen">
<span class="bx bx-empty"></span>
Toggle fullscreen
<kbd data-command="toggleFullscreen"></kbd>
</a>
<a class="dropdown-item show-about-dialog-button">
<span class="bx bx-empty"></span>
About Trilium Notes
</a>
<a class="dropdown-item" data-trigger-command="showHelp">
<span class="bx bx-info-circle"></span>
Show Help
<kbd data-command="showHelp"></kbd>
</a>
<a class="dropdown-item logout-button" data-trigger-command="logout">
<span class="bx bx-log-out"></span>
Logout
</a>
</div>
<a class="dropdown-item show-about-dialog-button">
<span class="bx bx-empty"></span>
About Trilium Notes
</a>
<a class="dropdown-item logout-button" data-trigger-command="logout">
<span class="bx bx-log-out"></span>
Logout
</a>
</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 = `
<div class="dropdown note-actions">
<style>
.note-actions-button {
font-size: 120% !important;
}
.note-actions-button::after {
display: none !important; // disabling the standard caret
}
<style>
.note-actions .dropdown-menu {
width: 15em;
}
@ -24,12 +16,11 @@ const TPL = `
</style>
<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">
<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="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 class="dropdown-item import-files-button">Import files</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 {
display: flex;
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;
font-size: 150%;
position: relative;
top: -3px;
margin-right: 5px;
margin-left: 10px;
}
.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>
<td>
<td colspan="3">
<button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
<span class="bx bx-calculator"></span> calculate
</button>

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

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