configurable hiding of tab row for one tab

db/migrations/0135__add_hideTabRowForOneTab_option.sql

@@ -0,0 +1,2 @@
+INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
+    VALUES ('hideTabRowForOneTab', 'false', '2019-05-01T18:31:00.874Z', '2019-05-01T18:31:00.874Z', 0);

src/public/javascripts/dialogs/options.js

@@ -6,6 +6,7 @@ import infoService from "../services/info.js";
 import zoomService from "../services/zoom.js";
 import utils from "../services/utils.js";
 import cssLoader from "../services/css_loader.js";
+import optionsInit from "../services/options_init.js";
 
 const $dialog = $("#options-dialog");
 
@@ -43,6 +44,7 @@ export default {
 addTabHandler((function() {
     const $themeSelect = $("#theme-select");
     const $zoomFactorSelect = $("#zoom-factor-select");
+    const $oneTabDisplaySelect = $("#one-tab-display-select");
     const $leftPaneMinWidth = $("#left-pane-min-width");
     const $leftPaneWidthPercent = $("#left-pane-width-percent");
     const $mainFontSize = $("#main-font-size");
@@ -76,6 +78,8 @@ addTabHandler((function() {
             $zoomFactorSelect.prop('disabled', true);
         }
 
+        $oneTabDisplaySelect.val(options.hideTabRowForOneTab === 'true' ? 'hide' : 'show');
+
         $leftPaneMinWidth.val(options.leftPaneMinWidth);
         $leftPaneWidthPercent.val(options.leftPaneWidthPercent);
 
@@ -116,6 +120,13 @@ addTabHandler((function() {
         $container.css("grid-template-columns", `minmax(${leftPaneMinWidth}px, ${leftPanePercent}fr) ${rightPanePercent}fr`);
     }
 
+    $oneTabDisplaySelect.change(function() {
+        const hideTabRowForOneTab = $(this).val() === 'hide' ? 'true' : 'false';
+
+        server.put('options/hideTabRowForOneTab/' + hideTabRowForOneTab)
+            .then(optionsInit.loadOptions);
+    });
+
     $leftPaneMinWidth.change(async function() {
         await server.put('options/leftPaneMinWidth/' + $(this).val());
 
@@ -217,7 +228,7 @@ addTabHandler((function() {
         const protectedSessionTimeout = $protectedSessionTimeout.val();
 
         saveOptions({ 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
-            protectedSessionHolder.setProtectedSessionTimeout(protectedSessionTimeout);
+            optionsInit.loadOptions();
         });
 
         return false;

src/public/javascripts/services/note_detail.js

@@ -310,7 +310,7 @@ $tabContentsContainer.on("drop", e => {
     });
 });
 
-async function createEmptyTab() {
+async function openEmptyTab() {
     const ctx = new TabContext(tabRow);
     tabContexts.push(ctx);
 
@@ -319,7 +319,7 @@ async function createEmptyTab() {
     await tabRow.setCurrentTab(ctx.tab);
 }
 
-tabRow.addListener('newTab', createEmptyTab);
+tabRow.addListener('newTab', openEmptyTab);
 
 tabRow.addListener('activeTabChange', async ({ detail }) => {
     const tabId = detail.tabEl.getAttribute('data-tab-id');
@@ -342,6 +342,10 @@ tabRow.addListener('tabRemove', async ({ detail }) => {
     tabContexts = tabContexts.filter(nc => nc.tabId !== tabId);
 
     console.log(`Removed tab ${tabId}`);
+
+    if (tabContexts.length === 0) {
+        openEmptyTab();
+    }
 });
 
 $(tabRow.el).on('contextmenu', '.note-tab', e => {
@@ -363,7 +367,7 @@ $(tabRow.el).on('contextmenu', '.note-tab', e => {
 
 if (utils.isElectron()) {
     utils.bindShortcut('ctrl+t', () => {
-        createEmptyTab();
+        openEmptyTab();
     });
 
     utils.bindShortcut('ctrl+w', () => {

src/public/javascripts/services/options_init.js

@@ -1,9 +1,34 @@
 import server from "./server.js";
 
-const optionsReady = new Promise((resolve, reject) => {
+let optionsReady;
-    $(document).ready(() => server.get('options').then(resolve));
+
-});
+const loadListeners = [];
+
+function loadOptions() {
+    optionsReady = new Promise((resolve, reject) => {
+        server.get('options').then(options => {
+            resolve(options);
+
+            for (const listener of loadListeners) {
+                listener(options);
+            }
+        });
+    });
+}
+
+loadOptions(); // initial load
+
+function addLoadListener(listener) {
+    loadListeners.push(listener);
+
+    // useful when listener has been added after the promise resolved, but can cause double emit if not yet
+    // that should not be an issue though
+    optionsReady.then(listener);
+}
 
 export default {
-    optionsReady
+    // use addLoadListener() which will be called also on refreshes
+    optionsReady,
+    addLoadListener,
+    loadOptions
 }

src/public/javascripts/services/protected_session_holder.js

@@ -6,7 +6,7 @@ const PROTECTED_SESSION_ID_KEY = 'protectedSessionId';
 let lastProtectedSessionOperationDate = null;
 let protectedSessionTimeout = null;
 
-optionsInitService.optionsReady.then(options => protectedSessionTimeout = options.protectedSessionTimeout);
+optionsInitService.addLoadListener(options => setProtectedSessionTimeout(options.protectedSessionTimeout));
 
 setInterval(() => {
     if (lastProtectedSessionOperationDate !== null && Date.now() - lastProtectedSessionOperationDate.getTime() > protectedSessionTimeout * 1000) {

src/public/javascripts/services/zoom.js

@@ -40,7 +40,7 @@ function getCurrentZoom() {
 }
 
 if (utils.isElectron()) {
-    optionsInitService.optionsReady.then(options => setZoomFactor(options.zoomFactor))
+    optionsInitService.addLoadListener(options => setZoomFactor(options.zoomFactor))
 }
 
 export default {

src/routes/api/options.js

@@ -19,7 +19,8 @@ const ALLOWED_OPTIONS = [
     'mainFontSize',
     'treeFontSize',
     'detailFontSize',
-    'openTabs'
+    'openTabs',
+    'hideTabRowForOneTab'
 ];
 
 async function getOptions() {

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 = 134;
+const APP_DB_VERSION = 135;
 const SYNC_VERSION = 8;
 
 module.exports = {

src/views/dialogs/options.ejs

@@ -35,22 +35,31 @@
                             <p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
 
                             <form>
-                                <div class="form-group">
+                                <div class="form-group row">
-                                    <label for="theme-select">Theme</label>
+                                    <div class="col-4">
-                                    <select class="form-control" id="theme-select"></select>
+                                        <label for="theme-select">Theme</label>
-                                </div>
+                                        <select class="form-control" id="theme-select"></select>
+                                    </div>
 
-                                <div class="form-group">
+                                    <div class="col-4">
-                                    <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
+                                        <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
 
-                                    <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
+                                        <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
+                                    </div>
+
+                                    <div class="col-4">
+                                        <label for="one-tab-display-select">If there's only one tab, then...</label>
+                                        <select class="form-control" id="one-tab-display-select">
+                                            <option value="show">show the tab bar</option>
+                                            <option value="hide">hide the tab bar</option>
+                                        </select>
+                                    </div>
                                 </div>
 
                                 <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
 
                                 <h3>Font sizes</h3>
 
-
                                 <div class="form-group row">
                                     <div class="col-4">
                                         <label for="main-font-size">Main font size</label>
@@ -90,16 +99,18 @@
 
                                 <h3>Left pane sizing</h3>
 
-                                <div class="form-group">
+                                <div class="form-group row">
-                                    <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
+                                    <div class="col-6">
+                                        <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"/>
+                                        <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
-                                </div>
+                                    </div>
 
-                                <div class="form-group">
+                                    <div class="col-6">
-                                    <label for="left-pane-min-width">Left pane width percent of window size</label>
+                                        <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"/>
+                                        <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
+                                    </div>
                                 </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>