meta: refine i18n and mark more strings

ui/mock-server.js

@@ -113,12 +113,6 @@ app.get('/api/exit', (req, res) => {
   res.status(204).send()
 })
 
-app.get('/api/mock_error', (req, res) => {
-  console.log('-- Toggle error emulation')
-  showError = !showError
-  res.status(200).send(`Error emulation: ${showError}\n`)
-})
-
 app.post('/api/verify-path', (req, res) => {
   console.log('-- Verify Path')
   res.send({

ui/package.json

@@ -9,6 +9,7 @@
     "postinstall": "node merge-strings.js"
   },
   "dependencies": {
+    "@mdi/font": "^5.3.45",
     "axios": "^0.19.2",
     "buefy": "^0.8.20",
     "vue": "^2.6.11",

ui/src/locales/en.json

@@ -21,7 +21,9 @@
       "repair": "Repair",
       "location":"Install Location",
       "location_placeholder":"Enter a install path here",
-      "select":"Select"
+      "select":"Select",
+      "overwriting": "Overwriting",
+      "overwriting_warning": "Directory {path} already exists.<br>Are you sure you want to <b>overwrite</b> the contents inside?"
     },
     "install_packages":{
       "check_for_update":"Checking for updates...",
@@ -55,6 +57,8 @@
     "back":"Back",
     "exit":"Exit",
     "yes":"Yes",
-    "no":"No"
+    "no":"No",
+    "continue": "Continue",
+    "cancel":"Cancel"
   }
 }

ui/src/main.js

@@ -8,6 +8,7 @@ import { stream_ajax as streamAjax } from './helpers'
 import Buefy from 'buefy'
 import messages from './locales/messages.json'
 import 'buefy/dist/buefy.css'
+import '@mdi/font/css/materialdesignicons.min.css'
 
 Vue.config.productionTip = false
 Vue.use(Buefy)

ui/src/views/InstallPackages.vue

@@ -54,7 +54,7 @@ export default {
       results.path = app.install_location
 
       if (this.is_repair) {
-        results['mode'] = 'force'
+        results.mode = 'force'
       }
 
       var targetUrl = '/api/start-install'

ui/src/views/ModifyView.vue

@@ -2,33 +2,33 @@
     <div class="column has-padding">
             <h4 class="subtitle">{{ $t('modify.title') }}</h4>
 
-            <b-button class="is-dark is-medium" v-on:click="update">
+            <b-button icon-left="update" type="is-dark-green" size="is-medium" @click="update">
                 {{ $t('modify.update') }}
             </b-button>
             <br />
             <br />
 
-            <b-button class="is-dark is-medium" v-on:click="modify_packages">
+            <b-button icon-left="pencil" type="is-info" size="is-medium" @click="modify_packages">
                 {{ $t('modify.modify') }}
             </b-button>
             <br />
             <br />
 
-            <a class="button is-dark is-medium" v-on:click="repair_packages">
+            <b-button icon-left="wrench" type="is-info" size="is-medium" @click="repair_packages">
                 {{ $t('modify.repair') }}
-            </a>
+            </b-button>
             <br />
             <br />
 
-            <a class="button is-dark is-medium" v-on:click="prepare_uninstall">
+            <b-button icon-left="delete" type="is-danger" size="is-medium" @click="prepare_uninstall">
                 {{ $t('modify.uninstall') }}
-            </a>
+            </b-button>
             <br />
             <br />
 
-            <a class="button is-dark is-medium" v-on:click="view_files">
+            <b-button icon-left="file-find" type="is-link" size="is-medium" @click="view_files">
                 {{ $t('modify.view_local_files') }}
-            </a>
+            </b-button>
     </div>
 </template>
 
@@ -51,8 +51,9 @@ export default {
     prepare_uninstall: function () {
       this.$buefy.dialog.confirm({
         title: this.$t('modify.uninstall'),
-        message: this.$t('modify.prompt', {'name': this.$root.$data.attrs.name}),
+        message: this.$t('modify.prompt', { name: this.$root.$data.attrs.name }),
-        confirmText: this.$t('modify.prompt_confirm', {'name': this.$root.$data.attrs.name}),
+        cancelText: this.$t('cancel'),
+        confirmText: this.$t('modify.prompt_confirm', { name: this.$root.$data.attrs.name }),
         type: 'is-danger',
         hasIcon: true,
         onConfirm: this.uninstall
@@ -65,3 +66,19 @@ export default {
   }
 }
 </script>
+
+<style>
+span {
+  cursor: unset !important;
+}
+.button.is-dark-green {
+  background-color: #00B245;
+  border-color: transparent;
+  color: #fff;
+}
+.button.is-dark-green:hover {
+  background-color: #00a53f;
+  border-color: transparent;
+  color: #fff;
+}
+</style>

ui/src/views/SelectPackages.vue

@@ -83,10 +83,10 @@ export default {
     },
     show_overwrite_dialog: function (confirmCallback) {
       this.$buefy.dialog.confirm({
-        title: 'Overwriting',
+        title: this.$t('select_packages.overwriting'),
-        message: `Directory ${this.$root.$data.install_location} already exists.<br>
+        message: this.$t('select_packages.overwriting_warning', { path: this.$root.$data.install_location }),
-        Are you sure you want to <b>overwrite</b> the contents inside?`,
+        confirmText: this.$t('continue'),
-        confirmText: 'Continue',
+        cancelText: this.$t('cancel'),
         type: 'is-danger',
         hasIcon: true,
         onConfirm: confirmCallback

ui/yarn.lock

@@ -863,6 +863,11 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@mdi/font@^5.3.45":
+  version "5.3.45"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.3.45.tgz#086d3ef77dee260c04dd5a593af602c250e5b315"
+  integrity sha512-SD5d2vHEKRvDCInZQFXOwiFpBlzpuZOiqwxKf6E+zCt7UDc52TUSrL0+TXqY57VQh/SnTpZVXM+Uvs21OdPFWg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"