Update "Save as" UI

KeziahMoselle · Sep 11, 2018 · e5dbcca · e5dbcca
1 parent dc96b50
commit e5dbcca
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ To run the app :
 
 To run the app with live reload :
 ```sh
-> gulp
+> npx gulp
 ```
 
 ## Build

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "electron-save-file": "1.0.2"
   },
   "devDependencies": {
-    "electron": "1.7.11",
+    "electron": "2.0.9",
     "electron-builder": "20.0.4",
     "electron-connect": "0.6.3",
     "electron-packager": "11.0.0",
@@ -22,7 +22,7 @@
     "dist": "electron-builder",
     "release": "build",
     "livereload": "gulp"
-},
+  },
   "build": {
     "appId": "com.gelbooru-client.app",
     "productName": "gelbooru-client",

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -207,6 +207,30 @@ textarea.materialize-textarea:focus:not([readonly]) {
   color: var(--dark);
 }
 
+.sidenav-button {
+  background-color: var(--dark);
+  color: #FFF;
+  border-radius: 20px;
+  margin: 10px;
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  height: 48px;
+  line-height: 48px;
+  padding: 0 32px;
+}
+.sidenav-button:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.sidenav-button .material-icons {
+  color: #FFF;
+  float: left;
+  height: 48px;
+  line-height: 48px;
+  margin: 0 32px 0 0;
+  width: 24px;
+}
+
 .btn:focus, .btn-large:focus,
 .btn-floating:focus {
   background-color: #FFF;

diff --git a/src/assets/css/materialize.css b/src/assets/css/materialize.css
@@ -7496,7 +7496,7 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.sidenav li > a {
+.sidenav li > a:not(.sidenav-button) {
   color: rgba(0, 0, 0, 0.87);
   display: block;
   font-size: 14px;
@@ -7506,7 +7506,7 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
   padding: 0 32px;
 }
 
-.sidenav li > a:hover {
+.sidenav li > a:not(.sidenav-button):hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
@@ -7532,7 +7532,7 @@ input[type=range].focused:focus:not(.active)::-ms-thumb {
 
 .sidenav li > a > i,
 .sidenav li > a > [class^="mdi-"], .sidenav li > a li > a > [class*="mdi-"],
-.sidenav li > a > i.material-icons {
+.sidenav li > a:not(.sidenav-button) > i.material-icons {
   float: left;
   height: 48px;
   line-height: 48px;

diff --git a/src/index.html b/src/index.html
@@ -48,14 +48,13 @@
           <div class="user-view">
             <div class="background"></div>
             <span class="white-text name">Gelbooru Client</span>
-            <span class="white-text email">v0.7.2</span>
+            <span class="white-text email">v0.7.5</span>
           </div>
         </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><div class="divider"></div></li>
         <li><a class="subheader">Settings</a></li>
@@ -103,13 +102,13 @@
     <!-- Sidenav with image details -->
     <ul id="sidenavImageDetails" class="sidenav">
       <li><a class="subheader">Image informations</a></li>
-      <li><a class="waves-effect" id="sidenavImageSource" class="waves-effect" href=""><i class="material-icons">open_in_new</i>Source</a></li>
-      <li><a class="waves-effect" id="sidenavImageSaveAs" class="waves-effect" href=""><i class="material-icons">save</i>Save as</a></li>
-      <li><a class="waves-effect" id="sidenavImageDirectory"></a></li>
-      <li><a class="waves-effect" id="sidenavImageOwner"></a></li>
-      <li><a class="waves-effect" id="sidenavImageScore"></a></li>
+      <li><a class="waves-effect sidenav-button" id="sidenavImageSaveAs" href="#"><i class="material-icons">save</i>Save as</a></li>
+      <li><a class="waves-effect" id="sidenavImageSource" href="#" href="#"><i class="material-icons">open_in_new</i>Source</a></li>
+      <li><a class="waves-effect" id="sidenavImageDirectory" href="#"></a></li>
+      <li><a class="waves-effect" id="sidenavImageOwner" href="#"></a></li>
+      <li><a class="waves-effect" id="sidenavImageScore" href="#"></a></li>
       <li><div class="divider"></div></li>
-      <li><a class="subheader">Tags</a></li>
+      <li><a class="subheader" href="#">Tags</a></li>
       <ul id="TagsParent">
       </ul>
     </ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,7 @@ To run the app : @@
     To run the app with live reload :
     ```sh
-    > gulp
+    > npx gulp
     ```
     ## Build
@@ Expand Down @@