(Enhance: Modules/ShellManager): 优化插件快捷设置,修正过多快捷设置后对UI影响(Fix #303)

CHANGELOG.md

@@ -18,10 +18,11 @@
 ### 数据管理
 
 * 优化了编辑 Shell 信息时，URL后缀发生改变后连动修改「连接类型」功能
-
+* 优化插件快捷设置,修正过多快捷设置后对UI影响(Fix #303)
 ### 后端模块
 
 * 支持自定义 Content-Type, 默认是 `form`
+* Fix #307
 
 ### 设置模块
 

source/language/en.js

@@ -205,10 +205,14 @@ module.exports = {
       }
     },
     toolbar: {
-      select: 'Please select at least one shell',
+      select: 'Please select the WebShell to execute first',
       setting: {
         text: 'Setting',
-        title: 'Setting pligins which you want to show'
+        pluginlist: 'Plugin List(Select up to 8)',
+        title: 'Set the plugins you want to add to the toolbar',
+        save: 'Save',
+        clear: 'Clear',
+        error_max: 'Up to 8 popular plugins can be added',
       }
     }
   },

source/language/zh.js

@@ -205,10 +205,14 @@ module.exports = {
       }
     },
     toolbar: {
-      select: '至少选择一个 webshell 吧',
+      select: '请先选中要执行的WebShell',
       setting: {
         text: '设置',
-        title: '设置你要添加到工具栏的插件'
+        pluginlist: '插件列表(最多选8个)',
+        title: '设置你要添加到工具栏的插件',
+        save: '保存',
+        clear: '清空',
+        error_max: '最多可添加8个常用插件'
       }
     }
   },

source/language/zh_hk.js

@@ -204,10 +204,14 @@ module.exports = {
       }
     },
     toolbar: {
-      select: '至少選擇壹個 webshell 吧',
+      select: '請先選中要執行的WebShell',
       setting: {
         text: '設置',
-        title: '設置妳要添加到工具欄的插件'
+        pluginlist: '插件列表(最多選8個)',
+        title: '設置妳要添加到工具欄的插件',
+        save: '保存',
+        clear: '清空',
+        error_max: '最多可添加8個常用插件'
       }
     }
   },

source/language/zh_tw.js

@@ -204,10 +204,14 @@ module.exports = {
       }
     },
     toolbar: {
-      select: '至少選擇壹個 webshell 吧',
+      select: '請先選中要執行的WebShell',
       setting: {
         text: '設置',
-        title: '設置妳要添加到工具欄的插件'
+        pluginlist: '插件列表(最多選8個)',
+        title: '設置妳要添加到工具欄的插件',
+        save: '保存',
+        clear: '清空',
+        error_max: '最多可添加8個常用插件'
       }
     }
   },

source/modules/shellmanager/index.js

