Browse Source

Merge pull request #2509 from shunjou/material-svg

luci-theme-material: icons and other changes
Jo-Philipp Wich 5 years ago
parent
commit
4409bc2964

File diff suppressed because it is too large
+ 272 - 257
themes/luci-theme-material/htdocs/luci-static/material/cascade.css


+ 1 - 0
themes/luci-theme-material/htdocs/luci-static/material/custom.css

@@ -6,6 +6,7 @@
 	--menu-bg-color: #fff;
 	--menu-color: #5f6368;
 	--menu-color-hover: #202124;
+	--main-menu-color: #202124;
 	--submenu-bg-hover: #d4d4d4;
 	--submenu-bg-hover-active: #09c;
 	--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";

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


+ 0 - 16
themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg

@@ -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>

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


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


+ 1 - 0
themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg

@@ -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>

+ 1 - 0
themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg

@@ -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>

+ 1 - 0
themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg

@@ -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>

+ 1 - 0
themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg

@@ -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>

+ 208 - 209
themes/luci-theme-material/htdocs/luci-static/material/js/script.js

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

Some files were not shown because too many files changed in this diff