zhao/luci-theme-argon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.2.5

Browse Source
This commit is contained in:
jerrykuku 2020-09-13 22:08:31 +08:00
parent 3d1e6946b3
commit f65f9e32ac
11 changed files with 472 additions and 5507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile
View File

@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk
LUCI_TITLE:=Argon Theme LUCI_TITLE:=Argon Theme
LUCI_DEPENDS:= LUCI_DEPENDS:=
PKG_VERSION:=2.2.4 PKG_VERSION:=2.2.5
PKG_RELEASE:=20200821 PKG_RELEASE:=20200913
include $(TOPDIR)/feeds/luci/luci.mk include $(TOPDIR)/feeds/luci/luci.mk

16
README.md
View File

@ -6,7 +6,7 @@
[4]: https://github.com/jerrykuku/luci-theme-argon/pulls [4]: https://github.com/jerrykuku/luci-theme-argon/pulls
[5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg [5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg
[6]: https://github.com/jerrykuku/luci-theme-argon/issues/new [6]: https://github.com/jerrykuku/luci-theme-argon/issues/new
[7]: https://img.shields.io/badge/release-v2.2.4-blue.svg? [7]: https://img.shields.io/badge/release-v2.2.5-blue.svg?
[8]: https://github.com/jerrykuku/luci-theme-argon/releases [8]: https://github.com/jerrykuku/luci-theme-argon/releases
[9]: https://img.shields.io/github/downloads/jerrykuku/luci-theme-argon/total [9]: https://img.shields.io/github/downloads/jerrykuku/luci-theme-argon/total
[10]: https://img.shields.io/badge/Contact-telegram-blue [10]: https://img.shields.io/badge/Contact-telegram-blue
@ -25,12 +25,20 @@ A new Luci theme for LEDE/OpenWRT
Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
## Notice ## Notice
It is strongly recommended to use the Chrome browser. Some new css3 features are used in the theme, and currently only Chrome has the best compatibility.
The mainline version of IE series currently has bugs to be resolved.
FireFox does not enable the backdrop-filter by default, see here for the opening method: https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter
v2.x.x Adapt to official mainline snapshot. v2.x.x Adapt to official mainline snapshot.
You can checkout branch 18.06 for OpenWRT 18.06 or lean 19.07. You can checkout branch 18.06 for OpenWRT 18.06 or lean 19.07.
## Update log 2020.08.21 v2.2.4 ## 更新日志 2020.09.13 v2.2.5
- 【v2.2.5】New config app for argon theme. You can set the blur and transparency of the login page of argon theme, and manage the background pictures and videos.[Chrome is recommended] [Download](https://github.com/jerrykuku/luci-app-argon-config/releases/download/v0.8-beta/luci-app-argon-config_0.8-beta_all.ipk)
- 【v2.2.5】Automatically set as the default theme when compiling.
- 【v2.2.5】Modify the file structure to adapt to luci-app-argon-config. The old method of turning on dark mode is no longer applicable, please use it with luci-app-argon-config.
- 【v2.2.5】Adapt to Koolshare lede 2.3.6。
- 【v2.2.5】Fix some Bug。
- 【v2.2.4】Fix the problem that the login background cannot be displayed on some phones. - 【v2.2.4】Fix the problem that the login background cannot be displayed on some phones.
- 【v2.2.4】Remove the dependency of luasocket. - 【v2.2.4】Remove the dependency of luasocket.
- 【v2.2.3】Fix Firmware flash page display error in dark mode. - 【v2.2.3】Fix Firmware flash page display error in dark mode.
@ -78,14 +86,14 @@ make -j1 V=s
### For Lean openwrt 18.06 LuCI ### For Lean openwrt 18.06 LuCI
``` ```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.6.9/luci-theme-argon_1.6.9-20200821_all.ipk wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.7.0/luci-theme-argon_1.7.0-20200909_all.ipk
opkg install luci-theme-argon*.ipk opkg install luci-theme-argon*.ipk
``` ```
### For openwrt official 19.07 Snapshots LuCI master ### For openwrt official 19.07 Snapshots LuCI master
``` ```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.4/luci-theme-argon_2.2.4-20200821_all.ipk wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.5/luci-theme-argon_2.2.5-20200913_all.ipk
opkg install luci-theme-argon*.ipk opkg install luci-theme-argon*.ipk
``` ```

17
README_ZH.md
View File

@ -5,7 +5,7 @@
[4]: https://github.com/jerrykuku/luci-theme-argon/pulls [4]: https://github.com/jerrykuku/luci-theme-argon/pulls
[5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg [5]: https://img.shields.io/badge/Issues-welcome-brightgreen.svg
[6]: https://github.com/jerrykuku/luci-theme-argon/issues/new [6]: https://github.com/jerrykuku/luci-theme-argon/issues/new
[7]: https://img.shields.io/badge/release-v2.2.4-blue.svg? [7]: https://img.shields.io/badge/release-v2.2.5-blue.svg?
[8]: https://github.com/jerrykuku/luci-theme-argon/releases [8]: https://github.com/jerrykuku/luci-theme-argon/releases
[9]: https://img.shields.io/github/downloads/jerrykuku/luci-theme-argon/total [9]: https://img.shields.io/github/downloads/jerrykuku/luci-theme-argon/total
[10]: https://img.shields.io/badge/Contact-telegram-blue [10]: https://img.shields.io/badge/Contact-telegram-blue
@ -23,14 +23,21 @@
全新的 Openwrt 主题，基于luci-theme-material 和 开源免费的 Argon 模板进行移植。 全新的 Openwrt 主题，基于luci-theme-material 和 开源免费的 Argon 模板进行移植。
## 注意 ## 注意
强烈建议使用Chrome 浏览器。主题中使用了一些新的css3特性，目前只有Chrome有最佳的兼容性。
主线版本 IE 系列目前还有Bug有待解决。
FireFox 默认不开启backdrop-filter，开启方法见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter
当前master版本基于官方 OpenWrt 19.07.1 稳定版固件进行移植适配。 当前master版本基于官方 OpenWrt 19.07.1 稳定版固件进行移植适配。
v2.x.x 适配主线快照版本。 v2.x.x 适配主线快照版本。
v1.x.x 适配18.06 和 Lean Openwrt [如果你是lean代码 请选择这个版本] v1.x.x 适配18.06 和 Lean Openwrt [如果你是lean代码 请选择这个版本]
## 更新日志 2020.08.21 v2.2.4 ## 更新日志 2020.09.13 v2.2.5
- 【v2.2.5】全新的设置app.你可以设置argon 主题的登录页面的模糊和透明度，并管理背景图片与视频。[建议使用 Chrome][点击下载](https://github.com/jerrykuku/luci-app-argon-config/releases/download/v0.8-beta/luci-app-argon-config_0.8-beta_all.ipk)
- 【v2.2.5】当编译固件时，将自动设置为默认主题。
- 【v2.2.5】修改文件结构，以适应luci-app-argon-config，旧的开启暗色模式方法将不再适用，请搭配luci-app-argon-config使用。
- 【v2.2.5】适配Koolshare lede 2.3.6。
- 【v2.2.5】修复了一些Bug。
- 【v2.2.4】修复了在某些手机下图片背景第一次加载不能显示的问题。 - 【v2.2.4】修复了在某些手机下图片背景第一次加载不能显示的问题。
- 【v2.2.4】取消 luasocket 的依赖，无需再担心依赖问题。 - 【v2.2.4】取消 luasocket 的依赖，无需再担心依赖问题。
- 【v2.2.3】修正了在暗色模式下，固件刷写弹窗内的显示错误。 - 【v2.2.3】修正了在暗色模式下，固件刷写弹窗内的显示错误。
@ -78,14 +85,14 @@ make -j1 V=s
### Lean源码 ### Lean源码
``` ```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.6.9/luci-theme-argon_1.6.9-20200821_all.ipk wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.7.0/luci-theme-argon_1.7.0-20200909_all.ipk
opkg install luci-theme-argon*.ipk opkg install luci-theme-argon*.ipk
``` ```
### For openwrt official 19.07 Snapshots LuCI master ### For openwrt official 19.07 Snapshots LuCI master
``` ```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.4/luci-theme-argon_2.2.4-20200821_all.ipk wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.5/luci-theme-argon_2.2.5-20200913_all.ipk
opkg install luci-theme-argon*.ipk opkg install luci-theme-argon*.ipk
``` ```

3800
htdocs/luci-static/argon/css/cascade.css
View File

File diff suppressed because one or more lines are too long

628
htdocs/luci-static/argon/css/dark.css
View File

File diff suppressed because one or more lines are too long

5
htdocs/luci-static/argon/js/script.js
View File

@ -89,6 +89,11 @@ document.addEventListener('luci-loaded', function(ev) {
$(".main > .main-left > .nav > .slide > .menu").click(function () { $(".main > .main-left > .nav > .slide > .menu").click(function () {
var ul = $(this).next(".slide-menu"); var ul = $(this).next(".slide-menu");
var menu = $(this); var menu = $(this);
$(".main > .main-left > .nav > .slide > .menu").each(function () {
var ulNode = $(this);
ulNode.removeClass("active");
ulNode.next(".slide-menu").stop(true).slideUp("fast")
});
if (!ul.is(":visible")) { if (!ul.is(":visible")) {
menu.addClass("active"); menu.addClass("active");
ul.addClass("active"); ul.addClass("active");

1059
htdocs/luci-static/argon/less/cascade.less
View File

File diff suppressed because it is too large Load Diff

60
htdocs/luci-static/argon/less/dark.less
View File

@ -1,3 +1,4 @@
// compress: true
/** /**
* Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template
* *
@ -61,11 +62,12 @@ body {
} }
.cbi-button-apply { .cbi-button-apply {
background-image: linear-gradient(-135deg, #6c61ab 0%, #594ca9 100%); background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
&:hover, &:hover,
&:focus { &:focus {
background-image: linear-gradient(-135deg, rgb(85, 76, 138) 0%, rgb(72, 61, 139) 100%); opacity: 0.9;
} }
} }
} }
@ -113,7 +115,8 @@ header::after {
} }
.menu.active { .menu.active {
background-color: darkslateblue !important; background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
color: #cccccc !important; color: #cccccc !important;
a::after { a::after {
@ -128,7 +131,8 @@ header::after {
} }
a:hover { a:hover {
background-color: darkslateblue !important; background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
color: #cccccc !important; color: #cccccc !important;
} }
} }
@ -163,7 +167,8 @@ h3 {
a:-webkit-any-link { a:-webkit-any-link {
color: -webkit-link; color: -webkit-link;
cursor: pointer; cursor: pointer;
color: darkslateblue; color: #483d8b;
color: var(--dark-primary);
} }
@ -175,8 +180,10 @@ input:-webkit-autofill {
.cbi-button-apply, .cbi-button-apply,
.cbi-button-edit { .cbi-button-edit {
color: #fff !important; color: #fff !important;
background-color: darkslateblue !important; background-color: #483d8b !important;
border-color: darkslateblue !important; background-color: var(--dark-primary) !important;
border-color: #483d8b !important;
border-color: var(--dark-primary) !important;
} }
@ -316,7 +323,8 @@ h4 {
.cbi-button { .cbi-button {
color: #ccc !important; color: #ccc !important;
background-color: darkslateblue; background-color: #483d8b;
background-color: var(--dark-primary);
} }
.cbi-section-node { .cbi-section-node {
@ -361,7 +369,8 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
.tabs>li[class~="active"], .tabs>li[class~="active"],
.tabs>li:hover { .tabs>li:hover {
border-bottom: 0.18751rem solid darkslateblue; border-bottom: 0.18751rem solid #483d8b;
border-bottom: 0.18751rem solid var(--dark-primary);
color: #ccc; color: #ccc;
background-color: #181819; background-color: #181819;
} }
@ -410,7 +419,8 @@ input {
select:not([multiple="multiple"]):focus, select:not([multiple="multiple"]):focus,
input:focus { input:focus {
border-color: darkslateblue !important; border-color: #483d8b !important;
border-color: var(--dark-primary) !important;
outline: 0; outline: 0;
} }
@ -515,7 +525,8 @@ td.cbi-value-field var {
} }
.node-services-vssr .cbi-section-table-row.fast { .node-services-vssr .cbi-section-table-row.fast {
background: darkslateblue !important; background: #483d8b !important;
background: var(--dark-primary) !important;
color: #fff; color: #fff;
} }
@ -535,7 +546,8 @@ td.cbi-value-field var {
} }
.notice { .notice {
background-color: darkslateblue !important; background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
} }
.cbi-input-find, .cbi-input-find,
@ -563,7 +575,8 @@ td.cbi-value-field var {
.cbi-button-apply.important, .cbi-button-apply.important,
.cbi-button-reload.important, .cbi-button-reload.important,
.cbi-button-action.important { .cbi-button-action.important {
border: 1px darkslateblue solid !important; border: 1px #483d8b solid !important;
border: 1px var(--dark-primary) solid !important;
} }
.btn[value="Dismiss"], .btn[value="Dismiss"],
@ -619,7 +632,8 @@ header .fill .status span[data-style="active"] {
td>.ifacebadge, td>.ifacebadge,
.td>.ifacebadge { .td>.ifacebadge {
background-color: darkslateblue; background-color: #483d8b;
background-color: var(--dark-primary);
border: 0; border: 0;
} }
@ -684,7 +698,8 @@ div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] {
} }
.cbi-value input[type="password"]+.cbi-button-neutral { .cbi-value input[type="password"]+.cbi-button-neutral {
background-color: darkslateblue !important; background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
} }
.btn, .btn,
@ -722,7 +737,8 @@ input,
} }
.cbi-dropdown[open] { .cbi-dropdown[open] {
border-color: darkslateblue !important; border-color: #483d8b !important;
border-color: var(--dark-primary) !important;
} }
.cbi-dropdown[open]>ul.dropdown { .cbi-dropdown[open]>ul.dropdown {
@ -740,12 +756,14 @@ input,
} }
.cbi-dropdown[open]>ul.dropdown>li[selected] { .cbi-dropdown[open]>ul.dropdown>li[selected] {
background-color: darkslateblue !important; background-color: #483d8b !important;
background-color: var(--dark-primary) !important;
border-bottom: 1px solid #3c3c3c !important; border-bottom: 1px solid #3c3c3c !important;
} }
.cbi-dropdown[open]>ul.dropdown>li.focus { .cbi-dropdown[open]>ul.dropdown>li.focus {
background: darkslateblue; background: #483d8b;
background: var(--dark-primary);
outline: none; outline: none;
} }
@ -767,7 +785,8 @@ input,
.cbi-button[value="Upload"], .cbi-button[value="Upload"],
.cbi-button[value$="Apply"], .cbi-button[value$="Apply"],
.cbi-button[onclick="addKey(event)"] { .cbi-button[onclick="addKey(event)"] {
background: darkslateblue !important; background: #483d8b !important;
background: var(--dark-primary) !important;
} }
.btn.primary, .btn.primary,
@ -781,7 +800,8 @@ input,
.cbi-button[value="Scan"], .cbi-button[value="Scan"],
.cbi-button[value^="Back"], .cbi-button[value^="Back"],
.cbi-button-neutral[onclick="handleConfig(event)"] { .cbi-button-neutral[onclick="handleConfig(event)"] {
background: darkslateblue; background: #483d8b;
background: var(--dark-primary);
} }
[data-page="admin-system-opkg"] h2 { [data-page="admin-system-opkg"] h2 {

105
luasrc/view/themes/argon/header.htm
View File

@ -28,10 +28,27 @@
local fs = require "nixio.fs" local fs = require "nixio.fs"
local nutil = require "nixio.util" local nutil = require "nixio.util"
local uci = require 'luci.model.uci'.cursor()
-- send as HTML5 -- send as HTML5
http.prepare_content("text/html") http.prepare_content("text/html")
math.randomseed(os.time()) math.randomseed(os.time())
-- Custom settings
local mode = 'normal'
local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css')
local bar_color = '#5e72e4'
local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
if fs.access('/etc/config/argon') then
primary = uci:get_first('argon', 'global', 'primary')
dark_primary = uci:get_first('argon', 'global', 'dark_primary')
blur_radius = uci:get_first('argon', 'global', 'blur')
blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark')
blur_opacity = uci:get_first('argon', 'global', 'transparency')
blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark')
mode = uci:get_first('argon', 'global', 'mode')
bar_color = mode == 'dark' and dark_primary or primary
end
-%> -%>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>"> <html lang="<%=luci.i18n.context.lang%>">
@ -50,7 +67,7 @@
<meta name="x5-page-mode" content="app"> <meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application"> <meta name="browsermode" content="application">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="#5e72e4"> <meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
@ -61,13 +78,29 @@
<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
<link rel="manifest" href="<%=media%>/icon/manifest.json"> <link rel="manifest" href="<%=media%>/icon/manifest.json">
<meta name="msapplication-TileColor" content="#5e72e4"> <meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#5e72e4"> <meta name="theme-color" content="<%=bar_color%>">
<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>"> <link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
<% if nixio.fs.access("/etc/dark") then %> <style title="text/css">
<link rel="stylesheet" href="<%=media%>/css/dark.css?v=<%=math.random(1,100000)%>"> <% if mode == 'normal' then %>
@media (prefers-color-scheme: dark) {
<%=dark_css%>
}
<% elseif mode == 'dark' then %>
<%=dark_css%>
<% end -%> <% end -%>
<% if fs.access('/etc/config/argon') then %>
:root {
--primary: <%=primary%>;
--dark-primary: <%=dark_primary%>;
--blur-radius:<%=blur_radius%>px;
--blur-opacity:<%=blur_opacity%>;
--blur-radius-dark:<%=blur_radius_dark%>px;
--blur-opacity-dark:<%=blur_opacity_dark%>;
}
<% end -%>
</style>
<link rel="shortcut icon" href="<%=media%>/favicon.ico"> <link rel="shortcut icon" href="<%=media%>/favicon.ico">
<% if node and node.css then %> <% if node and node.css then %>
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
@ -77,131 +110,105 @@
<%=css %> <%=css %>
</style> </style>
<% end -%> <% end -%>
<script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script> <script src=”https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script> <script src="<%=url('admin/translations', luci.i18n.context.lang)%>?v=2.2.4"></script>
<script src="<%=resource%>/luci.js<%# ?v=PKG_VERSION %>"></script> <script src="<%=resource%>/cbi.js?v=2.2.4"></script>
<script src="<%=media%>/js/jquery.min.js<%# ?v=PKG_VERSION %>"></script> <script src="<%=resource%>/luci.js?v=2.2.4"></script>
<script src="<%=media%>/js/jquery.min.js?v=2.2.4"></script>
<script type="text/javascript">//<![CDATA[ <script type="text/javascript">//<![CDATA[
function EF() { return L.dom.create.apply(L.dom, arguments) }
(function() { (function() {
function get_children(node) { function get_children(node) {
var children = []; var children = [];
for (var k in node.children) { for (var k in node.children) {
if (!node.children.hasOwnProperty(k)) if (!node.children.hasOwnProperty(k))
continue; continue;
if (!node.children[k].satisfied) if (!node.children[k].satisfied)
continue; continue;
if (!node.children[k].hasOwnProperty('title')) if (!node.children[k].hasOwnProperty('title'))
continue; continue;
children.push(Object.assign(node.children[k], { name: k })); children.push(Object.assign(node.children[k], { name: k }));
} }
return children.sort(function(a, b) { return children.sort(function(a, b) {
return ((a.order || 1000) - (b.order || 1000)); return ((a.order || 1000) - (b.order || 1000));
}); });
} }
function render_mainmenu(tree, url, level) { function render_mainmenu(tree, url, level) {
var l = (level || 0) + 1, var l = (level || 0) + 1,
ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }), ul = EF('ul', { 'class': level ? 'slide-menu' : 'nav' }),
children = get_children(tree); children = get_children(tree);
if (children.length == 0 || l > 2) if (children.length == 0 || l > 2)
return E([]); return EF([]);
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
var submenu = render_mainmenu(children[i], url + '/' + children[i].name, l), var submenu = render_mainmenu(children[i], url + '/' + children[i].name, l),
hasChildren = submenu.children.length; hasChildren = submenu.children.length;
isLogout = (children[i].name == 'logout'); ul.appendChild(EF('li', { 'class': hasChildren ? 'slide' : null }, [
ul.appendChild(E('li', { 'class': hasChildren ? 'slide' : isLogout ? 'lg' : null }, [ EF('a', {
E('a', {
'href': hasChildren ? '#' : L.url(url, children[i].name), 'href': hasChildren ? '#' : L.url(url, children[i].name),
'class': hasChildren ? 'menu' : isLogout ? "logout" : null, 'class': hasChildren ? 'menu' : null,
'data-title': children[i].title.replace(" ", "_"), 'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"),
}, [ _(children[i].title) ]), }, [ _(children[i].title) ]),
submenu submenu
])); ]));
} }
if (l == 1) { if (l == 1) {
var container = document.querySelector('#mainmenu'); var container = document.querySelector('#mainmenu');
container.appendChild(ul); container.appendChild(ul);
container.style.display = ''; container.style.display = '';
} }
return ul; return ul;
} }
function render_modemenu(tree) { function render_modemenu(tree) {
var ul = document.querySelector('#modemenu'), var ul = document.querySelector('#modemenu'),
children = get_children(tree); children = get_children(tree);
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
ul.appendChild(EF('li', {}, [
ul.appendChild(E('li', {}, [ EF('a', {
E('a', {
'href': L.url(children[i].name), 'href': L.url(children[i].name),
'class': isActive ? 'active' : null 'class': isActive ? 'active' : null
}, [ _(children[i].title) ]) }, [ _(children[i].title) ])
])); ]));
if (isActive) if (isActive)
render_mainmenu(children[i], children[i].name); render_mainmenu(children[i], children[i].name);
} }
if (ul.children.length > 1) if (ul.children.length > 1)
ul.style.display = ''; ul.style.display = '';
} }
function render_tabmenu(tree, url, level) { function render_tabmenu(tree, url, level) {
var container = document.querySelector('#tabmenu'), var container = document.querySelector('#tabmenu'),
l = (level || 0) + 1, l = (level || 0) + 1,
ul = E('ul', { 'class': 'tabs' }), ul = EF('ul', { 'class': 'tabs' }),
children = get_children(tree), children = get_children(tree),
activeNode = null; activeNode = null;
if (children.length == 0) if (children.length == 0)
return E([]); return EF([]);
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
var isActive = (L.env.dispatchpath[l + 2] == children[i].name), var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
activeClass = isActive ? ' active' : '', activeClass = isActive ? ' active' : '',
className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
ul.appendChild(EF('li', { 'class': className }, [
ul.appendChild(E('li', { 'class': className }, [ EF('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
E('a', { 'href': L.url(url, children[i].name) }, [_(children[i].title)])
])); ]));
if (isActive) if (isActive)
activeNode = children[i]; activeNode = children[i];
} }
container.appendChild(ul); container.appendChild(ul);
container.style.display = ''; container.style.display = '';
if (activeNode) if (activeNode)
container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l)); container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));
return ul; return ul;
} }
document.addEventListener('luci-loaded', function(ev) { document.addEventListener('luci-loaded', function(ev) {
var tree = <%= luci.http.write_json(luci.dispatcher.menu_json() or {}) %>, var tree = <%= luci.http.write_json(luci.dispatcher.menu_json() or {}) %>,
node = tree, node = tree,
url = ''; url = '';
render_modemenu(tree); render_modemenu(tree);
if (L.env.dispatchpath.length >= 3) { if (L.env.dispatchpath.length >= 3) {
for (var i = 0; i < 3 && node; i++) { for (var i = 0; i < 3 && node; i++) {
node = node.children[L.env.dispatchpath[i]]; node = node.children[L.env.dispatchpath[i]];
url = url + (url ? '/' : '') + L.env.dispatchpath[i]; url = url + (url ? '/' : '') + L.env.dispatchpath[i];
} }
if (node) if (node)
render_tabmenu(node, url); render_tabmenu(node, url);
} }

46
luasrc/view/themes/argon/header_login.htm
View File

@ -26,11 +26,29 @@
local node = disp.context.dispatched local node = disp.context.dispatched
local fs = require "nixio.fs" local fs = require "nixio.fs"
local nutil = require "nixio.util" local nutil = require "nixio.util"
local uci = require 'luci.model.uci'.cursor()
-- send as HTML5 -- send as HTML5
http.prepare_content("text/html") http.prepare_content("text/html")
math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9))) math.randomseed(tonumber(tostring(os.time()):reverse():sub(1, 9)))
-- Custom settings
local mode = 'normal'
local dark_css = fs.readfile('/www/luci-static/argon/css/dark.css')
local bar_color = '#5e72e4'
local primary, dark_primary, blur_radius, blur_radius_dark, blur_opacity
if fs.access('/etc/config/argon') then
primary = uci:get_first('argon', 'global', 'primary')
dark_primary = uci:get_first('argon', 'global', 'dark_primary')
blur_radius = uci:get_first('argon', 'global', 'blur')
blur_radius_dark = uci:get_first('argon', 'global', 'blur_dark')
blur_opacity = uci:get_first('argon', 'global', 'transparency')
blur_opacity_dark = uci:get_first('argon', 'global', 'transparency_dark')
mode = uci:get_first('argon', 'global', 'mode')
bar_color = mode == 'dark' and dark_primary or primary
end
-%> -%>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>"> <html lang="<%=luci.i18n.context.lang%>">
@ -49,7 +67,7 @@
<meta name="x5-page-mode" content="app"> <meta name="x5-page-mode" content="app">
<meta name="browsermode" content="application"> <meta name="browsermode" content="application">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="msapplication-TileColor" content="#5e72e4"> <meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
<link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="60x60" href="<%=media%>/icon/apple-icon-60x60.png">
@ -60,14 +78,30 @@
<link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="96x96" href="<%=media%>/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="<%=media%>/icon/favicon-16x16.png">
<link rel="manifest" href="<%=media%>/icon/manifest.json"> <link rel="manifest" href="<%=media%>/icon/manifest.json">
<meta name="msapplication-TileColor" content="#5e72e4"> <meta name="msapplication-TileColor" content="<%=bar_color%>">
<meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="<%=media%>/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#5e72e4"> <meta name="theme-color" content="<%=bar_color%>">
<link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>"> <link rel="stylesheet" href="<%=media%>/css/cascade.css?v=<%=math.random(1,100000)%>">
<link rel="shortcut icon" href="<%=media%>/favicon.ico"> <style title="text/css">
<% if nixio.fs.access("/etc/dark") then %> <% if mode == 'normal' then %>
<link rel="stylesheet" href="<%=media%>/css/dark.css?v=<%=math.random(1,100000)%>"> @media (prefers-color-scheme: dark) {
<%=dark_css%>
}
<% elseif mode == 'dark' then %>
<%=dark_css%>
<% end -%> <% end -%>
<% if fs.access('/etc/config/argon') then %>
:root {
--primary: <%=primary%>;
--dark-primary: <%=dark_primary%>;
--blur-radius:<%=blur_radius%>px;
--blur-opacity:<%=blur_opacity%>;
--blur-radius-dark:<%=blur_radius_dark%>px;
--blur-opacity-dark:<%=blur_opacity_dark%>;
}
<% end -%>
</style>
<link rel="shortcut icon" href="<%=media%>/favicon.ico">
<% if node and node.css then %> <% if node and node.css then %>
<link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
<% end -%> <% end -%>

1
root/etc/uci-defaults/30_luci-theme-argon → root/etc/uci-defaults/39_luci-theme-argon
View File

@ -4,6 +4,7 @@ uci batch <<-EOF
set luci.main.mediaurlbase=/luci-static/argon set luci.main.mediaurlbase=/luci-static/argon
commit luci commit luci
EOF EOF
sed -i ":a;$!N;s/tmpl.render.*sysauth_template.*return/local scope = { duser = default_user, fuser = user }\nlocal ok, res = luci.util.copcall\(luci.template.render_string, [[<% include\(\"themes\/\" .. theme .. \"\/sysauth\"\) %>]], scope\)\nif ok then\nreturn res\nend\nreturn luci.template.render\(\"sysauth\", scope\)/;ba" /usr/lib/lua/luci/dispatcher.lua
[ -f /usr/lib/lua/luci/view/themes/argon/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argon/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm [ -f /usr/lib/lua/luci/view/themes/argon/out_header_login.htm ] && mv -f /usr/lib/lua/luci/view/themes/argon/out_header_login.htm /usr/lib/lua/luci/view/header_login.htm
rm -Rf /var/luci-modulecache rm -Rf /var/luci-modulecache
rm -Rf /var/luci-indexcache rm -Rf /var/luci-indexcache