Attachment 171225 Details for Bug 37054 – Bug 37054: (follow-up) Simplify changes, add a way to clear the color field

[patch] Bug 37054: (follow-up) Simplify changes, add a way to clear the color field

Bug-37054-follow-up-Simplify-changes-add-a-way-to-.patch (text/plain), 6.43 KB, created by Lucas Gass (lukeg) on 2024-09-09 17:19:58 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Lucas Gass (lukeg)

Created: 2024-09-09 17:19:58 UTC

Size: 6.43 KB

patch

obsolete

>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

Actions: View | Diff | Splinter Review

Attachments on bug 37054: 167577 | 167578 | 167579 | 167590 | 167595 | 167596 | 167597 | 167598 | 167609 | 167612 | 167613 | 167614 | 167615 | 167616 | 167618 | 167625 | 171221 | 171222 | 171223 | 171224 | 171225 | 171226