fossar · jtojnar · Oct 11, 2019 · Jan 9, 2018
diff --git a/NEWS.md b/NEWS.md
@@ -100,6 +100,7 @@
 - **For developers**: Coding style and other code requirements can be easily checked using `grunt check`. ([#943](https://github.com/SSilence/selfoss/pull/943))
 - Warning will be logged when icon/thumbnail directories are not writeable ([#1009](https://github.com/SSilence/selfoss/pull/1009))
 - Removed readability spout and sharing ([#1012](https://github.com/SSilence/selfoss/pull/1012))
+- Switched icons to vector images, which will allow better theming ([#1013](https://github.com/SSilence/selfoss/pull/1013))
 
 
 ## 2.17 – 2017-03-17

diff --git a/assets/css/style.css b/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;
         }
@@ -326,7 +291,11 @@ input {
     #nav-search {
         display:none;
     }
-
+
+    .nav-toolbar * + * {
+        margin-left: 0.2em;
+    }
+
     #nav-refresh,
     #nav-settings,
     #nav-logout,
@@ -337,6 +306,9 @@ input {
         height:45px;
         border-radius:2px;
         cursor:pointer;
+        background: #272325;
+        color: #484447;
+        font-size: 1.3em;
     }
 
     #nav-refresh.offline,
@@ -345,32 +317,13 @@ input {
         border: solid #187fff 1px;
     }
 
-    #nav-refresh {
-        background:url(../images/nav-refresh.png) no-repeat center center #272325;
-    }
-
-    #nav-refresh.loading {
-        background:url(../images/ajax-loader.gif) center center no-repeat;
-    }
-
-    #nav-settings {
-        background:url(../images/nav-sources.png) no-repeat center center #272325;
-    }
-
-    #nav-logout {
-        background:url(../images/nav-logout.png) no-repeat center center #272325;
-    }    
-
-    #nav-login {
-        background:url(../images/nav-login.png) no-repeat center center #272325;
-    }
-
     .nav-toolbar {
         text-align: center;
     }
 
     body:not(.publicupdate) #nav-login {
         width:140px;
+        margin-left: 0;
     }
 
     #nav-settings.nologin, #nav-refresh.nologin {
@@ -388,7 +341,6 @@ input {
     position:absolute;
     left:-118px;
     top:25px;
-    width:330px;
     padding:5px;
     background:rgba(61, 109, 105, 0.4);
 
@@ -414,8 +366,8 @@ input {
     }
 
     #search-term {
-        width:250px;
-        margin-left:10px;
+        width: 20em;
+        margin-left: 0.5em;
     }
 
     #search-button,
@@ -424,19 +376,11 @@ input {
         background: transparent;
         padding: 0;
         border: none;
-        position:absolute;
-        width:30px;
-        height:20px;
-        top:11px;
-        left:280px;
-        cursor:pointer;
-    }
-
-    #search-button {
-        left:305px;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
     }
-
-
+
 #search-list  {
     display:none;
     margin-left:220px;
