fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
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
89ca5b3793 a05d7dd422
commit
3faddd5755
9 changed files with 136 additions and 132 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. 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
Unescape View File

@ -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
Unescape View File

@ -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
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; &: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
Unescape View File

@ -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
Unescape View File

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