From 1627cbbf3b80c261b8e8683cbc7de28d3ca008e8 Mon Sep 17 00:00:00 2001
From: buzz-lightsnack-2007
 <73412182+buzz-lightsnack-2007@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:27:59 +0800
Subject: [PATCH] adjust settings page interface to support OLED

add navbar and remove FAB
---
 pages/settings.htm                            | 38 ++++++-------------
 pages/settings/filters.htm                    |  7 +---
 styles/colors/all.backgrounds.collapsible.css | 25 ++++++------
 styles/colors/all.forms.css                   | 11 ++++--
 styles/colors/defaults.css                    | 13 +++++--
 styles/fonts/all.css                          |  1 +
 styles/fonts/all.navbar.css                   |  4 ++
 styles/layouts/all.collapsible.css            | 13 +++++++
 styles/layouts/all.css                        |  2 +
 styles/layouts/all.navbar.css                 | 24 ++++++++++++
 10 files changed, 88 insertions(+), 50 deletions(-)
 create mode 100644 styles/fonts/all.navbar.css
 create mode 100644 styles/layouts/all.collapsible.css
 create mode 100644 styles/layouts/all.navbar.css
diff --git a/pages/settings.htm b/pages/settings.htm
index 5acd5c0..fe95367 100644
--- a/pages/settings.htm
+++ b/pages/settings.htm
@@ -7,12 +7,16 @@
 	</head>
 
 	<body>
+		<nav class="nav-wrapper" data-result-linked="filters">
+			<span class="brand-logo left"><img src="/media/icons/logo.png" alt="Logo"/><span for="extension_name"></span></span>
+			<ul class="right">
+				<li><a data-icon="help" href="help.html"></a></li>
+			</ul>
+		</nav>
 		<main class="container">
 			<ul class="collapsible" data-collapsible="accordion">
 				<li>
-					<header
-						class="collapsible-header waves-effect flow-text" accesskey="1" for="general" data-icon="cog"
-					></header>
+					<header class="collapsible-header waves-effect flow-text" accesskey="1" for="general" data-icon="cog"></header>
 					<section class="collapsible-body">
 						<section class="input-group">
 							<legend for="general" class="flow-text"></legend>
@@ -91,18 +95,10 @@
 					</section>
 				</li>
 				<li>
-					<header
-						class="collapsible-header waves-effect flow-text"
-						for="storage"
-						accesskey="3"
-						data-icon="database"
-					></header>
+					<header class="collapsible-header waves-effect flow-text" for="storage" accesskey="3" data-icon="database"></header>
 					<section class="collapsible-body">
 						<section class="input-group">
-							<label
-								for="settings_storage_description"
-								class="input-description"
-							></label>
+							<label for="settings_storage_description" class="input-description"></label>
 							<div class="input-field">
 								<button
 									title-for="settings_storage_clear"
@@ -128,15 +124,8 @@
 								<img src="/media/icons/logo.png" alt="Logo" class="responsive-img" />
 							</side>
 							<article class="s9">
-								<p
-									class="flow-text"
-									style="font-weight: bold"
-									for="extension_name"
-								></p>
-								<p
-									for="extension_version"
-									style="font-style: italic"
-								></p>
+								<p class="flow-text" style="font-weight: bold" for="extension_name"></p>
+								<p for="extension_version" style="font-style: italic"></p>
 								<p for="extension_description"></p>
 							</article>
 						</div>
@@ -144,10 +133,5 @@
 				</li>
 			</ul>
 		</main>
-		<side class="fixed-action-btn">
-			<button
-				href="help" tab-height="607.5" tab-width="1080" class="btn-floating btn-large" title-for="help" data-icon="help"
-			></button>
-		</side>
 	</body>
 </html>
diff --git a/pages/settings/filters.htm b/pages/settings/filters.htm
index 424ee08..dc45cca 100644
--- a/pages/settings/filters.htm
+++ b/pages/settings/filters.htm
@@ -41,12 +41,7 @@
 					<ul class="input-field">
 						<li>
 							<label>
-								<input
-									type="checkbox"
-									data-result-store=",settings,filters"
-									data-result-store-parameter="enabled"
-									class="filled-in" data-store-location="1"
-								/>
+								<input type="checkbox" data-result-store=",settings,filters" data-result-store-parameter="enabled" class="filled-in" data-store-location="1" />
 								<span for="enable"></span>
 							</label>
 						</li>
diff --git a/styles/colors/all.backgrounds.collapsible.css b/styles/colors/all.backgrounds.collapsible.css
index 5f096b7..9fbeb15 100644
--- a/styles/colors/all.backgrounds.collapsible.css
+++ b/styles/colors/all.backgrounds.collapsible.css
@@ -1,22 +1,25 @@
-.collapsible {
-	border: none;
-}
-
 .collapsible .collapsible-header, .collapsible .collapsible-body {
 	background-color: var(--background-color-card);
 };
 
+.collapsible > li {
+	border-color: var(--separator-color) !important;
+};
+
 /* Active events */
 .collapsible .collapsible-header:focus, .collapsible .collapsible-header:active {
 	background-color: var(--surface-color);
 }
 
+.collapsible .collapsible-header:hover {
+	background-color: var(--hover-color);
+	
+}
+
 .collapsible .active .collapsible-header {
-	background-color: none;
-	background: linear-gradient(
-		25deg,
-		var(--primary-color-dark) 0%,
-		var(--primary-color) 62%,
-		var(--primary-color-raised-hover-solid) 100%
-	) !important;
+	background: var(--primary-color-gradient) !important;
+}
+
+.collapsible > li:has(.collapsible-header:hover) {
+	border: 1px solid var(--hover-color);
 }
