Make the "private link" filter more explicit

[virtualtam]

Ergonomy issue

The "display private links only" option is currently toggled by clicking on the little key icon on the left of the page counter.

When selected:

• only private links are displayed
• the grey-ish key icon is replaced by a gold-ish key icon
• private links are displayed with a grey title

Unless using a theme that sets a different color scheme for private links, there is no explicit indication that the links are being filtered:

• the URL is left unchanged (a session variable holds the parameter)
• the key icon is not explicit enough

Suggestions

• define a more distinct visual identity for private links
• display a filter information
  • this is already done when performing full-text or tag searches

[nodiscc]

I think it was planned to use the "private links only" filter area to add more filters (self-notes only, etc.). So would just adding a label Filters: in this toolbar do the trick?

Inactive filters are grayscale, active filters have color icons. I have no trouble telling when private links filtering is enabled, the colorful key icon is an obvious indicator for me; hence I have no clear solution in mind. Should we also change the icon to a lock?

define a more distinct visual identity for private links

This might need some attention. Slightly changing the background color? Currently, only the title color is changed to gray. A toggle button in the same div as edit/delete buttons would be a nice addition.

[ArthurHoaro]

IMHO:

1. Adding Filters: is a good idea, it tells what this icon is doing here.
2. Let the icon as is.
3. When filtering, adds 'n results for 🔑private', or when searching: 'n results for search 🔑private'.
4. I like @nodiscc icons, it adds a visual difference between public/private instead of nothing vs lock.
5. I don't really like gray title.

Keep in mind that we shouldn't spend too much time on templates since we plan to replace them.

[virtualtam]

Thanks for your insights ;-)

• having a Filter: <some criteria> information, whatever the filters/criteria are, sounds good
• the icon should be the same for the filter and the private links (either a key or a lock, but not both)
• maybe it's sufficient to flag private links with an icon?
• regarding the visual identity, a slight colour change for both title and background may suffice

[nodiscc]

• Let's add Filter:
• Let's change all icons to locks. Our current reference icon set is Fugue http://p.yusukekamiyamane.com/
• I think having only an icon is not an obvious enough distinction between private/public links. I don't like the gray title either (maybe it should be changed later; during the template rework).

[mro]

there's a bunch of locks in unicode: 🔓🔐 (I use them in http://app.mro.name/ShaarliOS)

[nodiscc]

Part of #266