diff options
Diffstat (limited to 'electron/src/renderer')
| -rw-r--r-- | electron/src/renderer/App.vue | 14 | ||||
| -rw-r--r-- | electron/src/renderer/components/InstallPalettes.vue | 109 | ||||
| -rw-r--r-- | electron/src/renderer/main.js | 20 | ||||
| -rw-r--r-- | electron/src/renderer/router/index.js | 23 |
4 files changed, 152 insertions, 14 deletions
diff --git a/electron/src/renderer/App.vue b/electron/src/renderer/App.vue index 7888d968..7495dd05 100644 --- a/electron/src/renderer/App.vue +++ b/electron/src/renderer/App.vue @@ -1,15 +1,19 @@ <template> <div id="app"> - <router-view></router-view> + <v-app> + <v-main> + <router-view></router-view> + </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 new file mode 100644 index 00000000..85bf5578 --- /dev/null +++ b/electron/src/renderer/components/InstallPalettes.vue @@ -0,0 +1,109 @@ +<template> + <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'" key="done"> + <v-card-title> + <translate> + Installation Completed + </translate> + </v-card-title> + <v-card-text class="text--primary"> + <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="primary" v-on:click="close"> + Done + </v-btn> + </v-card-actions> + </v-card> + <v-card v-if="step == 'error'" key="error"> + <v-card-title> + <translate> + Installation Failed + </translate> + </v-card-title> + <v-card-text class="text--primary"> + <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="primary" v-on:click="retry"> + <translate>Try again</translate> + </v-btn> + <v-btn text color="primary" v-on:click="close"> + <translate>Cancel</translate> + </v-btn> + </v-card-actions> + </v-card> + </v-dialog> +</template> + +<script> +const inkStitch = require("../../lib/api") + +export default { + name: "InstallPalettes", + data: function () { + return { + path: null, + installing: false, + step: "pick", + error: null + } + }, + methods: { + install() { + 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 + }) + }, + close() { + window.close() + }, + retry() { + this.installing = false + this.step = "pick" + } + }, + created: function () { + inkStitch.get("install/default-path").then(response => { + this.path = new File([""], response.data, {}) + }) + } +} +</script> + +<style scoped> + +</style> diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js index 3502ed6a..25a3f7f1 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, @@ -34,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 @@ -52,6 +56,7 @@ library.add( faHorse, faInfo, faMinus, + faPalette, faPause, faPlay, faPlus, @@ -75,8 +80,23 @@ Vue.use(GetTextPlugin, { Vue.http = Vue.prototype.$http = axios Vue.config.productionTip = false +Vue.use(Vuetify) +const vuetify = new Vuetify({ + theme: { + themes: { + light: { + primary: '#003399', + secondary: '#000000', + accent: '#8c9eff', + error: '#b71c1c', + }, + }, + }, +}) + /* eslint-disable no-new */ new Vue({ + vuetify, components: {App}, router, template: '<App/>' 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: '/' + } ] }) |