From 7a7f5cd4a84e39db969732465a8db50d425434be Mon Sep 17 00:00:00 2001 From: wonfen Date: Tue, 9 Jan 2024 13:57:53 +0800 Subject: [PATCH] Style: UI improvement & 1.4.6 ready --- README.md | 20 ++--- UPDATELOG.md | 9 +++ package.json | 2 +- src-tauri/Cargo.lock | 2 +- src-tauri/Cargo.toml | 2 +- src-tauri/tauri.conf.json | 2 +- src/assets/styles/page.scss | 16 +++- src/components/base/base-page.tsx | 5 +- src/pages/connections.tsx | 128 +++++++++++++++--------------- src/pages/logs.tsx | 92 ++++++++++----------- src/pages/proxies.tsx | 12 +-- src/pages/rules.tsx | 74 +++++++++-------- 12 files changed, 182 insertions(+), 182 deletions(-) diff --git a/README.md b/README.md index c662ae5f..c5b7c46b 100644 --- a/README.md +++ b/README.md @@ -41,18 +41,18 @@ A Clash Meta GUI based on Tauri section { + padding: 0; + overflow: visible; + + .base-content { + width: 100%; + } + } + } } } diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx index e18611fe..4a7defa0 100644 --- a/src/components/base/base-page.tsx +++ b/src/components/base/base-page.tsx @@ -8,10 +8,11 @@ interface Props { header?: React.ReactNode; // something behind title contentStyle?: React.CSSProperties; children?: ReactNode; + full?: boolean; } export const BasePage: React.FC = (props) => { - const { title, header, contentStyle, children } = props; + const { title, header, contentStyle, full, children } = props; const { theme } = useCustomTheme(); const isDark = theme.palette.mode === "dark"; @@ -28,7 +29,7 @@ export const BasePage: React.FC = (props) => {
{ return ( { } > - - - {!isTableLayout && ( - - )} - - + {!isTableLayout && ( + + )} - - {filterConn.length === 0 ? ( - - ) : isTableLayout ? ( - detailRef.current?.open(detail)} - /> - ) : ( - ( - detailRef.current?.open(item)} - /> - )} - /> - )} - - - + setFilterText(e.target.value)} + sx={{ input: { py: 0.65, px: 1.25 } }} + /> + + + {filterConn.length === 0 ? ( + + ) : isTableLayout ? ( + detailRef.current?.open(detail)} + /> + ) : ( + ( + detailRef.current?.open(item)} + /> + )} + /> + )} + + ); }; diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx index 8b7c0f20..acd94861 100644 --- a/src/pages/logs.tsx +++ b/src/pages/logs.tsx @@ -38,6 +38,7 @@ const LogPage = () => { return ( { > - setLogState(e.target.value)} + sx={{ width: 120, mr: 1, '[role="button"]': { py: 0.65 } }} > - + ALL + INFO + WARN + ERROR + - setFilterText(e.target.value)} - sx={{ input: { py: 0.65, px: 1.25 } }} + setFilterText(e.target.value)} + sx={{ input: { py: 0.65, px: 1.25 } }} + /> + + + + {filterLogs.length > 0 ? ( + } + followOutput={"smooth"} /> - - - - {filterLogs.length > 0 ? ( - } - followOutput={"smooth"} - /> - ) : ( - - )} - + ) : ( + + )} ); diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx index 6a71a4a8..6c99d0b0 100644 --- a/src/pages/proxies.tsx +++ b/src/pages/proxies.tsx @@ -51,6 +51,7 @@ const ProxyPage = () => { return ( { } > - - - + ); }; diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx index dd7ba298..feab0340 100644 --- a/src/pages/rules.tsx +++ b/src/pages/rules.tsx @@ -18,45 +18,43 @@ const RulesPage = () => { }, [data, filterText]); return ( - - - - setFilterText(e.target.value)} - sx={{ input: { py: 0.65, px: 1.25 } }} - /> - + + + setFilterText(e.target.value)} + sx={{ input: { py: 0.65, px: 1.25 } }} + /> + - - {rules.length > 0 ? ( - ( - - )} - followOutput={"smooth"} - /> - ) : ( - - )} - + + {rules.length > 0 ? ( + ( + + )} + followOutput={"smooth"} + /> + ) : ( + + )} );