From b1dd6711495c46915ae9a495a2fb26533ef71e9e Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 10 Jun 2024 15:42:12 +0000
Subject: [PATCH] Bug 37054: (follow-up) Simplify changes, add a way to clear
 the color field

This patch cuts some of the CSS changes which I think were unnecessary
and adds a way for the user to clear the color field. A text input now
shows the selected hex colur value and the "Clear" button clears it.

I've changed the way the patch handles the custom colors by making the
color handling  dependent on there being a branchcolor value. This way
we don't have to alter the existing header CSS, just override it if a
custom color has been chosen.

To test, apply the patch and test that the color picker still works
correctly and that the "Clear" button works to empty the field.

Test the appearance of the search bar in a branch with a custom color
and in a branch without.
---
 .../intranet-tmpl/prog/css/src/_header.scss   | 25 +++++++------
 .../prog/en/includes/doc-head-close.inc       | 35 +++++++++----------
 .../prog/en/modules/admin/branches.tt         | 16 +++++++--
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
index cddd3543e3..4ebef0ba1d 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
@@ -52,10 +52,11 @@ a.navbar-toggle {
 }
 
 #header_search {
+    background-color: $background-color-primary;
     border-radius: 0;
     border: 1px solid $background-color-primary;
     display: flex;
-    padding: 0.6em;
+    padding: 0 .8em;
 
     ul {
         padding: 0;
@@ -64,6 +65,7 @@ a.navbar-toggle {
         display: flex;
         align-items: center;
         color: white;
+        background-color: $background-color-primary;
         z-index: 2;
         flex-grow: 1;
 
@@ -95,8 +97,9 @@ a.navbar-toggle {
     }
 
     .form-title {
-        padding: 0 16px;
-        border-radius: 16px;
+        padding: 0 16px 0 0;
+        background-color: $background-color-primary;
+        border-radius: 0 16px 16px 0;
         display: flex;
         align-items: center;
         justify-content: flex-end;
@@ -107,9 +110,8 @@ a.navbar-toggle {
         label {
             color: white;
             font-weight: bold;
-            margin: 0i auto;
+            margin: 0;
             white-space: nowrap;
-            margin-bottom: 0;
         }
     }
 
@@ -208,6 +210,7 @@ a.navbar-toggle {
     input[type="submit"],
     button[type="submit"] {
         height: 31px;
+        background-color: $background-color-secondary;
         color: white;
         border: 0;
         text-shadow: unset;
@@ -253,17 +256,19 @@ a.navbar-toggle {
         > li {
 
             > a {
-                border: 2px solid;
+                background-color: $background-color-primary;
+                border: 2px solid $background-color-primary;
                 border-radius: 0;
                 color: #FFF;
                 font-weight: normal;
                 line-height: 1.3;
                 margin: 0 .25em;
-                padding: .25em .5em;
+                padding: 0 .25em;
 
                 &:hover, &:focus, &:active {
-                    border: 2px solid;
-                    border-bottom-color: currentColor;
+                    background-color: $background-color-primary;
+                    border: 2px solid $background-color-primary;
+                    border-bottom-color: $background-color-secondary;
                     border-bottom: 0;
                     padding: 0 .25em;
                     text-decoration: none;
@@ -274,7 +279,7 @@ a.navbar-toggle {
                 a {
                     cursor: default;
                     padding: 0 .25em;
-                    border-bottom: 2px solid currentColor !important;
+                    border-bottom: 2px solid #FFF;
 
                     &:hover,
                     &:focus {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
index ee9aec3ff3..c949258966 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc
@@ -53,26 +53,23 @@ var Koha = {};
 [% IF ( login ) %]
     [% Asset.css("css/login.css") | $raw %]
 [% END %]
-[% SET branchcolor = Branches.GetBranchColor( Branches.GetLoggedInBranchcode() ) || '#408540' %]
-<style>
-    .toptabs,
-    #header_search,
-    #header_search ul,
-    #header_search .nav-tabs > li > a {
-        background: [% branchcolor | html %] !important;
-        border-color: [% branchcolor | html %] !important;
-    }
+[% SET branchcolor = Branches.GetBranchColor( Branches.GetLoggedInBranchcode() ) %]
+[% IF branchcolor %]
+    <style>
+        #header_search,
+        #header_search ul,
+        #header_search .form-title,
+        #header_search .nav-tabs > li > a {
+            background-color: [% branchcolor | html %];
+            border-color: [% branchcolor | html %];
+        }
 
-    .form-title, #header_search button[type="submit"] {
-        background: [% branchcolor | html %] !important;
-        filter: brightness(85%);
-    }
-
-    #header_search .nav-tabs > li > a {
-        background: [% branchcolor | html %] !important;
-        border-color: [% branchcolor | html %] !important;
-    }
-</style>
+        #header_search button[type="submit"] {
+            background: [% branchcolor | html %];
+            filter: brightness(160%);
+        }
+    </style>
+[% END %]
 [% IF ( IntranetUserCSS ) %]<style>[% IntranetUserCSS | $raw %]</style>[% END %]
 
 [% KohaPlugins.get_plugins_intranet_head | $raw %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
index 8fa11654df..0ad27d440f 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
@@ -366,8 +366,10 @@
                     </div>
                 </li>
                 <li>
-                    <label for="marcorgcode">Branch color</label>
-                    <input type="color" name="branchcolor" id="branchcolor" size="16" maxlength="16" value="[% library.branchcolor | html %]" />
+                    <label for="colorpicker">Search bar color: </label>
+                    <input type="color" name="colorpicker" id="colorpicker" value="[% library.branchcolor | html %]" />
+                    <input type="text" name="branchcolor" id="branchcolor" readonly="readonly" size="10" maxlength="16" value="[% library.branchcolor | html %]" />
+                    <a href="#" class="clear_color"><i class="fa fa-fw fa-trash-can"></i> Clear</a>
                 </li>
             </ol>
         </fieldset>
@@ -912,6 +914,16 @@
             }
             $( "#" + target ).hide();
         });
+
+        $("#colorpicker").on("change", function(){
+            let branchcolor = this.value;
+            $("#branchcolor").val( branchcolor );
+        });
+
+        $(".clear_color").on("click", function(e){
+            e.preventDefault();
+            $("#branchcolor, #colorpicker").val( "" );
+        });
     </script>
 [% END %]
 
-- 
2.39.2