client: convert sidebar accordion marks into SVG

Author: jtojnar

assets/css/style.css

@@ -114,18 +114,6 @@ input {
     #nav-filter-wrapper  {
         overflow:hidden;
     }
-    
-        .nav-filter-collapsed {
-            cursor:pointer;
-            padding-left: 20px;
-            background: url(../images/nav-collapsed.png) center left no-repeat;
-        }
-        
-        .nav-filter-expanded {
-            cursor:pointer;
-            padding-left: 20px;
-            background: url(../images/nav-expanded.png) center left no-repeat;
-        }
 
     #nav-filter-title {
         margin-top:20px;
@@ -211,7 +199,9 @@ input {
             display: inline !important;
         }
 
-    #nav h2 button {
+    .nav-section-toggle {
+        cursor: pointer;
+        background-color: transparent;
         display: block;
         width: 100%;
         text-align: inherit;
@@ -221,26 +211,13 @@ input {
         color:#494949;
         text-transform:uppercase;
         font-size: 0.8rem;
-        margin-left:18px;
         font-weight:bold;
     }
 
     #nav-tags-wrapper  {
         overflow:hidden;
     }
 
-        .nav-tags-collapsed {
-            cursor:pointer;
-            padding-left: 20px;
-            background: url(../images/nav-collapsed.png) center left no-repeat;
-        }
-        
-        .nav-tags-expanded {
-            cursor:pointer;
-            padding-left: 20px;
-            background: url(../images/nav-expanded.png) center left no-repeat;
-        }
-        
         #nav-tags li a {
             position:relative;
             color:#b9b9b9;
@@ -276,18 +253,6 @@ input {
         overflow:hidden;
     }
 
-        .nav-sources-collapsed {
-            cursor:pointer;
-            padding-left: 20px;
-            background: url(../images/nav-collapsed.png) center left no-repeat;
-        }
-        
-        .nav-sources-expanded {
-            cursor:pointer;
-            padding-left: 20px;
-            background: url(../images/nav-expanded.png) center left no-repeat;
-        }
-        
         #nav-sources {
             display:none;
         }

assets/images/nav-collapsed.png

@@ -12,6 +12,8 @@ import { faTimesCircle } from '@fortawesome/free-regular-svg-icons/faTimesCircle
 import { faArrowAltCircleDown } from '@fortawesome/free-solid-svg-icons/faArrowAltCircleDown';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
 import { faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons/faCloudUploadAlt';
 import { faCog } from '@fortawesome/free-solid-svg-icons/faCog';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
@@ -47,6 +49,8 @@ export default function initIcons() {
         faTimesCircle,
         faArrowAltCircleDown,
         faArrowRight,
+        faCaretDown,
+        faCaretRight,
         faCheckCircle,
         faCloudUploadAlt,
         faCog,

assets/images/nav-expanded.png

@@ -66,6 +66,7 @@ selfoss.events.navigation = function() {
             selfoss.events.resize();
         });
         $('#nav-filter-title').toggleClass('nav-filter-collapsed nav-filter-expanded');
+        $('#nav-filter-title').find('svg').toggleClass('fa-caret-down fa-caret-right');
         $('#nav-filter-title').attr('aria-expanded', function(i, attr) {
             return attr == 'true' ? 'false' : 'true';
         });
@@ -97,6 +98,7 @@ selfoss.events.navigation = function() {
     $('#nav-tags-title').unbind('click').click(function() {
         $('#nav-tags').slideToggle('slow');
         $('#nav-tags-title').toggleClass('nav-tags-collapsed nav-tags-expanded');
+        $('#nav-tags-title').find('svg').toggleClass('fa-caret-down fa-caret-right');
         $('#nav-tags-title').attr('aria-expanded', function(i, attr) {
             return attr == 'true' ? 'false' : 'true';
         });
@@ -129,6 +131,7 @@ selfoss.events.navigation = function() {
         var toggle = function() {
             $('#nav-sources').slideToggle('slow');
             $('#nav-sources-title').toggleClass('nav-sources-collapsed nav-sources-expanded');
+            $('#nav-sources-title').find('svg').toggleClass('fa-caret-down fa-caret-right');
             $('#nav-sources-title').attr('aria-expanded', function(i, attr) {
                 return attr == 'true' ? 'false' : 'true';
             });

assets/js/icons.js

@@ -54,7 +54,7 @@ selfoss.ui = {
                 <button accesskey="a" id="nav-mark">{selfoss.ui._('markread')}</button>
 
                 <div id="nav-filter-wrapper">
-                    <h2><button type="button" id="nav-filter-title" class="nav-filter-expanded" aria-expanded="true">{selfoss.ui._('filter')}</button></h2>
+                    <h2><button type="button" id="nav-filter-title" class="nav-section-toggle nav-filter-expanded" aria-expanded="true"><i class="fas fa-caret-down fa-lg fa-fw"></i> {selfoss.ui._('filter')}</button></h2>
                     <ul id="nav-filter" aria-labeledby="nav-filter-title">
                         <li>
                             <a id="nav-filter-newest" class="nav-filter-newest" href="#">
@@ -85,11 +85,11 @@ selfoss.ui = {
                 <hr />
 
                 <div id="nav-tags-wrapper">
-                    <h2><button type="button" id="nav-tags-title" class="nav-tags-expanded" aria-expanded="true">{selfoss.ui._('tags')}</button></h2>
+                    <h2><button type="button" id="nav-tags-title" class="nav-section-toggle nav-tags-expanded" aria-expanded="true"><i class="fas fa-caret-down fa-lg fa-fw"></i> {selfoss.ui._('tags')}</button></h2>
                     <ul id="nav-tags" aria-labeledby="nav-tags-title">
                         <li><a class="active nav-tags-all" href="#">{selfoss.ui._('alltags')}</a></li>
                     </ul>
-                    <h2><button type="button" id="nav-sources-title" class="nav-sources-collapsed" aria-expanded="false">{selfoss.ui._('sources')}</button></h2>
+                    <h2><button type="button" id="nav-sources-title" class="nav-section-toggle nav-sources-collapsed" aria-expanded="false"><i class="fas fa-caret-right fa-lg fa-fw"></i> {selfoss.ui._('sources')}</button></h2>
                     <ul id="nav-sources" aria-labeledby="nav-sources-title">
                     </ul>
                 </div>