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

v2.2.4

Browse Source 
- 【v2.2.4】Fix the problem that the login background cannot be displayed on some phones.
- 【v2.2.4】Remove the dependency of luasocket.
This commit is contained in:
jerrykuku 2020-08-21 13:15:16 +08:00
parent 0b2767ddfe
commit a2aa2e0b86
7 changed files with 126 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@ -8,13 +8,14 @@ include $(TOPDIR)/rules.mk
LUCI_TITLE:=Argon Theme
LUCI_DEPENDS:=+luasocket
PKG_VERSION:=2.2.3
PKG_RELEASE:=20200820
PKG_VERSION:=2.2.4
PKG_RELEASE:=20200821
include $(TOPDIR)/feeds/luci/luci.mk
define Package/luci-theme-argon/postinst
#!/bin/sh
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
rm -Rf /var/luci-modulecache
rm -Rf /var/luci-indexcache

72
README.md
View File

@ -25,13 +25,37 @@ 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
## Notice
v2.2 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.
## Update log 2020.08.21 v2.2.4
- 【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.3】Fix Firmware flash page display error in dark mode.
- 【v2.2.3】Update font icon, add a default icon of undefined menu.
- 【v2.2.2】Add custom login background,put your image (allow png jpg gif) or MP4 video into /www/luci-static/argon/background, random change.
- 【v2.2.2】Add force dark mode, login ssh and type "touch /etc/dark" to open dark mode.
- 【v2.2.2】Add a volume mute button for video background, default is muted.
- 【v2.2.2】fix login page when keyboard show the bottom text overlay the button on mobile.
- 【v2.2.2】fix select color in dark mode,and add a style for scrollbar.
- 【v2.2.2】jquery update to v3.5.1.
- 【v2.2.2】change request bing api method form wget to luasocket (DEPENDS).
- 【v2.2.1】Add blur effect for login form.
- 【v2.2.1】New login theme, Request background imge from bing.com, Auto change everyday.
- 【v2.2.1】New theme icon.
- 【v2.2.1】Add more menu category icon.
- 【v2.2.1】Fix font-size and padding margin.
- 【v2.2.1】Restructure css file.
- 【v2.2.1】Auto adapt to dark mode.
## How to build
Enter in your openwrt/package/lean or other
####Lean lede
### Lean lede
```
cd lede/package/lean
rm -rf luci-theme-argon
@ -40,7 +64,8 @@ make menuconfig #choose LUCI->Theme->Luci-theme-argon
make -j1 V=s
```
####Openwrt official SnapShots
### Openwrt official SnapShots
```
cd openwrt/package
git clone https://github.com/jerrykuku/luci-theme-argon.git
@ -48,49 +73,22 @@ make menuconfig #choose LUCI->Theme->Luci-theme-argon
make -j1 V=s
```
## Install
## How to Install
### For Lean openwrt 18.06 LuCI
```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.6.8/luci-theme-argon_1.6.8-20200820_all.ipk
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
opkg install luci-theme-argon*.ipk
```
### For openwrt official 19.07 Snapshots LuCI master
```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.3/luci-theme-argon_2.2.3-20200820_all.ipk
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
opkg install luci-theme-argon*.ipk
```
## Update log 2020.08.20 v2.2.3
- Fix Firmware flash page display error in dark mode【v2.2.3】
- Update font icon, add a default icon of undefined menu【v2.2.3】
- Add custom login background,put your image (allow png jpg gif) or MP4 video into /www/luci-static/argon/background, random change【v2.2.2】
- Add force dark mode, login ssh and type "touch /etc/dark" to open dark mode.【v2.2.2】
- Add a volume mute button for video background, default is muted.【v2.2.2】
- fix login page when keyboard show the bottom text overlay the button on mobile.【v2.2.2】
- fix select color in dark mode,and add a style for scrollbar.【v2.2.2】
- jquery update to v3.5.1【v2.2.2】
- change request bing api method form wget to luasocket (DEPENDS)【v2.2.2】
- Add blur effect for login form 【v2.2.1】
- New login theme, Request background imge from bing.com, Auto change everyday.
- New theme icon
- Add more menu category icon
- Fix font-size and padding margin
- Restructure css file
- Auto adapt to dark mode
## More Screenshots
![](/Screenshots/pc/light2.jpg)
![](/Screenshots/pc/light3.jpg)
![](/Screenshots/pc/dark2.jpg)
![](/Screenshots/pc/dark3.jpg)
![](/Screenshots/phone/light2.jpg)
![](/Screenshots/phone/light3.jpg)
![](/Screenshots/phone/dark2.jpg)
![](/Screenshots/phone/dark3.jpg)
## Thanks to
luci-theme-material: https://github.com/LuttyYang/luci-theme-material/

