gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

added sidebar toggle button

Browse Source
This commit is contained in:
zadam 2021-05-22 21:35:25 +02:00
parent 5b220adc31
commit 1302765478
10 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
db/TODO.txt
View File

@ -2,3 +2,6 @@
- drop options.utcDateCreated - not used for anything
- isDeleted = 0 by default
- rename openTabs to openNoteContexts
- rename leftPaneVisible to leftSidebarVisible
- pane is now used for side by side notes
- "left" should be preserved since custom widgets may create right sidebar

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

@ -41,6 +41,7 @@ import QuickSearchWidget from "../widgets/quick_search.js";
import ButtonWidget from "../widgets/button_widget.js";
import ProtectedSessionStatusWidget from "../widgets/protected_session_status.js";
import PaneContainer from "../widgets/containers/pane_container.js";
import SidebarToggleWidget from "../widgets/sidebar_toggle.js";
const RIGHT_PANE_CSS = `
<style>
@ -165,6 +166,7 @@ export default class DesktopLayout {
.child(new SpacerWidget())
.child(new ProtectedSessionStatusWidget())
.child(new SyncStatusWidget())
.child(new SidebarToggleWidget())
.css("width", "50px")
)
.child(new SidePaneContainer('left')

2
src/public/app/services/load_results.js
View File

@ -100,7 +100,7 @@ export default class LoadResults {
}
isOptionReloaded(name) {
this.options.includes(name);
return this.options.includes(name);
}
/**

36
src/public/app/services/split.js
View File

@ -2,13 +2,15 @@ import options from "./options.js";
let instance;
function setupSplit(left, right) {
function setupSplit(leftPaneVisible) {
if (instance) {
instance.destroy();
instance = null;
}
if (!left && !right) {
$("#left-pane").toggle(leftPaneVisible);
if (!leftPaneVisible) {
$("#center-pane").css('width', '100%');
return;
@ -19,37 +21,11 @@ function setupSplit(left, right) {
leftPaneWidth = 5;
}
let rightPaneWidth = options.getInt('rightPaneWidth');
if (!rightPaneWidth || rightPaneWidth < 5) {
rightPaneWidth = 5;
}
if (left && right) {
instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
options.save('leftPaneWidth', Math.round(sizes[0]));
options.save('rightPaneWidth', Math.round(sizes[2]));
}
});
}
else if (left) {
if (leftPaneVisible) {
instance = Split(['#left-pane', '#center-pane'], {
sizes: [leftPaneWidth, 100 - leftPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
options.save('leftPaneWidth', Math.round(sizes[0]));
}
});
}
else if (right) {
instance = Split(['#center-pane', '#right-pane'], {
sizes: [100 - rightPaneWidth, rightPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
options.save('rightPaneWidth', Math.round(sizes[1]));
}
onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))
});
}
}

19
src/public/app/widgets/button_widget.js
View File

@ -11,39 +11,42 @@ export default class ButtonWidget extends BasicWidget {
constructor() {
super();
this.options = {};
this.settings = {};
}
doRender() {
this.$widget = $(TPL);
this.refreshIcon();
this.overflowing();
this.$widget.on("click", () => this.triggerCommand(this.options.command));
this.$widget.on("click", () => this.triggerCommand(this.settings.command));
super.doRender();
}
refreshIcon() {
this.$widget.attr("title", this.options.title);
this.$widget.attr("title", this.settings.title);
this.$widget.find("span.bx")
.removeClass()
.addClass("bx")
.addClass(this.options.icon);
.addClass(this.settings.icon);
}
initialRenderCompleteEvent() {
this.refreshIcon();
}
icon(icon) {
this.options.icon = icon;
this.settings.icon = icon;
return this;
}
title(title) {
this.options.title = title;
this.settings.title = title;
return this;
}
command(command) {
this.options.command = command;
this.settings.command = command;
return this;
}
}

16
src/public/app/widgets/containers/side_pane_container.js
View File

@ -2,24 +2,20 @@ import options from "../../services/options.js";
import FlexContainer from "./flex_container.js";
export default class SidePaneContainer extends FlexContainer {
constructor(side) {
constructor() {
super('column');
this.side = side;
this.id(side + '-pane');
this.id('left-pane');
this.css('height', '100%');
}
isEnabled() {
return super.isEnabled() && options.is(this.side + 'PaneVisible');
return super.isEnabled() && options.is( 'leftPaneVisible');
}
sidebarVisibilityChangedEvent({side, show}) {
this.toggleInt(this.isEnabled());
if (this.side === side && show) {
this.handleEvent('lazyLoaded');
entitiesReloadedEvent({loadResults}) {
if (loadResults.isOptionReloaded("leftPaneVisible")) {
this.toggleInt(this.isEnabled());
}
}
}

8
src/public/app/widgets/note_context_aware_widget.js
View File

@ -100,12 +100,4 @@ export default class NoteContextAwareWidget extends BasicWidget {
async frocaReloadedEvent() {
await this.refresh();
}
async lazyLoadedEvent() {
if (!this.noteContext) { // has not been loaded yet
this.noteContext = appContext.tabManager.getActiveContext();
}
await this.refresh();
}
}

16
src/public/app/widgets/protected_session_status.js
View File

@ -2,32 +2,28 @@ import ButtonWidget from "./button_widget.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
export default class ProtectedSessionStatusWidget extends ButtonWidget {
constructor() {
super();
}
doRender() {
this.updateOptions();
this.updateSettings();
super.doRender();
}
updateOptions() {
this.options.icon = protectedSessionHolder.isProtectedSessionAvailable()
updateSettings() {
this.settings.icon = protectedSessionHolder.isProtectedSessionAvailable()
? "bx-shield-quarter"
: "bx-log-in";
this.options.title = protectedSessionHolder.isProtectedSessionAvailable()
this.settings.title = protectedSessionHolder.isProtectedSessionAvailable()
? "Protected session is active. Click to leave protected session."
: "Click to enter protected session";
this.options.command = protectedSessionHolder.isProtectedSessionAvailable()
this.settings.command = protectedSessionHolder.isProtectedSessionAvailable()
? "leaveProtectedSession"
: "enterProtectedSession";
}
protectedSessionStartedEvent() {
this.updateOptions();
this.updateSettings();
this.refreshIcon();
}
}

9
src/public/app/widgets/side_pane_toggles.js
View File

@ -3,15 +3,8 @@ import splitService from "../services/split.js";
import BasicWidget from "./basic_widget.js";
const TPL = `
<div class="hide-in-zen-mode">
<div>
<style>
.hide-right-pane-button, .show-right-pane-button {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 100;
}
.hide-left-pane-button, .show-left-pane-button {
position: fixed;
bottom: 10px;

39
src/public/app/widgets/sidebar_toggle.js Normal file
View File

@ -0,0 +1,39 @@
import ButtonWidget from "./button_widget.js";
import options from "../services/options.js";
import splitService from "../services/split.js";
export default class SidebarToggleWidget extends ButtonWidget {
refreshIcon() {
const isLeftPaneVisible = options.is('leftPaneVisible');
this.settings.icon = isLeftPaneVisible
? "bx-chevrons-left"
: "bx-chevrons-right";
this.settings.title = isLeftPaneVisible
? "Hide sidebar."
: "Open sidebar.";
this.settings.command = isLeftPaneVisible
? "hideSidebar"
: "showSidebar";
super.refreshIcon();
splitService.setupSplit(isLeftPaneVisible);
}
hideSidebarCommand() {
options.save(`leftPaneVisible`, "false");
}
showSidebarCommand() {
options.save(`leftPaneVisible`, "true");
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.isOptionReloaded("leftPaneVisible")) {
this.refreshIcon();
}
}
}