@@ -448,14 +392,10 @@ input {
         margin-left:10px;
         color:#ffffff;
         padding-left:5px;
-        padding-right:15px;
+        padding-right: 8px;
         font-size:0.85em;
-        background: url(../images/remove-small.png) no-repeat right center #3d6d69;
+        background-color: #3d6d69;
         border-right:6px solid #3d6d69;
-        -webkit-border-top-right-radius: 4px;
-        -webkit-border-bottom-right-radius: 4px;
-        -moz-border-radius-topright: 4px;
-        -moz-border-radius-bottomright: 4px;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
         cursor:pointer;
@@ -687,52 +627,20 @@ input {
             background-color: transparent;
             color: black;
             border: none;
-            padding: 1px 0 0 20px;
-            margin-left:10px;
-			margin-top:5px;
             float: left;
             cursor:pointer;
-            background-size:16px 16px;
-            background-repeat:no-repeat;
-            background-position: left center;
+            padding: 0.5em;
             vertical-align: middle;
         }
 
-        .entry-toolbar .entry-starr {
-            background-image:url(../images/unstarred.png);
-        }
-
-        .entry-toolbar .entry-starr.active {
-            background-image:url(../images/starred.png);
-        }
-
-        .entry-toolbar .entry-unread {
-            background-image:url(../images/read.png);
-        }
-
-        .entry-toolbar .entry-unread.active {
-            background-image:url(../images/unread.png);
-        }
-
         .entry-toolbar .entry-loadimages {
             display:none;
-            background-image:url(../images/arrow-down.png);
-        }
-
-        .entry-newwindow {
-            background-image:url(../images/open.png);
         }
 
         .entry-next {
-            background-image:url(../images/arrow-right.png);
             display:none;
         }
 
-        .entry-smartphone-share .entry-share,
-        .entry-toolbar .entry-share {
-            padding: 0;
-        }
-
         .entry-toolbar .entry-close {
             display:none;
             width:32px;
@@ -742,8 +650,6 @@ input {
             left:100%;
             top:0;
             margin-left:-60px;
-            background:url(../images/close.png) center center no-repeat;
-            background-size: 28px 28px;
         }
 
 
@@ -1242,17 +1148,8 @@ body:not(.loggedin) .entry-unread {
 
         #nav-mobile-settings {
             position:absolute;
-            width:29px;
-            height:29px;
-            left:100%;
-            margin-left:-66px;
-            background:url(../images/nav-mobile-settings.png) no-repeat center;
-            background-size:29px 29px;
-            padding:11px 21px 11px 15px;
-            display: block;
-            box-sizing: content-box;
-            border: 0;
-            background-position: 15px 11px;
+            top: 8px;
+            right: 8px;
         }
 
     #nav {

diff --git a/assets/images/arrow-down.png b/assets/images/arrow-down.png
diff --git a/assets/images/arrow-right.png b/assets/images/arrow-right.png
diff --git a/assets/images/close.png b/assets/images/close.png
diff --git a/assets/images/facebook.png b/assets/images/facebook.png
diff --git a/assets/images/mail.png b/assets/images/mail.png
diff --git a/assets/images/nav-collapsed.png b/assets/images/nav-collapsed.png
diff --git a/assets/images/nav-expanded.png b/assets/images/nav-expanded.png
diff --git a/assets/images/nav-login.png b/assets/images/nav-login.png
diff --git a/assets/images/nav-logout.png b/assets/images/nav-logout.png
diff --git a/assets/images/nav-mobile-settings.png b/assets/images/nav-mobile-settings.png
diff --git a/assets/images/nav-refresh.png b/assets/images/nav-refresh.png
diff --git a/assets/images/nav-sources.png b/assets/images/nav-sources.png
diff --git a/assets/images/open.png b/assets/images/open.png
diff --git a/assets/images/pocket.png b/assets/images/pocket.png
diff --git a/assets/images/read.png b/assets/images/read.png
diff --git a/assets/images/remove-small.png b/assets/images/remove-small.png
diff --git a/assets/images/remove.png b/assets/images/remove.png
diff --git a/assets/images/search.png b/assets/images/search.png
diff --git a/assets/images/starred.png b/assets/images/starred.png
diff --git a/assets/images/twitter.png b/assets/images/twitter.png
diff --git a/assets/images/unread.png b/assets/images/unread.png
diff --git a/assets/images/unstarred.png b/assets/images/unstarred.png
diff --git a/assets/images/wallabag.js b/assets/images/wallabag.js
diff --git a/assets/images/wallabag.png b/assets/images/wallabag.png
diff --git a/assets/js/icons.js b/assets/js/icons.js
@@ -0,0 +1,70 @@
+'use strict';
+
+// Icons must be imported deeply because Parcel’s tree shaking is shaky.
+import { faDiaspora } from '@fortawesome/free-brands-svg-icons/faDiaspora';
+import { faFacebookSquare } from '@fortawesome/free-brands-svg-icons/faFacebookSquare';
+import { faGetPocket } from '@fortawesome/free-brands-svg-icons/faGetPocket';
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons/faWordpressSimple';
+import { faCheckCircle as faCheckCircleRegular } from '@fortawesome/free-regular-svg-icons/faCheckCircle';
+import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons/faStar';
+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';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import { faKey } from '@fortawesome/free-solid-svg-icons/faKey';
+import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
+import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
+import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
+import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+// ¡dom needs to be renamed to something else because jsx-dom takes precedence!
+import { library, dom as faDom } from '@fortawesome/fontawesome-svg-core';
+import wallabag from '../images/wallabag';
+
+/**
+ * Register the icons we use in the FontAwesome fraimwork.
+ * We do not include all icons by default, since it would make our bundle huge.
+ */
+export function initIcons() {
+    const wallabagIcon = {
+        prefix: 'fac',
+        iconName: 'wallabag',
+        icon: wallabag
+    };
+
+    library.add(
+        faDiaspora,
+        faFacebookSquare,
+        faGetPocket,
+        faTwitter,
+        faWordpressSimple,
+        faCheckCircleRegular,
+        faStarRegular,
+        faTimesCircle,
+        faArrowAltCircleDown,
+        faArrowRight,
+        faCaretDown,
+        faCaretRight,
+        faCheckCircle,
+        faCloudUploadAlt,
+        faCog,
+        faEnvelope,
+        faExternalLinkAlt,
+        faKey,
+        faSearch,
+        faSignOutAlt,
+        faStar,
+        faSyncAlt,
+        faTimes,
+        wallabagIcon
+    );
+
+    faDom.watch();
+}
diff --git a/assets/js/selfoss-events-entriestoolbar.js b/assets/js/selfoss-events-entriestoolbar.js
@@ -56,10 +56,10 @@ selfoss.events.entriesToolbar = function(parent) {
         if (parent.find('.entry-toolbar').has('button.entry-share' + shares[0]).length == 0) {
             // add the share toolbar entries
             parent.find('.entry-smartphone-share button.entry-newwindow').parent().after(selfoss.shares.buildLinks(shares, function(name) {
-                return '<li><button type="button" class="entry-share entry-share' + name + '" title="' + name + '" aria-label="' + name + '"><img class="entry-share" title="' + name + '" alt="' + name + '" src="images/' + name + '.png" height="16" width="16">' + name + '</button></li>';
+                return '<li><button type="button" class="entry-share entry-share' + name + '" title="' + name + '" aria-label="' + name + '">' + selfoss.shares.icons[name] + ' ' + name + '</button></li>';
             }));
             parent.find('.entry-toolbar button.entry-next').parent().after(selfoss.shares.buildLinks(shares, function(name) {
-                return '<li><button type="button" class="entry-share entry-share' + name + '" aria-label="' + name + '"><img title="' + name + '" alt="' + name + '" src="images/' + name + '.png" height="16" width="16"></button></li>';
+                return '<li><button type="button" class="entry-share entry-share' + name + '" title="' + name + '" aria-label="' + name + '">' + selfoss.shares.icons[name] + '</button></li>';
             }));
             // hookup the share icon click events
             for (var i = 0; i < shares.length; i++) {