From 9888850c22af9980950b8de43f27bd923fea1c8a Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 19 Aug 2019 23:02:19 +0200 Subject: [PATCH] resizing sidebar in options --- db/migrations/0138__sidebar_sizing.sql | 5 +++ package.json | 1 - src/public/javascripts/dialogs/options.js | 39 +++++++++++++++++++++++ src/public/stylesheets/style.css | 2 +- src/routes/api/options.js | 2 ++ src/routes/index.js | 2 ++ src/services/app_info.js | 2 +- src/views/dialogs/options/appearance.ejs | 16 ++++++++-- src/views/dialogs/options/sidebar.ejs | 30 ++++++++++++++++- src/views/sidebar.ejs | 2 +- 10 files changed, 94 insertions(+), 7 deletions(-) create mode 100644 db/migrations/0138__sidebar_sizing.sql diff --git a/db/migrations/0138__sidebar_sizing.sql b/db/migrations/0138__sidebar_sizing.sql new file mode 100644 index 000000000..2ecb582d4 --- /dev/null +++ b/db/migrations/0138__sidebar_sizing.sql @@ -0,0 +1,5 @@ +INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced) +VALUES ('sidebarMinWidth', '350', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0); + +INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced) +VALUES ('sidebarWidthPercent', '25', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0); \ No newline at end of file diff --git a/package.json b/package.json index 3763b20e3..5bb2513da 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,6 @@ "xml2js": "0.4.19" }, "devDependencies": { - "devtron": "1.4.0", "electron": "6.0.2", "electron-builder": "21.2.0", "electron-compile": "6.4.4", diff --git a/src/public/javascripts/dialogs/options.js b/src/public/javascripts/dialogs/options.js index 17c47bca0..d50c0746e 100644 --- a/src/public/javascripts/dialogs/options.js +++ b/src/public/javascripts/dialogs/options.js @@ -349,4 +349,43 @@ addTabHandler((async function () { }); return {}; +})()); + +addTabHandler((function() { + const $sidebarMinWidth = $("#sidebar-min-width"); + const $sidebarWidthPercent = $("#sidebar-width-percent"); + + async function optionsLoaded(options) { + $sidebarMinWidth.val(options.sidebarMinWidth); + $sidebarWidthPercent.val(options.sidebarWidthPercent); + } + + function resizeSidebar() { + const sidebarWidthPercent = parseInt($sidebarWidthPercent.val()); + const sidebarMinWidth = $sidebarMinWidth.val(); + + // need to find them dynamically since they change + const $sidebar = $(".note-detail-sidebar"); + + console.log("Resizing to ", sidebarWidthPercent, sidebarMinWidth); + + $sidebar.css("width", sidebarWidthPercent + '%'); + $sidebar.css("min-width", sidebarMinWidth + 'px'); + } + + $sidebarMinWidth.change(async function() { + await server.put('options/sidebarMinWidth/' + $(this).val()); + + resizeSidebar(); + }); + + $sidebarWidthPercent.change(async function() { + await server.put('options/sidebarWidthPercent/' + $(this).val()); + + resizeSidebar(); + }); + + return { + optionsLoaded + }; })()); \ No newline at end of file diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 3a09634d5..2e4851f05 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -102,7 +102,7 @@ ul.fancytree-container { .note-detail-sidebar { min-width: 350px; - max-width: 350px; + width: 50%; overflow: auto; padding-top: 12px; padding-left: 7px; diff --git a/src/routes/api/options.js b/src/routes/api/options.js index 60783a509..32dc59cab 100644 --- a/src/routes/api/options.js +++ b/src/routes/api/options.js @@ -15,6 +15,8 @@ const ALLOWED_OPTIONS = [ 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent', + 'sidebarMinWidth', + 'sidebarWidthPercent', 'hoistedNoteId', 'mainFontSize', 'treeFontSize', diff --git a/src/routes/index.js b/src/routes/index.js index d41a3dc74..d92418914 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -21,6 +21,8 @@ async function index(req, res) { leftPaneMinWidth: parseInt(options.leftPaneMinWidth), leftPaneWidthPercent: parseInt(options.leftPaneWidthPercent), rightPaneWidthPercent: 100 - parseInt(options.leftPaneWidthPercent), + sidebarMinWidth: parseInt(options.sidebarMinWidth), + sidebarWidthPercent: parseInt(options.sidebarWidthPercent), mainFontSize: parseInt(options.mainFontSize), treeFontSize: parseInt(options.treeFontSize), detailFontSize: parseInt(options.detailFontSize), diff --git a/src/services/app_info.js b/src/services/app_info.js index 2fe2f4f19..7c6bd436c 100644 --- a/src/services/app_info.js +++ b/src/services/app_info.js @@ -4,7 +4,7 @@ const build = require('./build'); const packageJson = require('../../package'); const {TRILIUM_DATA_DIR} = require('./data_dir'); -const APP_DB_VERSION = 137; +const APP_DB_VERSION = 138; const SYNC_VERSION = 10; const CLIPPER_PROTOCOL_VERSION = "1.0"; diff --git a/src/views/dialogs/options/appearance.ejs b/src/views/dialogs/options/appearance.ejs index f5f6330e1..0be29c4bd 100644 --- a/src/views/dialogs/options/appearance.ejs +++ b/src/views/dialogs/options/appearance.ejs @@ -70,13 +70,25 @@
- +
+ + +
+ px +
+
- +
+ + +
+ % +
+
diff --git a/src/views/dialogs/options/sidebar.ejs b/src/views/dialogs/options/sidebar.ejs index 1bbbd8823..e2f727507 100644 --- a/src/views/dialogs/options/sidebar.ejs +++ b/src/views/dialogs/options/sidebar.ejs @@ -1,3 +1,31 @@
- Hi! +

Sidebar sizing

+ +
+
+ + +
+ + +
+ px +
+
+
+ +
+ + +
+ + +
+ % +
+
+
+
+ +

Sidebar width is calculated from the percent of the detail pane, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width sidebar, set minimum width to the desired width and set percent to 0.

\ No newline at end of file diff --git a/src/views/sidebar.ejs b/src/views/sidebar.ejs index 8e904d608..c487043c3 100644 --- a/src/views/sidebar.ejs +++ b/src/views/sidebar.ejs @@ -1,4 +1,4 @@ -
+