From c95e409b5eb9eba796e7a9cc7c056f8137183728 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Thu, 6 Sep 2018 11:54:04 +0200
Subject: [PATCH] left pane sizing taking effect

---
 src/public/javascripts/dialogs/options.js | 13 +++++++++++++
 src/public/stylesheets/style.css          |  1 -
 src/routes/api/options.js                 |  5 +----
 src/routes/index.js                       |  7 ++++++-
 src/services/options.js                   | 22 +++++++++++++++++++++-
 src/views/index.ejs                       |  2 +-
 6 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/public/javascripts/dialogs/options.js b/src/public/javascripts/dialogs/options.js
index a50b7f966..caa89c03b 100644
--- a/src/public/javascripts/dialogs/options.js
+++ b/src/public/javascripts/dialogs/options.js
@@ -51,6 +51,7 @@ addTabHandler((function() {
     const $leftPaneMinWidth = $("#left-pane-min-width");
     const $leftPaneWidthPercent = $("#left-pane-width-percent");
     const $html = $("html");
+    const $container = $("#container");
 
     function optionsLoaded(options) {
         $themeSelect.val(options.theme);
@@ -80,15 +81,27 @@ addTabHandler((function() {
         zoomService.setZoomFactorAndSave(newZoomFactor);
     });
 
+    function resizeLeftPanel() {
+        const leftPanePercent = parseInt($leftPaneWidthPercent.val());
+        const rightPanePercent = 100 - leftPanePercent;
+        const leftPaneMinWidth = $leftPaneMinWidth.val();
+
+        $container.css("grid-template-columns", `minmax(${leftPaneMinWidth}px, ${leftPanePercent}fr) ${rightPanePercent}fr`);
+    }
+
     $leftPaneMinWidth.change(function() {
         const newMinWidth = $(this).val();
 
+        resizeLeftPanel();
+
         server.put('options/leftPaneMinWidth/' + newMinWidth);
     });
 
     $leftPaneWidthPercent.change(function() {
         const newWidthPercent = $(this).val();
 
+        resizeLeftPanel();
+
         server.put('options/leftPaneWidthPercent/' + newWidthPercent);
     });
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 49c9393f3..f04c01ad6 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -6,7 +6,6 @@
     grid-template-areas: "header header"
                          "left-pane title"
                          "left-pane note-detail";
-    grid-template-columns: 29% 69.5%;
     grid-template-rows: auto
                         auto
                         1fr;
diff --git a/src/routes/api/options.js b/src/routes/api/options.js
index 70af33a74..b2cb0c690 100644
--- a/src/routes/api/options.js
+++ b/src/routes/api/options.js
@@ -9,10 +9,7 @@ const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInt
     'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent'];
 
 async function getOptions() {
-    const options = await sql.getMap("SELECT name, value FROM options WHERE name IN ("
-        + ALLOWED_OPTIONS.map(x => '?').join(",") + ")", ALLOWED_OPTIONS);
-
-    return options;
+    return await optionService.getOptionsMap(ALLOWED_OPTIONS);
 }
 
 async function updateOption(req) {
diff --git a/src/routes/index.js b/src/routes/index.js
index 6f5aee7e5..e3e36f845 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -7,8 +7,13 @@ const config = require('../services/config');
 const optionService = require('../services/options');
 
 async function index(req, res) {
+    const options = await optionService.getOptionsMap();
+
     res.render('index', {
-        theme: await optionService.getOption('theme'),
+        theme: options.theme,
+        leftPaneMinWidth: parseInt(options.leftPaneMinWidth),
+        leftPaneWidthPercent: parseInt(options.leftPaneWidthPercent),
+        rightPaneWidthPercent: 100 - parseInt(options.leftPaneWidthPercent),
         sourceId: await sourceIdService.generateSourceId(),
         maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
         instanceName: config.General ? config.General.instanceName : null,
diff --git a/src/services/options.js b/src/services/options.js
index f5d66ece8..7a33e112b 100644
--- a/src/services/options.js
+++ b/src/services/options.js
@@ -1,3 +1,5 @@
+const utils = require('./utils');
+
 async function getOption(name) {
     const option = await require('./repository').getOption(name);
 
@@ -31,8 +33,26 @@ async function createOption(name, value, isSynced) {
     }).save();
 }
 
+async function getOptions(allowedOptions) {
+    let options = await require('./repository').getEntities("SELECT * FROM options ORDER BY name");
+
+    if (allowedOptions) {
+        options = options.filter(opt => allowedOptions.includes(opt.name));
+    }
+
+    return options;
+}
+
+async function getOptionsMap(allowedOptions) {
+    const options = await getOptions(allowedOptions);
+
+    return utils.toObject(options, opt => [opt.name, opt.value]);
+}
+
 module.exports = {
     getOption,
     setOption,
-    createOption
+    createOption,
+    getOptions,
+    getOptionsMap
 };
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index ac162ea6a..95ed55a77 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -5,7 +5,7 @@
     <title>Trilium Notes</title>
   </head>
   <body>
-    <div id="container" style="display:none;">
+    <div id="container" style="display:none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) <%= rightPaneWidthPercent %>fr">
       <div id="header" class="hide-toggle">
         <div id="history-navigation" style="display: none;">
           <a id="history-back-button" title="Go to previous note." class="icon-action"