From 579fbb209e556ad56801322b7b8ec5d5ec92493d 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.

Signed-off-by: David Nind <david@davidnind.com>
---
 .../intranet-tmpl/prog/css/src/_header.scss   | 14 ++++----
 .../prog/en/includes/doc-head-close.inc       | 35 +++++++++----------
 .../prog/en/modules/admin/branches.tt         | 16 +++++++--
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
index d5ae7b671cd..1c444b5ad0d 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
@@ -8,11 +8,12 @@
 }
 
 #header_search {
+    background-color: $background-color-primary;
     border-radius: 0;
     border: 1px solid $background-color-primary;
     display: flex;
     flex-direction: column;
-    padding: 0.6em;
+    padding: 0 .8em;
 
     ul {
         padding: 0;
@@ -21,6 +22,7 @@
         display: flex;
         align-items: center;
         color: white;
+        background-color: $background-color-primary;
         z-index: 2;
         flex-grow: 1;
 
@@ -65,9 +67,8 @@
         label {
             color: white;
             font-weight: bold;
-            margin: 0i auto;
+            margin: 0;
             white-space: nowrap;
-            margin-bottom: 0;
         }
     }
 
@@ -166,6 +167,7 @@
     input[type="submit"],
     button[type="submit"] {
         height: 31px;
+        background-color: $background-color-secondary;
         color: white;
         border: 0;
         text-shadow: unset;
@@ -218,13 +220,14 @@
 
         > 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;
 
                 &.active {
                     border-bottom: 2px solid #FFF;
@@ -238,7 +241,6 @@
                 }
 
                 &:hover, &:focus, &:active {
-                    border: 2px solid;
                     border-bottom-color: currentColor;
                     border-bottom: 0;
                     padding: 0 .25em;
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 c277aaa487d..27b943eb4b3 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
@@ -51,26 +51,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 cdc38d174f6..2f5db226726 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