Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-material: icons and other changes

Browse source 
* Remove excess font dependency
* Retain two glyphs as svg
* Store svg icons externally
* Add logout icon
* Replace spaces with tabs in script
* Various minor fixes

Signed-off-by: Shun Jou <shunjou@gmail.com>
This commit is contained in:
shunjou 2019-02-18 20:52:16 -05:00
parent 731a2d3a0f
commit 7a2085a8e5
10 changed files with 585 additions and 571 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

755
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View file

File diff suppressed because it is too large Load diff

BIN
themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot
View file

Binary file not shown.

16
themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg
View file

@ -1,16 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe20a;" glyph-name="expand_less" d="M512 596.667l256-256-60-60-196 196-196-196-60 60z" />
<glyph unicode="&#xe20b;" glyph-name="expand_more" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" />
<glyph unicode="&#xe20e;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
<glyph unicode="&#xe291;" glyph-name="favorite" d="M512 28.667l-62 56q-106 96-154 142t-107 114-81 123-22 113q0 98 67 166t167 68q116 0 192-90 76 90 192 90 100 0 167-68t67-166q0-78-52-162t-113-146-199-186z" />
<glyph unicode="&#xe603;" glyph-name="spinner9" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96s96 42.98 96 96c0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96s-96-42.98-96-96c0-282.77 229.23-512 512-512z" />
<glyph unicode="&#xf059;" glyph-name="question-circle" horiz-adv-x="878" d="M512 164.571v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 548.571q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
</font></defs></svg>
Side by side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf
View file

Binary file not shown.

BIN
themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff
View file

Binary file not shown.

1
themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 221 B

1
themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#202124" d="M10.09,15.59L11.5,17l5,-5,-5,-5,-1.41,1.41L12.67,11H3v2h9.67l-2.58,2.59zM19,3H5c-1.11,0,-2,0.9,-2,2v4h2V5h14v14H5v-4H3v4c0,1.1,0.89,2,2,2h14c1.1,0,2,-0.9,2,-2V5c0,-1.1,-0.9,-2,-2,-2z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 275 B

1
themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m2.037076,18.641983l19.925899,0l0,-2.231286l-19.925899,0l0,2.231286zm0,-7.731664l0,2.179395l19.925899,0l0,-2.179395l-19.925899,0zm0,-5.552269l0,2.231286l19.925899,0l0,-2.231286l-19.925899,0z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 280 B

1
themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#888" d="M8,0c-4.355,0-7.898,3.481-7.998,7.812,0.092-3.779,2.966-6.812,6.498-6.812,3.59,0,6.5,3.134,6.5,7,0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5c0-4.418-3.582-8-8-8zM8,16c4.355,0,7.898-3.481,7.998-7.812-0.092,3.779-2.966,6.812-6.498,6.812-3.59,0-6.5-3.134-6.5-7,0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5c0,4.418,3.582,8,8,8z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 413 B

381
themes/luci-theme-material/htdocs/luci-static/material/js/script.js
View file

