zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 15:45:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

left sidebar can now be also collapsible

Browse source
This commit is contained in:
zadam 2020-02-04 20:42:40 +01:00
parent c5475765e5
commit 0cc013c13f
9 changed files with 82 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -2661,9 +2661,9 @@
"integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA=="
},
"electron": {
"version": "8.0.0-beta.9",
"resolved": "https://registry.npmjs.org/electron/-/electron-8.0.0-beta.9.tgz",
"integrity": "sha512-5aVB7ixySU5WF4p4NiGN/378idgOLSggEh80FfvKzbE5kKmegWA4m0mppkypwMWAVFzNcVubkI6vE0rerFQZKw==",
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/electron/-/electron-8.0.0.tgz",
"integrity": "sha512-vBXUKRqTUq0jv1upvISdvScDDH3uCPwXj4eA5BeR3UDbJp2hOhq7eJxwjIQbfLQql98aYz4X6pSlzBnhfyQqHA==",
"dev": true,
"requires": {
"@electron/get": "^1.0.1",

4
package.json
View file

@ -27,7 +27,7 @@
"commonmark": "0.29.1",
"cookie-parser": "1.4.4",
"csurf": "1.11.0",
"dayjs": "1.8.19",
"dayjs": "1.8.20",
"debug": "4.1.1",
"ejs": "2.7.4",
"electron-debug": "3.0.1",
@ -76,7 +76,7 @@
"ws": "7.2.1"
},
"devDependencies": {
"electron": "8.0.0-beta.9",
"electron": "8.0.0",
"electron-builder": "22.3.2",
"electron-packager": "14.2.0",
"electron-rebuild": "1.10.0",

55
src/public/javascripts/desktop.js
View file

@ -145,38 +145,33 @@ if (utils.isElectron()) {
import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck());
}
const rightPane = $("#right-pane");
optionService.waitForOptions().then(options => {
toggleSidebar('left', options.is('leftPaneVisible'));
toggleSidebar('right', options.is('rightPaneVisible'));
const $showRightPaneButton = $("#show-right-pane-button");
const $hideRightPaneButton = $("#hide-right-pane-button");
optionService.waitForOptions().then(options => toggleSidebar(options.is('rightPaneVisible')));
function toggleSidebar(show) {
rightPane.toggle(show);
$showRightPaneButton.toggle(!show);
$hideRightPaneButton.toggle(show);
if (show) {
splitService.setupSplitWithSidebar();
}
else {
splitService.setupSplitWithoutSidebar();
}
}
$hideRightPaneButton.on('click', () => {
toggleSidebar(false);
server.put('options/rightPaneVisible/false');
splitService.setupSplit(paneVisible.left, paneVisible.right);
});
$showRightPaneButton.on('click', async () => {
toggleSidebar(true);
const paneVisible = {};
await server.put('options/rightPaneVisible/true');
function toggleSidebar(side, show) {
$(`#${side}-pane`).toggle(show);
$(`#show-${side}-pane-button`).toggle(!show);
$(`#hide-${side}-pane-button`).toggle(show);
const {sidebar} = appContext.getActiveTabContext();
await sidebar.noteLoaded();
sidebar.show();
});
paneVisible[side] = show;
}
function toggleAndSave(side, show) {
toggleSidebar(side, show);
splitService.setupSplit(paneVisible.left, paneVisible.right);
server.put(`options/${side}PaneVisible/` + show.toString());
}
$("#show-right-pane-button").on('click', () => toggleAndSave('right', true));
$("#hide-right-pane-button").on('click', () => toggleAndSave('right', false));
$("#show-left-pane-button").on('click', () => toggleAndSave('left', true));
$("#hide-left-pane-button").on('click', () => toggleAndSave('left', false));

2
src/public/javascripts/services/app_context.js
View file

@ -196,8 +196,8 @@ class AppContext {
this.components = [
new Entrypoints(),
this.tabRow,
new DialogEventComponent(this),
...topPaneWidgets,
...leftPaneWidgets,
...centerPaneWidgets,
...rightPaneWidgets

62
src/public/javascripts/services/split.js
View file

@ -12,40 +12,50 @@ async function getPaneWidths() {
};
}
async function setupSplitWithSidebar() {
async function setupSplit(left, right) {
if (instance) {
instance.destroy();
instance = null;
}
if (!left && !right) {
$("#center-pane").css('width', '100%');
return;
}
const {leftPaneWidth, rightPaneWidth} = await getPaneWidths();
instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
server.put('options/rightPaneWidth/' + Math.round(sizes[2]));
}
});
}
async function setupSplitWithoutSidebar() {
if (instance) {
instance.destroy();
if (left && right) {
instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
server.put('options/rightPaneWidth/' + Math.round(sizes[2]));
}
});
}
else if (left) {
instance = Split(['#left-pane', '#center-pane'], {
sizes: [leftPaneWidth, 100 - leftPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
}
});
}
else if (right) {
instance = Split(['#center-pane', '#right-pane'], {
sizes: [100 - rightPaneWidth, rightPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
server.put('options/rightPaneWidth/' + Math.round(sizes[1]));
}
});
}
const {leftPaneWidth} = await getPaneWidths();
instance = Split(['#left-pane', '#center-pane'], {
sizes: [leftPaneWidth, 100 - leftPaneWidth],
gutterSize: 5,
onDragEnd: sizes => {
server.put('options/leftPaneWidth/' + Math.round(sizes[0]));
}
});
}
export default {
setupSplitWithSidebar,
setupSplitWithoutSidebar
setupSplit
};

7
src/public/stylesheets/desktop.css
View file

@ -153,6 +153,13 @@ body {
z-index: 1000;
}
#hide-left-pane-button, #show-left-pane-button {
position: fixed;
bottom: 10px;
left: 10px;
z-index: 1000;
}
#right-pane {
overflow: auto;
padding-top: 4px;

1
src/routes/api/options.js
View file

@ -34,6 +34,7 @@ const ALLOWED_OPTIONS = new Set([
'imageJpegQuality',
'leftPaneWidth',
'rightPaneWidth',
'leftPaneVisible',
'rightPaneVisible',
'nativeTitleBarVisible'
]);

1
src/services/options_init.js
View file

@ -78,6 +78,7 @@ const defaultOptions = [
{ name: 'autoFixConsistencyIssues', value: 'true', isSynced: false },
{ name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-swift","text/xml","text/x-yaml"]', isSynced: true },
{ name: 'leftPaneWidth', value: '25', isSynced: false },
{ name: 'leftPaneVisible', value: 'true', isSynced: false },
{ name: 'rightPaneWidth', value: '25', isSynced: false },
{ name: 'rightPaneVisible', value: 'true', isSynced: false },
{ name: 'nativeTitleBarVisible', value: 'false', isSynced: false },

11
src/views/desktop.ejs
View file

@ -13,17 +13,18 @@
<div id="container" style="display: none;">
<div id="top-pane"></div>
<div style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
<div id="left-pane" class="hide-in-zen-mode"></div>
<div id="main-pane" style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
<button id="hide-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
<button id="show-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
<div id="left-pane"></div>
<div id="center-pane"></div>
<button id="hide-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
<button id="show-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
<div id="right-pane" class="hide-in-zen-mode">
<div id="sidebar-container"></div>
</div>
<div id="right-pane"></div>
</div>
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>