Bug 37054 - Allow for custom library colors in the staff interface header search
Summary: Allow for custom library colors in the staff interface header search
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Lucas Gass (lukeg)
QA Contact: Laura Escamilla
URL:
Keywords:
Depends on:
Blocks: 37067
  Show dependency treegraph
 
Reported: 2024-06-07 16:02 UTC by Lucas Gass (lukeg)
Modified: 2025-01-16 14:43 UTC (History)
8 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Bug 37054: DBUpdate (2.14 KB, patch)
2024-06-07 16:17 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: DO NOT PUSH - Schema updates (1.40 KB, patch)
2024-06-07 16:21 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: Add branch color to branches.tt (2.44 KB, patch)
2024-06-07 17:05 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: Adjust header colors if branches.branchcolor is used (5.66 KB, patch)
2024-06-07 22:06 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: DBUpdate (2.19 KB, patch)
2024-06-08 23:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: DO NOT PUSH - Schema updates (1.44 KB, patch)
2024-06-08 23:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: Add branch color to branches.tt (2.49 KB, patch)
2024-06-08 23:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: Adjust header colors if branches.branchcolor is used (5.71 KB, patch)
2024-06-08 23:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field (7.21 KB, patch)
2024-06-10 17:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37054: DBUpdate (2.19 KB, patch)
2024-06-10 19:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: DO NOT PUSH - Schema updates (1.44 KB, patch)
2024-06-10 19:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: Add branch color to branches.tt (2.49 KB, patch)
2024-06-10 19:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: Adjust header colors if branches.branchcolor is used (5.71 KB, patch)
2024-06-10 19:22 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field (7.26 KB, patch)
2024-06-10 19:22 UTC, David Nind
Details | Diff | Splinter Review
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness (1.79 KB, patch)
2024-06-10 22:55 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness (1.83 KB, patch)
2024-06-11 11:00 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 37054: DBUpdate (2.19 KB, patch)
2024-09-09 17:19 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: DO NOT PUSH - Schema updates (1.44 KB, patch)
2024-09-09 17:19 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: Add branch color to branches.tt (2.50 KB, patch)
2024-09-09 17:19 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: Adjust header colors if branches.branchcolor is used (5.14 KB, patch)
2024-09-09 17:19 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field (6.43 KB, patch)
2024-09-09 17:19 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness (1.12 KB, patch)
2024-09-09 17:20 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: DBUpdate (2.26 KB, patch)
2024-12-30 13:43 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37054: DO NOT PUSH - Schema updates (1.51 KB, patch)
2024-12-30 13:43 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37054: Add branch color to branches.tt (2.55 KB, patch)
2024-12-30 13:43 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37054: Adjust header colors if branches.branchcolor is used (5.21 KB, patch)
2024-12-30 13:43 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37054: (follow-up) Simplify changes, add a way to clear the color field (6.49 KB, patch)
2024-12-30 13:43 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness (1.18 KB, patch)
2024-12-30 13:43 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 37054: (follow-up) Rename branchcolor to library_color and use snake casing (7.66 KB, patch)
2024-12-30 18:07 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: DO NOT PUSH - More schema updates (1.42 KB, patch)
2024-12-30 18:07 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: Add API support (1.15 KB, patch)
2024-12-30 18:25 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 37054: atomic update - display message only if column added (944 bytes, patch)
2025-01-16 10:05 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 37054: Replace the TT plugin method with a more generic one (2.01 KB, patch)
2025-01-16 10:13 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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
Comment 27 Laura Escamilla 2024-12-30 13:43:14 UTC
Created attachment 175991 [details] [review]
Bug 37054: DBUpdate

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Comment 28 Laura Escamilla 2024-12-30 13:43:16 UTC
Created attachment 175992 [details] [review]
Bug 37054: DO NOT PUSH - Schema updates

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Comment 29 Laura Escamilla 2024-12-30 13:43:19 UTC
Created attachment 175993 [details] [review]
Bug 37054: Add branch color to branches.tt

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Comment 30 Laura Escamilla 2024-12-30 13:43:21 UTC
Created attachment 175994 [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>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Comment 31 Laura Escamilla 2024-12-30 13:43:23 UTC
Created attachment 175995 [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>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Comment 32 Laura Escamilla 2024-12-30 13:43:26 UTC
Created attachment 175996 [details] [review]
Bug 37054: (follow-up) Remove some unneeded SCSS and ajust button brightness

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Comment 33 Laura Escamilla 2024-12-30 13:44:06 UTC
Thank you for working on this, Lucas! I'm so excited to see this in Koha.
Comment 34 Katrin Fischer 2024-12-30 14:07:16 UTC
(In reply to Laura Escamilla from comment #33)
> Thank you for working on this, Lucas! I'm so excited to see this in Koha.

Hi Laura, thanks for QA! As we are just at the beginning of the cycle I'll be more strict about the guidelines for QA/SO being from people of different institutions. Sorry that this "hit you" first now :(

I'd also like to get some notes on implementation. We now have opacusercss in the branches table. This is for adjusting the color in one specific spot, which could also have been achieved with a staffusercss. Is there a strong reason it was done this way? (I assume so, but always good to have it written down!)

Some notes from looking at the code:

1) This uses "branch" a lot, but library should be used. 
https://wiki.koha-community.org/wiki/Terminology

2) I believe we are missing changes for the REST API since there are routes for library information. If this was named library_color in the db as well, we could save a mapping.

3) I think the method name should be snake case per PERL9: Subroutine naming conventions.
https://wiki.koha-community.org/wiki/Coding_Guidelines
Comment 35 Lucas Gass (lukeg) 2024-12-30 14:48:16 UTC
> I'd also like to get some notes on implementation. We now have opacusercss
> in the branches table. This is for adjusting the color in one specific spot,
> which could also have been achieved with a staffusercss. Is there a strong
> reason it was done this way? (I assume so, but always good to have it
> written down!)

