widget ordering WIP

db/migrations/0140__widget_config.sql

@@ -1,2 +1,14 @@
 INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
-VALUES ('', '1', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
+VALUES ('noteInfoWidget', '{"enabled":true,"expanded":true,"position":10}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
+
+INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
+VALUES ('attributesWidget', '{"enabled":true,"expanded":true,"position":20}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
+
+INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
+VALUES ('linkMapWidget', '{"enabled":true,"expanded":true,"position":30}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
+
+INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
+VALUES ('noteRevisionsWidget', '{"enabled":true,"expanded":true,"position":40}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
+
+INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
+VALUES ('whatLinksHereWidget', '{"enabled":false,"expanded":true,"position":50}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);

src/public/javascripts/dialogs/options/sidebar.js

@@ -7,53 +7,8 @@ export default class SidebarOptions {
         this.$sidebarMinWidth = $("#sidebar-min-width");
         this.$sidebarWidthPercent = $("#sidebar-width-percent");
         this.$showSidebarInNewTab = $("#show-sidebar-in-new-tab");
-        this.$widgetsActive = $("#widgets-active");
+        this.$widgetsEnabled = $("#widgets-enabled");
-        this.$widgetsInactive = $("#widgets-inactive");
+        this.$widgetsDisabled = $("#widgets-disabled");
-
-        const widgets = {
-            attributes: 'Attributes',
-            linkMap: 'Link map',
-            noteInfo: 'Note info',
-            noteRevisions: 'Note revisions',
-            whatLinksHere: 'What links here'
-        };
-
-        for (const widgetName in widgets) {
-            const $widgetTitle = $('<div class="widget-title">')
-                .attr('data-widget-name', widgetName)
-                .append($("<span>").addClass("handle jam jam-move"))
-                .append($("<span>").text(widgets[widgetName]));
-
-            const $expandedCheckbox = $('<div class="expansion-conf">')
-                .attr("title", "If checked, the widget will be by default expanded (opened)")
-                .append($('<input type="checkbox">')
-                    .attr('id', 'widget-exp-' + widgetName))
-                .append("&nbsp;")
-                .append($("<label>")
-                    .attr("for", 'widget-exp-' + widgetName)
-                    .text(" expanded"));
-
-            const $el = $('<div>')
-                .addClass("list-group-item")
-                .append($widgetTitle)
-                .append($expandedCheckbox);
-
-            this.$widgetsActive.append($el);
-        }
-
-        libraryLoader.requireLibrary(libraryLoader.SORTABLE).then(() => {
-            new Sortable(this.$widgetsActive[0], {
-                group: 'widgets',
-                handle: '.handle',
-                animation: 150
-            });
-
-            new Sortable(this.$widgetsInactive[0], {
-                group: 'widgets',
-                handle: '.handle',
-                animation: 150
-            });
-        });
 
         this.$sidebarMinWidth.change(async () => {
             await server.put('options/sidebarMinWidth/' + this.$sidebarMinWidth.val());
@@ -86,6 +41,70 @@ export default class SidebarOptions {
         else {
             this.$showSidebarInNewTab.removeAttr("checked");
         }
+
+        const widgets = [
+            {name: 'attributes', title: 'Attributes'},
+            {name: 'linkMap', title: 'Link map'},
+            {name: 'noteInfo', title: 'Note info'},
+            {name: 'noteRevisions', title: 'Note revisions'},
+            {name: 'whatLinksHere', title: 'What links here'}
+        ].map(widget => {
+            widget.option = this.parseJsonSafely(options[widget.name + 'Widget']) || {
+                enabled: true,
+                expanded: true,
+                position: 100
+            };
+
+            return widget;
+        });
+
+        widgets.sort((a, b) => a.option.position - b.option.position);
+
+        for (const {name, title, option} of widgets) {
+            const $widgetTitle = $('<div class="widget-title">')
+                .attr('data-widget-name', name)
+                .append($("<span>").addClass("handle jam jam-move"))
+                .append($("<span>").text(title));
+
+            const $expandedCheckbox = $('<div class="expansion-conf">')
+                .attr("title", "If checked, the widget will be by default expanded (opened)")
+                .append($(`<input type="checkbox"${option.expanded ? ' checked' : ''}>`)
+                    .attr('id', 'widget-exp-' + name))
+                .append("&nbsp;")
+                .append($("<label>")
+                    .attr("for", 'widget-exp-' + name)
+                    .text(" expanded"));
+
+            const $el = $('<div>')
+                .addClass("list-group-item")
+                .append($widgetTitle)
+                .append($expandedCheckbox);
+
+            (option.enabled ? this.$widgetsEnabled : this.$widgetsDisabled).append($el);
+        }
+
+        libraryLoader.requireLibrary(libraryLoader.SORTABLE).then(() => {
+            new Sortable(this.$widgetsEnabled[0], {
+                group: 'widgets',
+                handle: '.handle',
+                animation: 150
+            });
+
+            new Sortable(this.$widgetsDisabled[0], {
+                group: 'widgets',
+                handle: '.handle',
+                animation: 150
+            });
+        });
+    }
+
+    parseJsonSafely(str) {
+        try {
+            return JSON.parse(str);
+        }
+        catch (e) {
+            return null;
+        }
     }
 
     resizeSidebar() {

src/public/javascripts/services/options_init.js

@@ -32,10 +32,22 @@ async function getOption(name) {
     return options[name];
 }
 
+async function getJsonOption(name) {
+    const option = await getOption(name);
+
+    try {
+        return JSON.parse(option);
+    }
+    catch (e) {
+        return null;
+    }
+}
+
 export default {
     // use addLoadListener() which will be called also on refreshes
     optionsReady,
     addLoadListener,
     loadOptions,
-    getOption
+    getOption,
+    getJsonOption
 }

src/public/javascripts/widgets/standard_widget.js

@@ -31,7 +31,7 @@ class StandardWidget {
         this.$bodyWrapper = this.$widget.find('.body-wrapper');
         this.$bodyWrapper.attr('id', widgetId);
 
-        if (state && state.visible) {
+        if (state && state.expanded) {
             this.$bodyWrapper.collapse("show");
         }
 
@@ -60,7 +60,7 @@ class StandardWidget {
     getMaxHeight() { return null; }
 
     async renderBody() {
-        if (!this.isVisible() || this.rendered) {
+        if (!this.isExpanded() || this.rendered) {
             return;
         }
 
@@ -72,14 +72,14 @@ class StandardWidget {
     /** for overriding */
     async doRenderBody() {}
 
-    isVisible() {
+    isExpanded() {
         return this.$bodyWrapper.hasClass("show");
     }
 
     getWidgetState() {
         return {
             name: this.widgetName,
-            visible: this.isVisible()
+            expanded: this.isExpanded()
         };
     }
 

src/public/stylesheets/desktop.css

@@ -354,10 +354,12 @@ body {
 }
 
 #widgets-configuration .list-group-item {
-    background: transparent;
+    background: var(--more-accented-background-color);
     font-size: larger;
     display: flex;
     justify-content: space-between;
+    padding-bottom: 2px;
+    border-radius: 10px;
 }
 
 #widgets-configuration .handle {

src/routes/api/options.js

@@ -23,7 +23,12 @@ const ALLOWED_OPTIONS = [
     'treeFontSize',
     'detailFontSize',
     'openTabs',
-    'hideTabRowForOneTab'
+    'hideTabRowForOneTab',
+    'noteInfoWidget',
+    'attributesWidget',
+    'linkMapWidget',
+    'noteRevisionsWidget',
+    'whatLinksHereWidget'
 ];
 
 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 = 139;
+const APP_DB_VERSION = 140;
 const SYNC_VERSION = 10;
 const CLIPPER_PROTOCOL_VERSION = "1.0";
 

src/views/dialogs/options/sidebar.ejs

@@ -41,12 +41,12 @@
     <h4>Widgets</h4>
 
     <div id="widgets-configuration" class="row">
-        <h5 class="col-6">Active widgets</h5>
+        <h5 class="col-6">Enabled widgets</h5>
 
-        <h5 class="col-6">Inactive widgets</h5>
+        <h5 class="col-6">Disabled widgets</h5>
 
-        <div id="widgets-active" class="list-group col"></div>
+        <div id="widgets-enabled" class="list-group col"></div>
 
-        <div id="widgets-inactive" class="list-group col"></div>
+        <div id="widgets-disabled" class="list-group col"></div>
     </div>
 </div>