sorting handle

Will Stone · Will Stone · commit fabaed2120e2 · 2017-12-14T12:47:36.000Z
diff --git a/src/main.scss b/src/main.scss
@@ -30,6 +30,28 @@ body {
   padding: 0;
   user-select: none;
 
+  .handle {
+    display: inline-block;
+    overflow: hidden;
+    width: 16px;
+    height: 20px;
+    margin-top: -0.7em;
+    margin-right: 0.3em;
+    padding: 3px 4px;
+    content: '....';
+    cursor: move;
+    vertical-align: middle;
+    letter-spacing: 2px;
+    color: #aaaaaa;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 5px;
+
+    &:after {
+      content: '.. .. .. ..';
+    }
+  }
+
    > li {
     position: relative;
     display: flex;
diff --git a/src/preferences.html b/src/preferences.html
@@ -9,12 +9,15 @@
 
 <body id="preferences">
 
-<ul id="browserList"><li>Loading..<li></ul>
+  <ul id="browserList">
+    <li>Loading&hellip;
+      <li>
+  </ul>
 
 </body>
 
 <script>
-require('./preferencesRenderer.js')
+  require('./preferencesRenderer.js')
 </script>
 
-</html>
+</html>
diff --git a/src/preferencesRenderer.js b/src/preferencesRenderer.js
@@ -69,6 +69,10 @@ function populatePreferences(installedBrowsers) {
         const li = document.createElement('li')
         li.classList.add('browserItem')
 
+        const handle = document.createElement('span')
+        handle.classList.add('handle')
+        li.appendChild(handle)
+
         const logo = document.createElement('img')
         logo.classList.add('browserLogo')
         logo.src = `images/browser-logos/${browser.name}.png`
@@ -114,6 +118,7 @@ function populatePreferences(installedBrowsers) {
 
     Sortable.create(browserList, {
       draggable: '.browserItem',
+      handle: '.handle',
       onEnd: e => sortBrowser(e.oldIndex, e.newIndex)
     })
   } else {
