From 690ee0c416635f8d6d3dc07048be90bd0da7748f Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Wed, 19 Aug 2020 14:53:01 -0400
Subject: wip: move install extension to electron

---
 .../src/renderer/components/InstallPalettes.vue    | 49 ++++++++++++++++++++++
 electron/src/renderer/main.js                      |  2 +
 electron/src/renderer/router/index.js              | 23 ++++++----
 3 files changed, 65 insertions(+), 9 deletions(-)
 create mode 100644 electron/src/renderer/components/InstallPalettes.vue

(limited to 'electron/src')

diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue
new file mode 100644
index 00000000..73fd2865
--- /dev/null
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <font-awesome-icon icon="palette" class="info-icon"/>
+    <p>
+      <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
+      </translate>
+    </p>
+    <p>
+      <translate>Choose Inkscape directory</translate>
+      <input v-bind:value="path"/>
+    </p>
+    <button v-on:click="install">
+      <translate>Install</translate>
+    </button>
+    <button v-on:click="cancel">
+      <translate>Cancel</translate>
+    </button>
+  </div>
+</template>
+
+<script>
+const inkStitch = require("../../lib/api")
+
+export default {
+  name: "InstallPalettes",
+  data: function () {
+    return {
+      path: "",
+    }
+  },
+  methods: {
+    install() {
+      alert("install button clicked")
+    },
+    cancel() {
+      alert("cancel button clicked")
+    }
+  },
+  created: function () {
+    inkStitch.get("/install/default-path").then(response => {
+      this.path = response.data
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js
index 3502ed6a..c5f39948 100644
--- a/electron/src/renderer/main.js
+++ b/electron/src/renderer/main.js
@@ -20,6 +20,7 @@ import {
   faHorse,
   faInfo,
   faMinus,
+  faPalette,
   faPause,
   faPlay,
   faPlus,
@@ -52,6 +53,7 @@ library.add(
   faHorse,
   faInfo,
   faMinus,
+  faPalette,
   faPause,
   faPlay,
   faPlus,
diff --git a/electron/src/renderer/router/index.js b/electron/src/renderer/router/index.js
index 3a27c4bc..63e2f415 100644
--- a/electron/src/renderer/router/index.js
+++ b/electron/src/renderer/router/index.js
@@ -5,14 +5,19 @@ Vue.use(Router)
 
 export default new Router({
   routes: [
-  	{
-  	    path: '/simulator',
-  	    name: 'simulator',
-  	    component: require('@/components/Simulator').default
-  	},
-  	{
-  	    path: '*',
-  	    redirect: '/'
-  	}
+    {
+      path: '/simulator',
+      name: 'simulator',
+      component: require('@/components/Simulator').default
+    },
+    {
+      path: '/install',
+      name: 'install',
+      component: require('@/components/InstallPalettes').default
+    },
+    {
+      path: '*',
+      redirect: '/'
+    }
   ]
 })
-- 
cgit v1.2.3


From 69f931f0330c448911221752a226f612acb08713 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Wed, 19 Aug 2020 21:15:21 -0400
Subject: add vuetify

---
 electron/src/renderer/main.js | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'electron/src')

diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js
index c5f39948..95d9dbf1 100644
--- a/electron/src/renderer/main.js
+++ b/electron/src/renderer/main.js
@@ -35,6 +35,9 @@ import Transitions from 'vue2-transitions'
 import GetTextPlugin from 'vue-gettext'
 import translations from './assets/translations.json'
 import {selectLanguage} from '../lib/i18n'
+import Vuetify from 'vuetify'
+import 'vuetify/dist/vuetify.min.css'
+import '@mdi/font/css/materialdesignicons.css'
 
 // We have to add to the library every icon we use anywhere in the UI.
 // This avoids the need to bundle the entire font-awesome icon set with
@@ -77,8 +80,11 @@ Vue.use(GetTextPlugin, {
 Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
 
+Vue.use(Vuetify)
+let vuetify = new Vuetify({})
 /* eslint-disable no-new */
 new Vue({
+  vuetify,
   components: {App},
   router,
   template: '<App/>'
-- 
cgit v1.2.3


From e1fdc254d6b362440d5e2895b33a2d4865e73e50 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Wed, 19 Aug 2020 21:16:13 -0400
Subject: implement install extension in electron/vuetify

---
 electron/src/renderer/App.vue                      |  21 ++++-
 .../src/renderer/components/InstallPalettes.vue    | 104 ++++++++++++++++-----
 2 files changed, 99 insertions(+), 26 deletions(-)

(limited to 'electron/src')

diff --git a/electron/src/renderer/App.vue b/electron/src/renderer/App.vue
index 7888d968..7579d04e 100644
--- a/electron/src/renderer/App.vue
+++ b/electron/src/renderer/App.vue
@@ -1,15 +1,26 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <v-app>
+      <v-main>
+        <!-- the v-container, v-row, and v-col give us vertical centering -->
+        <v-container fill-height fluid>
+          <v-row align="center" justify="center">
+            <v-col>
+              <router-view></router-view>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-main>
+    </v-app>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'my-project'
-  }
+export default {
+  name: 'my-project'
+}
 </script>
 
 <style>
-  /* CSS */
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');
 </style>
diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue
index 73fd2865..728088b8 100644
--- a/electron/src/renderer/components/InstallPalettes.vue
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -1,20 +1,67 @@
 <template>
   <div>
-    <font-awesome-icon icon="palette" class="info-icon"/>
-    <p>
-      <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
-      </translate>
-    </p>
-    <p>
-      <translate>Choose Inkscape directory</translate>
-      <input v-bind:value="path"/>
-    </p>
-    <button v-on:click="install">
-      <translate>Install</translate>
-    </button>
-    <button v-on:click="cancel">
-      <translate>Cancel</translate>
-    </button>
+    <v-card v-if="step == 'pick'" rounded="lg" :loading="installing" :disabled="installing" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+      <v-container>
+        <v-card-title>
+          <translate>
+            Install Palettes
+          </translate>
+        </v-card-title>
+        <v-card-text class="text--primary">
+          <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
+          </translate>
+        </v-card-text>
+        <v-file-input class="mb-3" webkitdirectory hide-details v-model="path" color="rgb(0,51,153)"
+                      :label="$gettext('Choose Inkscape directory')"></v-file-input>
+        <v-card-actions>
+          <v-btn text color="rgb(0,51,153)" v-on:click="install">
+            <v-icon>mdi-palette</v-icon>
+            <translate>Install</translate>
+          </v-btn>
+          <v-btn text color="rgb(0,51,153)" v-on:click="close">
+            <translate>Cancel</translate>
+          </v-btn>
+        </v-card-actions>
+      </v-container>
+    </v-card>
+    <v-card v-if="step == 'done'" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+      <v-card-title>
+        <translate>
+          Installation Completed
+        </translate>
+      </v-card-title>
+      <v-card-text>
+        <translate>
+          Inkscape palettes have been installed. Please restart Inkscape to load the new palettes.
+        </translate>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text color="rgb(0,51,153)" v-on:click="close">
+          Done
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-card v-if="step == 'error'" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+      <v-card-title>
+        <translate>
+          Installation Failed
+        </translate>
+      </v-card-title>
+      <v-card-text>
+        <translate>Inkscape add-on installation failed</translate>
+      </v-card-text>
+      <v-card-text class="text--secondary">
+        {{ error }}
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text color="rgb(0,51,153)" v-on:click="retry">
+          <translate>Try again</translate>
+        </v-btn>
+        <v-btn text color="rgb(0,51,153)" v-on:click="close">
+          <translate>Cancel</translate>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </div>
 </template>
 
@@ -25,20 +72,35 @@ export default {
   name: "InstallPalettes",
   data: function () {
     return {
-      path: "",
+      path: null,
+      installing: false,
+      step: "pick",
+      error: null
     }
   },
   methods: {
     install() {
-      alert("install button clicked")
+      this.installing = true
+      inkStitch.post('install/palettes', {path: this.path.path || this.path.name}).then(response => {
+        this.step = "done"
+      }).catch(error => {
+        this.step = "error"
+        this.error = error.response.data.error
+      }).then(() => {
+        this.installing = false
+      })
     },
-    cancel() {
-      alert("cancel button clicked")
+    close() {
+      window.close()
+    },
+    retry() {
+      this.installing = false
+      this.step = "pick"
     }
   },
   created: function () {
-    inkStitch.get("/install/default-path").then(response => {
-      this.path = response.data
+    inkStitch.get("install/default-path").then(response => {
+      this.path = new File([""], response.data, {})
     })
   }
 }
-- 
cgit v1.2.3


From d528000863352d2905a4b91cd1213465cd76becf Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Wed, 19 Aug 2020 22:50:14 -0400
Subject: set inkstitch color in vuetify theme

---
 electron/src/renderer/components/InstallPalettes.vue | 12 ++++++------
 electron/src/renderer/main.js                        | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'electron/src')

diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue
index 728088b8..3a3c7c7c 100644
--- a/electron/src/renderer/components/InstallPalettes.vue
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -11,14 +11,14 @@
           <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
           </translate>
         </v-card-text>
-        <v-file-input class="mb-3" webkitdirectory hide-details v-model="path" color="rgb(0,51,153)"
+        <v-file-input class="mb-3" webkitdirectory hide-details v-model="path"
                       :label="$gettext('Choose Inkscape directory')"></v-file-input>
         <v-card-actions>
-          <v-btn text color="rgb(0,51,153)" v-on:click="install">
+          <v-btn text color="primary" v-on:click="install">
             <v-icon>mdi-palette</v-icon>
             <translate>Install</translate>
           </v-btn>
-          <v-btn text color="rgb(0,51,153)" v-on:click="close">
+          <v-btn text color="primary" v-on:click="close">
             <translate>Cancel</translate>
           </v-btn>
         </v-card-actions>
@@ -36,7 +36,7 @@
         </translate>
       </v-card-text>
       <v-card-actions>
-        <v-btn text color="rgb(0,51,153)" v-on:click="close">
+        <v-btn text color="primary" v-on:click="close">
           Done
         </v-btn>
       </v-card-actions>
@@ -54,10 +54,10 @@
         {{ error }}
       </v-card-text>
       <v-card-actions>
-        <v-btn text color="rgb(0,51,153)" v-on:click="retry">
+        <v-btn text color="primary" v-on:click="retry">
           <translate>Try again</translate>
         </v-btn>
-        <v-btn text color="rgb(0,51,153)" v-on:click="close">
+        <v-btn text color="primary" v-on:click="close">
           <translate>Cancel</translate>
         </v-btn>
       </v-card-actions>
diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js
index 95d9dbf1..25a3f7f1 100644
--- a/electron/src/renderer/main.js
+++ b/electron/src/renderer/main.js
@@ -81,7 +81,19 @@ Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
 
 Vue.use(Vuetify)
-let vuetify = new Vuetify({})
+const vuetify = new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: '#003399',
+        secondary: '#000000',
+        accent: '#8c9eff',
+        error: '#b71c1c',
+      },
+    },
+  },
+})
+
 /* eslint-disable no-new */
 new Vue({
   vuetify,
-- 
cgit v1.2.3


From 6e34f5f7fc8598e564adf9b3e08e6cb4275923b5 Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Thu, 20 Aug 2020 22:11:23 -0400
Subject: v-dialog looks nicer

---
 electron/src/renderer/App.vue                      |  9 +---
 .../src/renderer/components/InstallPalettes.vue    | 56 +++++++++++-----------
 2 files changed, 28 insertions(+), 37 deletions(-)

(limited to 'electron/src')

diff --git a/electron/src/renderer/App.vue b/electron/src/renderer/App.vue
index 7579d04e..7495dd05 100644
--- a/electron/src/renderer/App.vue
+++ b/electron/src/renderer/App.vue
@@ -2,14 +2,7 @@
   <div id="app">
     <v-app>
       <v-main>
-        <!-- the v-container, v-row, and v-col give us vertical centering -->
-        <v-container fill-height fluid>
-          <v-row align="center" justify="center">
-            <v-col>
-              <router-view></router-view>
-            </v-col>
-          </v-row>
-        </v-container>
+        <router-view></router-view>
       </v-main>
     </v-app>
   </div>
diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue
index 3a3c7c7c..85bf5578 100644
--- a/electron/src/renderer/components/InstallPalettes.vue
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -1,36 +1,34 @@
 <template>
-  <div>
-    <v-card v-if="step == 'pick'" rounded="lg" :loading="installing" :disabled="installing" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
-      <v-container>
-        <v-card-title>
-          <translate>
-            Install Palettes
-          </translate>
-        </v-card-title>
-        <v-card-text class="text--primary">
-          <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
-          </translate>
-        </v-card-text>
-        <v-file-input class="mb-3" webkitdirectory hide-details v-model="path"
-                      :label="$gettext('Choose Inkscape directory')"></v-file-input>
-        <v-card-actions>
-          <v-btn text color="primary" v-on:click="install">
-            <v-icon>mdi-palette</v-icon>
-            <translate>Install</translate>
-          </v-btn>
-          <v-btn text color="primary" v-on:click="close">
-            <translate>Cancel</translate>
-          </v-btn>
-        </v-card-actions>
-      </v-container>
+  <v-dialog max-width="500px" value="true">
+    <v-card v-if="step == 'pick'" key="pick" rounded="lg" :loading="installing" :disabled="installing">
+      <v-card-title>
+        <translate>
+          Install Palettes
+        </translate>
+      </v-card-title>
+      <v-card-text class="text--primary">
+        <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
+        </translate>
+      </v-card-text>
+      <v-file-input class="mb-3 mx-3" webkitdirectory hide-details v-model="path"
+                    :label="$gettext('Choose Inkscape directory')"></v-file-input>
+      <v-card-actions>
+        <v-btn text color="primary" v-on:click="install">
+          <v-icon>mdi-palette</v-icon>
+          <translate>Install</translate>
+        </v-btn>
+        <v-btn text color="primary" v-on:click="close">
+          <translate>Cancel</translate>
+        </v-btn>
+      </v-card-actions>
     </v-card>
-    <v-card v-if="step == 'done'" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+    <v-card v-if="step == 'done'" key="done">
       <v-card-title>
         <translate>
           Installation Completed
         </translate>
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="text--primary">
         <translate>
           Inkscape palettes have been installed. Please restart Inkscape to load the new palettes.
         </translate>
@@ -41,13 +39,13 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-    <v-card v-if="step == 'error'" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+    <v-card v-if="step == 'error'" key="error">
       <v-card-title>
         <translate>
           Installation Failed
         </translate>
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="text--primary">
         <translate>Inkscape add-on installation failed</translate>
       </v-card-text>
       <v-card-text class="text--secondary">
@@ -62,7 +60,7 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-  </div>
+  </v-dialog>
 </template>
 
 <script>
-- 
cgit v1.2.3