Merge pull request agalwood#296 from agalwood/feature/transfer_speed_…

…setting_201905282346

fix: refactor transfer settings

src/renderer/components/Preference/Advanced.vue

@@ -125,6 +125,7 @@
   import ShowInFolder from '@/components/Native/ShowInFolder'
   import userAgentMap from '@shared/ua'
   import {
+    calcFormLabelWidth,
     convertCommaToLine,
     convertLineToComma,
     diffConfig
@@ -158,10 +159,11 @@
       [ShowInFolder.name]: ShowInFolder
     },
     data: function () {
+      const { locale } = this.$store.state.preference.config
       const form = initialForm(this.$store.state.preference.config)
       return {
         form,
-        formLabelWidth: '23%',
+        formLabelWidth: calcFormLabelWidth(locale),
         formOriginal: cloneDeep(form),
         rules: {},
         trackerSyncing: false

src/renderer/components/Preference/Basic.vue

@@ -81,36 +81,28 @@
             {{ $t('preferences.mas-default-dir-tips') }}
           </div>
         </el-form-item>
-        <el-form-item :label="`${$t('preferences.transfer-setting')}: `" :label-width="formLabelWidth">
+        <el-form-item :label="`${$t('preferences.transfer-settings')}: `" :label-width="formLabelWidth">
           <el-col class="form-item-sub" :span="24">
             {{ $t('preferences.transfer-speed-upload') }}
-            <el-radio-group class="radio-group-margin-left" v-model="maxOverallUploadLimitRadio">
-              <el-radio :label="true">{{ $t('preferences.transfer-speed-no-set') }}</el-radio>
-              <el-radio :label="false">
-                {{ $t('preferences.transfer-speed-set') }}
-                <el-input class="download-speed-input" type="number" v-model="maxOverallUploadLimitValue">
-                  <el-select v-model="maxOverallUploadLimitUnit" slot="append">
-                    <el-option label="K" value="K"></el-option>
-                    <el-option label="M" value="M"></el-option>
-                  </el-select>
-                </el-input>
-              </el-radio>
-            </el-radio-group>
+            <el-select v-model="form.maxOverallUploadLimit">
+              <el-option
+                v-for="item in speedOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
           </el-col>
           <el-col class="form-item-sub" :span="24">
             {{ $t('preferences.transfer-speed-download') }}
-            <el-radio-group class="radio-group-margin-left" v-model="maxOverallDownloadLimitRadio">
-              <el-radio :label="true">{{ $t('preferences.transfer-speed-no-set') }}</el-radio>
-              <el-radio :label="false">
-                {{ $t('preferences.transfer-speed-set') }}
-                <el-input class="download-speed-input" type="number" v-model="maxOverallDownloadLimitValue">
-                  <el-select v-model="maxOverallDownloadLimitUnit" slot="append">
-                    <el-option label="K" value="K"></el-option>
-                    <el-option label="M" value="M"></el-option>
-                  </el-select>
-                </el-input>
-              </el-radio>
-            </el-radio-group>
+            <el-select v-model="form.maxOverallDownloadLimit">
+              <el-option
+                v-for="item in speedOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
           </el-col>
         </el-form-item>
         <el-form-item :label="`${$t('preferences.task-manage')}: `" :label-width="formLabelWidth">
@@ -158,20 +150,6 @@
     </el-main>
   </el-container>
 </template>
-<style>
-  .radio-group-margin-left {
-    margin-left: 6px;
-  }
-  .el-input-group.download-speed-input {
-    width: 50%;
-  }
-  .el-input-group .el-select .el-input {
-    width: 60px;
-  }
- .download-speed-input input::-webkit-outer-spin-button, .download-speed-input input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-</style>
 
 <script>
   import is from 'electron-is'
@@ -182,7 +160,7 @@
   import { availableLanguages, getLanguage } from '@shared/locales'
   import { getLocaleManager } from '@/components/Locale'
   import { prettifyDir } from '@/components/Native/utils'
-  import { diffConfig } from '@shared/utils'
+  import { calcFormLabelWidth, diffConfig } from '@shared/utils'
 
   const initialForm = (config) => {
     const {
@@ -232,13 +210,15 @@
       [ThemeSwitcher.name]: ThemeSwitcher
     },
     data: function () {
+      const { locale } = this.$store.state.preference.config
       const form = initialForm(this.$store.state.preference.config)
       return {
         form,
-        formLabelWidth: '23%',
+        formLabelWidth: calcFormLabelWidth(locale),
         formOriginal: cloneDeep(form),
         locales: availableLanguages,
-        rules: {}
+        rules: {},
+        speedOptions: this.buildSpeedOptions()
       }
     },
     computed: {
@@ -251,88 +231,6 @@
       downloadDir: function () {
         return prettifyDir(this.form.dir)
       },
-      maxOverallUploadLimitValue: {
-        get: function () {
-          let value = this.form.maxOverallUploadLimit
-          if (typeof value === 'string') {
-            return value.substring(0, value.length - 1)
-          }
-          return this.form.maxOverallUploadLimit
-        },
-        set: function (value) {
-          value = this.fixSpeedInputValue(value)
-          this.form.maxOverallUploadLimit = value + this.maxOverallUploadLimitUnit
-        }
-      },
-      maxOverallUploadLimitUnit: {
-        get: function () {
-          let value = this.form.maxOverallUploadLimit
-          if (typeof value === 'string') {
-            return value.substring(value.length - 1, value.length)
-          }
-          return 'K'
-        },
-        set: function (value) {
-          this.form.maxOverallUploadLimit = this.maxOverallUploadLimitValue + value
-        }
-      },
-      maxOverallUploadLimitRadio: {
-        get: function () {
-          let value = this.form.maxOverallUploadLimit
-          if (typeof value === 'string') {
-            return value.startsWith('0')
-          }
-          return value === 0
-        },
-        set: function (value) {
-          if (value) {
-            this.form.maxOverallUploadLimit = 0
-          } else {
-            this.form.maxOverallUploadLimit = 128
-          }
-        }
-      },
-      maxOverallDownloadLimitValue: {
-        get: function () {
-          let value = this.form.maxOverallDownloadLimit
-          if (typeof value === 'string') {
-            return value.substring(0, value.length - 1)
-          }
-          return this.form.maxOverallDownloadLimit
-        },
-        set: function (value) {
-          value = this.fixSpeedInputValue(value)
-          this.form.maxOverallDownloadLimit = value + this.maxOverallDownloadLimitUnit
-        }
-      },
-      maxOverallDownloadLimitUnit: {
-        get: function () {
-          let value = this.form.maxOverallDownloadLimit
-          if (typeof value === 'string') {
-            return value.substring(value.length - 1, value.length)
-          }
-          return 'K'
-        },
-        set: function (value) {
-          this.form.maxOverallDownloadLimit = this.maxOverallDownloadLimitValue + value
-        }
-      },
-      maxOverallDownloadLimitRadio: {
-        get: function () {
-          let value = this.form.maxOverallDownloadLimit
-          if (typeof value === 'string') {
-            return value.startsWith('0')
-          }
-          return value === 0
-        },
-        set: function (value) {
-          if (value) {
-            this.form.maxOverallDownloadLimit = 0
-          } else {
-            this.form.maxOverallDownloadLimit = 128
-          }
-        }
-      },
       ...mapState('preference', {
         config: state => state.config
       })
@@ -351,6 +249,34 @@
         this.form.theme = theme
         this.$electron.ipcRenderer.send('command', 'application:change-theme', theme)
       },
+      buildSpeedOptions () {
+        return [
+          {
+            label: this.$t('preferences.transfer-speed-unlimited'),
+            value: 0
+          },
+          {
+            label: '128 KB/s',
+            value: '128K'
+          },
+          {
+            label: '512 KB/s',
+            value: '512K'
+          },
+          {
+            label: '1 MB/s',
+            value: '1M'
+          },
+          {
+            label: '5 MB/s',
+            value: '5M'
+          },
+          {
+            label: '10 MB/s',
+            value: '10M'
+          }
+        ]
+      },
       onDirectorySelected (dir) {
         this.form.dir = dir
       },
@@ -384,15 +310,6 @@
       },
       resetForm (formName) {
         this.form = initialForm(this.$store.state.preference.config)
-      },
-      fixSpeedInputValue (value) {
-        if (!value) {
-          return 0
-        }
-        if (typeof value === 'string' && value.startsWith('0')) {
-          return this.fixSpeedInputValue(value.substring(1, value.length))
-        }
-        return value
       }
     }
   }

