Browse Source

Merge pull request #204073 in DEC/fineui from master to feature/x

* commit '3faddd575516f8dcab58f1d6e9612e4eb17acd02':
  无JIRA fix: 日期面板的格子不需要换行
  无jira fix: console
  无JIRA 复选下拉树布局
  KERNEL-13184 feat: 仪表板用的数值滑块控件,自适应支持
master
superman 2 years ago
parent
commit
3c0c4f0b21
  1. 4
      src/case/calendar/calendar.date.item.js
  2. 2
      src/case/calendar/calendar.js
  3. 49
      src/less/widget/singleslider/slider/widget.slider.less
  4. 141
      src/widget/intervalslider/intervalslider.js
  5. 4
      src/widget/multiselecttree/multiselecttree.js
  6. 20
      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

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

@ -4,8 +4,9 @@
BI.CalendarDateItem = BI.inherit(BI.BasicButton, { BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
props: function() { props: function() {
return { return {
baseCls: "bi-calendar-date-item",
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8,
} }
}, },
render: function () { render: function () {
@ -17,7 +18,6 @@ BI.CalendarDateItem = BI.inherit(BI.BasicButton, {
type: "bi.text_item", type: "bi.text_item",
cls: "bi-border-radius bi-list-item-select", cls: "bi-border-radius bi-list-item-select",
textAlign: "center", textAlign: "center",
whiteSpace: "normal",
text: o.text, text: o.text,
value: o.value, value: o.value,
ref: function () { 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); var month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month);
return BI.extend(td, { return BI.extend(td, {
type: "bi.calendar_date_item", type: "bi.calendar_date_item",
textAlign: "center",
whiteSpace: "normal",
once: false, once: false,
forceSelected: true, forceSelected: true,
value: o.year + "-" + month + "-" + td.text, value: o.year + "-" + month + "-" + td.text,

49
src/less/widget/singleslider/slider/widget.slider.less

@ -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; &:hover, &.hover {
top: 8px; background-color: @color-bi-background-hover-slider-button;
left: -6px; 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 { &:hover, &.hover {
.border-radius(10px); background-color: @color-bi-background-hover-disabled-slider-button;
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;
}
} }
} }
} }
.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;
@ -45,6 +35,5 @@
background-color: @color-bi-background-hover-disabled-slider-button-theme-dark; 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); this._setVisible(false);
return { return {
type: "bi.absolute", type: "bi.vertical_fill",
element: this, rowSize: [30, 30],
items: [{ 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%"
},
this._createLabelWrapper(), 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: [{ 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",
type: "bi.absolute", verticalAlign: "middle",
items: [{ items: [
el: this.sliderOne, {
top: 0, type: "bi.absolute",
left: "0%" height: 12,
}] width: "fill",
}, { items: [
type: "bi.absolute", {
items: [{ el: this.sliderOne,
el: this.sliderTwo, top: 1,
top: 0, bottom: 0,
left: "100%" left: 0
}] }, {
}], el: this.sliderTwo,
hgap: c.SLIDER_WIDTH_HALF, top: 1,
height: c.SLIDER_HEIGHT bottom: 0,
left: "100%"
}
],
}
],
hgap: 10,
}, },
top: 20, inset: 0
left: 0,
width: "100%"
}; };
}, },
_createTrackWrapper: function () { _createTrackWrapper: function () {
return BI.createWidget({ return BI.createWidget({
type: "bi.absolute", type: "bi.horizontal",
items: [{ cls: "track-wrapper",
el: { horizontalAlign: "stretch",
type: "bi.vertical", verticalAlign: "middle",
columnSize: ["fill"],
scrollx: false,
items: [
{
type: "bi.absolute",
height: 6,
items: [{ items: [{
type: "bi.absolute", el: this.grayTrack,
items: [{ top: 0,
el: this.grayTrack, left: 0,
top: 0, bottom: 0,
left: 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%"
}]
}); });
}, },

4
src/widget/multiselecttree/multiselecttree.js

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

20
src/widget/singleslider/button/iconbutton.slider.js

@ -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,20 +19,8 @@ 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;
}
}
}]
}; };
} }
}); });
BI.shortcut("bi.single_slider_button", BI.SliderIconButton); BI.shortcut("bi.single_slider_button", BI.SliderIconButton);

14
src/widget/singleslider/singleslider.js

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

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

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

Loading…
Cancel
Save