diff options
Diffstat (limited to 'electron/src/renderer/components')
| -rw-r--r-- | electron/src/renderer/components/InstallPalettes.vue | 123 | ||||
| -rw-r--r-- | electron/src/renderer/components/NotFound.vue | 12 | ||||
| -rw-r--r-- | electron/src/renderer/components/Preferences.vue | 55 | ||||
| -rw-r--r-- | electron/src/renderer/components/Simulator.vue | 17 |
4 files changed, 52 insertions, 155 deletions
diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue deleted file mode 100644 index 3608f858..00000000 --- a/electron/src/renderer/components/InstallPalettes.vue +++ /dev/null @@ -1,123 +0,0 @@ -<!-- - - Authors: see git history - - Copyright (c) 2010 Authors - Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details. - ---> - -<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" truncate-length="45" - :label="$gettext('Choose Inkscape directory')"> - </v-file-input> - <v-card-text> - <translate>If you are not sure which file path to choose, click on install directly. In most cases Ink/Stitch will guess the correct path. - </translate> - </v-card-text> - <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/components/NotFound.vue b/electron/src/renderer/components/NotFound.vue new file mode 100644 index 00000000..4accf901 --- /dev/null +++ b/electron/src/renderer/components/NotFound.vue @@ -0,0 +1,12 @@ +<!-- + + Authors: see git history + + Copyright (c) 2010 Authors + Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details. + +--> + +<template> + <h1>Oops, it looks like the page you're looking for doesn't exist.</h1> +</template> diff --git a/electron/src/renderer/components/Preferences.vue b/electron/src/renderer/components/Preferences.vue index f68c942d..101f1b8a 100644 --- a/electron/src/renderer/components/Preferences.vue +++ b/electron/src/renderer/components/Preferences.vue @@ -1,13 +1,22 @@ +<!-- + + Authors: see git history + + Copyright (c) 2010 Authors + Licensed under the GNU GPL version 3.0 or later. See the file LICENSE for details. + +--> + <template> - <v-card raised rounded="lg" class="preferences-card"> + <v-card elevation="8" rounded="lg" class="preferences-card"> <v-card-title class="text-center justify-center py-6"> - <h1 class="font-weight-bold text-h2 basil--text"> + <h1 class="font-weight-bold text-h2 text-basil"> Ink/Stitch Settings </h1> </v-card-title> <v-card-text> - <v-tabs v-model="tab" background-color="transparent" grow> + <v-tabs v-model="tab" bg-color="transparent" class="text-primary" grow> <v-tab key="this_svg_settings"> This SVG </v-tab> @@ -16,16 +25,16 @@ </v-tab> </v-tabs> - <v-tabs-items v-model="tab"> - <v-tab-item key="this_svg_settings"> + <v-window v-model="tab"> + <v-window-item key="this_svg_settings"> <v-card flat> <v-card-text> <table> <tr> <td class="label"> <v-tooltip bottom> - <template v-slot:activator="{on, attrs}"> - <label for="collapse_len_mm" v-on="on" v-bind="attrs"><translate>Minimum jump stitch length</translate></label> + <template v-slot:activator="{ props }"> + <label for="collapse_len_mm" v-bind="props"><translate>Minimum jump stitch length</translate></label> </template> <label for="collapse_len_mm"><translate>Jump stitches smaller than this will be treated as normal stitches.</translate></label> </v-tooltip> @@ -45,8 +54,8 @@ <tr> <td class="label"> <v-tooltip bottom> - <template v-slot:activator="{on, attrs}"> - <label for="min_stitch_len_mm" v-on="on" v-bind="attrs"><translate>Minimum stitch length</translate></label> + <template v-slot:activator="{ props }"> + <label for="min_stitch_len_mm" v-bind="props"><translate>Minimum stitch length</translate></label> </template> <label for="min_stitch_len_mm"><translate>Drop stitches smaller than this value.</translate></label> </v-tooltip> @@ -66,16 +75,16 @@ </table> </v-card-text> </v-card> - </v-tab-item> - <v-tab-item key="global_settings"> + </v-window-item> + <v-window-item key="global_settings"> <v-card flat> <v-card-text> <table> <tr> <td> <v-tooltip bottom> - <template v-slot:activator="{on, attrs}"> - <label for="default_collapse_len_mm" v-on="on" v-bind="attrs"><translate>Default minimum jump stitch length</translate></label> + <template v-slot:activator="{ props }"> + <label for="default_collapse_len_mm" v-bind="props"><translate>Default minimum jump stitch length</translate></label> </template> <label for="default_collapse_len_mm"><translate>Used for new SVGs.</translate></label> </v-tooltip> @@ -90,8 +99,8 @@ <tr> <td> <v-tooltip bottom> - <template v-slot:activator="{on, attrs}"> - <label for="default_min_stitch_len_mm" v-on="on" v-bind="attrs"><translate>Default minimum stitch length</translate></label> + <template v-slot:activator="{ props }"> + <label for="default_min_stitch_len_mm" v-bind="props"><translate>Default minimum stitch length</translate></label> </template> <label for="default_min_stitch_len_mm"><translate>Used for new SVGs.</translate></label> </v-tooltip> @@ -106,8 +115,8 @@ <tr> <td> <v-tooltip bottom> - <template v-slot:activator="{on, attrs}"> - <label for="cache_size" v-on="on" v-bind="attrs"><translate>Stitch plan cache size</translate></label> + <template v-slot:activator="{ props }"> + <label for="cache_size" v-bind="props"><translate>Stitch plan cache size</translate></label> </template> <label for="default_min_stitch_len_mm"><translate>The greater the number, the more stitch plans can be cached, speeding up stitch plan calculation. Default: 100</translate></label> </v-tooltip> @@ -125,8 +134,8 @@ </table> </v-card-text> </v-card> - </v-tab-item> - </v-tabs-items> + </v-window-item> + </v-window> </v-card-text> <v-card-actions> <v-btn text color="primary" @click="close"><translate>done</translate></v-btn> @@ -136,8 +145,7 @@ </template> <script> -const inkStitch = require("../../lib/api") - +import { inkStitch } from '../../lib/api.js' export default { name: "Preferences", data: function () { @@ -202,10 +210,11 @@ td.label { td.preference { padding-right: 4px; padding-left: 16px; - max-width: 100px; + max-width: 15em; + min-width: 8em; } -td.preference::v-deep input { +td.preference :deep(input) { text-align: right; } diff --git a/electron/src/renderer/components/Simulator.vue b/electron/src/renderer/components/Simulator.vue index bbcb5138..6d76b133 100644 --- a/electron/src/renderer/components/Simulator.vue +++ b/electron/src/renderer/components/Simulator.vue @@ -13,7 +13,7 @@ <div class="window-controls"> <div ref="controlInfoButton" class="control-info-button" v-on:click="toggleInfo"> <font-awesome-icon icon="info"/> - <collapse-transition> + <Transition name="collapse"> <div class="control-info" v-show="infoExpanded" v-bind:style="{'max-height': infoMaxHeight + 'px'}"> <h1> <font-awesome-icon icon="info" class="info-icon"/> @@ -163,14 +163,14 @@ </p> </div> </div> - </collapse-transition> + </Transition> </div> <div class="toggle-controls" v-on:click="toggleControls"> <font-awesome-icon v-if="controlsExpanded" icon="minus"/> <font-awesome-icon v-else icon="plus"/> </div> </div> - <collapse-transition> + <Transition name="collapse"> <div class="panel" v-show="controlsExpanded"> <fieldset class="controls"> <legend> @@ -203,7 +203,7 @@ </fieldset> <fieldset class="speed"> <legend> - <translate :translate-n="speed" translate-plural="Speed: %{speed} stitches/sec">Speed: %{speed} stitch/sec</translate> + <translate :translate-params="{ speed: speed }" :translate-n="speed" translate-plural="Speed: %{speed} stitches/sec">Speed: %{speed} stitch/sec</translate> </legend> <button v-on:click="animationSlowDown" :title="$gettext('Slow down (arrow down)')"> <font-awesome-icon icon="hippo" size="2x" class="fa-button"/> @@ -248,7 +248,7 @@ <input id="stop-checkbox" type="checkbox" v-model="showStops"/> <label for="stop-checkbox"><font-awesome-icon icon="pause"/> <translate>stops</translate></label> </span> - <span> + <span class="npp"> <input id="npp-checkbox" type="checkbox" v-model="showNeedlePenetrationPoints"/> <label for="npp-checkbox"> <font-awesome-layers> @@ -270,12 +270,11 @@ </span> </fieldset> </div> - </collapse-transition> + </Transition> <div class="slider-container"> <span>1</span> <span class="slider-box"> - <vue-slider - :value="currentStitchDisplay" + <vue-slider v-model="currentStitchDisplay" @change="setCurrentStitch" :min="0" :max="numStitches" @@ -297,7 +296,7 @@ @focus="stop"/> </div> </fieldset> - <loading :active.sync="loading" :is-full-page="false"> + <loading :active="loading" :is-full-page="false"> <div class="loading"> <div class="loading-icon"> <font-awesome-icon icon="spinner" size="4x" pulse/> |