src/renderer/components/Preference/Lab.vue

@@ -52,6 +52,9 @@
   import is from 'electron-is'
   import { mapState } from 'vuex'
   import '@/components/Icons/info-square'
+  import {
+    calcFormLabelWidth
+  } from '@shared/utils'
 
   const initialForm = (config) => {
     const {
@@ -68,9 +71,11 @@
     components: {
     },
     data: function () {
+      const { locale } = this.$store.state.preference.config
+      const form = initialForm(this.$store.state.preference.config)
       return {
-        formLabelWidth: '23%',
-        form: initialForm(this.$store.state.preference.config),
+        form,
+        formLabelWidth: calcFormLabelWidth(locale),
         rules: {}
       }
     },
@@ -97,7 +102,6 @@
           console.log('this.form===>', this.form)
           this.$store.dispatch('preference/save', this.form)
           if (this.isRenderer()) {
-            this.$electron.ipcRenderer.send('command', 'application:relaunch')
           }
         })
       },

src/renderer/components/Theme/Default.scss

@@ -13,6 +13,7 @@ body {
 
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-thumb {

src/shared/locales/de/preferences.js

@@ -10,8 +10,12 @@ export default {
   'open-at-login': 'Beim Login öffnen',
   'keep-window-state': 'Stellen Sie die Größe und Position des Fensters wieder her',
   'auto-resume-all': 'Alle nicht abgeschlossenen Aufgaben automatisch fortsetzen',
-  'default-dir': 'Standard Speicherort',
+  'default-dir': 'Standardpfad',
   'mas-default-dir-tips': 'Aufgrund der Einschränkungen durch Sandbox-Berechtigungen im App Store wird der Download Ordner als Standard empfohlen',
+  'transfer-settings': 'Übertragung',
+  'transfer-speed-upload': 'Upload-Limit',
+  'transfer-speed-download': 'Download-Limit',
+  'transfer-speed-unlimited': 'Unbegrenzt',
   'task-manage': 'Aufgaben verwalten',
   'max-concurrent-downloads': 'Maximal aktive Aufgaben',
   'max-connection-per-server': 'Maximale Verbindungen pro Server',

src/shared/locales/en-US/preferences.js

@@ -12,6 +12,10 @@ export default {
   'auto-resume-all': 'Automatically resume all unfinished tasks',
   'default-dir': 'Default Path',
   'mas-default-dir-tips': 'Due to sandbox permission restrictions of the App Store, the default download directory is recommended to be set to ~/Downloads',
+  'transfer-settings': 'Transmission',
+  'transfer-speed-upload': 'Upload limit',
+  'transfer-speed-download': 'Download limit',
+  'transfer-speed-unlimited': 'Unlimited',
   'task-manage': 'Task Management',
   'max-concurrent-downloads': 'Maximum active tasks',
   'max-connection-per-server': 'Maximum connection per server',

src/shared/locales/fa/preferences.js

@@ -12,6 +12,10 @@ export default {
   'auto-resume-all': 'ادامه دادن اتوماتیک تمام تسک‌های ناتمام',
   'default-dir': 'فولدر پیشفرض',
   'mas-default-dir-tips': 'بخاطر محدودیت‌های دسترسی سندباکس از اپ استور، پیشنهاد می‌شود فولدر دانلود پیشفرض ست شده باشد.',
+  'transfer-settings': 'انتقال',
+  'transfer-speed-upload': 'محدودیت آپلود',
+  'transfer-speed-download': 'محدودیت دانلود',
+  'transfer-speed-unlimited': 'نامحدود',
   'task-manage': 'مدیریت تسک',
   'max-concurrent-downloads': 'حداکثر تسک‌های فعال',
   'max-connection-per-server': 'حداکثر اتصال‌ برای هر سرور',

src/shared/locales/fr/preferences.js

@@ -12,6 +12,10 @@ export default {
   'auto-resume-all': 'Reprendre les tâches non terminées',
   'default-dir': 'Répertoire par défaut',
   'mas-default-dir-tips': 'En raison des restrictions d\'autorisations du bac à sable de l\'App Store, il est recommandé de définir le répertoire de téléchargement par défaut sur le répertoire Téléchargements.',
+  'transfer-settings': 'Transmission',
+  'transfer-speed-upload': 'Limite de téléchargement',
+  'transfer-speed-download': 'Limite de téléchargement',
+  'transfer-speed-unlimited': 'Unlimited',
   'task-manage': 'Tâches',
   'max-concurrent-downloads': 'Nombre de tâches active au maximum',
   'max-connection-per-server': 'Nombre maximum de connexions par serveurs',

src/shared/locales/ja/preferences.js

@@ -12,6 +12,10 @@ export default {
   'keep-window-state': 'ウィンドウのサイズと位置を元に戻します',
   'default-dir': '既定の保存先',
   'mas-default-dir-tips': 'App Store の Sandbox 制限のため，デフォルトディレクトリ設定は「Download」を推奨します。',
+  'transfer-settings': '転送設定',
+  'transfer-speed-upload': 'アップロード制限',
+  'transfer-speed-download': 'ダウンロード制限',
+  'transfer-speed-unlimited': '無制限',
   'task-manage': 'タスク管理',
   'max-concurrent-downloads': '最大同時タスク数',
   'max-connection-per-server': '最大サーバ接続数',

src/shared/locales/ko/preferences.js

@@ -12,6 +12,10 @@ export default {
   'keep-window-state': '창의 크기와 위치를 복원합니다',
   'default-dir': '기본 폴더',
   'mas-default-dir-tips': '앱스토어의 샌드박스 사용 권한 제한으로 인해 기본 다운로드 폴더를 다운로드 폴더로 설정하는 것이 권장됩니다.',
+  'transfer-settings': '전송 설정',
+  'transfer-speed-upload': '업로드 제한',
+  'transfer-speed-download': '다운로드 제한',
+  'transfer-speed-unlimited': '무제한',
   'task-manage': '작업 관리',
   'max-concurrent-downloads': '최대 활성 작업',
   'max-connection-per-server': '서버당 최대 연결 수',

src/shared/locales/pt-BR/preferences.js

@@ -12,6 +12,10 @@ export default {
   'auto-resume-all': 'Auto resumir todas as tarefas não finalizadas',
   'default-dir': 'Diretório Padrão',
   'mas-default-dir-tips': 'Devido às restrições de permissões do sandbox da App Store, recomenda-se que o diretório de download padrão seja definido como o diretório de downloads',
+  'transfer-settings': 'Transmissão',
+  'transfer-speed-upload': 'limite de envio',
+  'transfer-speed-download': 'limite de transferência',
+  'transfer-speed-unlimited': 'Ilimitado',
   'task-manage': 'Gerenciador de Tarefas',
   'max-concurrent-downloads': 'Máximo de tarefas ativas',
   'max-connection-per-server': 'Máximo de coneções por servidor',

src/shared/locales/tr/preferences.js

@@ -12,6 +12,10 @@ export default {
   'auto-resume-all': 'Tüm bitmemiş görevleri otomatik olarak devam ettir',
   'default-dir': 'Varsayılan Klasör',
   'mas-default-dir-tips': 'App Store\'un sanal alan izinleri kısıtlamaları nedeniyle, varsayılan indirme dizininin İndirilenler dizinine ayarlanması önerilir.',
+  'transfer-settings': 'İletim',
+  'transfer-speed-upload': 'Yükleme limiti',
+  'transfer-speed-download': 'İndirme limiti',
+  'transfer-speed-unlimited': 'Sınırsız',
   'task-manage': 'Görev Yöneticisi',
   'max-concurrent-downloads': 'Maksimum aktif görev',
   'max-connection-per-server': 'Sunucu başına maksimum bağlantı',