(v0.7.0) Add Blacklist tags & UI improvements & Fix

Fix "Enable light theme" when light-theme is on (on start)
Add black list tags but don't save it for the moment
UI improvements like no select on .nav-wrapper & rename "How gelbooru works ?" by "How tags works ?" & more width on scrollbar

README.md

@@ -30,11 +30,11 @@
 * [x] Rating (Safe, Explicit, Questionable)
 * [x] Pagination
 * [x] Save image
-* [ ] Browse all
-* [ ] Top images
-* [ ] Hot images
+* [x] Browse all
+* [x] Top images
+* [x] Hot images
+* [x] Blacklist (Exclude tags)
 * [ ] Favorites
-* [ ] Blacklist (Exclude tags)
 
 ## Installing
 
@@ -50,6 +50,11 @@ To run the app :
 npm start
 ```
 
+To run the app with live reload :
+```sh
+npm run livereload || gulp
+```
+
 ## Build
 
 ```sh

main.js

@@ -1,11 +1,11 @@
 // Modules
 
-  const electron = require('electron');
-  const app = electron.app;
-  const BrowserWindow = electron.BrowserWindow;
-  const path = require('path');
-  const url = require('url');
-  const Store = require('./src/Store');
+  const electron = require('electron'),
+        app = electron.app,
+        BrowserWindow = electron.BrowserWindow,
+        path = require('path'),
+        url = require('url'),
+        Store = require('./src/Store');
 
   let window;
 
@@ -27,7 +27,8 @@
       height,
       frame: false,
       backgroundColor: '#242424',
