fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

es6
zsmj 2 years ago
parent
c27042214c
commit
45a20139bf
6 changed files with 135 additions and 126 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/less/widget/singleslider/slider/widget.slider.less
  2. 100
      src/widget/intervalslider/intervalslider.js
  3. 18
      src/widget/singleslider/button/iconbutton.slider.js
  4. 14
      src/widget/singleslider/singleslider.js
  5. 23
      src/widget/singleslider/singleslider.label.js
  6. 11
      src/widget/singleslider/singleslider.normal.js

27
src/less/widget/singleslider/slider/widget.slider.less
Unescape View File

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

100
src/widget/intervalslider/intervalslider.js
Unescape View File

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

18
src/widget/singleslider/button/iconbutton.slider.js
Unescape View File

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

14
src/widget/singleslider/singleslider.js
Unescape View File

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

23
src/widget/singleslider/singleslider.label.js
Unescape View File

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

11
src/widget/singleslider/singleslider.normal.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save