@@ -13,13 +13,13 @@ class ShellManager {
     const tabbar = antSword['tabbar'];
     tabbar.addTab('tab_shellmanager', '<i class="fa fa-th-large"></i>', null, null, true, false);
     const cell = tabbar.cells('tab_shellmanager');
-    const layout = cell.attachLayout('3T');
+    const layout = cell.attachLayout('2U');
     // 初始化顶侧栏：工具栏 - 插件
-    this.toolbar = new Toolbar(layout.cells('a'), this);
+    this.toolbar = new Toolbar(layout, this);
     // 初始化左侧栏：数据
-    this.list = new List(layout.cells('b'), this);
+    this.list = new List(layout.cells('a'), this);
     // 初始化右侧栏：目录
-    this.category = new Category(layout.cells('c'), this);
+    this.category = new Category(layout.cells('b'), this);
 
     this.searchPop = null;
     this.searchForm = null;
@@ -57,7 +57,7 @@ class ShellManager {
       try {
         RegExp(sdata['searchtext']);
       } catch (e) {
-        var tmpstr = sdata['searchtext'].replace(/([\$\(\)\*\+\.\[\?\\\^\{\|])/g, function ($, $1) {
+        var tmpstr = sdata['searchtext'].replace(/([\$\(\)\*\+\.\[\?\\\^\{\|])/g, function($, $1) {
           return `\\${$1}`;
         });
         sdata['searchtext'] = tmpstr;
@@ -170,7 +170,7 @@ class ShellManager {
       type: "input",
       name: "searchtext"
     }];
-    searchPop.attachEvent("onShow", function () {
+    searchPop.attachEvent("onShow", function() {
       if (that.searchForm == null) {
         that.searchForm = searchPop.attachForm(formData);
         // that.searchForm.attachEvent("onButtonClick", function(){   searchPop.hide();

source/modules/shellmanager/toolbar.js

@@ -15,15 +15,18 @@ class Toolbar {
 
   constructor(cell, manager) {
     var self = this;
-    cell.hideHeader();
-    cell.setHeight(43);
+    self.max_shotcut_plugin = 8;
+
+    // cell.hideHeader();
+    // cell.setHeight(43);
+    // cell.fixSize(1, 0);
     let lang = antSword.storage('language', false, navigator.language.substr(0, 2));
     this.lang = (lang == 'en') ? '_en' : '';
 
     // Create toolbar
     let toolbar = cell.attachToolbar();
-    toolbar.setIconSize(32);
-    toolbar.attachEvent("onClick", function (id) {
+    // toolbar.setIconSize(24);
+    toolbar.attachEvent("onClick", function(id) {
       console.log(id);
       if (id == 'setting') {
         self.settingPane();
@@ -66,6 +69,7 @@ class Toolbar {
     var plugsData = [];
     try {
       var plugsList = JSON.parse(antSword.storage('toolbar', false, '[]'));
+      plugsList = plugsList.slice(0, this.max_shotcut_plugin);
       plugsList.forEach((plug) => {
         if (plug in antSword["plugins"]) {
           p = antSword["plugins"][plug]["info"];
@@ -104,7 +108,7 @@ class Toolbar {
     let win = new WIN({
       title: LANG['setting']['text'],
       height: 450,
-      width: 400
+      width: 300
     });
     let layout = win.win.attachLayout('1C');
     let cell = layout.cells('a');
@@ -112,52 +116,73 @@ class Toolbar {
     let plugsForm = cell.attachForm();
     var plugsData = [];
     try {
-      var i = 1;
+      var i = 0;
       var plugs = JSON.parse(antSword.storage('toolbar', false, '[]'));
       for (let plug in antSword["plugins"]) {
         p = antSword["plugins"][plug]["info"];
         plugsData.push({
           type: "checkbox",
-          label: antSword.noxss(p["name" + this.lang] || p["name"]),
+          label: `<i class="fa fa-${antSword.noxss(p['icon'])}"></i> ${antSword.noxss(p["name" + this.lang] || p["name"])}`,
           name: plug,
           checked: plugs.indexOf(plug) != -1
         });
-        plugsData.push({
-          type: 'newcolumn',
-        });
+        // if (i % 2 == 1) {
+        //   plugsData.push({
+        //     type: 'newcolumn',
+        //   });
+        // }
+        // i++;
       }
     } catch (e) {
       toastr.error(e, LANG_T['error']);
     }
     plugsForm.loadStruct([{
       type: "settings",
-      position: "label-right"
+      position: "label-right",
+      labelLeft: 25,
+      inputLeft: 25
     }, {
       type: "fieldset",
       name: "Setting",
-      label: LANG['setting']['text'],
+      offsetLeft: 20,
+      label: LANG['setting']['pluginlist'],
       list: plugsData
-    }, {
-      type: "button",
-      name: "toolbar_setting_save",
-      value: "Save",
-      width: 378
     }])
 
-    var eventId = plugsForm.attachEvent("onButtonClick", (name) => {
-      if (name == 'toolbar_setting_save') {
-        var save_data = []
-        var _formvals = plugsForm.getValues();
-        for (let v in _formvals) {
-          if (_formvals[v])
-            save_data.push(v)
-        }
-        // Save and Reload Toolbar
-        antSword.storage('toolbar', save_data);
-        antSword.modules.shellmanager.toolbar.reloadToolbar()
+    const toolbar = cell.attachToolbar();
+    toolbar.loadStruct([{
+      type: "button",
+      id: "toolbar_setting_save",
+      text: LANG['setting']['save'],
+      icon: "save",
+    }, {
+      type: 'button',
+      id: 'toolbar_setting_clear',
+      text: LANG['setting']['clear'],
+      icon: 'remove'
+    }])
+    toolbar.attachEvent("onClick", (id) => {
+      switch (id) {
+        case 'toolbar_setting_save':
+          var save_data = [];
+          var _formvals = plugsForm.getValues();
+          for (let v in _formvals) {
+            if (_formvals[v])
+              save_data.push(v)
+          }
+          if (save_data.length > this.max_shotcut_plugin) {
+            toastr.error(LANG['setting']['error_max'], LANG_T['error']);
+            return;
+          }
+          // Save and Reload Toolbar
+          antSword.storage('toolbar', save_data);
+          antSword.modules.shellmanager.toolbar.reloadToolbar()
+          win.close();
+          break;
+        case 'toolbar_setting_clear':
+          plugsForm.clear();
+          break;
       }
-      plugsForm.detachEvent(eventId);
-      win.close()
     });
   }