83
README_ZH.md
View File

@ -1,4 +1,4 @@
# luci-theme-argon ([Eng](/README.md))
# luci-theme-argon ([English](/README.md))
[1]: https://img.shields.io/badge/license-MIT-brightgreen.svg
[2]: /LICENSE
[3]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
@ -17,22 +17,45 @@
[![Release Count][9]][8]
[![Contact Me][10]][11]
![](/Screenshots/screenshot_pc.jpg)
![](/Screenshots/screenshot_phone.jpg)
全新的 Openwrt 主题，基于luci-theme-material 和 开源免费的 Argon 模板进行移植。
## 注意
当前master版本基于官方 OpenWrt 19.07.1 稳定版固件进行移植适配。
v2.2 适配主线快照版本。
v1.6.2 适配18.06 和 Lean Openwrt [如果你是lean代码 请选择这个版本]
v2.x.x 适配主线快照版本。
v1.x.x 适配18.06 和 Lean Openwrt [如果你是lean代码 请选择这个版本]
## 如何使用
## 更新日志 2020.08.21 v2.2.4
- 【v2.2.4】修复了在某些手机下图片背景第一次加载不能显示的问题。
- 【v2.2.4】取消 luasocket 的依赖，无需再担心依赖问题。
- 【v2.2.3】修正了在暗色模式下，固件刷写弹窗内的显示错误。
- 【v2.2.3】更新了图标库，为未定义的菜单增加了一个默认的图标。
- 【v2.2.2】背景文件策略调整为，同时接受 jpg png gif mp4, 自行上传文件至 /www/luci-static/argon/background 图片和视频同时随机。
- 【v2.2.2】增加强制暗色模式，进入ssh 输入 "touch /etc/dark" 进行开启。
- 【v2.2.2】视频背景加了一个音量开关，喜欢带声音的可以自行点击开启，默认为静音模式。
- 【v2.2.2】修复了手机模式下，登录页面出现键盘时，文字覆盖按钮的问题。
- 【v2.2.2】修正了暗黑模式下下拉选项的背景颜色，同时修改了滚动条的样式。
- 【v2.2.2】jquery 更新到 v3.5.1。
- 【v2.2.2】获取Bing Api 的方法从wget 更新到luasocket 并添加依赖。
- 【v2.2.1】登录背景添加毛玻璃效果。
- 【v2.2.1】全新的登录界面,图片背景跟随Bing.com，每天自动切换。
- 【v2.2.1】全新的主题icon。
- 【v2.2.1】增加多个导航icon。
- 【v2.2.1】细致的微调了 字号大小边距等等。
- 【v2.2.1】重构了css文件。
- 【v2.2.1】自动适应的暗黑模式。
## 如何编译
进入 openwrt/package/lean 或者其他目录
####Lean lede
### Lean源码
```
cd lede/package/lean
rm -rf luci-theme-argon
@ -41,57 +64,31 @@ make menuconfig #choose LUCI->Theme->Luci-theme-argon
make -j1 V=s
```
####Openwrt official SnapShots
### Openwrt 官方源码
```
cd openwrt/package
git clone https://github.com/jerrykuku/luci-theme-argon.git
make menuconfig #choose LUCI->Theme->Luci-theme-argon
make -j1 V=s
```
## 安装
### For Lean openwrt
## 如何安装
### Lean源码
```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v1.6.8/luci-theme-argon_1.6.8-20200820_all.ipk
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
opkg install luci-theme-argon*.ipk
```
### For openwrt official 19.07 Snapshots LuCI master
```
wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argon/releases/download/v2.2.3/luci-theme-argon_2.2.3-20200820_all.ipk
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
opkg install luci-theme-argon*.ipk
```
## 更新日志 2020.08.20 v2.2.3
- 修正了在暗色模式下，固件刷写弹窗内的显示错误。【v2.2.3】
- 更新了图标库，为未定义的菜单增加了一个默认的图标。【v2.2.3】
- 背景文件策略调整为，同时接受 jpg png gif mp4, 自行上传文件至 /www/luci-static/argon/background 图片和视频同时随机。【v2.2.2】
- 增加强制暗色模式，进入ssh 输入 "touch /etc/dark" 进行开启。【v2.2.2】
- 视频背景加了一个音量开关，喜欢带声音的可以自行点击开启，默认为静音模式【v2.2.2】
- 修复了手机模式下，登录页面出现键盘时，文字覆盖按钮的问题【v2.2.2】
- 修正了暗黑模式下下拉选项的背景颜色，同时修改了滚动条的样式【v2.2.2】
- jquery 更新到 v3.5.1【v2.2.2】
- 获取Bing Api 的方法从wget 更新到luasocket 并添加依赖【v2.2.2】
- 登录背景添加毛玻璃效果 【v2.2.1】
- 全新的登录界面,图片背景跟随Bing.com，每天自动切换
- 全新的主题icon
- 增加多个导航icon
- 细致的微调了 字号大小边距等等
- 重构了css文件
- 自动适应的暗黑模式
## 更多截图
![](/Screenshots/pc/light2.jpg)
![](/Screenshots/pc/light3.jpg)
![](/Screenshots/pc/dark2.jpg)
![](/Screenshots/pc/dark3.jpg)
![](/Screenshots/phone/light2.jpg)
![](/Screenshots/phone/light3.jpg)
![](/Screenshots/phone/dark2.jpg)
![](/Screenshots/phone/dark3.jpg)
## 感谢
luci-theme-material: https://github.com/LuttyYang/luci-theme-material/

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

