(v0.7.2) UI improvements

KeziahMoselle · Feb 26, 2018 · d2edfde · d2edfde
1 parent 3efcf9e
commit d2edfde
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,7 @@
 * [x] Hot images
 * [x] Blacklist (Exclude tags)
 * [ ] Favorites
+* [ ] Endless scrolling
 
 ## Installing
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gelbooru-client",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "You already know what it is.",
   "main": "main.js",
   "dependencies": {

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -140,6 +140,11 @@ div#loading {
   margin-top: 2rem;
 }
 
+.sidenav-form {
+  margin: 0;
+  padding: 0 32px;
+}
+
 /*
 * MATERIALIZE CSS
 */

diff --git a/src/index.html b/src/index.html
@@ -48,16 +48,19 @@
           <div class="user-view">
             <div class="background"></div>
             <span class="white-text name">Gelbooru Client</span>
-            <span class="white-text email">v0.7.1</span>
+            <span class="white-text email">v0.7.2</span>
           </div>
         </li>
-        <li><a class="subheader">Settings</a></li>
+        <li><a class="subheader">Pages</a></li>
         <li><a onclick="clickActualize()" class="waves-effect"><i class="material-icons left">home</i>All</a></li>
         <li><a onclick="searchTop()" class="waves-effect"><i class="material-icons left">star</i>Top</a></li>
         <li><a onclick="searchHot()" class="waves-effect"><i class="material-icons left">whatshot</i>Hot</a></li>
         <li><a class="waves-effect disabled"><i class="material-icons left">favorite</i>Favorites</a></li>
         <li><a onclick="openBlacklistModal()" class="waves-effect"><i class="material-icons left">label</i>Exclude tags</a></li>
-        <li><a onclick="handleTheme()" id="displayTheme" class="waves-effect"><i class="material-icons left">invert_colors</i>Enable light theme</a></li>
+        <li><div class="divider"></div></li>
+        <li><a class="subheader">Settings</a></li>
+        <li><p class="sidenav-form"><label><input id="checkboxTheme" onclick="handleTheme()" type="checkbox" class="filled-in" /><span>Light theme</span></label></p></li>
+        <li><p class="sidenav-form"><label><input type="checkbox" class="filled-in" disabled /><span>Endless scrolling</span></label></p></li>
         <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>

diff --git a/src/renderer.js b/src/renderer.js
@@ -17,10 +17,10 @@
         displayPid = document.getElementById('displayPid'), // Display chip
         displayTheme = document.getElementById('displayTheme'), // Display actual theme
         tagsResults = document.getElementById('tagsResults'), // Displays popular tags
-        sidenavImg = document.getElementById('sidenavImg'),
         sidenavImageSource = document.getElementById('sidenavImageSource'),
         sidenavImageTagsParent = document.getElementById('sidenavImageTagsParent'),
-        chips = document.querySelector('.chips');
+        chips = document.querySelector('.chips'),
+        checkboxTheme = document.getElementById('checkboxTheme');
 
   // Value
   var tags,
@@ -334,25 +334,24 @@ function clickLimit()
     if (lastTheme === 'light-mode')
     {
       root.classList.add('light-mode');
-      displayTheme.innerHTML = '<i class="material-icons left">invert_colors</i> Enable dark theme';
+      checkboxTheme.setAttribute('checked', 'checked');
       console.log('Theme : Light mode enabled.');
     }
 
     // Add / Remove light theme
     function handleTheme()
     {
       var actualTheme = store.get('theme');
+      console.log(actualTheme);
       if (actualTheme === 'light-mode')
       { // Actual theme = Light Mode -> Switch on Dark Mode
         root.classList.remove('light-mode');
-        displayTheme.innerHTML = '<i class="material-icons left">invert_colors</i> Enable light theme';
         M.toast({html: 'Dark theme activated'});
         store.set('theme','dark-mode');
       }
       else
       { // Actual theme = Dark Mode -> Switch on Light Mode
         root.classList.add('light-mode');
-        displayTheme.innerHTML = '<i class="material-icons left">invert_colors</i> Enable dark theme';
         M.toast({html: 'Light theme activated'});
         store.set('theme','light-mode');
       }