From 0cc013c13f277e0b7cbf88d40be8f4ef2bb07af3 Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 4 Feb 2020 20:42:40 +0100 Subject: [PATCH] left sidebar can now be also collapsible --- package-lock.json | 6 +- package.json | 4 +- src/public/javascripts/desktop.js | 55 ++++++++-------- .../javascripts/services/app_context.js | 2 +- src/public/javascripts/services/split.js | 62 +++++++++++-------- src/public/stylesheets/desktop.css | 7 +++ src/routes/api/options.js | 1 + src/services/options_init.js | 1 + src/views/desktop.ejs | 11 ++-- 9 files changed, 82 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc987d550..b09696ac6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f1aae7956..c7fbb170b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/public/javascripts/desktop.js b/src/public/javascripts/desktop.js index c925b55bb..a04996012 100644 --- a/src/public/javascripts/desktop.js +++ b/src/public/javascripts/desktop.js @@ -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(); -}); \ No newline at end of file + 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)); diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index 04ba44556..533fd9da4 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -196,8 +196,8 @@ class AppContext { this.components = [ new Entrypoints(), - this.tabRow, new DialogEventComponent(this), + ...topPaneWidgets, ...leftPaneWidgets, ...centerPaneWidgets, ...rightPaneWidgets diff --git a/src/public/javascripts/services/split.js b/src/public/javascripts/services/split.js index 9ee15a9c1..5e51809f1 100644 --- a/src/public/javascripts/services/split.js +++ b/src/public/javascripts/services/split.js @@ -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 }; \ No newline at end of file diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index a3102b7aa..b312cd648 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -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; diff --git a/src/routes/api/options.js b/src/routes/api/options.js index 17e396906..f39ff8486 100644 --- a/src/routes/api/options.js +++ b/src/routes/api/options.js @@ -34,6 +34,7 @@ const ALLOWED_OPTIONS = new Set([ 'imageJpegQuality', 'leftPaneWidth', 'rightPaneWidth', + 'leftPaneVisible', 'rightPaneVisible', 'nativeTitleBarVisible' ]); diff --git a/src/services/options_init.js b/src/services/options_init.js index 6cd237c69..1894410e2 100644 --- a/src/services/options_init.js +++ b/src/services/options_init.js @@ -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 }, diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 73208d541..27f4c117c 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -13,17 +13,18 @@