sorting widgets in options WIP

src/public/javascripts/dialogs/options.js

@@ -7,6 +7,7 @@ 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";
+import libraryLoader from "../services/library_loader.js";
 
 const $dialog = $("#options-dialog");
 
@@ -346,10 +347,24 @@ addTabHandler((async function () {
     return {};
 })());
 
-addTabHandler((function() {
+addTabHandler((async function() {
     const $sidebarMinWidth = $("#sidebar-min-width");
     const $sidebarWidthPercent = $("#sidebar-width-percent");
     const $showSidebarInNewTab = $("#show-sidebar-in-new-tab");
+    const $widgetsActive = $("#widgets-active");
+    const $widgetsInactive = $("#widgets-inactive");
+
+    await libraryLoader.requireLibrary(libraryLoader.SORTABLE);
+
+    new Sortable($widgetsActive[0], {
+        group: 'shared',
+        animation: 150
+    });
+
+    new Sortable($widgetsInactive[0], {
+        group: 'shared',
+        animation: 150
+    });
 
     async function optionsLoaded(options) {
         $sidebarMinWidth.val(options.sidebarMinWidth);

src/public/javascripts/services/library_loader.js

@@ -47,6 +47,8 @@ const LINK_MAP = {
 
 const PRINT_THIS = {js: ["libraries/printThis.js"]};
 
+const SORTABLE = {js: ["libraries/sortable.min.js"]};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => cssLoader.requireCss(cssUrl));
@@ -82,5 +84,6 @@ export default {
     COMMONMARK,
     RELATION_MAP,
     LINK_MAP,
-    PRINT_THIS
+    PRINT_THIS,
+    SORTABLE
 }

src/public/stylesheets/desktop.css

@@ -343,4 +343,16 @@ body {
 .note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging),
 .note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged {
     transition: transform 120ms ease-in-out;
+}
+
+#widgets-configuration {
+    margin: 0;
+}
+
+#widgets-configuration h5 {
+    text-align: center;
+}
+
+#widgets-configuration .list-group-item {
+    background: transparent;
 }

src/views/dialogs/options/appearance.ejs

@@ -25,7 +25,7 @@
 
         <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
 
-        <h3>Font sizes</h3>
+        <h4>Font sizes</h4>
 
         <div class="form-group row">
             <div class="col-4">
@@ -64,7 +64,7 @@
 
         <p>Note that tree and detail font sizing is relative to the main font size setting.</p>
 
-        <h3>Left pane sizing</h3>
+        <h4>Left pane sizing</h4>
 
         <div class="form-group row">
             <div class="col-6">

src/views/dialogs/options/note_revisions.ejs

@@ -1,5 +1,5 @@
 <div id="options-note-revisions" class="tab-pane">
-    <h3>Note revisions snapshot interval</h3>
+    <h4>Note revisions snapshot interval</h4>
 
     <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
 

src/views/dialogs/options/protected_session.ejs

@@ -1,5 +1,5 @@
 <div id="options-protected-session" class="tab-pane">
-    <h3>Protected session timeout</h3>
+    <h4>Protected session timeout</h4>
 
     <p>Protected session timeout is a time period after which the protected session is wiped out from
         browser's memory. This is measured from the last interaction with protected notes.</p>

src/views/dialogs/options/sidebar.ejs

@@ -1,5 +1,5 @@
 <div id="options-sidebar" class="tab-pane">
-    <h3>Show sidebar in new tab</h3>
+    <h4>Show sidebar in new tab</h4>
 
     <div class="form-check">
         <input type="checkbox" class="form-check-input" id="show-sidebar-in-new-tab">
@@ -8,7 +8,7 @@
 
     <br>
 
-    <h3>Sidebar sizing</h3>
+    <h4>Sidebar sizing</h4>
 
     <div class="form-group row">
         <div class="col-6">
@@ -37,4 +37,23 @@
     </div>
 
     <p>Sidebar width is calculated from the percent of the detail pane, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width sidebar, set minimum width to the desired width and set percent to 0.</p>
+
+    <h4>Widgets</h4>
+
+    <div id="widgets-configuration" class="row">
+        <h5 class="col-6">Active widgets</h5>
+
+        <h5 class="col-6">Inactive widgets</h5>
+
+        <div id="widgets-active" class="list-group col">
+            <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 class="list-group-item">Item 1</div>
+        </div>
+    </div>
 </div>