diff --git a/src/less/widget/singleslider/slider/widget.slider.less b/src/less/widget/singleslider/slider/widget.slider.less index dc6f563b4..f842ce791 100644 --- a/src/less/widget/singleslider/slider/widget.slider.less +++ b/src/less/widget/singleslider/slider/widget.slider.less @@ -1,41 +1,31 @@ @import "../../../index.less"; .bi-single-slider-button { - & .slider-button { - cursor: ew-resize; - border-width: 2px; - border-style: solid; - .border-radius(8px); - background-color: @color-bi-background-slider-button; - height: 8px; - width: 8px; - top: 8px; - left: -6px; + transform: translateX(-50%); + cursor: ew-resize; + border-width: 2px; + border-style: solid; + .border-radius(50%); + background-color: @color-bi-background-slider-button; + + &:hover, &.hover { + background-color: @color-bi-background-hover-slider-button; + 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 { - .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%)); - } - &.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; - } + background-color: @color-bi-background-hover-disabled-slider-button; } } + } .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; @@ -45,6 +35,5 @@ background-color: @color-bi-background-hover-disabled-slider-button-theme-dark; } } - } } -} \ No newline at end of file +} diff --git a/src/widget/intervalslider/intervalslider.js b/src/widget/intervalslider/intervalslider.js index 739927972..236968f89 100644 --- a/src/widget/intervalslider/intervalslider.js +++ b/src/widget/intervalslider/intervalslider.js @@ -122,28 +122,29 @@ BI.IntervalSlider = BI.inherit(BI.Single, { this._setVisible(false); return { - type: "bi.absolute", - element: this, - items: [{ - el: { - type: "bi.vertical", - items: [{ - type: "bi.absolute", - items: [{ - el: this.track, - width: "100%", - height: c.TRACK_HEIGHT - }] - }], - hgap: 7, - height: c.TRACK_HEIGHT - }, - top: 23, - left: 0, - width: "100%" - }, + type: "bi.vertical_fill", + rowSize: [30, 30], + items: [ this._createLabelWrapper(), - this._createSliderWrapper() + { + type: "bi.absolute", + items: [ + { + el: { + type: "bi.horizontal", + horizontalAlign: "stretch", + verticalAlign: "middle", + columnSize: ["fill"], + items: [{ + el: this.track, + }], + hgap: 10, + }, + inset: 0 + }, + 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.absolute", - items: [{ - el: this.sliderOne, - top: 0, - left: "0%" - }] - }, { - type: "bi.absolute", - items: [{ - el: this.sliderTwo, - top: 0, - left: "100%" - }] - }], - hgap: c.SLIDER_WIDTH_HALF, - height: c.SLIDER_HEIGHT + type: "bi.horizontal", + horizontalAlign: "stretch", + verticalAlign: "middle", + items: [ + { + type: "bi.absolute", + height: 12, + width: "fill", + items: [ + { + el: this.sliderOne, + top: 1, + bottom: 0, + left: 0 + }, { + el: this.sliderTwo, + top: 1, + bottom: 0, + left: "100%" + } + ], + } + ], + hgap: 10, }, - top: 20, - left: 0, - width: "100%" + inset: 0 }; }, _createTrackWrapper: function () { return BI.createWidget({ - type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", + type: "bi.horizontal", + cls: "track-wrapper", + horizontalAlign: "stretch", + verticalAlign: "middle", + columnSize: ["fill"], + scrollx: false, + items: [ + { + type: "bi.absolute", + height: 6, items: [{ - type: "bi.absolute", - items: [{ - el: this.grayTrack, - top: 0, - left: 0, - width: "100%" - }, { - el: this.blueTrack, - top: 0, - left: 0, - width: "0%" - }] - }], - hgap: 8, - height: 8 - }, - top: 8, - left: 0, - width: "100%" - }] + el: this.grayTrack, + top: 0, + left: 0, + bottom: 0, + width: "100%" + }, { + el: this.blueTrack, + top: 0, + left: 0, + bottom: 0, + width: "0%" + }] + } + ], }); }, @@ -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); diff --git a/src/widget/singleslider/button/iconbutton.slider.js b/src/widget/singleslider/button/iconbutton.slider.js index c46fe4a0d..3b3432253 100644 --- a/src/widget/singleslider/button/iconbutton.slider.js +++ b/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,20 +19,8 @@ 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", }; } }); -BI.shortcut("bi.single_slider_button", BI.SliderIconButton); \ No newline at end of file +BI.shortcut("bi.single_slider_button", BI.SliderIconButton); diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js index db9f83caa..15410cb1a 100644 --- a/src/widget/singleslider/singleslider.js +++ b/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, diff --git a/src/widget/singleslider/singleslider.label.js b/src/widget/singleslider/singleslider.label.js index 8f4e9bbb6..7e8da3019 100644 --- a/src/widget/singleslider/singleslider.label.js +++ b/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; } diff --git a/src/widget/singleslider/singleslider.normal.js b/src/widget/singleslider/singleslider.normal.js index 095a5fadf..1f7338530 100644 --- a/src/widget/singleslider/singleslider.normal.js +++ b/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