Bug 37054

Summary: Allow for custom library colors in the staff interface header search
Product: Koha Reporter: Lucas Gass (lukeg) <lucas>
Component: Staff interfaceAssignee: Lucas Gass (lukeg) <lucas>
Status: Signed Off --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: andrewfh, emily.lamancusa, gmcharlt, kebliss, oleonard, tomascohen
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:
Bug Depends on:    
Bug Blocks: 37067    
Attachments: Bug 37054: DBUpdate
Bug 37054: DO NOT PUSH - Schema updates
Bug 37054: Add branch color to branches.tt
Bug 37054: Adjust header colors if branches.branchcolor is used
Bug 37054: DBUpdate
Bug 37054: DO NOT PUSH - Schema updates
Bug 37054: Add branch color to branches.tt
Bug 37054: Adjust header colors if branches.branchcolor is used
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field
Bug 37054: DBUpdate
Bug 37054: DO NOT PUSH - Schema updates
Bug 37054: Add branch color to branches.tt
Bug 37054: Adjust header colors if branches.branchcolor is used
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness
Bug 37054: DBUpdate
Bug 37054: DO NOT PUSH - Schema updates
Bug 37054: Add branch color to branches.tt
Bug 37054: Adjust header colors if branches.branchcolor is used
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness

Description Lucas Gass (lukeg) 2024-06-07 16:02:14 UTC
The staff interface includes a green bar at the top of almost every page, #header_search.toptab

I have been writing custom JavaScript to color this bar differently per branch. It would be much nice if you could just do this in Koha without JS.
Comment 1 Lucas Gass (lukeg) 2024-06-07 16:17:15 UTC Comment hidden (obsolete)
Comment 2 Lucas Gass (lukeg) 2024-06-07 16:21:10 UTC Comment hidden (obsolete)
Comment 3 Lucas Gass (lukeg) 2024-06-07 17:05:45 UTC Comment hidden (obsolete)
Comment 4 Lucas Gass (lukeg) 2024-06-07 22:06:47 UTC Comment hidden (obsolete)
Comment 5 David Nind 2024-06-08 23:21:00 UTC
Created attachment 167595 [details] [review]
Bug 37054: DBUpdate

Signed-off-by: David Nind <david@davidnind.com>
Comment 6 David Nind 2024-06-08 23:21:02 UTC
Created attachment 167596 [details] [review]
Bug 37054: DO NOT PUSH - Schema updates

Signed-off-by: David Nind <david@davidnind.com>
Comment 7 David Nind 2024-06-08 23:21:05 UTC
Created attachment 167597 [details] [review]
Bug 37054: Add branch color to branches.tt

Signed-off-by: David Nind <david@davidnind.com>
Comment 8 David Nind 2024-06-08 23:21:07 UTC
Created attachment 167598 [details] [review]
Bug 37054: Adjust header colors if branches.branchcolor is used

To test:
1. Apply patch, update database, restart services, yarn build
2. Go to Administration > Libraries
3. Edit or create a new branch.
4. You should now see a 'Branch color' option.
5. Set that to anything you want.
6. Log in as that branch.
7. Your header color should now relect that choice.
8. Log in to another branch without a set branch color.
9. The header should remain the default green.

Signed-off-by: David Nind <david@davidnind.com>
Comment 9 Owen Leonard 2024-06-10 17:13:03 UTC
Created attachment 167609 [details] [review]
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.
Comment 10 David Nind 2024-06-10 19:21:52 UTC
Created attachment 167612 [details] [review]
Bug 37054: DBUpdate

Signed-off-by: David Nind <david@davidnind.com>
Comment 11 David Nind 2024-06-10 19:21:55 UTC
Created attachment 167613 [details] [review]
Bug 37054: DO NOT PUSH - Schema updates

Signed-off-by: David Nind <david@davidnind.com>
Comment 12 David Nind 2024-06-10 19:21:58 UTC
Created attachment 167614 [details] [review]
Bug 37054: Add branch color to branches.tt

Signed-off-by: David Nind <david@davidnind.com>
Comment 13 David Nind 2024-06-10 19:22:00 UTC
Created attachment 167615 [details] [review]
Bug 37054: Adjust header colors if branches.branchcolor is used

To test:
1. Apply patch, update database, restart services, yarn build
2. Go to Administration > Libraries
3. Edit or create a new branch.
4. You should now see a 'Branch color' option.
5. Set that to anything you want.
6. Log in as that branch.
7. Your header color should now relect that choice.
8. Log in to another branch without a set branch color.
9. The header should remain the default green.

Signed-off-by: David Nind <david@davidnind.com>
Comment 14 David Nind 2024-06-10 19:22:03 UTC
Created attachment 167616 [details] [review]
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>
Comment 15 Lucas Gass (lukeg) 2024-06-10 22:54:07 UTC
Thank you Owen! I am going to propose 2 changes:

1. I don't like that the background color of the links still changes to green when a custom color is set. In my opinion we don't need to set the background color on hover. I think that rule can be removed for the header.scss file. 

2. Can we turn the filter brightness down just a bit on the '#header_search button[type="submit"]' btn? And then turn it up a bit when hovering on that element?
Comment 16 Lucas Gass (lukeg) 2024-06-10 22:55:47 UTC
Created attachment 167618 [details] [review]
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness
Comment 17 Owen Leonard 2024-06-11 11:00:04 UTC
Created attachment 167625 [details] [review]
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 18 Tomás Cohen Arazi (tcohen) 2024-06-13 19:11:49 UTC
This looks great!
Comment 19 Katrin Fischer 2024-09-02 09:43:27 UTC
Please rebase!
Comment 20 Lucas Gass (lukeg) 2024-09-09 17:19:45 UTC
Created attachment 171221 [details] [review]
Bug 37054: DBUpdate

Signed-off-by: David Nind <david@davidnind.com>
Comment 21 Lucas Gass (lukeg) 2024-09-09 17:19:48 UTC
Created attachment 171222 [details] [review]
Bug 37054: DO NOT PUSH - Schema updates

Signed-off-by: David Nind <david@davidnind.com>
Comment 22 Lucas Gass (lukeg) 2024-09-09 17:19:51 UTC
Created attachment 171223 [details] [review]
Bug 37054: Add branch color to branches.tt

Signed-off-by: David Nind <david@davidnind.com>
Comment 23 Lucas Gass (lukeg) 2024-09-09 17:19:55 UTC
Created attachment 171224 [details] [review]
Bug 37054: Adjust header colors if branches.branchcolor is used

To test:
1. Apply patch, update database, restart services, yarn build
2. Go to Administration > Libraries
3. Edit or create a new branch.
4. You should now see a 'Branch color' option.
5. Set that to anything you want.
6. Log in as that branch.
7. Your header color should now relect that choice.
8. Log in to another branch without a set branch color.
9. The header should remain the default green.

Signed-off-by: David Nind <david@davidnind.com>
Comment 24 Lucas Gass (lukeg) 2024-09-09 17:19:58 UTC
Created attachment 171225 [details] [review]
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>
Comment 25 Lucas Gass (lukeg) 2024-09-09 17:20:01 UTC
Created attachment 171226 [details] [review]
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 26 Lucas Gass (lukeg) 2024-09-09 17:20:34 UTC
rebased for current main