From 8fb8e612a22840e87243ad8cda60055754379413 Mon Sep 17 00:00:00 2001
From: Marat Fayzullin <luarvique@gmail.com>
Date: Sun, 5 Nov 2023 13:10:40 -0500
Subject: [PATCH] Improving theme selection, added black theme.

---
 htdocs/css/themes.css   |  8 ++++++++
 htdocs/gfx/svg-defs.svg |  4 ++--
 htdocs/index.html       | 10 ++++++----
 htdocs/openwebrx.js     | 20 +++++++++++++-------
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/htdocs/css/themes.css b/htdocs/css/themes.css
index 442f466f..bb8a6f99 100644
--- a/htdocs/css/themes.css
+++ b/htdocs/css/themes.css
@@ -68,6 +68,14 @@ body.theme-navy {
     --theme-gradient-color2: #002F3F;
 }
 
+/* Theme: black */
+body.theme-black {
+    --theme-color1: #000000;
+    --theme-color2: #202020;
+    --theme-gradient-color1: #000000;
+    --theme-gradient-color2: #303030;
+}
+
 /* Theme: night */
 body.theme-night {
     --theme-color1: #6c2ceb;
diff --git a/htdocs/gfx/svg-defs.svg b/htdocs/gfx/svg-defs.svg
index 52cfa184..e1df3536 100644
--- a/htdocs/gfx/svg-defs.svg
+++ b/htdocs/gfx/svg-defs.svg
@@ -31,7 +31,7 @@
         <g id="right" fill="#fff" stroke="#fff" stroke-width="4.0"><path d="M 25,15 25,65 65,40 Z"/></g>
         <g id="spectrum" fill="#0000" stroke="#fff" stroke-width="7"><path d="M 9.7579071,55.000065 C 9.7579071,55.000065 15,10 25.288469,9.8661268 35,10 45,70 54.985123,70.170795 65,70 69.983185,25.030854 69.983185,25.030854"/><path d="m 0,40 80,0"/></g>
         <g id="scanner-running"><g stroke="#fff" stroke-width="8"><path d="M5 40A35 35 0 0 1 26.606 7.664a35 35 0 0 1 38.143 7.587" fill="none"/><path d="m68.284 11.716 2.828 9.9-9.899-2.829z" fill="#fff"/></g><path d="m 27.185152,59.581257 0,-7.177735 q 0.966797,0.878907 2.285156,1.582032 1.347657,0.703125 2.841797,1.201172 1.494141,0.46875 2.988281,0.732421 1.494141,0.263672 2.753907,0.263672 4.394531,0 6.533203,-1.464843 2.167969,-1.464844 2.167969,-4.248047 0,-1.494141 -0.732422,-2.578125 -0.703125,-1.113282 -1.992188,-2.021485 -1.289062,-0.908203 -3.046875,-1.728515 -1.728515,-0.84961 -3.720703,-1.757813 -2.138672,-1.142578 -3.984375,-2.314453 -1.845703,-1.171875 -3.222656,-2.578125 -1.347656,-1.435547 -2.138672,-3.222656 -0.761719,-1.78711 -0.761719,-4.189453 0,-2.958985 1.31836,-5.126953 1.347656,-2.197266 3.515625,-3.603516 2.197265,-1.435547 4.980468,-2.109375 2.783203,-0.703125 5.683594,-0.703125 6.591797,0 9.609375,1.494141 l 0,6.884765 q -3.574219,-2.578125 -9.199219,-2.578125 -1.552734,0 -3.105468,0.292969 -1.523438,0.292969 -2.753907,0.966797 -1.201172,0.673828 -1.96289,1.728515 -0.761719,1.054688 -0.761719,2.548829 0,1.40625 0.585937,2.43164 0.585938,1.025391 1.699219,1.875 1.142578,0.84961 2.753906,1.669922 1.640625,0.791016 3.779297,1.728516 2.197266,1.142578 4.13086,2.402343 1.96289,1.259766 3.427734,2.783204 1.494141,1.523437 2.34375,3.398437 0.878906,1.845703 0.878906,4.21875 0,3.193359 -1.289062,5.390625 -1.289063,2.197266 -3.486328,3.574219 -2.167969,1.376953 -5.009766,1.992187 -2.841797,0.615235 -6.005859,0.615235 -1.054688,0 -2.607422,-0.175782 -1.523438,-0.146484 -3.134766,-0.46875 -1.611328,-0.292968 -3.046875,-0.732421 -1.435547,-0.439454 -2.314453,-0.996094 z" fill="#fff"/><g stroke="#fff" stroke-width="8"><path d="M75 40a35 35 0 0 1-21.606 32.336 35 35 0 0 1-38.143-7.587" fill="none"/><path d="m11.716 68.284-2.828-9.9 9.899 2.829z" fill="#fff"/></g></g>
-        <g id="opacity" fill="#fff" stroke="#fff" stroke-width="8"><path d="M360-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160v80H200v560h160v80Zm80 80v-880h80v880h-80Zm160-80v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80q0 33-23.5 56.5T760-120Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80q33 0 56.5 23.5T840-760h-80Z"/></g>
-        <g id="theme-chooser" fill="#fff" stroke="#fff" stroke-width="8"><path d="M480-120q-133 0-226.5-92T160-436q0-65 25-121.5T254-658l226-222 226 222q44 44 69 100.5T800-436q0 132-93.5 224T480-120ZM242-400h474q12-72-13.5-123T650-600L480-768 310-600q-27 26-53 77t-15 123Z"/></g>
+        <g id="theme-chooser" fill="#fff" stroke="#fff" stroke-width="8"><path d="M360-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160v80H200v560h160v80Zm80 80v-880h80v880h-80Zm160-80v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80q0 33-23.5 56.5T760-120Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80q33 0 56.5 23.5T840-760h-80Z"/></g>
+        <g id="opacity" fill="#fff" stroke="#fff" stroke-width="8"><path d="M480-120q-133 0-226.5-92T160-436q0-65 25-121.5T254-658l226-222 226 222q44 44 69 100.5T800-436q0 132-93.5 224T480-120ZM242-400h474q12-72-13.5-123T650-600L480-768 310-600q-27 26-53 77t-15 123Z"/></g>
     </defs>
 </svg>
diff --git a/htdocs/index.html b/htdocs/index.html
index 62f8b7fb..ebcef0ff 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -262,10 +262,6 @@
                     <div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangledown;&nbsp;Theme</div>
                     <div class="openwebrx-section">
                         <div class="openwebrx-panel-line">
-                            <div title="Reset opacity" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_opacity(100);">
-                                <svg viewBox="56 -900 835 835"><use xlink:href="static/gfx/svg-defs.svg#opacity"></use></svg>
-                            </div>
-                            <input title="Opacity" id="openwebrx-opacity-slider" class="openwebrx-panel-slider" type="range" min="10" max="100" value="100" step="1" oninput="set_ui_opacity(this.value);">
                             <div title="Theme" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_scheme('default');">
                                 <svg viewBox="56 -900 835 835" style="overflow: visible"><use xlink:href="static/gfx/svg-defs.svg#theme-chooser"></use></svg>
                             </div>
@@ -277,7 +273,13 @@
                                 <option value="khaki">Khaki</option>
                                 <option value="blue">Blue</option>
                                 <option value="navy">Navy</option>
+                                <option value="black">Black</option>
+                                <option value="night">Night</option>
                             </select>
+                            <div title="Reset opacity" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_opacity(100);">
+                                <svg viewBox="56 -900 835 835"><use xlink:href="static/gfx/svg-defs.svg#opacity"></use></svg>
+                            </div>
+                            <input title="Opacity" id="openwebrx-opacity-slider" class="openwebrx-panel-slider" type="range" min="20" max="100" value="100" step="1" oninput="set_ui_opacity(this.value);">
                         </div>
                     </div>
                     <div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangledown;&nbsp;Display</div>
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index f4abb256..54d9bf9c 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -2034,21 +2034,27 @@ function set_ui_frame(x) {
 function set_ui_opacity(x) {
     x = x<10? 10 : x>100? 100 : x;
     $('.openwebrx-panel').css('opacity', x/100);
-    $('#openwebrx-opacity-slider').val(x);
+    $('#openwebrx-opacity-slider')
+        .attr('title', 'Opacity (' + Math.round(x) + '%)')
+        .val(x);
 }
 
 function set_ui_scheme(theme) {
-    const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy', 'night'];
-    $('#openwebrx-themes-listbox').val(theme);
-
     // Save current theme name
     ui_scheme = theme;
 
-    themes.forEach(function(theme) {
-        $('body').removeClass('theme-' + theme);
-    });
+    // Set selector
+    var lb = $('#openwebrx-themes-listbox');
+    lb.val(theme);
+
+    // Remove existing theme
+    var opts = lb[0].options;
+    for(j=0 ; j<opts.length ; j++) {
+        $('body').removeClass('theme-' + opts[j].value);
+    }
     $('body').removeClass('has-theme');
 
+    // Apply new theme
     if (theme && (theme != '') && (theme != 'default')) {
         $('body').addClass('theme-' + theme);
         $('body').addClass('has-theme');