saving options for left pane sizing

db/migrations/0113__left_pane_size_options.sql

@@ -0,0 +1,5 @@
+INSERT INTO options (name, value, dateCreated, dateModified, isSynced)
+VALUES ('leftPaneMinWidth', '300', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
+
+INSERT INTO options (name, value, dateCreated, dateModified, isSynced)
+VALUES ('leftPaneWidthPercent', '20', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);

src/public/javascripts/dialogs/options.js

@@ -48,6 +48,8 @@ export default {
 addTabHandler((function() {
     const $themeSelect = $("#theme-select");
     const $zoomFactorSelect = $("#zoom-factor-select");
+    const $leftPaneMinWidth = $("#left-pane-min-width");
+    const $leftPaneWidthPercent = $("#left-pane-width-percent");
     const $html = $("html");
 
     function optionsLoaded(options) {
@@ -59,6 +61,9 @@ addTabHandler((function() {
         else {
             $zoomFactorSelect.prop('disabled', true);
         }
+
+        $leftPaneMinWidth.val(options.leftPaneMinWidth);
+        $leftPaneWidthPercent.val(options.leftPaneWidthPercent);
     }
 
     $themeSelect.change(function() {
@@ -75,6 +80,18 @@ addTabHandler((function() {
         zoomService.setZoomFactorAndSave(newZoomFactor);
     });
 
+    $leftPaneMinWidth.change(function() {
+        const newMinWidth = $(this).val();
+
+        server.put('options/leftPaneMinWidth/' + newMinWidth);
+    });
+
+    $leftPaneWidthPercent.change(function() {
+        const newWidthPercent = $(this).val();
+
+        server.put('options/leftPaneWidthPercent/' + newWidthPercent);
+    });
+
     return {
         optionsLoaded
     };

src/routes/api/options.js

@@ -6,7 +6,7 @@ const log = require('../../services/log');
 
 // options allowed to be updated directly in options dialog
 const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval',
-    'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy'];
+    'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent'];
 
 async function getOptions() {
     const options = await sql.getMap("SELECT name, value FROM options WHERE name IN ("

src/services/app_info.js

@@ -3,7 +3,7 @@
 const build = require('./build');
 const packageJson = require('../../package');
 
-const APP_DB_VERSION = 112;
+const APP_DB_VERSION = 113;
 const SYNC_VERSION = 1;
 
 module.exports = {

src/views/index.ejs

@@ -377,6 +377,23 @@
               </div>
 
               <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
+
+              <h3>Left pane sizing</h3>
+
+              <div class="form-group">
+                <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
+
+                <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
+              </div>
+
+              <div class="form-group">
+                <label for="left-pane-min-width">Left pane width percent of window size</label>
+
+                <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
+              </div>
+
+              <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
+
             </form>
           </div>
           <div id="change-password">