I wrote this patch to replace custom JS we have been using to show a different color header for each branch the user is logged in at. I suppose it could be done with something like `staffusercss`. But I don't see the reason for the pref, why not just use IntranetUserCSS if this is how we are going to do it? Maybe pass in a data-attribute for the logged in branch, that can be targeted with CSS.


Then staff would still need to be able to write CSS, which was something I was hoping to avoid with this patch.
Comment 36 Katrin Fischer 2024-12-30 15:35:52 UTC
(In reply to Lucas Gass (lukeg) from comment #35)
> > I'd also like to get some notes on implementation. We now have opacusercss
> > in the branches table. This is for adjusting the color in one specific spot,
> > which could also have been achieved with a staffusercss. Is there a strong
> > reason it was done this way? (I assume so, but always good to have it
> > written down!)
> 
> I wrote this patch to replace custom JS we have been using to show a
> different color header for each branch the user is logged in at. I suppose
> it could be done with something like `staffusercss`. But I don't see the
> reason for the pref, why not just use IntranetUserCSS if this is how we are
> going to do it? Maybe pass in a data-attribute for the logged in branch,
> that can be targeted with CSS.
> 
> 
> Then staff would still need to be able to write CSS, which was something I
> was hoping to avoid with this patch.

Just to clarify: I didn't mean a pref, but something similar to the library specific CSS available now on the library administration page. I do see benefit in an easy to use color picker.
Comment 37 Lucas Gass (lukeg) 2024-12-30 18:07:54 UTC
Created attachment 176014 [details] [review]
Bug 37054: (follow-up) Rename branchcolor to library_color and use snake casing
Comment 38 Lucas Gass (lukeg) 2024-12-30 18:07:57 UTC
Created attachment 176015 [details] [review]
Bug 37054: DO NOT PUSH - More schema updates
Comment 39 Lucas Gass (lukeg) 2024-12-30 18:25:55 UTC
Created attachment 176016 [details] [review]
Bug 37054: Add API support
Comment 40 Jonathan Druart 2025-01-16 10:05:32 UTC
Created attachment 176615 [details] [review]
Bug 37054: atomic update - display message only if column added
Comment 41 Jonathan Druart 2025-01-16 10:13:45 UTC
Created attachment 176616 [details] [review]
Bug 37054: Replace the TT plugin method with a more generic one

Let's return the whole Koha::Library object so that it can be reusable
for another attribute.

Keeping the CamelCase to be consistent with the rest of the other
methods in this file.
Comment 42 Jonathan Druart 2025-01-16 10:15:09 UTC
1. API spec:
"description: the library color"
The... building? :D

2. Please provide tests

3. Color picker's default is "black". It looks like it will be black, not "default"/green.

4. IMO this should be CSS or a plugin, it's overkill to have this in Koha core. Personal opinion, not blocker.

Also added 2 patches.

FQA for 2, discussion for 4.
Comment 43 Lucas Gass (lukeg) 2025-01-16 14:43:04 UTC
> 4. IMO this should be CSS or a plugin, it's overkill to have this in Koha
> core. Personal opinion, not blocker.

I've considered this as a plugin, and it would be fine IMO to go that route.