Add a filter to only display public links

When the key filter is clicked once, it only displays private link. When it is clicked on again, it becomes red and only public links are displayed. Another click and all links are displayed. The current visibility status is shown in the search banner

Fixes #1030

3 files changed, 11 insertions, 6 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 14439402..1e07a88e 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -453,6 +453,11 @@ body, .pure-g [class*="pure-u"] {
     background: #1b926c;
 }
 
+.linklist-filters .filter-block {
+    color: #f5f5f5;
+    background: #ac2925;
+}
+
 .linklist-pages {
     margin: 5px 0;
     color: #252525;
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 347b3d13..e1726f87 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -6,8 +6,8 @@
           {'Filters'|t}
         </span>
         {if="isLoggedIn()"}
-        <a href="?privateonly" title="{'Filter private links'|t}"
-           class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+        <a href="?visibility={$nextVisibility}" title="{'Filter links by visibility'|t}"
+           class="{if="$visibility=='private'"}filter-on{elseif="$visibility=='public'"}filter-block{else}filter-off{/if}"
         ><i class="fa fa-key"></i></a>
         {/if}
         <a href="?untaggedonly" title="{'Filter untagged links'|t}"
diff --git a/tpl/vintage/linklist.paging.html b/tpl/vintage/linklist.paging.html
index 86019c01..156a6b2a 100644
--- a/tpl/vintage/linklist.paging.html
+++ b/tpl/vintage/linklist.paging.html
@@ -1,11 +1,11 @@
 <div class="paging">
 {if="isLoggedIn()"}
     <div class="paging_privatelinks">
-        <a href="?privateonly">
-                {if="$privateonly"}
-                <img src="images/private_16x16_active.png#" width="16" height="16" title="Click to see all links" alt="Click to see all links">
+        <a href="?visibility={$nextVisibility}">
+                {if="$visibility=='private' || $visibility=='public'"}
+                <img src="images/private_16x16_active.png#" width="16" height="16" title="Filter links by visibility" alt="Filter links by visibility">
                 {else}
-                <img src="images/private_16x16.png#" width="16" height="16" title="Click to see only private links" alt="Click to see only private links">
+                <img src="images/private_16x16.png#" width="16" height="16" title="Filter links by visibility" alt="Filter links by visibility">
                 {/if}
                 </a>