update 2023-02-28 22:21:47

luci-theme-design/Makefile

@@ -5,10 +5,10 @@
 
 include $(TOPDIR)/rules.mk
 
-LUCI_TITLE:=Neobird Theme
+LUCI_TITLE:=Design Theme
 LUCI_DEPENDS:=
-PKG_VERSION:=2.0
-PKG_RELEASE:=202202260758
+PKG_VERSION:=5.2.8
+PKG_RELEASE:=20230228
 
 include $(TOPDIR)/feeds/luci/luci.mk
 

luci-theme-design/README.md

@@ -0,0 +1,102 @@
+<div align="center">
+  <h1 align="center">
+    LuCI design theme for OpenWrt
+  </h1>
+<a href="/LICENSE">
+    <img src="https://img.shields.io/github/license/gngpp/luci-theme-design?style=flat&a=1" alt="">
+  </a>
+  <a href="https://github.com/gngpp/luci-theme-design/pulls">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" alt="">
+  </a><a href="https://github.com/gngpp/luci-theme-design/issues/new">
+    <img src="https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat">
+  </a><a href="https://github.com/gngpp/luci-theme-design/releases">
+    <img src="https://img.shields.io/github/release/gngpp/luci-theme-design.svg?style=flat">
+  </a><a href="hhttps://github.com/gngpp/luci-theme-design/releases">
+    <img src="https://img.shields.io/github/downloads/gngpp/luci-theme-design/total?style=flat">
+  </a>
+</div>
+<br>
+
+<br>English | [简体中文](README_zh.md)
+
+# luci-theme-design
+
+luci-theme-design is an OpenWrt LuCI theme for immersive WebApp experience and optimization on mobile and PC
+
+> **luci-theme-design** based on luci-theme-neobird, suitable for [lede](https://github.com/coolsnowwolf/lede) / [OpenWrt](https://github.com/openwrt/openwrt ).
+> The default branch only supports the lua version of the lede source code. If you use openwrt 21/22, please pull the [js](https://github.com/gngpp/luci-theme-design/tree/js) version(Development stage).
+
+### Release version
+
+- Lua version select 5.x version
+- JS version select 6.x version
+
+### Features
+
+- Optimized for the mobile terminal, especially suitable for the mobile terminal as a WebApp
+- Modified and optimized the display of many plug-ins, improved icon icons, and unified visuals as much as possible
+- Simple login interface, bottom navigation bar, immersive app-like experience;
+- Adapt to dark mode, adapt to automatic switching of the system;
+- Adapt to openwrt 21/22, lede
+
+### Experience WebApp method
+
+- Open the settings management in the mobile browser (iOS/iPadOS, Android Google) and add it to the home screen.
+- If the SSL certificate is not used, iOS/iPadOS will display the menu bar at the top of the browser after opening a new page for security reasons.
+
+### Optimization
+
+- Fix the white background of the installation package prompt information
+- Optimize menu collapsing and zooming
+- Optimized to display network port down state display icon
+- Optimize logo display
+- Added the status icon display of each device
+- Replace the logo display with the font "OpenWrt", and support displaying the logo with the host name
+- Fix some plug-in display bugs
+- Fix vssr status bar
+- Fixed many bugs
+- Fix compatibility with some plug-in styles
+- Fix aliyundrive-webdav style
+- Fixed the abnormal display of vssr in iOS/iPadOS WebApp mode
+- Fix openclash plugin env(safe-area-inset-bottom) = 0 in iOS/iPadOS WebApp mode
+- Optimize menu hover action state resolution
+- Support luci-app-wizard wizard menu
+- Update header box-shadow style
+-Update uci-change overflow
+- Fix nlbw component
+- Support QWRT (QSDK), iStore wizard navigation
+- Adapt to OpenWrt 21/22
+
+### Compile
+
+```
+git clone https://github.com/gngpp/luci-theme-design.git package/luci-theme-design
+make menuconfig # choose LUCI->Theme->Luci-theme-design
+make V=s
+```
+
+### Q&A
+
+- The resource interface icon is not perfect. If you have the ability to draw a picture, you are welcome to pr, but please make sure it is consistent with the existing icon color style
+- If there is a bug, please raise an issue
+- The theme's personal color matching may not meet the public's appetite, welcome to provide color matching suggestions
+
+### preview
+
+<details> <summary>iOS</summary>
+<img src="./preview/webapp_home.PNG"/>
+<img src="./preview/webapp_vssr.PNG"/>
+</details>
+
+<details> <summary>iPadOS</summary>
+<img src="./preview/IMG_0328.PNG"/>
+<img src="./preview/IMG_0329.PNG"/>
+</details>
+
+<img src="./preview/login.png"/>
+<img src="./preview/page.png"/>
+<img src="./preview/home.png"/>
+<img src="./preview/light.png"/>
+<img src="./preview/home1.png"/>
+<img src="./preview/wifi.png"/>
+<img src="./preview/iface.png"/>

luci-theme-design/README_zh.md

@@ -0,0 +1,102 @@
+<div align="center">
+  <h1 align="center">
+    LuCI design theme for OpenWrt
+  </h1>
+<a href="/LICENSE">
+    <img src="https://img.shields.io/github/license/gngpp/luci-theme-design?style=flat&a=1" alt="">
+  </a>
+  <a href="https://github.com/gngpp/luci-theme-design/pulls">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" alt="">
+  </a><a href="https://github.com/gngpp/luci-theme-design/issues/new">
+    <img src="https://img.shields.io/badge/Issues-welcome-brightgreen.svg?style=flat">
+  </a><a href="https://github.com/gngpp/luci-theme-design/releases">
+    <img src="https://img.shields.io/github/release/gngpp/luci-theme-design.svg?style=flat">
+  </a><a href="hhttps://github.com/gngpp/luci-theme-design/releases">
+    <img src="https://img.shields.io/github/downloads/gngpp/luci-theme-design/total?style=flat&?">
+  </a>
+</div>
+<br>
+
+<br>简体中文 | [English](README.md)
+
+# luci-theme-design
+
+luci-theme-design 是一个针对移动端和PC端的沉浸式WebApp体验和优化的OpenWrt LuCI主题
+
+> **luci-theme-design**基于luci-theme-neobird, 适用于[lede](https://github.com/coolsnowwolf/lede) / [OpenWrt](https://github.com/openwrt/openwrt)
+> 默认分支只支持lede源码的lua版本，若使用openwrt 21/22请拉取[js](https://github.com/gngpp/luci-theme-design/tree/js)版本(开发阶段)。
+
+### 发布版本
+
+- Lua 版本选择5.x版本
+- JS 版本选择6.x版本
+
+### 主要特点
+
+- 针对移动端优化，特别适合手机端做为WebApp使用
+- 修改和优化了很多插件显示，完善的icon图标，尽量视觉统一
+- 简洁的登录界面，底部导航栏，类App的沉浸式体验；
+- 适配深色模式，适配系统自动切换；
+- 适配openwrt 21/22、lede
+
+### 体验WebApp方法
+
+- 在移动端(iOS/iPadOS、Android谷歌)浏览器打开设置管理，添加到主屏幕即可。
+- 如果不使用SSL证书，基于安全原因，iOS/iPadOS 在打开新的页面后，将会显示浏览器顶部菜单栏。
+
+### 优化
+
+- 修复安装package提示信息背景泛白
+- 优化菜单折叠和缩放
+- 优化显示网口down状态显示图标
+- 优化logo显示
+- 新增各设备状态图标显示
+- 更换logo显示为字体"OpenWrt"，支持以主机名显示logo
+- 修复部分插件显示bug
+- 修复vssr状态bar
+- 修复诸多bug
+- 修复兼容部分插件样式
+- 修复aliyundrive-webdav样式
+- 修复vssr在iOS/iPadOS WebApp模式下显示异常
+- 修复openclash插件在iOS/iPadOS WebApp 模式下env(safe-area-inset-bottom) = 0
+- 优化菜单hover action状态分辨
+- 支持luci-app-wizard向导菜单
+- Update header box-shadow style
+- Update uci-change overflow
+- Fix nlbw component
+- 支持QWRT(QSDK)、iStore向导导航
+- 适配OpenWrt 21/22
+
+### 编译
+
+```
+git clone https://github.com/gngpp/luci-theme-design.git  package/luci-theme-design
+make menuconfig # choose LUCI->Theme->Luci-theme-design  
+make V=s
+```
+
+### Q&A
+
+- 资源接口icon未完善，如果有能力画图的欢迎pr，但请确保跟现有icon颜色风格一致
+- 有bug欢迎提issue
+- 主题个人配色可能会不符合大众胃口，欢迎提配色建议
+
+### 预览
+
+<details> <summary>iOS</summary>
+<img src="./preview/webapp_home.PNG"/>
+<img src="./preview/webapp_vssr.PNG"/>
+</details>
+
+<details> <summary>iPadOS</summary>
+<img src="./preview/IMG_0328.PNG"/>
+<img src="./preview/IMG_0329.PNG"/>
+</details>
+
+<img src="./preview/login.png"/>
+<img src="./preview/page.png"/>
+<img src="./preview/home.png"/>
+<img src="./preview/light.png"/>
+<img src="./preview/home1.png"/>
+<img src="./preview/wifi.png"/>
+<img src="./preview/iface.png"/>

luci-theme-design/htdocs/luci-static/design/js/script.js

@@ -18,7 +18,58 @@
  *  Licensed to the public under the Apache License 2.0
  */
 (function ($) {
-    $(".main > .loading").fadeOut();
+
+    // 修复某些插件导致在https下env(safe-area-inset-bottom)为0的情况
+    var url = self.location.href; 
+    if ((/(iPhone|iPad|iPod|iOS|Mac|Macintosh)/i.test(navigator.userAgent)) && url.indexOf("openclash") != -1 ) {
+        var oMeta = document.createElement('meta');
+        oMeta.content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover';
+        oMeta.name = 'viewport';
+        document.getElementsByTagName('head')[0].appendChild(oMeta);
+    }
+
+    // .node-status-realtime embed[src="/luci-static/resources/bandwidth.svg"] + div + br + table
+    // .node-status-realtime embed[src="/luci-static/resources/wifirate.svg"] + div + br + table
+    // .node-status-realtime embed[src="/luci-static/resources/wireless.svg"] + div + br + table
+    $(document).ready(function(){
+        ["bandwidth", "wifirate", "wireless"].forEach(function (value) {
+            let target = $(".node-status-realtime embed[src=\"\/luci-static\/resources\/" + value + ".svg\"] + div + br + table");
+            if (target.length != 0) {
+                let div =  document.createElement("div");
+                div.style = "overflow-x: auto;"
+                target.before(div);
+                newTarget = target.clone();
+                target.remove();
+                div.append(newTarget.get(0))
+            }
+        })
+   });
+
+    // Fixed scrollbar styles for browsers on different platforms
+    settingGlobalScroll();
+
+    $(document).ready(function() {
+        settingGlobalScroll();
+    })
+
+    $(window).resize(function () {
+        settingGlobalScroll();
+    });
+
+    function settingGlobalScroll() {
+        let global = $('head #global-scroll')
+        if ((/(phone|pad|pod|iPhone|iPod|ios|iOS|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(navigator.userAgent))) {
+            if (global.length > 0) {
+                global.remove();
+            }
+        } else  if (global.length == 0 ) {
+            var style = document.createElement('style');
+            style.type = 'text/css';
+            style.id = "global-scroll"
+            style.innerHTML="::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: var(--scrollbarColor); border-radius: 2px;}"
+            $("head").append(style)
+        }
+    }
 
     /**
      * trim text, Remove spaces, wrap
@@ -85,17 +136,22 @@
     $(".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");
-            });
+        if (!menu.hasClass("exit")) {
+            $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+            $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
+            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;
         }
-        return false;
     });
 
     /**
@@ -163,9 +219,11 @@
         } else {
             $(".darkMask").stop(true).fadeIn("fast");
             $(".main-left").stop(true).animate({
-                width: "20rem"
+                width: "17rem"
             }, "fast");
             $(".main-right").css("overflow-y", "hidden");
+            $(".showSide").css("display", "none");
+            $("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
             showSide = true;
         }
     });
@@ -179,15 +237,21 @@
                 width: "0"
             }, "fast");
             $(".main-right").css("overflow-y", "auto");
+            $(".showSide").css("display", "");
+            $("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
         }
     });
 
     $(window).resize(function () {
-        if ($(window).width() > 921) {
+        if ($(window).width() > 992) {
+            $(".showSide").css("display", "");
             $(".main-left").css("width", "");
             $(".darkMask").stop(true);
             $(".darkMask").css("display", "none");
             showSide = false;
+            $("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
+        } else {
+            $("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
         }
     });
 

luci-theme-design/htdocs/luci-static/design/manifest.json

@@ -1,12 +1,12 @@
 {
-"name":"Neobird",
-"short_name":"Neobird",
-"description":"Neobird for OpenWRT by 2smile.",
+"name":"Design",
+"short_name":"Design",
+"description":"Design for OpenWRT by gngpp.",
 "start_url":"/",
 "scope": "/",
 "orientation":"portrait",
 "display":"standalone",
-"prompt_message":"在主屏幕添加图标，以便快速访问 Neobird",
+"prompt_message":"在主屏幕添加图标，以便快速访问 Design",
 "icons":[
 {
 "src":"images/icon.png",

luci-theme-design/luasrc/view/themes/design/header.htm

@@ -6,15 +6,21 @@
 
 	luci-theme-neobird
 	Copyright 2021 2smile <thinktip@gmail.com>
+	
+	luci-theme-design
+	Copyright 2023 2smile <gngppz@gmail.com>
 
 	Have a bug? Please create an issue here on GitHub!
-	https://github.com/thinktip/luci-theme-neobird
+	https://github.com/gngpp/luci-theme-design
 
 	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-neobird:
+	Copyright 2021 2smile <thinktip@gmail.com>
+
 	MUI:
 	https://github.com/muicss/mui
 
@@ -128,9 +134,9 @@
 	<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
     <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %>">
     <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %>">
-    <meta name="msapplication-TileImage" content="<%=media%>/images/icon.png"/>
-    <link rel="icon" href="<%=media%>/images/icon.png" sizes="192x192">
-    <link rel="apple-touch-icon" sizes="192x192" href="<%=media%>/images/icon.png">
+    <meta name="msapplication-TileImage" content="<%=media%>/images/android-chrome-512x512.png"/>
+    <link rel="icon" href="<%=media%>/images/android-chrome-192x192.png" sizes="192x192">
+    <link rel="apple-touch-icon" sizes="192x192" href="<%=media%>/images/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes" /> 
@@ -146,6 +152,15 @@
         </style>
     <% end -%>
     <script src="<%=resource%>/xhr.js?<%= ver.luciversion %>"></script>
+	<style title="text/css" id="global-scroll">
+		::-webkit-scrollbar {
+			 width: 4px
+		}
+		::-webkit-scrollbar-thumb {
+    		background: var(--scrollbarColor) ;
+    		border-radius: 2px;
+		}
+	</style>
 </head>
 
 <body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>">
@@ -154,16 +169,15 @@
 
 <div class="navbar">
   <a href="/cgi-bin/luci/admin/status/overview"><img src="<%=media%>/images/home.png" /></a>
-  <a href="/cgi-bin/luci/admin/services/shadowsocksr"><img src="<%=media%>/images/ssr.png" /></a>
+  <a href="/cgi-bin/luci/admin/services/openclash"><img src="<%=media%>/images/openclash.png" /></a>
   <a href="/cgi-bin/luci/admin/network/network"><img src="<%=media%>/images/link.png" /></a>
   <a href="/cgi-bin/luci/admin/status/realtime"><img src="<%=media%>/images/rank.png" /></a>
   <a href="/cgi-bin/luci/admin/system/admin"><img src="<%=media%>/images/user.png" /></a>
 </div>
 
 <div class="container">
-<span class="showSide"></span>
-		<img  src="<%=media%>/images/logo.png" <%=striptags( (boardinfo.hostname or "?") ) %>>
-
+	<span class="showSide"></span>
+	<a class="brand" href="#"><%=boardinfo.hostname or "OpenWrt"%></a>
 		<div class="pull-right">
 		<%
 		-- calculate the number of unsaved changes

luci-theme-design/root/etc/uci-defaults/30_luci-theme-design

@@ -0,0 +1,11 @@
+#!/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
+sed -i ":a;$!N;s/t.render.*sysauth_template.*return/local scope = { duser = h, fuser = a }\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
+rm -Rf /var/luci-modulecache
+rm -Rf /var/luci-indexcache
+uci batch <<-EOF
+	set luci.themes.Design=/luci-static/design
+	set luci.main.mediaurlbase=/luci-static/design
+	commit luci
+EOF
+exit 0

luci-theme-neobird/README.md

@@ -1,54 +0,0 @@
-# luci-theme-neobird
-## 针对移动端优化的Openwrt主题
-
-For Lean's OpenWRT Only
-https://github.com/coolsnowwolf/lede
-
-六年前用OP，随手把luci-theme-material改成了自己喜欢的Advancedtomato样式
-因为用了很短时间便没再用OP了，主题也没再管。
-后来便有了lede固件默认使用material主题的修改版做主题，包括今天的luci-theme-netgear和luci-theme-argon还是我的思路，不过都不是我喜欢的样子。
-还有一些luci-theme-atmaterial之类的都是当时我的样式表改的，还存在于某些固件中。
-
-前几天又用上了OP做旁路，顺手又改了一把，然后随便找了个LOGO(netgear arlo)，起了个名字，编译了一下。
-
-## 主要特点：
-* 针对移动端优化，特别适合手机端做为webapp使用；
-* 修改很多细节，尽量视觉统一（但由于luci插件开发不规范，页面结构有些杂乱，难免有些小问题无法修正）；
-* 极简易用设计，移动端去除繁杂信息，隐藏了提示信息（可能并不适合OP新手，请手机横屏查看提示文本）；
-* 简洁的登录界面，底部导航栏，类App的沉浸式体验；
-* 适配深色模式，适配系统自动切换；
-* 全(tou)新(lai)的APP桌面图标；
-* Retina图片适配。
-
-## 体验Webapp方法：
-* 在移动端(iOS/iPadOS)浏览器打开管理界面，添加到主屏幕即可。
-* 想要实现完全的沉浸式（无浏览器导航、无地址栏等）体验，需要使用SSL证书，请自行申请域名、证书、安装并启用。
-* 如果不使用SSL证书，基于安全原因，iOS/iPadOS 在打开新的页面后，将会显示浏览器顶部菜单栏。
-
-## 目前存在的问题
-* 做为旁路由，安装的插件比较少，接口比较少，部分图片不可见则懒得换，可能未来会主动把图片换掉；
-* 部分插件或页面仅通过样式表很难达到完美，需要修改底层页面结构，这部分内容存在于luci源码中；
-
-## 关于其它
-* 你可以改来自己用，也可以继续优化共享，但如果想改进后共享给他人，请再三确认自己的审美能力，以确保不是丑化我的成果
-* 因为用了arlo的logo，请勿用于商业用途
-* 我可能会在某个时间改掉logo
-* luci插件众多，不规范的插件可能会存在显示问题，不做保证
-
-## 预览
-![macOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/SCR-20220223-iw6.png)
-![macOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/SCR-20220223-iwp.png)
-![macOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/SCR-20220223-j1l.png)
-![iOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/IMG_6478.PNG)
-![iOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/IMG_6481.PNG)
-![iOS](https://github.com/thinktip/luci-theme-neobird/blob/main/preview/IMG_6474.PNG)
-## 自行编译：
-
-```
-cd lede/package/lean  
-rm -rf luci-theme-neobird  
-git clone https://github.com/thinktip/luci-theme-neobird.git  
-cd ~/lede/
-make menuconfig #choose LUCI->Theme->Luci-theme-neobird  
-make -j1 V=s
-```

luci-theme-neobird/root/etc/uci-defaults/30_luci-theme-neobird

@@ -1,8 +0,0 @@
-#!/bin/sh
-uci batch <<-EOF
-	set luci.themes.Neobird=/luci-static/neobird
-	set luci.main.mediaurlbase=/luci-static/neobird
-	commit luci
-EOF
-exit 0 
-# ↑↑↑ DO NOT EDIT THIS LINE