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 ++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 electron/src/renderer/components/InstallPalettes.vue

(limited to 'electron/src/renderer/components/InstallPalettes.vue')

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>
-- 
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

---
 .../src/renderer/components/InstallPalettes.vue    | 104 ++++++++++++++++-----
 1 file changed, 83 insertions(+), 21 deletions(-)

(limited to 'electron/src/renderer/components/InstallPalettes.vue')

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 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'electron/src/renderer/components/InstallPalettes.vue')

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>
-- 
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

---
 .../src/renderer/components/InstallPalettes.vue    | 56 +++++++++++-----------
 1 file changed, 27 insertions(+), 29 deletions(-)

(limited to 'electron/src/renderer/components/InstallPalettes.vue')

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