-      icon: path.join(__dirname, 'build/icon.ico')
+      icon: path.join(__dirname, 'build/icon.ico'),
+      title: 'Gelbooru Client'
     });
     window.loadURL(url.format({
       pathname: path.join(__dirname, './src/index.html'),

package.json

@@ -1,10 +1,11 @@
 {
   "name": "gelbooru-client",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "You already know what it is.",
   "main": "main.js",
   "dependencies": {
     "axios": "0.17.1",
+    "electron-data": "2.1.0",
     "electron-save-file": "1.0.2"
   },
   "devDependencies": {
@@ -20,7 +21,8 @@
     "start": "electron .",
     "pack": "electron-builder --dir",
     "dist": "electron-builder",
-    "release": "build"
+    "release": "build",
+    "livereload": "gulp"
   },
   "build": {
     "appId": "com.gelbooru-client.app",

src/assets/css/index.css

@@ -5,7 +5,7 @@
   --dark: #242424;
 }
 
-*::-webkit-scrollbar {background-color: var(--dark); width: 0.5em;}
+*::-webkit-scrollbar {background-color: var(--dark); width: 0.7em;}
 *::-webkit-scrollbar-thumb {background-color: var(--accent);}
 ::selection {background: #FFF;}
 
@@ -47,6 +47,7 @@ nav#drag i.material-icons {
 
 .nav-wrapper {
   background-color: var(--primary);
+  -webkit-user-select: none;
 }
 
 .user-view .background {
@@ -277,12 +278,33 @@ input.select-dropdown.dropdown-trigger {
   color: #fff;
 }
 
+.chip:focus {
+  background-color: var(--accent);
+}
 .chips.focus {
-  border-bottom: 1px solid #26a69a;
-  -webkit-box-shadow: 0 1px 0 0 #26a69a;
-          box-shadow: 0 1px 0 0 #26a69a;
+  border-bottom: 1px solid var(--accent);
+  -webkit-box-shadow: 0 1px 0 0 var(--accent);
+          box-shadow: 0 1px 0 0 var(--accent);
 }
 
 .input-field .prefix.active {
-  color: #26a69a;
+  color: var(--accent);
+}
+
+input:not([type]):focus:not([readonly]),
+input[type=text]:not(.browser-default):focus:not([readonly]),
+input[type=password]:not(.browser-default):focus:not([readonly]),
+input[type=email]:not(.browser-default):focus:not([readonly]),
+input[type=url]:not(.browser-default):focus:not([readonly]),
+input[type=time]:not(.browser-default):focus:not([readonly]),
+input[type=date]:not(.browser-default):focus:not([readonly]),
+input[type=datetime]:not(.browser-default):focus:not([readonly]),
+input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+input[type=tel]:not(.browser-default):focus:not([readonly]),
+input[type=number]:not(.browser-default):focus:not([readonly]),
+input[type=search]:not(.browser-default):focus:not([readonly]),
+textarea.materialize-textarea:focus:not([readonly]) {
+  border-bottom: 1px solid var(--accent);
+  -webkit-box-shadow: 0 1px 0 0 var(--accent);
+          box-shadow: 0 1px 0 0 var(--accent);
 }

src/index.html

@@ -48,7 +48,7 @@
           <div class="user-view">
             <div class="background"></div>
             <span class="white-text name">Gelbooru Client</span>
-            <span class="white-text email">v0.6.0</span>
+            <span class="white-text email">v0.7.0</span>
           </div>
         </li>
         <li><a class="subheader">Settings</a></li>
@@ -61,7 +61,7 @@
         <li><div class="divider"></div></li>
         <li><a class="subheader">Links</a></li>
         <li><a class="waves-effect" href="https://gelbooru.com/"><i class="material-icons">open_in_new</i>Gelbooru</a></li>
-        <li><a class="waves-effect" href="https://gelbooru.com/index.php?page=help&topic=cheatsheet"><i class="material-icons">open_in_new</i>How Gelbooru works ?</a></li>
+        <li><a class="waves-effect" href="https://gelbooru.com/index.php?page=help&topic=cheatsheet"><i class="material-icons">open_in_new</i>How tags works ?</a></li>
         <li><a class="waves-effect" href="https://github.com/KeziahMoselle/gelbooru-client"><i class="material-icons">open_in_new</i>GitHub</a></li>
       </ul>
       <!-- [End First navbar] -->
@@ -153,7 +153,7 @@ <h1>Your Blacklist</h1>
 
       var chips = document.querySelector('.chips'),
         instanceChips = M.Chips.init(chips, {
-          placeholder: 'Enter tag...'
+          placeholder: 'Press enter'
         });
 
       // Animations

src/renderer.js

@@ -2,7 +2,6 @@
   const shell = require('electron').shell,
         remote = require('electron').remote,
         axios = require('axios'),
-        saveFile = remote.require('electron-save-file'),
         Store = require('./Store');
 
 // Var
@@ -29,7 +28,7 @@
       imgLimit = 10,
       view = 'one_column',
       pid = 1,
-      tagsBlacklist;
+      tagsBlacklist = '';
 
 // Store
 
@@ -128,18 +127,28 @@ function openBlacklistModal()
 
 // Update 'tagsBlacklist' var
 function updateBlacklist()
-{ // TO DO
+{
+  tagsBlacklist = '';
   var ChipsData = M.Chips.getInstance(chips).chipsData;
 
   if (ChipsData.length > 1)
   {
+    var i = 1;
     ChipsData.forEach(data => {
-      tagsBlacklist += data.tag;
+      if (ChipsData.length === i)
+      {
+        tagsBlacklist += `-${data.tag}`;
+      }
+      else
+      {
+        tagsBlacklist += `-${data.tag}+`;
+      }
+      i++;
     });
   }
   else if (ChipsData.length === 1)
   {
-    tagsBlacklist = ChipsData[0].tag;
+    tagsBlacklist += `-${ChipsData[0].tag}`;
   }
 }
 
@@ -325,6 +334,7 @@ function clickLimit()
     if (lastTheme === 'light-mode')
     {
       root.classList.add('light-mode');
+      displayTheme.innerHTML = '<i class="material-icons left">invert_colors</i> Enable dark theme';
       console.log('Theme : Light mode enabled.');
     }
 
@@ -418,7 +428,6 @@ function getResults(url)
           {
             sample_url = `https://simg3.gelbooru.com//samples/${image.directory}/sample_${image.hash}.jpg`;
           }
-          console.log(tags);
           if (tags.includes('webm'))
           {
             container.insertAdjacentHTML('beforeend', `
@@ -458,7 +467,15 @@ function getResults(url)
  */
 function getUrl(tags = '', imgLimit = 10, rating = 'rating:safe', pid = 1)
 {
-  var url = `https://gelbooru.com/index.php?page=dapi&s=post&q=index&json=1&limit=${imgLimit}&tags=${rating}+${tags.replace(/\s/g, '+')}`;
+  var url = `https://gelbooru.com/index.php?page=dapi&s=post&q=index&json=1&limit=${imgLimit}&tags=${rating}`;
+  if (tags.length > 0)
+  {
+    url += `+${tags.replace(/\s/g, '+')}`;
+  }
+  if (tagsBlacklist.length > 0)
+  {
+    url += `+${tagsBlacklist}`;
+  }
   if (!tags.includes('webm'))
   {
     url += `+-webm`;