Bug 26687

Created attachment 111686 [details] [review]
Bug 26687: Add color to Font Awesome icon for superlibrarian patrons

Bug 26534 adds a shield Font Awesome icon to help identify staff patrons.
I propose to color this icon when patron is a superlibrarian.

Patch adds 'is-superlibrarian' class that may be used for more CSS tuning.

Test plan:
1) Update staff CSS (yarn build)
2) Compare display between a patron A beeing superlibarian and a patron B having only staff interface access
3) Patron B has unchanged black shield icon
4) Patron A has red shield icon
5) Check a patron without permissions has no shield icon

Created attachment 111871 [details] [review]
Bug 26687: Add color to Font Awesome icon for superlibrarian patrons

Bug 26534 adds a shield Font Awesome icon to help identify staff
patrons. I propose to color this icon when patron is a superlibrarian.

Patch adds 'is-superlibrarian' class that may be used for more CSS
tuning.

Test plan:
1) Update staff CSS (yarn build)
2) Compare display between a patron A beeing superlibarian and a patron
   B having only staff interface access
3) Patron B has unchanged black shield icon
4) Patron A has red shield icon
5) Check a patron without permissions has no shield icon

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Created attachment 111875 [details] [review]
Bug 26687: Add color to Font Awesome icon for superlibrarian patrons

Bug 26534 adds a shield Font Awesome icon to help identify staff
patrons. I propose to color this icon when patron is a superlibrarian.

Patch adds 'is-superlibrarian' class that may be used for more CSS
tuning.

Test plan:
1) Update staff CSS (yarn build)
2) Compare display between a patron A beeing superlibarian and a patron
   B having only staff interface access
3) Patron B has unchanged black shield icon
4) Patron A has red shield icon
5) Check a patron without permissions has no shield icon

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Nice enhancement, works as expected.. Passing QA

Minor point.. I wonder if there's any more accessible ways of highlighting this too... we might find colour blindness issues.. I'm no expert.  Either way I think that can be for another day.

(In reply to Martin Renvoize from comment #5)
> we might find colour blindness issues...

I agree and I should have considered that when testing. I suggest an alternate icon. Maybe https://fontawesome.com/v4.7.0/icon/star ?

I agree with Martin. It's been years since I delved into accessibility research, but I do recall that using colour as the sole signifier of something makes something less accessible.

I like your idea, Owen, of using the star!

Maybe a superlibrarian should have the shield to denote staff status *plus* a star to denote superlibrarian status?

That might also be a nice visual sanity check to make sure that only staff are superlibrarians heh.

(In reply to Owen Leonard from comment #6)
> (In reply to Martin Renvoize from comment #5)
> > we might find colour blindness issues...
> 
> I agree and I should have considered that when testing. I suggest an
> alternate icon. Maybe https://fontawesome.com/v4.7.0/icon/star ?

I agree that color is not the best.

But I think we should keep star icon to mean 'favorite' or 'VIP' (like in many softwares).

I'm searching another icon.

Or maybe 2 shields ?

Heeeee why not :
https://fontawesome.com/v4.7.0/icon/superpowers

(In reply to Fridolin SOMERS from comment #10)
> https://fontawesome.com/v4.7.0/icon/superpowers

That symbol doesn't mean anything to me! I guess it's a brand logo?

https://fontawesome.com/v4.7.0/icon/bolt ?

I'd be happy with either a different icon or a visible change on the background colour.. i.e some striped or zigzags or something.. both would satisfy the accessibility requirements.

https://fontawesome.com/icons/user-secret to throw another into the mix

(In reply to Martin Renvoize from comment #13)
> I'd be happy with either a different icon or a visible change on the
> background colour.. i.e some striped or zigzags or something.. both would
> satisfy the accessibility requirements.

 I could see people overriding background colour for customizations, so I'm not sure how practical that is. I could also see people complaining about stripes or zigzags, although I like the sound of them.

(In reply to Owen Leonard from comment #12)
> https://fontawesome.com/v4.7.0/icon/bolt ?

+1 for that, its perfect.

The Flash is a superlibarian XD.

PS :
People are used to "user-secret" as web-browser private navigation.

(In reply to Fridolin SOMERS from comment #16)
> (In reply to Owen Leonard from comment #12)
> > https://fontawesome.com/v4.7.0/icon/bolt ?
> 
> +1 for that, its perfect.
> 
> The Flash is a superlibarian XD.
> 
> PS :
> People are used to "user-secret" as web-browser private navigation.

I'm also +1 for "bolt" and I agree about "user-secret" being for private navigation.

Comment on attachment 111875 [details] [review]
Bug 26687: Add color to Font Awesome icon for superlibrarian patrons

I'll create a new patch

Created attachment 112140 [details]
Screenshot

Created attachment 112141 [details] [review]
Bug 26687: Add a Font Awesome icon for superlibrarian patrons

Bug 26534 adds a shield Font Awesome icon to help identify staff
patrons. I propose to add an icon when patron is a superlibrarian.

Patch adds 'is-superlibrarian' class that may be used for more CSS
tuning.

Test plan:
1) Compare display between a patron A beeing superlibarian and a patron
   B having only staff interface access
2) Patron B has only shield icon
3) Patron A has shield icon and bolt icon
4) Check a patron without permissions has no shield icon

Created attachment 112245 [details] [review]
Bug 26687: Add a Font Awesome icon for superlibrarian patrons

Bug 26534 adds a shield Font Awesome icon to help identify staff
patrons. I propose to add an icon when patron is a superlibrarian.

Patch adds 'is-superlibrarian' class that may be used for more CSS
tuning.

Test plan:
1) Compare display between a patron A beeing superlibarian and a patron
   B having only staff interface access
2) Patron B has only shield icon
3) Patron A has shield icon and bolt icon
4) Check a patron without permissions has no shield icon

Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>

Created attachment 112247 [details] [review]
Bug 26687: Add a Font Awesome icon for superlibrarian patrons

Bug 26534 adds a shield Font Awesome icon to help identify staff
patrons. I propose to add an icon when patron is a superlibrarian.

Patch adds 'is-superlibrarian' class that may be used for more CSS
tuning.

Test plan:
1) Compare display between a patron A beeing superlibarian and a patron
   B having only staff interface access
2) Patron B has only shield icon
3) Patron A has shield icon and bolt icon
4) Check a patron without permissions has no shield icon

Signed-off-by: Séverine QUEUNE <severine.queune@bulac.fr>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Pushed to master for 20.11, thanks to everybody involved!