[TASK] Add & update icons to table-header

assets/icons/icon.scss

@@ -12,8 +12,9 @@ $cache-breaker: unique-id();
   url('fonts/icon.ttf?rel=#{$cache-breaker}') format('truetype');
 }
 
-[class^='ion-'], [class*=' ion-'] {
+[class^='ion-'],
-  &:before {
+[class*=' ion-'] {
+  &::before {
     display: inline-block;
     font-family: $font-family-icons;
     font-style: normal;
@@ -27,22 +28,24 @@ $cache-breaker: unique-id();
   }
 }
 
-@include icon('android-add', '\f2c7');
 @include icon('chevron-left', '\f124');
 @include icon('chevron-right', '\f125');
 @include icon('pin', '\f3a3');
 @include icon('wifi', '\f25c');
 @include icon('eye', '\f133');
-@include icon('ios-arrow-thin-left', '\f3d5');
+@include icon('up-b', '\f10d');
-@include icon('ios-arrow-thin-right', '\f3d6');
+@include icon('down-b', '\f104');
-@include icon('arrow-up-b', '\f10d');
+@include icon('locate', '\f2e9');
-@include icon('arrow-down-b', '\f104');
+@include icon('close', '\f2d7');
-@include icon('android-locate', '\f2e9');
-@include icon('android-close', '\f2d7');
-@include icon('android-lock', '\f392');
-@include icon('ios-copy', '\f41c');
 @include icon('location', '\f456');
-@include icon('android-remove', '\f2f4');
-@include icon('ios-person', '\f47e');
 @include icon('layer', '\f229');
 @include icon('filter', '\f38B');
+@include icon('connection-bars', '\f274');
+@include icon('share-alt', '\f3ac');
+@include icon('clipboard', '\f376');
+@include icon('people', '\f39e');
+@include icon('person', '\f3a0');
+@include icon('time', '\f3b3');
+@include icon('arrow-resize', '\f264');
+@include icon('arrow-left-c', '\f108');
+@include icon('arrow-right-c', '\f10b');

lib/filters/filtergui.js

@@ -21,7 +21,7 @@ define(function () {
         d.render(li);
 
         var button = document.createElement('button');
-        button.classList.add('ion-android-close');
+        button.classList.add('ion-close');
         button.onclick = function onclick() {
           distributor.removeFilter(d);
         };

lib/infobox/link.js

@@ -27,7 +27,7 @@ define(['helper'], function (helper) {
     h2.appendChild(a1);
 
     var arrow = document.createElement('spam');
-    arrow.classList.add('ion-ios-arrow-thin-right');
+    arrow.classList.add('ion-arrow-right-c');
     h2.appendChild(arrow);
 
     var a2 = document.createElement('a');

lib/infobox/location.js

@@ -39,7 +39,7 @@ define(['helper'], function (helper) {
       heading.textContent = title;
       box.appendChild(heading);
       var btn = document.createElement('button');
-      btn.classList.add('ion-ios-copy');
+      btn.classList.add('ion-clipboard');
       btn.title = _.t('location.copy');
       btn.onclick = function onclick() {
         copy2clip(inputElem.id);

lib/infobox/main.js

@@ -27,7 +27,7 @@ define(['infobox/link', 'infobox/node', 'infobox/location'], function (link, nod
 
       var closeButton = document.createElement('button');
       closeButton.classList.add('close');
-      closeButton.classList.add('ion-android-close');
+      closeButton.classList.add('ion-close');
       closeButton.onclick = router.reset;
       el.appendChild(closeButton);
     }

lib/infobox/node.js

@@ -83,7 +83,7 @@ define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
 
         var span = document.createElement('span');
         span.classList.add('clients');
-        span.innerHTML = '<i class="ion-ios-person"></i>'.repeat(d.statistics.clients);
+        span.innerHTML = '<i class="ion-person"></i>'.repeat(d.statistics.clients);
         el.appendChild(span);
       };
     }
@@ -189,12 +189,13 @@ define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
 
     return function (config, el, router, d) {
       var linkScale = chroma.scale(chroma.bezier(['#04C714', '#FF5500', '#F02311'])).domain([1, 5]);
+
       function renderNeighbourRow(n) {
         var icons = [];
         var name = [];
         var unknown = !(n.node);
 
-        icons.push(V.h('span', { className: n.incoming ? 'ion-ios-arrow-thin-left' : 'ion-ios-arrow-thin-right' }));
+        icons.push(V.h('span', { className: n.incoming ? 'ion-arrow-left-c' : 'ion-arrow-right-c' }));
         if (!unknown && helper.hasLocation(n.node)) {
           icons.push(V.h('span', { className: 'ion-location' }));
         }
@@ -207,10 +208,11 @@ define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
 
         var td1 = V.h('td', icons);
         var td2 = V.h('td', name);
-        var td3 = V.h('td', { style: { color: linkScale(n.link.tq).hex() } }, helper.showTq(n.link));
+        var td3 = V.h('td', (n.node.statistics.clients ? n.node.statistics.clients.toString() : '0'));
-        var td4 = V.h('td', helper.showDistance(n.link));
+        var td4 = V.h('td', { style: { color: linkScale(n.link.tq).hex() } }, helper.showTq(n.link));
+        var td5 = V.h('td', helper.showDistance(n.link));
 
-        return V.h('tr', [td1, td2, td3, td4]);
+        return V.h('tr', [td1, td2, td3, td4, td5]);
       }
 
       var h2 = document.createElement('h2');
@@ -268,14 +270,24 @@ define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
             return a.node.nodeinfo.hostname.localeCompare(b.node.nodeinfo.hostname);
           },
           reverse: false
+        }, {
+          name: 'node.clients',
+          class: 'ion-people',
+          sort: function (a, b) {
+            return ('clients' in a.node.statistics ? a.node.statistics.clients : -1) -
+              ('clients' in b.node.statistics ? b.node.statistics.clients : -1);
+          },
+          reverse: true
         }, {
           name: 'node.tq',
+          class: 'ion-connection-bars',
           sort: function (a, b) {
             return a.link.tq - b.link.tq;
           },
           reverse: true
         }, {
           name: 'node.distance',
+          class: 'ion-arrow-resize',
           sort: function (a, b) {
             return (a.link.distance === undefined ? -1 : a.link.distance) -
               (b.link.distance === undefined ? -1 : b.link.distance);

lib/linklist.js

@@ -13,12 +13,14 @@ define(['sorttable', 'virtual-dom', 'helper'], function (SortTable, V, helper) {
     reverse: false
   }, {
     name: 'node.tq',
+    class: 'ion-connection-bars',
     sort: function (a, b) {
       return a.tq - b.tq;
     },
     reverse: true
   }, {
     name: 'node.distance',
+    class: 'ion-arrow-resize',
     sort: function (a, b) {
       return (a.distance === undefined ? -1 : a.distance) -
         (b.distance === undefined ? -1 : b.distance);

lib/map.js

@@ -23,7 +23,7 @@ define(['map/clientlayer', 'map/labelslayer',
       },
 
       onAdd: function () {
-        var button = L.DomUtil.create('button', 'ion-android-locate shadow');
+        var button = L.DomUtil.create('button', 'ion-locate shadow');
         button.setAttribute('data-tooltip', _.t('button.tracking'));
         L.DomEvent.disableClickPropagation(button);
         L.DomEvent.addListener(button, 'click', this.onClick, this);

lib/nodelist.js

@@ -35,18 +35,21 @@ define(['sorttable', 'virtual-dom', 'helper'], function (SortTable, V, helper) {
     reverse: false
   }, {
     name: 'node.uptime',
+    class: 'ion-time',
     sort: function (a, b) {
       return a.uptime - b.uptime;
     },
     reverse: true
   }, {
     name: 'node.links',
+    class: 'ion-share-alt',
     sort: function (a, b) {
       return a.meshlinks - b.meshlinks;
     },
     reverse: true
   }, {
     name: 'node.clients',
+    class: 'ion-people',
     sort: function (a, b) {
       return ('clients' in a.statistics ? a.statistics.clients : -1) -
         ('clients' in b.statistics ? b.statistics.clients : -1);

lib/sorttable.js

@@ -25,16 +25,23 @@ define(['virtual-dom'], function (V) {
 
       if (data.length !== 0) {
         var th = headings.map(function (d, i) {
+          var name = _.t(d.name);
           var properties = {
             onclick: sortTableHandler(i),
             className: 'sort-header'
           };
 
+          if (d.class) {
+            properties.className += ' ' + d.class;
+            properties.title = name;
+            name = '';
+          }
+
           if (sortIndex === i) {
             properties.className += sortReverse ? ' sort-up' : ' sort-down';
           }
 
-          return V.h('th', properties, _.t(d.name));
+          return V.h('th', properties, name);
         });
 
         var links = data.slice(0).sort(headings[sortIndex].sort);

scss/modules/_table.scss

@@ -35,6 +35,10 @@ th {
 th {
   font-weight: bold;
 
+  &[class*=' ion-'] {
+    font-size: 1.3em;
+  }
+
   &.sort-header {
     cursor: pointer;