From 71b5ae1408906ea976ae201fbd7e0aeb87ff57e1 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 | 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