[feature] adding drag handle

css/icons.css

@@ -123,3 +123,7 @@
 .icon-refresh:before {
   content: "\e900";
 }
+
+.icon-reorder:before {
+  content: "\e901";
+}

fonts/icons/icons.svg

@@ -31,5 +31,6 @@
 <glyph unicode="&#xe876;" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
 <glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
 <glyph unicode="&#xe900;" glyph-name="refresh" d="M754 668.667l100 100v-300h-300l138 138c-46 46-110 76-180 76-142 0-256-114-256-256s114-256 256-256c112 0 208 70 242 170h88c-38-148-170-256-330-256-188 0-340 154-340 342s152 342 340 342c94 0 180-38 242-100z" />
+<glyph unicode="&#xe901;" glyph-name="reorder" d="M128 724.667h768v-84h-768v84zM128 468.667v86h768v-86h-768zM128 128.667v84h768v-84h-768zM128 298.667v86h768v-86h-768z" />
 <glyph unicode="&#xe909;" glyph-name="indeterminate_check_box" d="M726 384.667v84h-428v-84h428zM810 810.667c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-46 0-86 40-86 86v596c0 46 40 86 86 86h596z" />
 </font></defs></svg>

js/link.js

@@ -3,6 +3,7 @@ var link = (function() {
   var bind = function() {
     sortable(".link-area", {
       items: ".link-item",
+      handle: ".link-control-item-handle",
       placeholder: helper.node("div|class:link-item-placeholder")
     });
     sortable(".link-area")[0].addEventListener("sortupdate", function(event) {
@@ -85,6 +86,7 @@ var link = (function() {
         control.dependents();
         control.render();
         resetStagedBookmarkData();
+        sortable(".link-area");
       },
       cancelAction: function() {
         resetStagedBookmarkData();
@@ -137,6 +139,7 @@ var link = (function() {
         render.tabIndex();
         _returnToPreviousFocusLink();
         resetStagedBookmarkData();
+        sortable(".link-area");
       },
       cancelAction: function() {
         _returnToPreviousFocusLink();
@@ -162,6 +165,7 @@ var link = (function() {
         control.dependents();
         control.render();
         _returnToPreviousFocusLink();
+        sortable(".link-area");
       },
       cancelAction: function() {
         _returnToPreviousFocusLink();
@@ -417,14 +421,37 @@ var link = (function() {
         value: "link-control"
       }]
     });
+    var linkHandle = helper.makeNode({
+      tag: "button",
+      attr: [{
+        key: "class",
+        value: "button button-small link-control-item link-control-item-handle"
+      }, {
+        key: "tabindex",
+        value: -1
+      }, {
+        key: "title",
+        value: "Drag and drop to reorder"
+      }]
+    });
+    var linkHandleIcon = helper.makeNode({
+      tag: "span",
+      attr: [{
+        key: "class",
+        value: "button-icon icon-reorder"
+      }]
+    });
     var linkEdit = helper.makeNode({
       tag: "button",
       attr: [{
         key: "class",
-        value: "button button-small link-control-item"
+        value: "button button-small link-control-item link-control-item-edit"
       }, {
         key: "tabindex",
         value: -1
+      }, {
+        key: "title",
+        value: "Edit this bookmark"
       }]
     });
     var linkEditIcon = helper.makeNode({
@@ -438,10 +465,13 @@ var link = (function() {
       tag: "button",
       attr: [{
         key: "class",
-        value: "button button-small link-control-item"
+        value: "button button-small link-control-item link-control-item-remove"
       }, {
         key: "tabindex",
         value: -1
+      }, {
+        key: "title",
+        value: "Remove this bookmark"
       }]
     });
     var linkRemoveIcon = helper.makeNode({
@@ -458,9 +488,11 @@ var link = (function() {
     };
     linkPanelFront.appendChild(linkDisplay);
     linkPanelFront.appendChild(linkName);
+    linkHandle.appendChild(linkHandleIcon);
+    linkControl.appendChild(linkHandle);
     linkEdit.appendChild(linkEditIcon);
-    linkRemove.appendChild(linkRemoveIcon);
     linkControl.appendChild(linkEdit);
+    linkRemove.appendChild(linkRemoveIcon);
     linkControl.appendChild(linkRemove);
     linkUrl.appendChild(linkUrlText);
     linkPanelBack.appendChild(linkUrl);

js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.15.0";
+  var current = "3.16.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"