widget config WIP

db/migrations/0140__widget_config.sql

@@ -0,0 +1,2 @@
+INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
+VALUES ('', '1', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);

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

@@ -10,14 +10,47 @@ export default class SidebarOptions {
         this.$widgetsActive = $("#widgets-active");
         this.$widgetsInactive = $("#widgets-inactive");
 
+        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: 'shared',
+                group: 'widgets',
+                handle: '.handle',
                 animation: 150
             });
 
             new Sortable(this.$widgetsInactive[0], {
-                group: 'shared',
+                group: 'widgets',
+                handle: '.handle',
                 animation: 150
             });
         });

src/public/stylesheets/desktop.css

@@ -355,4 +355,12 @@ body {
 
 #widgets-configuration .list-group-item {
     background: transparent;
+    font-size: larger;
+    display: flex;
+    justify-content: space-between;
+}
+
+#widgets-configuration .handle {
+    margin-right: 20px;
+    display: inline-block;
 }

src/views/dialogs/options/sidebar.ejs

@@ -45,15 +45,8 @@
 
         <h5 class="col-6">Inactive widgets</h5>
 
-        <div id="widgets-active" class="list-group col">
+        <div id="widgets-active" class="list-group col"></div>
-            <div class="list-group-item">Item 1</div>
-            <div class="list-group-item">Item 2</div>
-            <div class="list-group-item">Item 3</div>
-            <div class="list-group-item">Item 4</div>
-        </div>
 
-        <div id="widgets-inactive" class="list-group col">
+        <div id="widgets-inactive" class="list-group col"></div>
-            <div class="list-group-item">Item 1</div>
-        </div>
     </div>
 </div>