Settings window redesign

evsar3 · Jul 8, 2020 · a6fb5cc · a6fb5cc
1 parent a478e14
commit a6fb5cc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/renderer/components/MainWindow/index.vue b/src/renderer/components/MainWindow/index.vue
@@ -164,7 +164,7 @@ export default {
 
     settings () {
       const window = windowManager.createNew('settings-window', '', '/index.html#settings', null, {
-        height: 210,
+        height: 250,
         width: 500,
         useContentSize: true,
         frame: false,

diff --git a/src/renderer/components/SettingsWindow/index.vue b/src/renderer/components/SettingsWindow/index.vue
@@ -6,10 +6,8 @@
         <input type="text" autofocus placeholder="eg. C:\Program Files\SSHFS-Win\bin\sshfs-win.exe" v-model="data.sshfsBinary">
       </div>
 
-      <div class="form-item">
-        <label>
-          <input type="checkbox" v-model="data.startupWithOS"> <span>Startup with windows</span>
-        </label>
+      <div class="form-item" style="margin: 10px 0">
+        <label>Startup with windows <toggle-button style="float: right;" :color="toggleButtonColor" v-model="data.startupWithOS" sync labels></toggle-button></label>
       </div>
 
       <div class="footer">
@@ -25,14 +23,17 @@ import { remote } from 'electron'
 
 import Window from '@/components/Window'
 
+import { ToggleButton } from 'vue-js-toggle-button'
+
 const windowManager = remote.require('electron-window-manager')
 const app = remote.require('electron').app
 
 export default {
   name: 'settings-window',
 
   components: {
-    Window
+    Window,
+    ToggleButton
   },
 
   methods: {
@@ -62,6 +63,10 @@ export default {
 
   data () {
     return {
+      toggleButtonColor: {
+        checked: '#2486d8',
+        unchecked: 'rgba(255, 255, 255, 0.1)'
+      },
       loginItemSettings: {
         args: [
           '--systray'