\ No newline at end of file
diff --git a/styles/colors/all.forms.css b/styles/colors/all.forms.css
index b777d88..17c1840 100644
--- a/styles/colors/all.forms.css
+++ b/styles/colors/all.forms.css
@@ -1,11 +1,16 @@
 .input-field input, .input-field textarea {
-     background-color: var(--input-color);    
+     background-color: var(--input-color) !important;    
 }
 
-.btn {
+.btn:not([disabled]) {
      background-color: var(--secondary-color) !important;
 }
 
-.btn[role="primary"], .btn-floating {
+.btn[role="primary"]:not([disabled]), .btn-floating:not([disabled]) {
      background-color: var(--primary-color) !important;
 }
+
+nav ul:not(.dropdown-content) > li > a:hover:not(.active) {
+     background-color: var(--hover-color) !important;
+}
+
diff --git a/styles/colors/defaults.css b/styles/colors/defaults.css
index ee0bf52..9f2a884 100644
--- a/styles/colors/defaults.css
+++ b/styles/colors/defaults.css
@@ -42,15 +42,24 @@
 		--primary-color-numeric: 255, 134, 57 !important;
 		--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
 		--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
+		--primary-color-gradient: linear-gradient(
+			43deg,
+			var(--primary-color-dark) 0%,
+			var(--primary-color) 62%,
+			var(--primary-color-raised-hover-solid) 100%
+		) !important;
 
+		--secondary-color-lighter: rgba(221, 106, 59) !important;
 		--secondary-color: rgba(190, 80, 1) !important;
+		--secondary-color-dark: rgba(159, 55, 0) !important;
 		--secondary-color-hover-solid: rgba(252, 162, 133) !important;
 		--secondary-color-focus-solid: rgba(159, 55, 0) !important;
 		--font-on-secondary-container-color: rgba(255, 255, 255) !important;
 
-		--hover-color: rgba(255, 255, 255, 0.04) !important;
+		--hover-color: rgba(255, 255, 255, 0.3) !important;
 		--focus-color: rgba(255, 134, 57,.4) !important;
 		--focus-color-solid: #424242 !important;
+		--active-color: rgba(255, 134, 57,.7) !important;
 
 		--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
 		--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
@@ -65,8 +74,6 @@
 		--slider-track-color: rgba(255, 255, 255, 0.26) !important;
 		--switch-thumb-off-color: #bababa !important;
 
-		
-
 		--secondary-container-color: rgba(221, 106, 59) !important;
 
 		--md_sys_color_on-surface: 230, 225, 229 !important;
diff --git a/styles/fonts/all.css b/styles/fonts/all.css
index 1603921..81ca9e2 100644
--- a/styles/fonts/all.css
+++ b/styles/fonts/all.css
@@ -1,4 +1,5 @@
 @import url("/styles/fonts/all.article.css");
+@import url("/styles/fonts/all.navbar.css");
 
 .collapsible > li > header {
 	font-weight: bold;
diff --git a/styles/fonts/all.navbar.css b/styles/fonts/all.navbar.css
new file mode 100644
index 0000000..a7e41f9
--- /dev/null
+++ b/styles/fonts/all.navbar.css
@@ -0,0 +1,4 @@
+nav .brand-logo {
+     font-size: 1.25rem !important;
+     font-weight: bold;
+}
\ No newline at end of file
diff --git a/styles/layouts/all.collapsible.css b/styles/layouts/all.collapsible.css
new file mode 100644
index 0000000..f51289b
--- /dev/null
+++ b/styles/layouts/all.collapsible.css
@@ -0,0 +1,13 @@
+.collapsible {
+	border: none !important;
+}
+
+.collapsible > li {
+     border: 1px solid var(--separator-color);
+     border-bottom-width: 0px;
+}
+
+.collapsible > li:last-child {
+     border-bottom-width: 1px;
+}
+
diff --git a/styles/layouts/all.css b/styles/layouts/all.css
index 14154ee..db18a0c 100644
--- a/styles/layouts/all.css
+++ b/styles/layouts/all.css
@@ -1,4 +1,6 @@
 @import url("/styles/layouts/all.inputs.css");
+@import url("/styles/layouts/all.collapsible.css");
+@import url("/styles/layouts/all.navbar.css");
 
 fieldset {
 	padding: 2em !important;
diff --git a/styles/layouts/all.navbar.css b/styles/layouts/all.navbar.css
new file mode 100644
index 0000000..afccb40
--- /dev/null
+++ b/styles/layouts/all.navbar.css
@@ -0,0 +1,24 @@
+nav .brand-logo {
+     position: relative !important;
+     margin-top: auto !important;
+     margin-bottom: auto !important;
+     display: flex;
+     align-items: center;
+     flex-direction: row;
+	justify-content: space-between;
+}
+
+nav .brand-logo > * {
+     margin-top: auto !important;
+     margin-bottom: auto !important;
+}
+
+nav .brand-logo > * {
+     margin-left: .5em !important;
+}
+
+nav .brand-logo img {
+     --dimension: 1.5rem;
+     height: var(--dimension) !important;
+     width: var(--dimension) !important;
+}
\ No newline at end of file
