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

78
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.
You can checkout branch 18.06 for OpenWRT 18.06 or lean 19.07.
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
Enter in your openwrt/package/lean or other
### 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
### 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】
## Thanks to
- 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;

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

@ -43,5 +43,4 @@
</script>
<script src="<%=media%>/js/script.js"></script>
</body>
</html>
</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")