diff --git a/assets/icons/fonts/icon.ttf b/assets/icons/fonts/icon.ttf index bf938cc..cd41d4d 100644 Binary files a/assets/icons/fonts/icon.ttf and b/assets/icons/fonts/icon.ttf differ diff --git a/assets/icons/fonts/icon.woff b/assets/icons/fonts/icon.woff index ef0bc9e..03e7240 100644 Binary files a/assets/icons/fonts/icon.woff and b/assets/icons/fonts/icon.woff differ diff --git a/assets/icons/fonts/icon.woff2 b/assets/icons/fonts/icon.woff2 index 6d92253..6237616 100644 Binary files a/assets/icons/fonts/icon.woff2 and b/assets/icons/fonts/icon.woff2 differ diff --git a/assets/icons/icon.scss b/assets/icons/icon.scss index af30a52..a3ec26b 100644 --- a/assets/icons/icon.scss +++ b/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-'] { - &:before { +[class^='ion-'], +[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('ios-arrow-thin-right', '\f3d6'); -@include icon('arrow-up-b', '\f10d'); -@include icon('arrow-down-b', '\f104'); -@include icon('android-locate', '\f2e9'); -@include icon('android-close', '\f2d7'); -@include icon('android-lock', '\f392'); -@include icon('ios-copy', '\f41c'); +@include icon('up-b', '\f10d'); +@include icon('down-b', '\f104'); +@include icon('locate', '\f2e9'); +@include icon('close', '\f2d7'); @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'); diff --git a/lib/filters/filtergui.js b/lib/filters/filtergui.js index ebb5ce3..5dc033e 100644 --- a/lib/filters/filtergui.js +++ b/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); }; diff --git a/lib/infobox/link.js b/lib/infobox/link.js index 9d10c1b..08ac18a 100644 --- a/lib/infobox/link.js +++ b/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'); diff --git a/lib/infobox/location.js b/lib/infobox/location.js index 802893b..fbaf544 100644 --- a/lib/infobox/location.js +++ b/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); diff --git a/lib/infobox/main.js b/lib/infobox/main.js index d358fc9..0a0ba39 100644 --- a/lib/infobox/main.js +++ b/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); } diff --git a/lib/infobox/node.js b/lib/infobox/node.js index c10dff1..b70bfd2 100644 --- a/lib/infobox/node.js +++ b/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 = ''.repeat(d.statistics.clients); + span.innerHTML = ''.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 td4 = V.h('td', helper.showDistance(n.link)); + var td3 = V.h('td', (n.node.statistics.clients ? n.node.statistics.clients.toString() : '0')); + 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); diff --git a/lib/linklist.js b/lib/linklist.js index c1c2e9d..88dfc32 100644 --- a/lib/linklist.js +++ b/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); diff --git a/lib/map.js b/lib/map.js index e0e6091..23dcd22 100644 --- a/lib/map.js +++ b/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); diff --git a/lib/nodelist.js b/lib/nodelist.js index 2a141cd..2afc083 100644 --- a/lib/nodelist.js +++ b/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); diff --git a/lib/sorttable.js b/lib/sorttable.js index 9665594..61ab8a0 100644 --- a/lib/sorttable.js +++ b/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); diff --git a/scss/modules/_table.scss b/scss/modules/_table.scss index c40fc95..c024d7d 100644 --- a/scss/modules/_table.scss +++ b/scss/modules/_table.scss @@ -35,6 +35,10 @@ th { th { font-weight: bold; + &[class*=' ion-'] { + font-size: 1.3em; + } + &.sort-header { cursor: pointer;