KERNEL-13184 feat: 仪表板用的数值滑块控件,自适应支持

src/less/widget/singleslider/slider/widget.slider.less

@@ -1,41 +1,31 @@
 @import "../../../index.less";
 
 .bi-single-slider-button {
-  & .slider-button {
+  transform: translateX(-50%);
   cursor: ew-resize;
   border-width: 2px;
   border-style: solid;
-    .border-radius(8px);
+  .border-radius(50%);
   background-color: @color-bi-background-slider-button;
-    height: 8px;
-    width: 8px;
-    top: 8px;
-    left: -6px;
+
   &:hover, &.hover {
-      .border-radius(10px);
     background-color: @color-bi-background-hover-slider-button;
-      width: 12px;
-      height: 12px;
-      top: 6px;
-      left: -8px;
-      .box-shadow(0 2px 4px 1px,rgba(0, 35, 11, 20%));
+    transform: scale(1.2) translateX(-50%);
+    .box-shadow(0 2px 4px 1px, rgba(0, 35, 11, 20%));
   }
+
   &.disabled {
     border-color: @color-bi-border-disabled-slider-button;
+
     &:hover, &.hover {
       background-color: @color-bi-background-hover-disabled-slider-button;
-        width: 12px;
-        height: 12px;
-        top: 6px;
-        left: -8px;
-      }
     }
   }
+
 }
 
 .bi-theme-dark {
   .bi-single-slider-button {
-    & .slider-button {
       background-color: @color-bi-background-slider-button;
       &:hover, &.hover {
         background-color: @color-bi-background-hover-slider-button-theme-dark;
@@ -46,5 +36,4 @@
         }
       }
   }
-  }
 }

src/widget/intervalslider/intervalslider.js

@@ -122,28 +122,29 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
         this._setVisible(false);
 
         return {
+            type: "bi.vertical_fill",
+            rowSize: [30, 30],
+            items: [
+                this._createLabelWrapper(),
+                {
                     type: "bi.absolute",
-            element: this,
-            items: [{
+                    items: [
+                        {
                             el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
+                                type: "bi.horizontal",
+                                horizontalAlign: "stretch",
+                                verticalAlign: "middle",
+                                columnSize: ["fill"],
                                 items: [{
                                     el: this.track,
-                            width: "100%",
-                            height: c.TRACK_HEIGHT
-                        }]
                                 }],
-                    hgap: 7,
-                    height: c.TRACK_HEIGHT
+                                hgap: 10,
                             },
-                top: 23,
-                left: 0,
-                width: "100%"
+                            inset: 0
                         },
-                this._createLabelWrapper(),
-                this._createSliderWrapper()
+                        this._createSliderWrapper(),
+                    ]
+                }
             ]
         };
     },
@@ -225,14 +226,14 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
                     items: [{
                         el: this.labelOne,
                         top: 0,
-                        left: "0%"
+                        left: 0,
                     }]
                 }, {
                     type: "bi.absolute",
                     items: [{
                         el: this.labelTwo,
                         top: 0,
-                        left: "100%"
+                        right: 0,
                     }]
                 }],
                 rgap: c.EDITOR_R_GAP,
@@ -248,58 +249,62 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
         var c = this._constant;
         return {
             el: {
-                type: "bi.vertical",
-                items: [{
+                type: "bi.horizontal",
+                horizontalAlign: "stretch",
+                verticalAlign: "middle",
+                items: [
+                    {
                         type: "bi.absolute",
-                    items: [{
+                        height: 12,
+                        width: "fill",
+                        items: [
+                            {
                                 el: this.sliderOne,
-                        top: 0,
-                        left: "0%"
-                    }]
+                                top: 1,
+                                bottom: 0,
+                                left: 0
                             }, {
-                    type: "bi.absolute",
-                    items: [{
                                 el: this.sliderTwo,
-                        top: 0,
+                                top: 1,
+                                bottom: 0,
                                 left: "100%"
-                    }]
-                }],
-                hgap: c.SLIDER_WIDTH_HALF,
-                height: c.SLIDER_HEIGHT
+                            }
+                        ],
+                    }
+                ],
+                hgap: 10,
             },
-            top: 20,
-            left: 0,
-            width: "100%"
+            inset: 0
         };
     },
 
     _createTrackWrapper: function () {
         return BI.createWidget({
+            type: "bi.horizontal",
+            cls: "track-wrapper",
+            horizontalAlign: "stretch",
+            verticalAlign: "middle",
+            columnSize: ["fill"],
+            scrollx: false,
+            items: [
+                {
                     type: "bi.absolute",
-            items: [{
-                el: {
-                    type: "bi.vertical",
-                    items: [{
-                        type: "bi.absolute",
+                    height: 6,
                     items: [{
                         el: this.grayTrack,
                         top: 0,
                         left: 0,
+                        bottom: 0,
                         width: "100%"
                     }, {
                         el: this.blueTrack,
                         top: 0,
                         left: 0,
+                        bottom: 0,
                         width: "0%"
                     }]
-                    }],
-                    hgap: 8,
-                    height: 8
-                },
-                top: 8,
-                left: 0,
-                width: "100%"
-            }]
+                }
+            ],
         });
     },
 
@@ -551,3 +556,6 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
 });
 BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.interval_slider", BI.IntervalSlider);
+
+
+console.log(123);

src/widget/singleslider/button/iconbutton.slider.js

@@ -4,7 +4,9 @@
 BI.SliderIconButton = BI.inherit(BI.Widget, {
 
     props: {
-        baseCls: "bi-single-slider-button"
+        baseCls: "bi-single-slider-button slider-button bi-high-light-border",
+        height: 8,
+        width: 8,
     },
 
     constants: {
@@ -17,19 +19,7 @@ BI.SliderIconButton = BI.inherit(BI.Widget, {
     render: function () {
         var self = this;
         return {
-            type: "bi.absolute",
-            ref: function () {
-                self.wrapper = this;
-            },
-            items: [{
-                el: {
-                    type: "bi.text_button",
-                    cls: "slider-button bi-high-light-border",
-                    ref: function () {
-                        self.slider = this;
-                    }
-                }
-            }]
+            type: "bi.layout",
         };
     }
 });

src/widget/singleslider/singleslider.js

@@ -55,10 +55,18 @@ BI.SingleSlider = BI.inherit(BI.Single, {
         });
         this._draggable(this.slider);
         var sliderVertical = BI.createWidget({
-            type: "bi.vertical",
+            type: "bi.vertical_adapt",
+            cls: "slider-wrapper",
+            columnSize: ["fill"],
             items: [{
                 type: "bi.absolute",
-                items: [this.slider]
+                items: [
+                    {
+                        el: this.slider,
+                        top: 8,
+                    }
+                ],
+                height: c.SLIDER_HEIGHT
             }],
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT
@@ -145,7 +153,7 @@ BI.SingleSlider = BI.inherit(BI.Single, {
                         type: "bi.horizontal_auto",
                         items: [this.label]
                     }],
-                    height: c.EDITOR_HEIGHT
+                    // height: c.EDITOR_HEIGHT
                 },
                 top: 0,
                 left: 0,

src/widget/singleslider/singleslider.label.js

@@ -56,10 +56,17 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
         });
         this._draggable(this.slider);
         var sliderVertical = BI.createWidget({
-            type: "bi.vertical",
+            type: "bi.vertical_adapt",
+            columnSize: ["fill"],
             items: [{
                 type: "bi.absolute",
-                items: [this.slider]
+                items: [
+                    {
+                        el: this.slider,
+                        top: 8,
+                    }
+                ],
+                height: c.SLIDER_HEIGHT
             }],
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT
@@ -171,7 +178,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
             self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
         }, window);
         widget.element.on("mousedown", function (event) {
-            if(!widget.isEnabled()) {
+            if (!widget.isEnabled()) {
                 return;
             }
             defaultSize = this.offsetLeft;
@@ -179,7 +186,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
             mouseMoveTracker.captureMouseMoves(event);
         });
 
-        function optimizeSize (s) {
+        function optimizeSize(s) {
             return BI.clamp(s, 0, self._getGrayTrackLength());
         }
     },
@@ -219,7 +226,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
     },
 
     _setBlueTrack: function (percent) {
-        this.blueTrack.element.css({width: percent + "%"});
+        this.blueTrack.element.css({ width: percent + "%" });
     },
 
     _setLabelPosition: function (percent) {
@@ -227,7 +234,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
     },
 
     _setSliderPosition: function (percent) {
-        this.slider.element.css({left: percent + "%"});
+        this.slider.element.css({ left: percent + "%" });
     },
 
     _setAllPosition: function (percent) {
@@ -256,7 +263,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
 
     _setEnable: function (b) {
         BI.SingleSliderLabel.superclass._setEnable.apply(this, [b]);
-        if(b) {
+        if (b) {
             this.blueTrack.element.removeClass("disabled-blue-track").addClass("blue-track");
         } else {
             this.blueTrack.element.removeClass("blue-track").addClass("disabled-blue-track");
@@ -287,7 +294,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
     setMinAndMax: function (v) {
         var minNumber = BI.parseFloat(v.min);
         var maxNumber = BI.parseFloat(v.max);
-        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) {
             this.min = minNumber;
             this.max = maxNumber;
         }

src/widget/singleslider/singleslider.normal.js

@@ -44,10 +44,17 @@ BI.SingleSliderNormal = BI.inherit(BI.Single, {
         this._draggable(this.slider);
 
         var sliderVertical = BI.createWidget({
-            type: "bi.vertical",
+            type: "bi.vertical_adapt",
+            columnSize: ["fill"],
             items: [{
                 type: "bi.absolute",
-                items: [this.slider]
+                items: [
+                    {
+                        el: this.slider,
+                        top: 8,
+                    }
+                ],
+                height: c.SLIDER_HEIGHT
             }],
             hgap: c.SLIDER_WIDTH_HALF,
             height: c.SLIDER_HEIGHT