KERNEL-6440 refactor: loadingPane加载动画提供small和big两种尺寸

changelog.md

@@ -1,5 +1,6 @@
 # 更新日志
 2.0(2020-12)
+- Pane系列提供small和big两种大小的加载动画
 - 同步树列表系列支持不显示节点连接线和展开收起图标
 - 规范了下拉树trigger中显示值的显示顺序
 - bi.editor支持传入autocomplete

src/base/pane.js

@@ -13,6 +13,7 @@ BI.Pane = BI.inherit(BI.Widget, {
             _baseCls: "bi-pane",
             tipText: BI.i18nText("BI-No_Selected_Item"),
             loadingText: "",
+            loadingSize: "small",
             overlap: true,
             onLoaded: BI.emptyFn
         });
@@ -41,25 +42,25 @@ BI.Pane = BI.inherit(BI.Widget, {
         var loadingAnimation = BI.createWidget({
             type: "bi.horizontal",
             cls: "bi-loading-widget" + (isIE ? " wave-loading hack" : ""),
-            height: 30,
+            height: this._getSize(60),
-            width: 30,
+            width: this._getSize(60),
-            hgap: 5,
+            hgap: this._getSize(10),
             vgap: 2.5,
             items: isIE ? [] : [{
                 type: "bi.layout",
                 cls: "animate-rect rect1",
-                height: 25,
+                height: this._getSize(50),
-                width: 3
+                width: this._getSize(5),
             }, {
                 type: "bi.layout",
                 cls: "animate-rect rect2",
-                height: 25,
+                height: this._getSize(50),
-                width: 3
+                width: this._getSize(5),
             }, {
                 type: "bi.layout",
                 cls: "animate-rect rect3",
-                height: 25,
+                height: this._getSize(50),
-                width: 3
+                width: this._getSize(5),
             }]
         });
         // pane在同步方式下由items决定tipText的显示与否
@@ -88,6 +89,10 @@ BI.Pane = BI.inherit(BI.Widget, {
         this.element.addClass("loading-status");
     },
 
+    _getSize: function(v) {
+        return Math.ceil(v / (this.options.loadingSize === 'small' ? 2 : 1));
+    },
+
     _getLoadingTipItems: function (loadingTip) {
         var o = this.options;
         var loadingTipItems = [{
@@ -96,7 +101,8 @@ BI.Pane = BI.inherit(BI.Widget, {
         }];
         BI.isNotEmptyString(o.loadingText) && loadingTipItems.push({
             type: "bi.text",
-            text: o.loadingText
+            text: o.loadingText,
+            tgap: this._getSize(10),
         });
 
         return [{