Browse Source

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

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit 'a05d7dd422027cc63f1ee1347d99b2804abb350b':
  无JIRA fix: 日期面板的格子不需要换行
  无jira fix: console
  无JIRA 复选下拉树布局
  KERNEL-13184 feat: 仪表板用的数值滑块控件,自适应支持
es6
Dailer-刘荣歆 2 years ago
parent
commit
3faddd5755
  1. 2
      src/case/calendar/calendar.date.item.js
  2. 2
      src/case/calendar/calendar.js
  3. 47
      src/less/widget/singleslider/slider/widget.slider.less
  4. 141
      src/widget/intervalslider/intervalslider.js
  5. 4
      src/widget/multiselecttree/multiselecttree.js
  6. 18
      src/widget/singleslider/button/iconbutton.slider.js
  7. 14
      src/widget/singleslider/singleslider.js
  8. 23
      src/widget/singleslider/singleslider.label.js
  9. 11
      src/widget/singleslider/singleslider.normal.js

2
src/case/calendar/calendar.date.item.js

@ -4,6 +4,7 @@
BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
props: function() {
return {
baseCls: "bi-calendar-date-item",
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
}
},
@ -17,7 +18,6 @@ BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
type: "bi.text_item",
cls: "bi-border-radius bi-list-item-select",
textAlign: "center",
whiteSpace: "normal",
text: o.text,
value: o.value,
ref: function () {

2
src/case/calendar/calendar.js

@ -158,8 +158,6 @@ BI.Calendar = BI.inherit(BI.Widget, {
var month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month);
return BI.extend(td, {
type: "bi.calendar_date_item",
textAlign: "center",
whiteSpace: "normal",
once: false,
forceSelected: true,
value: o.year + "-" + month + "-" + td.text,

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

141
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%"
}]
}
],
});
},

4
src/widget/multiselecttree/multiselecttree.js

@ -100,11 +100,11 @@ BI.MultiSelectTree = BI.inherit(BI.Single, {
});
BI.createWidget({
type: "bi.vtape",
type: "bi.vertical_fill",
element: this,
items: [{
el: this.searcher,
height: this._constant.EDITOR_HEIGHT
height: ""
}, {
el: this.adapter,
height: "fill"

18
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",
};
}
});

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

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

11
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

Loading…
Cancel
Save