[!!!][TASK] Refactor Scss, add Sass-lint and adjust styling
Add variables to allow easy modifications to color, font and also extending Style
This commit is contained in:
Xaver Maierhofer
Milan Pässler
parent
6175d6bb7a
commit
ed06ff6b09
50 changed files with 762 additions and 888 deletions
|
|
@ -3,8 +3,6 @@ define(function () {
|
|||
|
||||
return function () {
|
||||
this.render = function (d) {
|
||||
var el = document.createElement("div");
|
||||
d.appendChild(el);
|
||||
var s = "<h2>Über HopGlass</h2>";
|
||||
|
||||
s += "<p>Mit Doppelklick und Shift+Doppelklick kann man in der Karte ";
|
||||
|
|
@ -34,7 +32,7 @@ define(function () {
|
|||
s += "<a href=\"https://github.com/plumpudding/hopglass\">";
|
||||
s += "https://github.com/plumpudding/hopglass</a>.";
|
||||
|
||||
el.innerHTML = s;
|
||||
d.innerHTML = s;
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,13 +17,11 @@ define(function () {
|
|||
|
||||
filters.forEach(function (d) {
|
||||
var li = document.createElement("li");
|
||||
var div = document.createElement("div");
|
||||
container.appendChild(li);
|
||||
li.appendChild(div);
|
||||
d.render(div);
|
||||
d.render(li);
|
||||
|
||||
var button = document.createElement("button");
|
||||
button.textContent = "";
|
||||
button.classList.add("ion-android-close");
|
||||
button.onclick = function () {
|
||||
distributor.removeFilter(d);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ define(["helper"], function (helper) {
|
|||
|
||||
var label = document.createElement("label");
|
||||
var strong = document.createElement("strong");
|
||||
label.textContent = name + " ";
|
||||
label.textContent = name + ": ";
|
||||
label.appendChild(strong);
|
||||
|
||||
function run(d) {
|
||||
|
|
@ -26,12 +26,12 @@ define(["helper"], function (helper) {
|
|||
|
||||
function draw(el) {
|
||||
if (negate) {
|
||||
el.parentNode.classList.add("not");
|
||||
el.classList.add("not");
|
||||
} else {
|
||||
el.parentNode.classList.remove("not");
|
||||
el.classList.remove("not");
|
||||
}
|
||||
|
||||
strong.textContent = (negate ? "¬" : "" ) + value;
|
||||
strong.textContent = value;
|
||||
}
|
||||
|
||||
function render(el) {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ define(["chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
|
|||
contentDiv.appendChild(buttons);
|
||||
|
||||
var buttonToggle = document.createElement("button");
|
||||
buttonToggle.textContent = "\uF133";
|
||||
buttonToggle.classList.add("ion-eye", "shadow");
|
||||
buttonToggle.onclick = function () {
|
||||
if (content.constructor === Map) {
|
||||
router.view("g");
|
||||
|
|
|
|||
|
|
@ -11,17 +11,23 @@ define(["helper"], function (helper) {
|
|||
}
|
||||
|
||||
return function (config, el, router, d) {
|
||||
var unknown = !(d.source.node);
|
||||
var unknown = !d.source.node;
|
||||
var h2 = document.createElement("h2");
|
||||
var a1 = document.createElement("a");
|
||||
var a1;
|
||||
if (!unknown) {
|
||||
a1 = document.createElement("a");
|
||||
a1.href = "#";
|
||||
a1.onclick = router.node(d.source.node);
|
||||
} else {
|
||||
a1 = document.createElement("span");
|
||||
}
|
||||
a1.textContent = unknown ? d.source.id : d.source.node.nodeinfo.hostname;
|
||||
h2.appendChild(a1);
|
||||
h2.appendChild(document.createTextNode(" \uF3D6 "));
|
||||
h2.className = "ion-inside";
|
||||
|
||||
var arrow = document.createElement("spam");
|
||||
arrow.classList.add("ion-ios-arrow-thin-right");
|
||||
h2.appendChild(arrow);
|
||||
|
||||
var a2 = document.createElement("a");
|
||||
a2.href = "#";
|
||||
a2.onclick = router.node(d.target.node);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ define(["helper"], function (helper) {
|
|||
"uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "';" +
|
||||
"uci commit gluon-node-info";
|
||||
|
||||
el.appendChild(createBox("uci", "Befehl", editUci, false));
|
||||
el.appendChild(createBox("uci", "Uci", editUci));
|
||||
|
||||
var linkPlain = document.createElement("a");
|
||||
linkPlain.textContent = "plain";
|
||||
|
|
@ -49,22 +49,13 @@ define(["helper"], function (helper) {
|
|||
};
|
||||
linkUci.href = "#";
|
||||
|
||||
var hintText = document.createElement("p");
|
||||
hintText.appendChild(document.createTextNode("Du kannst zwischen "));
|
||||
hintText.appendChild(linkPlain);
|
||||
hintText.appendChild(document.createTextNode(" und "));
|
||||
hintText.appendChild(linkUci);
|
||||
hintText.appendChild(document.createTextNode(" wechseln."));
|
||||
el.appendChild(hintText);
|
||||
|
||||
function createBox(name, title, inputElem, isVisible) {
|
||||
var visible = typeof isVisible !== "undefined" ? isVisible : true;
|
||||
function createBox(name, title, inputElem) {
|
||||
var box = document.createElement("div");
|
||||
var heading = document.createElement("h3");
|
||||
heading.textContent = title;
|
||||
box.appendChild(heading);
|
||||
var btn = document.createElement("button");
|
||||
btn.className = "ion-ios-copy";
|
||||
btn.classList.add("ion-ios-copy");
|
||||
btn.title = "Kopieren";
|
||||
btn.onclick = function () {
|
||||
copy2clip(inputElem.id);
|
||||
|
|
@ -76,7 +67,6 @@ define(["helper"], function (helper) {
|
|||
line.appendChild(btn);
|
||||
box.appendChild(line);
|
||||
box.id = "box-" + name;
|
||||
box.style.display = visible ? "block" : "none";
|
||||
return box;
|
||||
}
|
||||
|
||||
|
|
@ -90,16 +80,5 @@ define(["helper"], function (helper) {
|
|||
}
|
||||
}
|
||||
|
||||
function switch2plain() {
|
||||
document.getElementById("box-uci").style.display = "none";
|
||||
document.getElementById("box-lat").style.display = "block";
|
||||
document.getElementById("box-lng").style.display = "block";
|
||||
}
|
||||
|
||||
function switch2uci() {
|
||||
document.getElementById("box-uci").style.display = "block";
|
||||
document.getElementById("box-lat").style.display = "none";
|
||||
document.getElementById("box-lng").style.display = "none";
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Nod
|
|||
el.destroy = destroy;
|
||||
|
||||
var closeButton = document.createElement("button");
|
||||
closeButton.classList.add("close");
|
||||
closeButton.classList.add("close", "ion-android-close");
|
||||
closeButton.onclick = router.reset;
|
||||
el.appendChild(closeButton);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
define(["moment", "tablesort", "helper", "moment.de"],
|
||||
function (moment, Tablesort, helper) {
|
||||
define(["chroma-js", "moment", "tablesort", "helper", "moment.de"],
|
||||
function (chroma, moment, Tablesort, helper) {
|
||||
"use strict";
|
||||
|
||||
function showGeoURI(d) {
|
||||
|
|
@ -158,7 +158,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("clients");
|
||||
span.textContent = "\uF47E ".repeat(d.statistics.clients);
|
||||
span.innerHTML = "<i class=\"ion-ios-person\"></i>".repeat(d.statistics.clients);
|
||||
el.appendChild(span);
|
||||
|
||||
var spanmesh = document.createElement("span");
|
||||
|
|
@ -255,8 +255,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
|
||||
function showBar(className, v) {
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("bar");
|
||||
span.classList.add(className);
|
||||
span.classList.add("bar", className);
|
||||
|
||||
var bar = document.createElement("span");
|
||||
bar.style.width = (v * 100) + "%";
|
||||
|
|
@ -271,8 +270,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
|
||||
function showLoadBar(className, v) {
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("bar");
|
||||
span.classList.add(className);
|
||||
span.classList.add("bar", className);
|
||||
|
||||
var bar = document.createElement("span");
|
||||
if (v >= 1) {
|
||||
|
|
@ -411,7 +409,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
link.href = webpage;
|
||||
if (webpage.search(/^https:\/\//i) !== -1) {
|
||||
var lock = document.createElement("span");
|
||||
lock.className = "ion-android-lock";
|
||||
lock.classList.add("ion-android-lock");
|
||||
a.appendChild(lock);
|
||||
var t1 = document.createTextNode(" ");
|
||||
a.appendChild(t1);
|
||||
|
|
@ -476,6 +474,11 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
}
|
||||
|
||||
return function (config, el, router, d) {
|
||||
var linkScale = chroma.scale(chroma.bezier(["#04C714", "#FF5500", "#F02311"])).domain([1, 5]);
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = d.nodeinfo.hostname;
|
||||
el.appendChild(h2);
|
||||
|
||||
var attributes = document.createElement("table");
|
||||
attributes.classList.add("attributes");
|
||||
|
||||
|
|
@ -495,9 +498,9 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
}
|
||||
helper.attributeEntry(attributes, top, d.nodeinfo.hostname);
|
||||
} else {
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = d.nodeinfo.hostname;
|
||||
el.appendChild(h2);
|
||||
var heading = document.createElement("h2");
|
||||
heading.textContent = d.nodeinfo.hostname;
|
||||
el.appendChild(heading);
|
||||
}
|
||||
|
||||
helper.attributeEntry(attributes, "Status", showStatus(d));
|
||||
|
|
@ -579,28 +582,34 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
var tr = document.createElement("tr");
|
||||
|
||||
var td1 = document.createElement("td");
|
||||
td1.className = "ion-inside";
|
||||
td1.appendChild(document.createTextNode(d.incoming ? " \uF3D5 " : " \uF3D6 "));
|
||||
tr.appendChild(td1);
|
||||
|
||||
var td2 = document.createElement("td");
|
||||
td2.appendChild(createLink(d, router));
|
||||
var direction = document.createElement("span");
|
||||
direction.classList.add(d.incoming ? "ion-ios-arrow-thin-left" : "ion-ios-arrow-thin-right");
|
||||
td1.appendChild(direction);
|
||||
|
||||
if (!unknown && helper.hasLocation(d.node)) {
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("icon");
|
||||
span.classList.add("ion-location");
|
||||
td2.appendChild(span);
|
||||
span.classList.add("icon", "ion-location");
|
||||
td1.appendChild(span);
|
||||
}
|
||||
|
||||
tr.appendChild(td1);
|
||||
|
||||
var td2 = document.createElement("td");
|
||||
var a1 = document.createElement("a");
|
||||
a1.classList.add("hostname", d.link.target.node.flags.online ? "online" : "unseen");
|
||||
a1.textContent = unknown ? d.id : d.node.nodeinfo.hostname;
|
||||
if (!unknown) {
|
||||
a1.href = "#";
|
||||
}
|
||||
a1.onclick = router.node(d.node);
|
||||
td2.appendChild(a1);
|
||||
|
||||
tr.appendChild(td2);
|
||||
|
||||
var td3 = document.createElement("td");
|
||||
var a2 = document.createElement("a");
|
||||
a2.href = "#";
|
||||
a2.textContent = helper.showTq(d.link);
|
||||
a2.onclick = router.link(d.link);
|
||||
td3.appendChild(a2);
|
||||
td3.textContent = helper.showTq(d.link);
|
||||
td3.style.color = linkScale(d.link.tq).hex();
|
||||
tr.appendChild(td3);
|
||||
|
||||
var td4 = document.createElement("td");
|
||||
|
|
@ -612,11 +621,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
tr.appendChild(td4);
|
||||
|
||||
var td5 = document.createElement("td");
|
||||
var a4 = document.createElement("a");
|
||||
a4.href = "#";
|
||||
a4.textContent = helper.showDistance(d.link);
|
||||
a4.onclick = router.link(d.link);
|
||||
td5.appendChild(a4);
|
||||
td5.textContent = helper.showDistance(d.link);
|
||||
td5.setAttribute("data-sort", d.link.distance !== undefined ? -d.link.distance : 1);
|
||||
tr.appendChild(td5);
|
||||
|
||||
|
|
@ -624,7 +629,7 @@ define(["moment", "tablesort", "helper", "moment.de"],
|
|||
});
|
||||
|
||||
table.appendChild(tbody);
|
||||
table.className = "node-links";
|
||||
table.classList.add("node-links");
|
||||
|
||||
Tablesort(table);
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
|
|||
|
||||
return function (linkScale, router) {
|
||||
var table = new SortTable(headings, 2, renderRow);
|
||||
table.el.classList.add("link-list");
|
||||
|
||||
function renderRow(d) {
|
||||
var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))];
|
||||
|
|
@ -50,15 +51,11 @@ define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
|
|||
}
|
||||
|
||||
this.render = function (d) {
|
||||
var el = document.createElement("div");
|
||||
el.last = V.h("div");
|
||||
d.appendChild(el);
|
||||
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = "Verbindungen";
|
||||
el.appendChild(h2);
|
||||
d.appendChild(h2);
|
||||
|
||||
el.appendChild(table.el);
|
||||
d.appendChild(table.el);
|
||||
};
|
||||
|
||||
this.setData = function (d) {
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ define(["moment", "router", "leaflet", "gui", "helper", "moment.de"],
|
|||
|
||||
var urls = [];
|
||||
|
||||
if (typeof config.dataPath === "string" || config.dataPath instanceof String) {
|
||||
if (typeof config.dataPath === "string") {
|
||||
config.dataPath = [config.dataPath];
|
||||
}
|
||||
|
||||
|
|
|
|||
10
lib/map.js
10
lib/map.js
|
|
@ -20,8 +20,7 @@ define(["map/clientlayer", "map/labelslayer",
|
|||
},
|
||||
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "add-layer");
|
||||
button.textContent = "\uF2C7";
|
||||
var button = L.DomUtil.create("button", "add-layer ion-android-add shadow");
|
||||
|
||||
// L.DomEvent.disableClickPropagation(button)
|
||||
// Click propagation isn't disabled as this causes problems with the
|
||||
|
|
@ -48,9 +47,7 @@ define(["map/clientlayer", "map/labelslayer",
|
|||
},
|
||||
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "locate-user");
|
||||
button.textContent = "\uF2E9";
|
||||
|
||||
var button = L.DomUtil.create("button", "locate-user ion-android-locate shadow");
|
||||
L.DomEvent.disableClickPropagation(button);
|
||||
L.DomEvent.addListener(button, "click", this.onClick, this);
|
||||
|
||||
|
|
@ -87,8 +84,7 @@ define(["map/clientlayer", "map/labelslayer",
|
|||
},
|
||||
|
||||
onAdd: function () {
|
||||
var button = L.DomUtil.create("button", "coord-picker");
|
||||
button.textContent = "\uF3A3";
|
||||
var button = L.DomUtil.create("button", "coord-picker ion-pin shadow");
|
||||
|
||||
// Click propagation isn't disabled as this causes problems with the
|
||||
// location picking mode; instead propagation is stopped in onClick().
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
|
|||
}
|
||||
|
||||
var headings = [{
|
||||
name: ''
|
||||
}, {
|
||||
name: "Knoten",
|
||||
sort: function (a, b) {
|
||||
var aname = typeof a.nodeinfo.hostname === "string" ? a.nodeinfo.hostname : a.nodeinfo.node_id;
|
||||
|
|
@ -61,6 +63,7 @@ define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
|
|||
|
||||
return function (router) {
|
||||
function renderRow(d) {
|
||||
var td0Content = [];
|
||||
var td1Content = [];
|
||||
var aClass = ["hostname", d.flags.online ? "online" : "offline"];
|
||||
|
||||
|
|
@ -71,28 +74,27 @@ define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
|
|||
}, d.nodeinfo.hostname));
|
||||
|
||||
if (helper.hasLocation(d)) {
|
||||
td1Content.push(V.h("span", {className: "icon ion-location"}));
|
||||
td0Content.push(V.h("span", {className: "icon ion-location"}));
|
||||
}
|
||||
|
||||
var td0 = V.h("td", td0Content);
|
||||
var td1 = V.h("td", td1Content);
|
||||
var td2 = V.h("td", showUptime(d.uptime));
|
||||
var td3 = V.h("td", d.meshlinks.toString());
|
||||
var td4 = V.h("td", ("clients" in d.statistics ? d.statistics.clients : 0).toFixed(0));
|
||||
|
||||
return V.h("tr", [td1, td2, td3, td4]);
|
||||
return V.h("tr", [td0, td1, td2, td3, td4]);
|
||||
}
|
||||
|
||||
var table = new SortTable(headings, 0, renderRow);
|
||||
var table = new SortTable(headings, 1, renderRow);
|
||||
table.el.classList.add('node-list');
|
||||
|
||||
this.render = function (d) {
|
||||
var el = document.createElement("div");
|
||||
d.appendChild(el);
|
||||
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = "Alle Knoten";
|
||||
el.appendChild(h2);
|
||||
d.appendChild(h2);
|
||||
|
||||
el.appendChild(table.el);
|
||||
d.appendChild(table.el);
|
||||
};
|
||||
|
||||
this.setData = function (d) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ define(function () {
|
|||
var button = document.createElement("button");
|
||||
sidebar.appendChild(button);
|
||||
|
||||
button.classList.add("sidebarhandle");
|
||||
button.classList.add("sidebarhandle", "shadow");
|
||||
button.onclick = function () {
|
||||
sidebar.classList.toggle("hidden");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ define(["moment", "virtual-dom", "helper", "moment.de"], function (moment, V, he
|
|||
var el, tbody;
|
||||
|
||||
self.render = function (d) {
|
||||
el = document.createElement("div");
|
||||
d.appendChild(el);
|
||||
el = d;
|
||||
};
|
||||
|
||||
self.setData = function (data) {
|
||||
|
|
@ -29,6 +28,7 @@ define(["moment", "virtual-dom", "helper", "moment.de"], function (moment, V, he
|
|||
el.appendChild(h2);
|
||||
|
||||
var table = document.createElement("table");
|
||||
table.classList.add("node-list");
|
||||
el.appendChild(table);
|
||||
|
||||
tbody = document.createElement("tbody");
|
||||
|
|
@ -38,6 +38,7 @@ define(["moment", "virtual-dom", "helper", "moment.de"], function (moment, V, he
|
|||
|
||||
var items = list.map(function (d) {
|
||||
var time = moment(d[field]).from(data.now);
|
||||
var td0Content = [];
|
||||
var td1Content = [];
|
||||
|
||||
var aClass = ["hostname", d.flags.online ? "online" : "offline"];
|
||||
|
|
@ -49,13 +50,14 @@ define(["moment", "virtual-dom", "helper", "moment.de"], function (moment, V, he
|
|||
}, d.nodeinfo.hostname));
|
||||
|
||||
if (helper.hasLocation(d)) {
|
||||
td1Content.push(V.h("span", {className: "icon ion-location"}));
|
||||
td0Content.push(V.h("span", {className: "icon ion-location"}));
|
||||
}
|
||||
|
||||
var td0 = V.h("td", td0Content);
|
||||
var td1 = V.h("td", td1Content);
|
||||
var td2 = V.h("td", time);
|
||||
|
||||
return V.h("tr", [td1, td2]);
|
||||
return V.h("tr", [td0, td1, td2]);
|
||||
});
|
||||
|
||||
var tbodyNew = V.h("tbody", items);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue