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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      src/less/widget/singleslider/slider/widget.slider.less
  2. 144
      src/widget/intervalslider/intervalslider.js
  3. 20
      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

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

@ -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;
}
}
}
}
}
}

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

@ -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);

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

@ -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);
BI.shortcut("bi.single_slider_button", BI.SliderIconButton);

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

@ -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,

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

@ -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;
}

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

@ -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

Write Preview
Loading…
Cancel
Save