caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects 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. 25
      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. 11
      src/widget/singleslider/singleslider.label.js
  6. 11
      src/widget/singleslider/singleslider.normal.js

25
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;
top: 6px;
left: -8px;
.box-shadow(0 2px 4px 1px, rgba(0, 35, 11, 20%)); .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;
@ -47,4 +37,3 @@
} }
} }
} }
}

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,

11
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

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