[fix]: change delete icon, fix save error as well as optimize update …

…dialog

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cn.memocast.app",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "An Awesome WizNote Desktop Application",
   "productName": "Memocast",
   "author": "tanknee <nee@tanknee.cn>",
@@ -52,6 +52,7 @@
     "node-schedule": "^1.3.2",
     "os-locale": "^5.0.0",
     "popper.js": "^1.16.1",
+    "pretty-bytes": "^5.6.0",
     "quasar": "^1.0.0",
     "remark": "^13.0.0",
     "remark-pangu": "^2.2.0",

src/components/ui/dialog/SettingsDialog.vue

@@ -261,14 +261,22 @@ export default {
           message: this.$t('checking'),
           timeout: 0,
           spinner: true,
-          color: 'primary'
+          color: 'primary',
+          actions: [{
+            icon: 'clear',
+            color: 'white',
+            handler: () => {}
+          }]
         })
       })
       // this.$refs.updateDialog.toggle()
     },
     updateAvailableHandler: function (info) {
       console.log(info)
-      // this.$refs.updateDialog.toggle()
+      if (this.checkingNotify && this.checkingNotify instanceof Function) {
+        this.checkingNotify()
+        this.checkingNotify = null
+      }
       this.$q.notify({
         caption: this.$t('getNewerVersion', { version: info.version }),
         message: info.releaseNotes,

src/components/ui/dialog/UpdateDialog.vue

@@ -14,7 +14,12 @@
       </q-toolbar>
       <q-card-section class='hide-scrollbar'>
         <div class='q-pa-md'>
-          <div style="font-size: 1.2rem;">{{ `${transferred}/${total} ${speed} Kbs` }}</div>
+          <p style="font-size: 0.9rem;">
+            <span>{{ `${$t('downloadSize')} ${transferred}/${total}` }}</span>
+          </p>
+          <p style="font-size: 0.9rem;">
+            <span>{{ `${$t('downloadSpeed')} ${speed}` }}</span>
+          </p>
         </div>
         <div class='q-pa-md'>
           <q-linear-progress rounded size='35px' :value='progress' color='primary' class='q-mt-sm'>
@@ -35,6 +40,7 @@
 <script>
 import bus from 'components/bus'
 import events from 'src/constants/events'
+import prettyBytes from 'pretty-bytes'
 import { quitAndUpdate } from 'src/ApiInvoker'
 
 export default {
@@ -43,9 +49,9 @@ export default {
     return {
       progress: 0,
       downloaded: false,
-      speed: 0,
-      transferred: 0,
-      total: 0
+      speed: '',
+      transferred: '',
+      total: ''
     }
   },
   computed: {
@@ -57,13 +63,25 @@ export default {
     downloadingHandler: function (progress) {
       const { percent = 0, bytesPerSecond, transferred, total } = progress
       this.progress = (percent / 100).toFixed(2)
-      this.speed = (bytesPerSecond / 1024).toFixed(2)
-      this.transferred = (transferred / (1024 * 1024)).toFixed(2)
-      this.total = (total / (1024 * 1024)).toFixed(2)
+      this.speed = prettyBytes(bytesPerSecond)
+      this.transferred = prettyBytes(transferred)
+      this.total = prettyBytes(total)
     },
     downloadedHandler: function () {
       this.progress = 1
       this.downloaded = true
+      this.$q.notify({
+        color: 'positive',
+        icon: 'check',
+        message: this.$t('downloadSuccessfully'),
+        actions: [{
+          icon: 'play_for_work',
+          color: 'white',
+          handler: () => {
+            this.installHandler()
+          }
+        }]
+      })
     },
     installHandler: function () {
       quitAndUpdate()

src/components/ui/editor/Monaco.vue

@@ -114,6 +114,7 @@ export default {
       })
       this.contentEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.US_COMMA, () => bus.$emit(events.VIEW_SHORTCUT_CALL.switchView, 'switchView'))
       this.contentEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.US_DOT, () => bus.$emit(events.VIEW_SHORTCUT_CALL.sourceMode, 'sourceMode'))
+      this.contentEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, this.saveHandler)
     },
     saveHandler: function () {
       if (this.active && this.contentEditor) {

src/css/style.css

@@ -34,17 +34,18 @@ div {
 body {
   margin: 0;
   overflow: hidden;
-  background: #ffffff !important;
+  /*background: #ffffff !important;*/
+  background: var(--backgroundColor);
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
   'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 }
 
 body.body {
-  background: #ffffff !important;
+  background: var(--backgroundColor) !important;
 }
 
 body.body--dark {
-  background: #34383e !important;
+  background: var(--backgroundColor) !important;
 }
 
 .text-h7 {

src/i18n/en-us/components/ui/UpdateDialog.js

@@ -1,4 +1,7 @@
 export default {
   hide: 'Hide',
-  install: 'Install'
+  install: 'Install',
+  downloadSize: 'Download Size',
+  downloadSpeed: 'Download Speed',
+  downloadSuccessfully: 'Download Successfully'
 }

src/i18n/zh-cn/components/ui/UpdateDialog.js

@@ -1,4 +1,7 @@
 export default {
   hide: '隐藏',
-  install: '安装'
+  install: '安装',
+  downloadSize: '安装包大小',
+  downloadSpeed: '下载速度',
+  downloadSuccessfully: '下载成功'
 }

src/utils/themeColor.js

@@ -255,7 +255,7 @@ const lightTheme = `/* Common CSS use by both light and dark themes */
 :root {
   --titleBarHeight: 32px;
   --editorAreaWidth: 90%;
-  --backgroundColor: #35373e;
+  --backgroundColor: #ffffff;
   /*editor*/
   /*Theme color cluster*/
   --themeColor: rgba(33, 181, 111, 1);