@ -330,6 +330,18 @@ hr {
.login-page .volume-control.mute {
background-image: url(../img/volume_off.svg);
}
.login-page .main-bg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(../img/blank.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all 0.5s;
}
.login-page .login-container {
height: 100%;
margin-left: 4.5rem;

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

@ -392,6 +392,19 @@ hr {
}
}
.main-bg{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(../img/blank.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all 0.5s;
}
.login-container {
height: 100%;
margin-left: 4.5rem;

1
luasrc/view/themes/argon/footer.htm
View File

@ -43,5 +43,4 @@
</script>
<script src="<%=media%>/js/script.js"></script>
</body>
</html>

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

@ -71,7 +71,6 @@
</video>
</div>
<div class="volume-control mute"></div>
<script>
$(".volume-control").click(function(){
if($(this).hasClass("mute")){
@ -83,6 +82,25 @@
}
})
</script>
<% else %>
<div class="main-bg" id="main-bg"
<%
if (bgcount == 0 ) then
local http = require "luci.sys"
local json = require "luci.jsonc"
local bg_url = media .. "/img/bg1.jpg"
local bing = http.httpget("http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US")
if (bing and bing ~= '') then
local bingjson = json.parse(bing)
bg_url = "https://www.bing.com" .. bingjson.images[1].url
end
%>
style="background-image:url(<%=bg_url%>)"
<% elseif (bgcount > 0 and currentBg["type"] ~= "mp4") then %>
style="background-image:url(<%=currentBg.url%>)"
<% end %>
></div>
<% end %>
<div class="login-container">
<div class="login-form">
@ -115,32 +133,6 @@
input.focus();
//]]></script>
<%
if (bgcount == 0 ) then
local bingjson = "{}"
local http = require "socket.http"
local bing = http.request("http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US")
if (bing and bing ~= '') then
bingjson = bing
end
%>
<script type="text/javascript">//<![CDATA[
try {
var bing = <%=bingjson%>;
var bg = "https://www.bing.com" + bing.images[0].url;
$(".login-page").css("background-image", "url(" + bg + ")");
} catch{
console.log("can not access bing api");
$(".login-page").css("background-image", "url(<%=media%>/img/bg1.jpg)");
}
//]]></script>
<% elseif (bgcount > 0 and currentBg["type"] ~= "mp4") then%>
<script type="text/javascript">//<![CDATA[
console.log("can not access bing api");
$(".login-page").css("background-image", "url(<%=currentBg.url%>)");
//]]></script>
<%
end
local uci = require "luci.model.uci".cursor()
local fs = require "nixio.fs"
local https_key = uci:get("uhttpd", "main", "key")