@ -1,219 +1,218 @@
/** /**
* Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
* *
* luci-theme-material * luci-theme-material
* Copyright 2015 Lutty Yang <lutty@wcan.in> * Copyright 2015 Lutty Yang <lutty@wcan.in>
* *
* Have a bug? Please create an issue here on GitHub! * Have a bug? Please create an issue here on GitHub!
* https://github.com/LuttyYang/luci-theme-material/issues * https://github.com/LuttyYang/luci-theme-material/issues
* *
* luci-theme-bootstrap: * luci-theme-bootstrap:
* Copyright 2008 Steven Barth <steven@midlink.org> * Copyright 2008 Steven Barth <steven@midlink.org>
* Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> * Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
* Copyright 2012 David Menting <david@nut-bolt.nl> * Copyright 2012 David Menting <david@nut-bolt.nl>
* *
* MUI: * MUI:
* https://github.com/muicss/mui * https://github.com/muicss/mui
* *
* Licensed to the public under the Apache License 2.0 * Licensed to the public under the Apache License 2.0
*/ */
(function ($) { (function ($) {
$(".main > .loading").fadeOut(); $(".main > .loading").fadeOut();
/** /**
* trim text, Remove spaces, wrap * trim text, Remove spaces, wrap
* @param text * @param text
* @returns {string} * @returns {string}
*/ */
function trimText(text) { function trimText(text) {
return text.replace(/[ \t\n\r]+/g, " "); return text.replace(/[ \t\n\r]+/g, " ");
} }
var lastNode = undefined;
var mainNodeName = undefined;
var lastNode = undefined; var nodeUrl = "";
var mainNodeName = undefined; (function(node){
var luciLocation;
if (node[0] == "admin"){
luciLocation = [node[1], node[2]];
}else{
luciLocation = node;
}
var nodeUrl = ""; for(var i in luciLocation){
(function(node){ nodeUrl += luciLocation[i];
var luciLocation; if (i != luciLocation.length - 1){
if (node[0] == "admin"){ nodeUrl += "/";
luciLocation = [node[1], node[2]]; }
}else{ }
luciLocation = node; })(luciLocation);
}
for(var i in luciLocation){ /**
nodeUrl += luciLocation[i]; * get the current node by Burl (primary)
if (i != luciLocation.length - 1){ * @returns {boolean} success?
nodeUrl += "/"; */
} function getCurrentNodeByUrl() {
} var ret = false;
})(luciLocation); if (!$('body').hasClass('logged-in')) {
luciLocation = ["Main", "Login"];
return true;
}
/** $(".main > .main-left > .nav > .slide > .menu").each(function () {
* get the current node by Burl (primary) var ulNode = $(this);
* @returns {boolean} success? ulNode.next().find("a").each(function () {
*/ var that = $(this);
function getCurrentNodeByUrl() { var href = that.attr("href");
var ret = false;
if (!$('body').hasClass('logged-in')) {
luciLocation = ["Main", "Login"];
return true;
}
$(".main > .main-left > .nav > .slide > .menu").each(function () { if (href.indexOf(nodeUrl) != -1) {
var ulNode = $(this); ulNode.click();
ulNode.next().find("a").each(function () { ulNode.next(".slide-menu").stop(true, true);
var that = $(this); lastNode = that.parent();
var href = that.attr("href"); lastNode.addClass("active");
ret = true;
return true;
}
});
});
return ret;
}
if (href.indexOf(nodeUrl) != -1) { /**
ulNode.click(); * menu click
ulNode.next(".slide-menu").stop(true, true); */
lastNode = that.parent(); $(".main > .main-left > .nav > .slide > .menu").click(function () {
lastNode.addClass("active"); var ul = $(this).next(".slide-menu");
ret = true; var menu = $(this);
return true; if (!ul.is(":visible")) {
} menu.addClass("active");
}); ul.addClass("active");
}); ul.stop(true).slideDown("fast");
return ret; } else {
} ul.stop(true).slideUp("fast", function () {
menu.removeClass("active");
ul.removeClass("active");
});
}
return false;
});
/** /**
* menu click * hook menu click and add the hash
*/ */
$(".main > .main-left > .nav > .slide > .menu").click(function () { $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
var ul = $(this).next(".slide-menu"); if (lastNode != undefined) lastNode.removeClass("active");
var menu = $(this); $(this).parent().addClass("active");
if (!ul.is(":visible")) { $(".main > .loading").fadeIn("fast");
menu.addClass("active"); return true;
ul.addClass("active"); });
ul.stop(true).slideDown("fast");
} else {
ul.stop(true).slideUp("fast", function () {
menu.removeClass("active");
ul.removeClass("active");
});
}
return false;
});
/** /**
* hook menu click and add the hash * fix menu click
*/ */
$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
if (lastNode != undefined) lastNode.removeClass("active"); if (lastNode != undefined) lastNode.removeClass("active");
$(this).parent().addClass("active"); $(this).addClass("active");
$(".main > .loading").fadeIn("fast"); $(".main > .loading").fadeIn("fast");
return true; window.location = $($(this).find("a")[0]).attr("href");
}); return false;
});
/** /**
* fix menu click * get current node and open it
*/ */
$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { if (getCurrentNodeByUrl()) {
if (lastNode != undefined) lastNode.removeClass("active"); mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
$(this).addClass("active"); mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
$(".main > .loading").fadeIn("fast"); $("body").addClass(mainNodeName);
window.location = $($(this).find("a")[0]).attr("href"); }
return false;
});
/** /**
* get current node and open it * Sidebar expand
*/ */
if (getCurrentNodeByUrl()) { var showSide = false;
mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; $(".showSide").click(function () {
mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); if (showSide) {
$("body").addClass(mainNodeName); $(".darkMask").stop(true).fadeOut("fast");
} $(".main-left").stop(true).animate({
$(".cbi-button-up").val(""); width: "0"
$(".cbi-button-down").val(""); }, "fast");
$(".main-right").css("overflow-y", "visible");
showSide = false;
} else {
$(".darkMask").stop(true).fadeIn("fast");
$(".main-left").stop(true).animate({
width: "15rem"
}, "fast");
$(".main-right").css("overflow-y", "hidden");
showSide = true;
}
});
/** $(".darkMask").click(function () {
* Sidebar expand if (showSide) {
*/ showSide = false;
var showSide = false; $(".darkMask").stop(true).fadeOut("fast");
$(".showSide").click(function () { $(".main-left").stop(true).animate({
if (showSide) { width: "0"
$(".darkMask").stop(true).fadeOut("fast"); }, "fast");
$(".main-left").stop(true).animate({ $(".main-right").css("overflow-y", "visible");
width: "0" }
}, "fast"); });
$(".main-right").css("overflow-y", "visible");
showSide = false;
} else {
$(".darkMask").stop(true).fadeIn("fast");
$(".main-left").stop(true).animate({
width: "15rem"
}, "fast");
$(".main-right").css("overflow-y", "hidden");
showSide = true;
}
});
$(window).resize(function () {
if ($(window).width() > 921) {
$(".main-left").css("width", "");
$(".darkMask").stop(true);
$(".darkMask").css("display", "none");
showSide = false;
}
});
$(".darkMask").click(function () { /**
if (showSide) { * fix legend position
showSide = false; */
$(".darkMask").stop(true).fadeOut("fast"); $("legend").each(function () {
$(".main-left").stop(true).animate({ var that = $(this);
width: "0" that.after("<span class='panel-title'>" + that.text() + "</span>");
}, "fast"); });
$(".main-right").css("overflow-y", "visible");
}
});
$(window).resize(function () { $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
if ($(window).width() > 921) { var that = $(this);
$(".main-left").css("width", ""); if (that.text().trim() == ""){
$(".darkMask").stop(true); that.css("display", "none");
$(".darkMask").css("display", "none"); }
showSide = false; });
}
});
/** $(".main-right").focus();
* fix legend position $(".main-right").blur();
*/ $("input").attr("size", "0");
$("legend").each(function () { $(".cbi-button-up").val("__");
var that = $(this); $(".cbi-button-down").val("__");
that.after("<span class='panel-title'>" + that.text() + "</span>"); $(".slide > a").removeAttr("href");
});
$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { if (mainNodeName != undefined) {
var that = $(this); console.log(mainNodeName);
if (that.text().trim() == ""){ switch (mainNodeName) {
that.css("display", "none"); case "node-status-system_log":
} case "node-status-kernel_log":
}); $("#syslog").focus(function () {
$("#syslog").blur();
$(".main-right").focus();
$(".main-right").focus(); $(".main-right").blur();
$(".main-right").blur(); });
$("input").attr("size", "0"); break;
case "node-status-firewall":
if (mainNodeName != undefined) { var button = $(".node-status-firewall > .main fieldset li > a");
console.log(mainNodeName); button.addClass("cbi-button cbi-button-reset a-to-btn");
switch (mainNodeName) { break;
case "node-status-system_log": case "node-system-reboot":
case "node-status-kernel_log": var button = $(".node-system-reboot > .main > .main-right p > a");
$("#syslog").focus(function () { button.addClass("cbi-button cbi-input-reset a-to-btn");
$("#syslog").blur(); break;
$(".main-right").focus(); }
$(".main-right").blur(); }
});
break;
case "node-status-firewall":
var button = $(".node-status-firewall > .main fieldset li > a");
button.addClass("cbi-button cbi-button-reset a-to-btn");
break;
case "node-system-reboot":
var button = $(".node-system-reboot > .main > .main-right p > a");
button.addClass("cbi-button cbi-input-reset a-to-btn");
break;
}
}
})(jQuery); })(jQuery);