diff --git a/src/base/collection/collection.js b/src/base/collection/collection.js index baaedb78e..ca4511282 100644 --- a/src/base/collection/collection.js +++ b/src/base/collection/collection.js @@ -169,10 +169,10 @@ BI.CollectionView = BI.inherit(BI.Widget, { this.renderedCells[index].el.setHeight(datum.height); } if (this.renderedCells[index]._left !== datum.x) { - this.renderedCells[index].el.element.css("left", datum.x + "px"); + this.renderedCells[index].el.element.css("left", datum.x / BI.pixRatio + BI.pixUnit); } if (this.renderedCells[index]._top !== datum.y) { - this.renderedCells[index].el.element.css("top", datum.y + "px"); + this.renderedCells[index].el.element.css("top", datum.y / BI.pixRatio + BI.pixUnit); } renderedCells.push(child = this.renderedCells[index]); } else { diff --git a/src/base/grid/grid.js b/src/base/grid/grid.js index 13231e59d..4c682ce3b 100644 --- a/src/base/grid/grid.js +++ b/src/base/grid/grid.js @@ -145,10 +145,10 @@ BI.GridView = BI.inherit(BI.Widget, { this.renderedCells[index].el.setHeight(rowDatum.size); } if (this.renderedCells[index]._left !== columnDatum.offset + horizontalOffsetAdjustment) { - this.renderedCells[index].el.element.css("left", (columnDatum.offset + horizontalOffsetAdjustment) + "px"); + this.renderedCells[index].el.element.css("left", (columnDatum.offset + horizontalOffsetAdjustment) / BI.pixRatio + BI.pixUnit); } if (this.renderedCells[index]._top !== rowDatum.offset + verticalOffsetAdjustment) { - this.renderedCells[index].el.element.css("top", (rowDatum.offset + verticalOffsetAdjustment) + "px"); + this.renderedCells[index].el.element.css("top", (rowDatum.offset + verticalOffsetAdjustment) / BI.pixRatio + BI.pixUnit); } child = this.renderedCells[index].el; renderedCells.push(this.renderedCells[index]); diff --git a/src/base/layer/layer.popup.js b/src/base/layer/layer.popup.js index ad9175c15..9c6eb0536 100644 --- a/src/base/layer/layer.popup.js +++ b/src/base/layer/layer.popup.js @@ -45,15 +45,15 @@ BI.PopupView = BI.inherit(BI.Widget, { BI.PopupView.superclass._init.apply(this, arguments); var self = this, o = this.options; var fn = function (e) { - e.stopPropagation(); - }, stop = function (e) { - e.stopEvent(); - return false; - }; + e.stopPropagation(); + }, stop = function (e) { + e.stopEvent(); + return false; + }; this.element.css({ "z-index": BI.zIndex_popup, - "min-width": o.minWidth + "px", - "max-width": o.maxWidth + "px" + "min-width": o.minWidth / BI.pixRatio + BI.pixUnit, + "max-width": o.maxWidth / BI.pixRatio + BI.pixUnit }).bind({click: fn}); this.element.bind("mousewheel", fn); @@ -95,7 +95,11 @@ BI.PopupView = BI.inherit(BI.Widget, { _createView: function () { var o = this.options; this.button_group = BI.createWidget(o.el, {type: "bi.button_group", value: o.value}); - this.button_group.element.css({"min-height": o.minHeight + "px", "padding-top": o.innerVGap + "px", "padding-bottom": o.innerVGap + "px"}); + this.button_group.element.css({ + "min-height": o.minHeight / BI.pixRatio + BI.pixUnit, + "padding-top": o.innerVGap / BI.pixRatio + BI.pixUnit, + "padding-bottom": o.innerVGap / BI.pixRatio + BI.pixUnit + }); return this.button_group; }, @@ -158,7 +162,7 @@ BI.PopupView = BI.inherit(BI.Widget, { toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0); var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVGap; this.view.resetHeight ? this.view.resetHeight(resetHeight) : - this.view.element.css({"max-height": resetHeight + "px"}); + this.view.element.css({"max-height": resetHeight / BI.pixRatio + BI.pixUnit}); }, setValue: function (selectedValues) { @@ -171,4 +175,4 @@ BI.PopupView = BI.inherit(BI.Widget, { } }); BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.popup_view", BI.PopupView); \ No newline at end of file +BI.shortcut("bi.popup_view", BI.PopupView); diff --git a/src/base/single/button/buttons/button.icon.js b/src/base/single/button/buttons/button.icon.js index 62f9a5bd0..614e7d87e 100644 --- a/src/base/single/button/buttons/button.icon.js +++ b/src/base/single/button/buttons/button.icon.js @@ -25,7 +25,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, { height: o.iconHeight }); if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) { - this.element.css("lineHeight", o.height + "px"); + this.element.css("lineHeight", o.height / BI.pixRatio + BI.pixUnit); BI.createWidget({ type: "bi.default", element: this, @@ -49,4 +49,4 @@ BI.IconButton = BI.inherit(BI.BasicButton, { } }); BI.IconButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.icon_button", BI.IconButton); \ No newline at end of file +BI.shortcut("bi.icon_button", BI.IconButton); diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 2fcc76be6..05819b04f 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -44,11 +44,11 @@ BI.Button = BI.inherit(BI.BasicButton, { BI.Button.superclass._init.apply(this, arguments); var o = this.options, self = this; if (BI.isNumber(o.height) && !o.clear && !o.block) { - this.element.css({height: o.height + "px", lineHeight: (o.height - 2) + "px"}); + this.element.css({height: o.height / BI.pixRatio + BI.pixUnit, lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit}); } else if (o.clear || o.block) { - this.element.css({lineHeight: o.height + "px"}); + this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit}); } else { - this.element.css({lineHeight: (o.height - 2) + "px"}); + this.element.css({lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit}); } if (BI.isKey(o.iconCls)) { this.icon = BI.createWidget({ @@ -106,7 +106,7 @@ BI.Button = BI.inherit(BI.BasicButton, { this.element.addClass("ghost"); } if (o.minWidth > 0) { - this.element.css({"min-width": o.minWidth + "px"}); + this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit}); } }, diff --git a/src/base/single/html/html.js b/src/base/single/html/html.js index 91cc3727a..af88bac2c 100644 --- a/src/base/single/html/html.js +++ b/src/base/single/html/html.js @@ -25,29 +25,29 @@ BI.Html = BI.inherit(BI.Single, { var self = this, o = this.options; if (o.hgap + o.lgap > 0) { this.element.css({ - "padding-left": o.hgap + o.lgap + "px" + "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap > 0) { this.element.css({ - "padding-right": o.hgap + o.rgap + "px" + "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.tgap > 0) { this.element.css({ - "padding-top": o.vgap + o.tgap + "px" + "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap > 0) { this.element.css({ - "padding-bottom": o.vgap + o.bgap + "px" + "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit }); } if (BI.isNumber(o.height)) { - this.element.css({lineHeight: o.height + "px"}); + this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit}); } if (BI.isNumber(o.lineHeight)) { - this.element.css({lineHeight: o.lineHeight + "px"}); + this.element.css({lineHeight: o.lineHeight / BI.pixRatio + BI.pixUnit}); } if (BI.isWidthOrHeight(o.maxWidth)) { this.element.css({maxWidth: o.maxWidth}); @@ -111,4 +111,4 @@ BI.Html = BI.inherit(BI.Single, { } }); -BI.shortcut("bi.html", BI.Html); \ No newline at end of file +BI.shortcut("bi.html", BI.Html); diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js index 9bf8b9a20..0835e57c0 100644 --- a/src/base/single/label/abstract.label.js +++ b/src/base/single/label/abstract.label.js @@ -101,7 +101,7 @@ } if (BI.isNumber(o.height) && o.height > 0) { // 1.4 this.element.css({ - "line-height": o.height + "px" + "line-height": o.height / BI.pixRatio + BI.pixUnit }); json.textAlign = o.textAlign; this.text = BI.createWidget(BI.extend(json, { @@ -167,7 +167,7 @@ } if (BI.isNumber(o.height) && o.height > 0) { // 1.8 this.element.css({ - "line-height": o.height + "px" + "line-height": o.height / BI.pixRatio + BI.pixUnit }); json.textAlign = o.textAlign; this.text = BI.createWidget(BI.extend(json, { @@ -253,7 +253,7 @@ })); if (o.whiteSpace !== "normal") { this.element.css({ - "line-height": o.height - (o.vgap * 2) + "px" + "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit }); } return; @@ -300,7 +300,7 @@ if (BI.isNumber(o.height) && o.height > 0) { if (o.whiteSpace !== "normal") { this.element.css({ - "line-height": o.height - (o.vgap * 2) + "px" + "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit }); } this.text = BI.createWidget(BI.extend(json, { // 2.6 diff --git a/src/base/single/label/icon.label.js b/src/base/single/label/icon.label.js index f9e2e388a..a09a17266 100644 --- a/src/base/single/label/icon.label.js +++ b/src/base/single/label/icon.label.js @@ -23,7 +23,7 @@ BI.IconLabel = BI.inherit(BI.Single, { height: o.iconHeight }); if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) { - this.element.css("lineHeight", o.height + "px"); + this.element.css("lineHeight", o.height / BI.pixRatio + BI.pixUnit); BI.createWidget({ type: "bi.default", element: this, @@ -39,4 +39,4 @@ BI.IconLabel = BI.inherit(BI.Single, { } } }); -BI.shortcut("bi.icon_label", BI.IconLabel); \ No newline at end of file +BI.shortcut("bi.icon_label", BI.IconLabel); diff --git a/src/base/single/single.js b/src/base/single/single.js index a4c9c46b0..d2b51f0d0 100644 --- a/src/base/single/single.js +++ b/src/base/single/single.js @@ -13,7 +13,6 @@ BI.Single = BI.inherit(BI.Widget, { _defaultConfig: function () { var conf = BI.Single.superclass._defaultConfig.apply(this, arguments); return BI.extend(conf, { - _baseCls: (conf._baseCls || "") + " bi-single", readonly: false, title: null, warningTitle: null, @@ -207,4 +206,4 @@ BI.Single = BI.inherit(BI.Widget, { } BI.Tooltips.remove(this.getName()); }, -}); \ No newline at end of file +}); diff --git a/src/base/single/text.js b/src/base/single/text.js index d300c821f..c79a73aef 100644 --- a/src/base/single/text.js +++ b/src/base/single/text.js @@ -26,32 +26,32 @@ var self = this, o = this.options; if (o.hgap + o.lgap > 0) { this.element.css({ - "padding-left": o.hgap + o.lgap + "px" + "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap > 0) { this.element.css({ - "padding-right": o.hgap + o.rgap + "px" + "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.tgap > 0) { this.element.css({ - "padding-top": o.vgap + o.tgap + "px" + "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap > 0) { this.element.css({ - "padding-bottom": o.vgap + o.bgap + "px" + "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit }); } if (BI.isNumber(o.height)) { - this.element.css({lineHeight: o.height + "px"}); + this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit}); } if (BI.isNumber(o.lineHeight)) { - this.element.css({lineHeight: o.lineHeight + "px"}); + this.element.css({lineHeight: o.lineHeight / BI.pixRatio + BI.pixUnit}); } if (BI.isWidthOrHeight(o.maxWidth)) { - this.element.css({maxWidth: o.maxWidth}); + this.element.css({maxWidth: o.maxWidth / BI.pixRatio + BI.pixUnit}); } this.element.css({ textAlign: o.textAlign, @@ -96,8 +96,9 @@ case "nowrap": return "pre"; case "normal": - default: return "pre-wrap"; + default: + return o.whiteSpace; } }, diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index 99ae29dd3..0426f8d37 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -22,7 +22,7 @@ BI.Toast = BI.inherit(BI.Tip, { BI.Toast.superclass._init.apply(this, arguments); var self = this, o = this.options; this.element.css({ - minWidth: this._const.minWidth + "px" + minWidth: this._const.minWidth / BI.pixRatio + BI.pixUnit }); this.element.addClass("toast-" + o.level); var fn = function (e) { @@ -95,4 +95,4 @@ BI.Toast = BI.inherit(BI.Tip, { } }); BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; -BI.shortcut("bi.toast", BI.Toast); \ No newline at end of file +BI.shortcut("bi.toast", BI.Toast); diff --git a/src/case/button/item.singleselect.radio.js b/src/case/button/item.singleselect.radio.js index fc73d2c7b..a07ac09fe 100644 --- a/src/case/button/item.singleselect.radio.js +++ b/src/case/button/item.singleselect.radio.js @@ -10,7 +10,6 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, { logic: { dynamic: false }, - hgap: 10, height: 24 }); }, @@ -18,8 +17,7 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, { BI.SingleSelectRadioItem.superclass._init.apply(this, arguments); var self = this, o = this.options; this.radio = BI.createWidget({ - type: "bi.radio", - once: o.once + type: "bi.radio" }); this.text = BI.createWidget({ type: "bi.label", @@ -41,7 +39,7 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, { items: BI.LogicFactory.createLogicItemsByDirection("left", { type: "bi.center_adapt", items: [this.radio], - width: 16 + width: 26 }, this.text) })))); }, @@ -70,4 +68,4 @@ BI.SingleSelectRadioItem = BI.inherit(BI.BasicButton, { }); BI.SingleSelectRadioItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_radio_item", BI.SingleSelectRadioItem); \ No newline at end of file +BI.shortcut("bi.single_select_radio_item", BI.SingleSelectRadioItem); diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js index 75637edc6..d654bb431 100644 --- a/src/case/list/list.select.js +++ b/src/case/list/list.select.js @@ -173,7 +173,7 @@ BI.SelectList = BI.inherit(BI.Widget, { resetHeight: function (h) { var toolHeight = ( this.toolbar.element.outerHeight() || 25) * ( this.toolbar.isVisible() ? 1 : 0); this.list.resetHeight ? this.list.resetHeight(h - toolHeight) : - this.list.element.css({"max-height": h - toolHeight + "px"}); + this.list.element.css({"max-height": (h - toolHeight) / BI.pixRatio + BI.pixUnit}); }, setNotSelectedValue: function () { @@ -214,4 +214,4 @@ BI.SelectList = BI.inherit(BI.Widget, { } }); BI.SelectList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.select_list", BI.SelectList); \ No newline at end of file +BI.shortcut("bi.select_list", BI.SelectList); diff --git a/src/core/controller/controller.popover.js b/src/core/controller/controller.popover.js index b35db5d4c..c9de3a29a 100644 --- a/src/core/controller/controller.popover.js +++ b/src/core/controller/controller.popover.js @@ -103,8 +103,8 @@ BI.PopoverController = BI.inherit(BI.Controller, { top = 0; } popover.element.css({ - left: left + "px", - top: top + "px" + left: left / BI.pixRatio + BI.pixUnit, + top: top / BI.pixRatio + BI.pixUnit }); } return this; @@ -153,4 +153,4 @@ BI.PopoverController = BI.inherit(BI.Controller, { this.zindexMap = {}; return this; } -}); \ No newline at end of file +}); diff --git a/src/core/controller/controller.resizer.js b/src/core/controller/controller.resizer.js index 4ffd40be6..ad1ac2c42 100644 --- a/src/core/controller/controller.resizer.js +++ b/src/core/controller/controller.resizer.js @@ -18,7 +18,11 @@ BI.ResizeController = BI.inherit(BI.Controller, { self._resize(ev); // } }, 30); - BI.Widget._renderEngine.createElement(_global).resize(fn); + if ("onorientationchange" in _global) { + _global.onorientationchange = fn; + } else { + BI.Widget._renderEngine.createElement(_global).resize(fn); + } }, _resize: function (ev) { diff --git a/src/core/controller/controller.tooltips.js b/src/core/controller/controller.tooltips.js index 13e6e7e07..8dd3e494a 100644 --- a/src/core/controller/controller.tooltips.js +++ b/src/core/controller/controller.tooltips.js @@ -99,8 +99,8 @@ BI.TooltipsController = BI.inherit(BI.Controller, { !opt.belowMouse && (y = Math.max(y, top)); } tooltip.element.css({ - left: x < 0 ? 0 : x + "px", - top: y < 0 ? 0 : y + "px" + left: x < 0 ? 0 : x / BI.pixRatio + BI.pixUnit, + top: y < 0 ? 0 : y / BI.pixRatio + BI.pixUnit }); tooltip.element.hover(function () { self.remove(name); @@ -137,4 +137,4 @@ BI.TooltipsController = BI.inherit(BI.Controller, { delete this.tooltipsManager[name]; return this; } -}); \ No newline at end of file +}); diff --git a/src/core/shortcut.js b/src/core/shortcut.js index f160ce95f..9f3b8492b 100644 --- a/src/core/shortcut.js +++ b/src/core/shortcut.js @@ -24,6 +24,7 @@ } var widget = new cls(); widget._initProps(config); + widget._constructed(); widget._initRoot(); // if (!lazy || config.element || config.root) { widget._lazyConstructor(); diff --git a/src/core/var.js b/src/core/var.js index 1f933e7c1..e534f7d14 100644 --- a/src/core/var.js +++ b/src/core/var.js @@ -12,6 +12,8 @@ _.extend(BI, { zIndex_masker: 1e8, zIndex_tip: 1e9, emptyStr: "", + pixUnit: "px", + pixRatio: 1, emptyFn: function () { }, empty: null, @@ -134,4 +136,4 @@ _.extend(BI, { Stretch: "stretch" }, StartOfWeek: 1 -}); \ No newline at end of file +}); diff --git a/src/core/widget.js b/src/core/widget.js index 8c476e231..3f2779c63 100644 --- a/src/core/widget.js +++ b/src/core/widget.js @@ -7,7 +7,7 @@ */ !(function () { - function callLifeHook (self, life) { + function callLifeHook(self, life) { var hook = self.options[life] || self[life]; if (hook) { var hooks = BI.isArray(hook) ? hook : [hook]; @@ -36,18 +36,23 @@ }); }, - // 覆盖父类的_constructor方法，widget不走ob的生命周期 _constructor: function () { + + }, + + // 覆盖父类的_constructor方法，widget不走ob的生命周期 + _constructed: function () { if (this.setup) { pushTarget(this); - this.render = this.setup(); + this.service = this.setup(this.options); + this.render = BI.isPlainObject(this.service) ? this.service.render : this.service; popTarget(); } }, _lazyConstructor: function () { - if (!this._constructed) { - this._constructed = true; + if (!this.__constructed) { + this.__constructed = true; this._init(); this._initRef(); } @@ -148,14 +153,14 @@ _initElementWidth: function () { var o = this.options; if (BI.isWidthOrHeight(o.width)) { - this.element.css("width", o.width); + this.element.css("width", BI.isNumber(o.width) ? o.width / BI.pixRatio + BI.pixUnit : o.width); } }, _initElementHeight: function () { var o = this.options; if (BI.isWidthOrHeight(o.height)) { - this.element.css("height", o.height); + this.element.css("height", BI.isNumber(o.height) ? o.height / BI.pixRatio + BI.pixUnit : o.height); } }, @@ -192,9 +197,11 @@ } if (BI.isArray(els)) { BI.each(els, function (i, el) { - BI._lazyCreateWidget(el, { - element: self - }); + if (el) { + BI._lazyCreateWidget(el, { + element: self + }); + } }); } // if (this._isRoot === true || !(this instanceof BI.Layout)) { @@ -527,12 +534,12 @@ BI.Widget.context = context = contextStack.pop(); }; - function pushTarget (_current) { + function pushTarget(_current) { if (current) currentStack.push(current); BI.Widget.current = current = _current; } - function popTarget () { + function popTarget() { BI.Widget.current = current = currentStack.pop(); } diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js index 32f470242..5d4fdc470 100644 --- a/src/core/wrapper/layout.js +++ b/src/core/wrapper/layout.js @@ -25,16 +25,16 @@ BI.Layout = BI.inherit(BI.Widget, { _init4Margin: function () { if (this.options.top) { - this.element.css("top", this.options.top); + this.element.css("top", BI.isNumber(this.options.top) ? this.options.top / BI.pixRatio + BI.pixUnit : this.options.top); } if (this.options.left) { - this.element.css("left", this.options.left); + this.element.css("left", BI.isNumber(this.options.left) ? this.options.left / BI.pixRatio + BI.pixUnit : this.options.left); } if (this.options.bottom) { - this.element.css("bottom", this.options.bottom); + this.element.css("bottom", BI.isNumber(this.options.bottom) ? this.options.bottom / BI.pixRatio + BI.pixUnit : this.options.bottom); } if (this.options.right) { - this.element.css("right", this.options.right); + this.element.css("right", BI.isNumber(this.options.right) ? this.options.right / BI.pixRatio + BI.pixUnit : this.options.right); } }, diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js index 28fecc26a..a808f53c2 100644 --- a/src/core/wrapper/layout/adapt/absolute.center.js +++ b/src/core/wrapper/layout/adapt/absolute.center.js @@ -26,10 +26,10 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, { var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments); w.element.css({ position: "absolute", - left: o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0), - right: o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0), - top: o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), - bottom: o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0), + left: (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit, + right: (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit, + top: (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit, + bottom: (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit, margin: "auto" }); return w; @@ -44,4 +44,4 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout); \ No newline at end of file +BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout); diff --git a/src/core/wrapper/layout/adapt/absolute.horizontal.js b/src/core/wrapper/layout/adapt/absolute.horizontal.js index 62029c993..d7e9c6f04 100644 --- a/src/core/wrapper/layout/adapt/absolute.horizontal.js +++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js @@ -26,15 +26,15 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, { var w = BI.AbsoluteHorizontalLayout.superclass._addElement.apply(this, arguments); w.element.css({ position: "absolute", - left: o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0), - right: o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0), + left: (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit, + right: (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit, margin: "auto" }); if (o.vgap + o.tgap + (item.vgap || 0) + (item.tgap || 0) !== 0) { - w.element.css("top", o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)); + w.element.css("top", (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit); } if (o.vgap + o.bgap + (item.vgap || 0) + (item.bgap || 0) !== 0) { - w.element.css("bottom", o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)); + w.element.css("bottom", (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit); } return w; }, @@ -48,4 +48,4 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout); \ No newline at end of file +BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout); diff --git a/src/core/wrapper/layout/adapt/absolute.vertical.js b/src/core/wrapper/layout/adapt/absolute.vertical.js index c90a54b5a..3fd98837d 100644 --- a/src/core/wrapper/layout/adapt/absolute.vertical.js +++ b/src/core/wrapper/layout/adapt/absolute.vertical.js @@ -26,17 +26,17 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, { var w = BI.AbsoluteVerticalLayout.superclass._addElement.apply(this, arguments); w.element.css({ position: "absolute", - left: item.lgap, - right: item.rgap, - top: o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), - bottom: o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0), + left: item.lgap / BI.pixRatio + BI.pixUnit, + right: item.rgap / BI.pixRatio + BI.pixUnit, + top: (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit, + bottom: (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit, margin: "auto" }); if (o.hgap + o.lgap + (item.hgap || 0) + (item.lgap || 0) !== 0) { - w.element.css("left", o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)); + w.element.css("left", (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit); } if (o.hgap + o.rgap + (item.hgap || 0) + (item.rgap || 0) !== 0) { - w.element.css("right", o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)); + w.element.css("right", (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit); } return w; }, @@ -50,4 +50,4 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout); \ No newline at end of file +BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout); diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js index c391a156b..9696303eb 100644 --- a/src/core/wrapper/layout/adapt/adapt.table.js +++ b/src/core/wrapper/layout/adapt/adapt.table.js @@ -53,7 +53,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, { // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 // 2、不能给多个td设置最大宽度，这样只会平分宽度 // 3、多百分比宽度就算了 - td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width + "px"}); + td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit}); if (i === 0) { td.element.addClass("first-element"); } @@ -67,22 +67,22 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, { }); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return td; diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js index fd75945a5..4483dde7f 100644 --- a/src/core/wrapper/layout/adapt/auto.horizontal.js +++ b/src/core/wrapper/layout/adapt/auto.horizontal.js @@ -30,22 +30,22 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, { }); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px" + "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; @@ -60,4 +60,4 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout); \ No newline at end of file +BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout); diff --git a/src/core/wrapper/layout/adapt/float.horizontal.js b/src/core/wrapper/layout/adapt/float.horizontal.js deleted file mode 100644 index 84f2cbaa0..000000000 --- a/src/core/wrapper/layout/adapt/float.horizontal.js +++ /dev/null @@ -1,70 +0,0 @@ -/** - * 浮动的水平居中布局 - */ -BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { - props: function () { - return BI.extend(BI.FloatHorizontalLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-float-horizontal-adapt-layout", - items: [], - hgap: 0, - vgap: 0, - tgap: 0, - bgap: 0, - lgap: 0, - rgap: 0 - }); - }, - render: function () { - BI.FloatHorizontalLayout.superclass.render.apply(this, arguments); - this.populate(this.options.items); - }, - - resize: function () { - // console.log("float_horizontal_adapt布局不需要resize"); - }, - - mounted: function () { - var self = this; - var width = this.left.element.width(), - height = this.left.element.height(); - this.left.element.width(width).height(height).css("float", "none"); - BI.remove(this._children, function (i, wi) { - if (wi === self.container) { - delete self._children[i]; - } - }); - BI._lazyCreateWidget({ - type: "bi.horizontal_auto", - element: this, - items: [this.left] - }); - }, - - _addElement: function (i, item) { - var self = this, o = this.options; - this.left = BI._lazyCreateWidget({ - type: "bi.vertical", - items: [item], - hgap: o.hgap, - vgap: o.vgap, - tgap: o.tgap, - bgap: o.bgap, - lgap: o.lgap, - rgap: o.rgap - }); - - this.container = BI._lazyCreateWidget({ - type: "bi.left", - element: this, - items: [this.left] - }); - - return this.left; - }, - - populate: function (items) { - BI.HorizontalAutoLayout.superclass.populate.apply(this, arguments); - this._mount(); - } -}); -BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout); diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js index 9e0ea3ab2..d81256a0a 100644 --- a/src/core/wrapper/layout/adapt/inline.center.js +++ b/src/core/wrapper/layout/adapt/inline.center.js @@ -38,29 +38,29 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { var o = this.options; var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments); w.element.css({ - width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], + width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit), position: "relative", "vertical-align": o.verticalAlign }); w.element.addClass("inline-center-adapt-item"); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) }); } return w; diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js index f079bc99a..1553ee89b 100644 --- a/src/core/wrapper/layout/adapt/inline.horizontal.js +++ b/src/core/wrapper/layout/adapt/inline.horizontal.js @@ -38,29 +38,29 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, { var o = this.options; var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments); w.element.css({ - width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], + width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit), position: "relative", "vertical-align": o.verticalAlign }); w.element.addClass("inline-horizontal-adapt-item"); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js index 290cc5ade..ef960c130 100644 --- a/src/core/wrapper/layout/adapt/inline.vertical.js +++ b/src/core/wrapper/layout/adapt/inline.vertical.js @@ -38,29 +38,29 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { var o = this.options; var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments); w.element.css({ - width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], + width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit), position: "relative", "vertical-align": o.verticalAlign }); w.element.addClass("inline-vertical-adapt-item"); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index 549778110..c3b5aaeb1 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -40,29 +40,29 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { }); } if (o.columnSize[i] > 0) { - w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i]); + w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.columnSize[i] === "fill") { w.element.css("flex", "1"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index 9790bcd9b..8660ff3fd 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -39,29 +39,29 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { }); } if (o.rowSize[i] > 0) { - w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : o.rowSize[i]); + w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.rowSize[i] === "fill") { w.element.css("flex", "1"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index 13e9e3088..738362626 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js @@ -41,29 +41,29 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { }); } if (o.columnSize[i] > 0) { - w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i]); + w.element.width(o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.columnSize[i] === "fill") { w.element.css("flex", "1"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index ee463f8e4..2809f38f1 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js @@ -41,29 +41,29 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { }); } if (o.rowSize[i] > 0) { - w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : o.rowSize[i]); + w.element.height(o.rowSize[i] <= 1 ? (o.rowSize[i] * 100 + "%") : (o.rowSize[i] / BI.pixRatio + BI.pixUnit)); } if (o.rowSize[i] === "fill") { w.element.css("flex", "1"); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js index 2f39d1fd0..ee5dde1e7 100644 --- a/src/core/wrapper/layout/layout.absolute.js +++ b/src/core/wrapper/layout/layout.absolute.js @@ -25,58 +25,57 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, { var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments); var left = 0, right = 0, top = 0, bottom = 0; if (BI.isNotNull(item.left)) { - w.element.css({left: item.left}); + w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left}); left += item.left; } if (BI.isNotNull(item.right)) { - w.element.css({right: item.right}); + w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right}); right += item.right; } if (BI.isNotNull(item.top)) { - w.element.css({top: item.top}); + w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top}); top += item.top; } if (BI.isNotNull(item.bottom)) { - w.element.css({bottom: item.bottom}); + w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom}); bottom += item.bottom; } if (BI.isNotNull(o.hgap)) { left += o.hgap; - w.element.css({left: left}); + w.element.css({left: left / BI.pixRatio + BI.pixUnit}); right += o.hgap; - w.element.css({right: right}); + w.element.css({right: right / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.vgap)) { top += o.vgap; - w.element.css({top: top}); + w.element.css({top: top / BI.pixRatio + BI.pixUnit}); bottom += o.vgap; - w.element.css({bottom: bottom}); + w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.lgap)) { left += o.lgap; - w.element.css({left: left}); + w.element.css({left: left / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.rgap)) { right += o.rgap; - w.element.css({right: right}); + w.element.css({right: right / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.tgap)) { top += o.tgap; - w.element.css({top: top}); + w.element.css({top: top / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.bgap)) { bottom += o.bgap; - w.element.css({bottom: bottom}); + w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit}); } - if (BI.isNotNull(item.width)) { - w.element.css({width: item.width}); + w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width}); } if (BI.isNotNull(item.height)) { - w.element.css({height: item.height}); + w.element.css({height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : item.height}); } w.element.css({position: "absolute"}); return w; @@ -104,4 +103,4 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.absolute", BI.AbsoluteLayout); \ No newline at end of file +BI.shortcut("bi.absolute", BI.AbsoluteLayout); diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js index cc37f3c6a..4b679debe 100644 --- a/src/core/wrapper/layout/layout.adaptive.js +++ b/src/core/wrapper/layout/layout.adaptive.js @@ -22,60 +22,60 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, { var left = 0, right = 0, top = 0, bottom = 0; if (BI.isNotNull(item.left)) { w.element.css({ - left: item.left + left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left }); } if (BI.isNotNull(item.right)) { w.element.css({ - right: item.right + right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right }); } if (BI.isNotNull(item.top)) { w.element.css({ - top: item.top + top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top }); } if (BI.isNotNull(item.bottom)) { w.element.css({ - bottom: item.bottom + bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom }); } if (BI.isNotNull(o.hgap)) { left += o.hgap; - w.element.css({"margin-left": left}); + w.element.css({"margin-left": left / BI.pixRatio + BI.pixUnit}); right += o.hgap; - w.element.css({"margin-right": right}); + w.element.css({"margin-right": right / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.vgap)) { top += o.vgap; - w.element.css({"margin-top": top}); + w.element.css({"margin-top": top / BI.pixRatio + BI.pixUnit}); bottom += o.vgap; - w.element.css({"margin-bottom": bottom}); + w.element.css({"margin-bottom": bottom / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.lgap)) { left += o.lgap; - w.element.css({"margin-left": left}); + w.element.css({"margin-left": left / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.rgap)) { right += o.rgap; - w.element.css({"margin-right": right}); + w.element.css({"margin-right": right / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.tgap)) { top += o.tgap; - w.element.css({"margin-top": top}); + w.element.css({"margin-top": top / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(o.bgap)) { bottom += o.bgap; - w.element.css({"margin-bottom": bottom}); + w.element.css({"margin-bottom": bottom / BI.pixRatio + BI.pixUnit}); } if (BI.isNotNull(item.width)) { - w.element.css({width: item.width}); + w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width}); } if (BI.isNotNull(item.height)) { - w.element.css({height: item.height}); + w.element.css({height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : item.height}); } return w; }, @@ -89,4 +89,4 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.adaptive", BI.AdaptiveLayout); \ No newline at end of file +BI.shortcut("bi.adaptive", BI.AdaptiveLayout); diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js index 77702f8b1..a6a412a51 100644 --- a/src/core/wrapper/layout/layout.border.js +++ b/src/core/wrapper/layout/layout.border.js @@ -39,12 +39,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); this.addWidget(this._getChildName("north"), w); } - this.getWidgetByName(this._getChildName("north")).element.height(item.height) + this.getWidgetByName(this._getChildName("north")).element.height(item.height / BI.pixRatio + BI.pixUnit) .css({ position: "absolute", - top: (item.top || 0), - left: (item.left || 0), - right: (item.right || 0), + top: (item.top || 0) / BI.pixRatio + BI.pixUnit, + left: (item.left || 0) / BI.pixRatio + BI.pixUnit, + right: (item.right || 0) / BI.pixRatio + BI.pixUnit, bottom: "initial" }); } @@ -59,12 +59,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); this.addWidget(this._getChildName("south"), w); } - this.getWidgetByName(this._getChildName("south")).element.height(item.height) + this.getWidgetByName(this._getChildName("south")).element.height(item.height / BI.pixRatio + BI.pixUnit) .css({ position: "absolute", - bottom: (item.bottom || 0), - left: (item.left || 0), - right: (item.right || 0), + bottom: (item.bottom || 0) / BI.pixRatio + BI.pixUnit, + left: (item.left || 0) / BI.pixRatio + BI.pixUnit, + right: (item.right || 0) / BI.pixRatio + BI.pixUnit, top: "initial" }); } @@ -79,12 +79,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); this.addWidget(this._getChildName("west"), w); } - this.getWidgetByName(this._getChildName("west")).element.width(item.width) + this.getWidgetByName(this._getChildName("west")).element.width(item.width / BI.pixRatio + BI.pixUnit) .css({ position: "absolute", - left: (item.left || 0), - top: top, - bottom: bottom, + left: (item.left || 0) / BI.pixRatio + BI.pixUnit, + top: top / BI.pixRatio + BI.pixUnit, + bottom: bottom / BI.pixRatio + BI.pixUnit, right: "initial" }); } @@ -99,12 +99,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); this.addWidget(this._getChildName("east"), w); } - this.getWidgetByName(this._getChildName("east")).element.width(item.width) + this.getWidgetByName(this._getChildName("east")).element.width(item.width / BI.pixRatio + BI.pixUnit) .css({ position: "absolute", - right: (item.right || 0), - top: top, - bottom: bottom, + right: (item.right || 0) / BI.pixRatio + BI.pixUnit, + top: top / BI.pixRatio + BI.pixUnit, + bottom: bottom / BI.pixRatio + BI.pixUnit, left: "initial" }); } @@ -119,7 +119,13 @@ BI.BorderLayout = BI.inherit(BI.Layout, { this.addWidget(this._getChildName("center"), w); } this.getWidgetByName(this._getChildName("center")).element - .css({position: "absolute", top: top, bottom: bottom, left: left, right: right}); + .css({ + position: "absolute", + top: top / BI.pixRatio + BI.pixUnit, + bottom: bottom / BI.pixRatio + BI.pixUnit, + left: left / BI.pixRatio + BI.pixUnit, + right: right / BI.pixRatio + BI.pixUnit + }); } } }, diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js index 3f5e85030..6553245c4 100644 --- a/src/core/wrapper/layout/layout.default.js +++ b/src/core/wrapper/layout/layout.default.js @@ -26,22 +26,22 @@ BI.DefaultLayout = BI.inherit(BI.Layout, { var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments); if (o.vgap + o.tgap + (item.tgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) !== 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px" + "margin-left": (o.hgap + o.lgap + (item.lgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; @@ -56,4 +56,4 @@ BI.DefaultLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.default", BI.DefaultLayout); \ No newline at end of file +BI.shortcut("bi.default", BI.DefaultLayout); diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js index 7b7d15638..a577bd9d9 100644 --- a/src/core/wrapper/layout/layout.flow.js +++ b/src/core/wrapper/layout/layout.flow.js @@ -29,35 +29,35 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, { var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments); w.element.css({position: "relative", float: "left"}); if (BI.isNotNull(item.left)) { - w.element.css({left: item.left}); + w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left}); } if (BI.isNotNull(item.right)) { - w.element.css({right: item.right}); + w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right}); } if (BI.isNotNull(item.top)) { - w.element.css({top: item.top}); + w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top}); } if (BI.isNotNull(item.bottom)) { - w.element.css({bottom: item.bottom}); + w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom}); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; @@ -105,35 +105,35 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, { var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments); w.element.css({position: "relative", float: "right"}); if (BI.isNotNull(item.left)) { - w.element.css({left: item.left}); + w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left}); } if (BI.isNotNull(item.right)) { - w.element.css({right: item.right}); + w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right}); } if (BI.isNotNull(item.top)) { - w.element.css({top: item.top}); + w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top}); } if (BI.isNotNull(item.bottom)) { - w.element.css({bottom: item.bottom}); + w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom}); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px" + "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": (i === 0 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": ((i === 0 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; @@ -148,4 +148,4 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.right", BI.FloatRightLayout); \ No newline at end of file +BI.shortcut("bi.right", BI.FloatRightLayout); diff --git a/src/core/wrapper/layout/layout.horizontal.js b/src/core/wrapper/layout/layout.horizontal.js index 8008ef57d..c75dd97a5 100644 --- a/src/core/wrapper/layout/layout.horizontal.js +++ b/src/core/wrapper/layout/layout.horizontal.js @@ -60,7 +60,7 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, { // 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现 // 2、不能给多个td设置最大宽度，这样只会平分宽度 // 3、多百分比宽度就算了 - td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width + "px"}); + td.element.css({"max-width": o.columnSize[i] <= 1 ? width : width / BI.pixRatio + BI.pixUnit}); if (i === 0) { td.element.addClass("first-element"); } @@ -74,22 +74,22 @@ BI.HorizontalLayout = BI.inherit(BI.Layout, { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return td; @@ -145,22 +145,22 @@ BI.HorizontalCellLayout = BI.inherit(BI.Layout, { w.element.css({position: "relative", display: "table-cell", "vertical-align": "middle"}); if (o.hgap + o.lgap > 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + "px" + "margin-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap > 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + "px" + "margin-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.tgap > 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + "px" + "margin-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap > 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + "px" + "margin-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit }); } return w; diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js index 34192cb93..06a79a4cd 100644 --- a/src/core/wrapper/layout/layout.inline.js +++ b/src/core/wrapper/layout/layout.inline.js @@ -32,22 +32,22 @@ BI.InlineLayout = BI.inherit(BI.Layout, { w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1}); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": (i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px" + "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; @@ -62,4 +62,4 @@ BI.InlineLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.inline", BI.InlineLayout); \ No newline at end of file +BI.shortcut("bi.inline", BI.InlineLayout); diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js index 3820ed99c..93af1f51a 100644 --- a/src/core/wrapper/layout/layout.table.js +++ b/src/core/wrapper/layout/layout.table.js @@ -117,7 +117,7 @@ BI.TableLayout = BI.inherit(BI.Layout, { }); if (this.rows > 0) { this.getWidgetByName(this._getChildName(this.rows - 1)).element.css({ - "margin-bottom": o.vgap + "margin-bottom": o.vgap / BI.pixRatio + BI.pixUnit }); } w.element.css({ diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js index 0ac780665..bdb168474 100644 --- a/src/core/wrapper/layout/layout.tape.js +++ b/src/core/wrapper/layout/layout.tape.js @@ -52,7 +52,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, { } else { w = self.getWidgetByName(self._getChildName(i)); } - w.element.css({position: "absolute", top: (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap + "px", bottom: (item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap + "px"}); + w.element.css({ + position: "absolute", + top: ((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, + bottom: ((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit + }); }); var left = {}, right = {}; @@ -68,8 +72,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, { w.element.css({left: left[i] * 100 + "%", width: item.width * 100 + "%"}); } else { w.element.css({ - left: left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap + "px", - width: BI.isNumber(item.width) ? item.width : "" + left: (left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, + width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : "" }); } if (!BI.isNumber(item.width)) { @@ -85,8 +89,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, { w.element.css({right: right[i] * 100 + "%", width: item.width * 100 + "%"}); } else { w.element.css({ - right: right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap + "px", - width: BI.isNumber(item.width) ? item.width : "" + right: (right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, + width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : "" }); } if (!BI.isNumber(item.width)) { @@ -165,7 +169,11 @@ BI.VTapeLayout = BI.inherit(BI.Layout, { } else { w = self.getWidgetByName(self._getChildName(i)); } - w.element.css({position: "absolute", left: (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap + "px", right: + (item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap + "px"}); + w.element.css({ + position: "absolute", + left: ((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, + right: +((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit + }); }); var top = {}, bottom = {}; @@ -181,8 +189,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, { w.element.css({top: top[i] * 100 + "%", height: item.height * 100 + "%"}); } else { w.element.css({ - top: top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap + "px", - height: BI.isNumber(item.height) ? item.height : "" + top: (top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, + height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : "" }); } if (!BI.isNumber(item.height)) { @@ -198,8 +206,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, { w.element.css({bottom: bottom[i] * 100 + "%", height: item.height * 100 + "%"}); } else { w.element.css({ - bottom: bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap + "px", - height: BI.isNumber(item.height) ? item.height : "" + bottom: (bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, + height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : "" }); } if (!BI.isNumber(item.height)) { diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index ccc2feb25..1448d3f8c 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -86,23 +86,21 @@ BI.TdLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(arr[i]); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); if (arr[i].lgap) { - w.element.css({"margin-left": arr[i].lgap + "px"}); + w.element.css({"margin-left": arr[i].lgap / BI.pixRatio + BI.pixUnit}); } if (arr[i].rgap) { - w.element.css({"margin-right": arr[i].rgap + "px"}); + w.element.css({"margin-right": arr[i].rgap / BI.pixRatio + BI.pixUnit}); } if (arr[i].tgap) { - w.element.css({"margin-top": arr[i].tgap + "px"}); + w.element.css({"margin-top": arr[i].tgap / BI.pixRatio + BI.pixUnit}); } if (arr[i].bgap) { - w.element.css({"margin-bottom": arr[i].bgap + "px"}); + w.element.css({"margin-bottom": arr[i].bgap / BI.pixRatio + BI.pixUnit}); } first(w, this.rows++, i); var td = BI._lazyCreateWidget({ type: "bi.default", - attributes: { - width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i] - }, + width: o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], tagName: "td", items: [w] }); diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js index 72f1813f3..58f8c7548 100644 --- a/src/core/wrapper/layout/layout.vertical.js +++ b/src/core/wrapper/layout/layout.vertical.js @@ -29,22 +29,22 @@ BI.VerticalLayout = BI.inherit(BI.Layout, { }); if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-top": (i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0) + "px" + "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) +"px" + "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { w.element.css({ - "margin-right": o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) + "px" + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ - "margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) + "px" + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit }); } return w; @@ -59,4 +59,4 @@ BI.VerticalLayout = BI.inherit(BI.Layout, { this._mount(); } }); -BI.shortcut("bi.vertical", BI.VerticalLayout); \ No newline at end of file +BI.shortcut("bi.vertical", BI.VerticalLayout); diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js index 1a5ddd144..7f40b6b74 100644 --- a/src/core/wrapper/layout/layout.window.js +++ b/src/core/wrapper/layout/layout.window.js @@ -114,9 +114,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, { if (BI.isNull(top[i])) { top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap); } - var t = top[i] <= 1 ? top[i] * 100 + "%" : top[i] + o.vgap + o.tgap + "px", h = ""; + var t = top[i] <= 1 ? top[i] * 100 + "%" : (top[i] + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, h = ""; if (BI.isNumber(o.rowSize[i])) { - h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] + "px"; + h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit; } wi.element.css({top: t, height: h}); first(wi, i, j); @@ -132,9 +132,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, { if (BI.isNull(bottom[i])) { bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap); } - var b = bottom[i] <= 1 ? bottom[i] * 100 + "%" : bottom[i] + o.vgap + o.bgap + "px", h = ""; + var b = bottom[i] <= 1 ? bottom[i] * 100 + "%" : (bottom[i] + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, h = ""; if (BI.isNumber(o.rowSize[i])) { - h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] + "px"; + h = o.rowSize[i] <= 1 ? o.rowSize[i] * 100 + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit; } wi.element.css({bottom: b, height: h}); first(wi, i, j); @@ -150,9 +150,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, { if (BI.isNull(left[j])) { left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap); } - var l = left[j] <= 1 ? left[j] * 100 + "%" : left[j] + o.hgap + o.lgap + "px", w = ""; + var l = left[j] <= 1 ? left[j] * 100 + "%" : (left[j] + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, w = ""; if (BI.isNumber(o.columnSize[j])) { - w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] + "px"; + w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit; } wi.element.css({left: l, width: w}); first(wi, i, j); @@ -168,9 +168,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, { if (BI.isNull(right[j])) { right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap); } - var r = right[j] <= 1 ? right[j] * 100 + "%" : right[j] + o.hgap + o.rgap + "px", w = ""; + var r = right[j] <= 1 ? right[j] * 100 + "%" : (right[j] + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, w = ""; if (BI.isNumber(o.columnSize[j])) { - w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] + "px"; + w = o.columnSize[j] <= 1 ? o.columnSize[j] * 100 + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit; } wi.element.css({right: r, width: w}); first(wi, i, j); diff --git a/src/core/wrapper/layout/middle/middle.center.js b/src/core/wrapper/layout/middle/middle.center.js index 6309e520d..0ee299c5b 100644 --- a/src/core/wrapper/layout/middle/middle.center.js +++ b/src/core/wrapper/layout/middle/middle.center.js @@ -35,10 +35,10 @@ BI.CenterLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); w.element.css({ position: "absolute", - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap, + left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, + right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, + top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, + bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, width: "auto", height: "auto" }); diff --git a/src/core/wrapper/layout/middle/middle.float.center.js b/src/core/wrapper/layout/middle/middle.float.center.js index 213272543..7d1edf719 100644 --- a/src/core/wrapper/layout/middle/middle.float.center.js +++ b/src/core/wrapper/layout/middle/middle.float.center.js @@ -36,10 +36,10 @@ BI.FloatCenterLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); w.element.css({ position: "absolute", - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap, + left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, + right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, + top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, + bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, width: "auto", height: "auto" }); diff --git a/src/core/wrapper/layout/middle/middle.horizontal.js b/src/core/wrapper/layout/middle/middle.horizontal.js index e4389624e..569027a67 100644 --- a/src/core/wrapper/layout/middle/middle.horizontal.js +++ b/src/core/wrapper/layout/middle/middle.horizontal.js @@ -34,10 +34,10 @@ BI.HorizontalCenterLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); w.element.css({ position: "absolute", - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap, + left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, + right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, + top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, + bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, width: "auto" }); list[i].el.addItem(w); diff --git a/src/core/wrapper/layout/middle/middle.vertical.js b/src/core/wrapper/layout/middle/middle.vertical.js index 0b61f2054..0065dd62e 100644 --- a/src/core/wrapper/layout/middle/middle.vertical.js +++ b/src/core/wrapper/layout/middle/middle.vertical.js @@ -35,10 +35,10 @@ BI.VerticalCenterLayout = BI.inherit(BI.Layout, { var w = BI._lazyCreateWidget(item); w.element.css({ position: "absolute", - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap, + left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, + right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, + top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, + bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, height: "auto" }); list[i].el.addItem(w); diff --git a/src/less/base/segment/button.segment.less b/src/less/base/segment/button.segment.less index 002372513..fa24f8331 100644 --- a/src/less/base/segment/button.segment.less +++ b/src/less/base/segment/button.segment.less @@ -1,5 +1,15 @@ @import "../../index"; -.bi-segment-button{ +.bi-segment-button { color: @color-bi-text-highlight; + &.active { + &:active { + color: @color-bi-text; + background-color: @color-bi-background-highlight; + } + } + &:active { + color: @color-bi-text-highlight; + .background-color(@color-bi-background-highlight, 10%); + } } \ No newline at end of file diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less index 1b5965b26..450cc5c4b 100644 --- a/src/less/core/utils/common.less +++ b/src/less/core/utils/common.less @@ -1,17 +1,5 @@ @import "../../index"; -input, -textarea { - border: 1px solid @color-bi-border-line; -} - -.bi-theme-dark { - input, - textarea { - border: 1px solid @color-bi-border-line-theme-dark; - } -} - .base-disabled { cursor: not-allowed !important; color: @color-bi-text-disabled !important; @@ -41,6 +29,11 @@ textarea { } } +.base-invalid { + cursor: default !important; +} + +//focus时边框高亮 .bi-focus-shadow { &:focus, &:hover { border-color: @color-bi-border-highlight; @@ -66,15 +59,11 @@ textarea { } } -.base-invalid { - cursor: default !important; -} - .clearfix { .clearfix(); } -//基本背景色 +//基本背景 .bi-background { background-color: @color-bi-background-normal; color: @color-bi-text-normal; @@ -148,6 +137,7 @@ textarea { } } +//灰化 .bi-disabled { color: @color-bi-text-disabled; & .bi-input { @@ -170,7 +160,7 @@ textarea { } } -//提示区域, 灰色字体 +// 提示区域, 灰色字体 .bi-tips { color: @color-bi-text-tips; & .bi-input { @@ -181,7 +171,7 @@ textarea { } } -//边框 +// 边框 .bi-border { border: 1px solid @color-bi-border-line; &.disabled { @@ -254,7 +244,7 @@ textarea { } } -//分割线 +// 分割线 .bi-split { border: 1px solid @border-color-light-line; } @@ -334,7 +324,7 @@ textarea { font-weight: 700; } -//标红 +// 标红 .bi-keyword-red-mark { color: @color-bi-text-redmark; & .bi-input { @@ -345,7 +335,7 @@ textarea { } } -//高亮 +// 高亮 .bi-high-light { color: @color-bi-text-highlight; & .bi-input { @@ -423,7 +413,7 @@ textarea { } } -//水印 +// 水印 .bi-water-mark { color: @font-color-tips; cursor: text; @@ -448,7 +438,7 @@ textarea { } } -//resize +// resizer .bi-resizer { background: @color-bi-background-black; .opacity(0.2); @@ -461,38 +451,33 @@ textarea { } } +// 蒙板 .bi-mask { - color: @color-bi-background-default; + color: @color-bi-text; & .bi-input { - color: @color-bi-background-default; + color: @color-bi-text; } & .bi-textarea { - color: @color-bi-background-default; + color: @color-bi-text; } .background-color(@color-bi-background-black, 20%); } .bi-theme-dark { .bi-mask { - color: @color-bi-background-default-theme-dark; + color: @color-bi-text-white-theme-dark; & .bi-input { - color: @color-bi-background-default-theme-dark; + color: @color-bi-text-white-theme-dark; } & .bi-textarea { - color: @color-bi-background-default-theme-dark; + color: @color-bi-text-white-theme-dark; } .background-color(@color-bi-background-default, 20%); } } +// 遮罩 .bi-z-index-mask { - //color: @color-bi-background-default; - //& .bi-input { - // color: @color-bi-background-default; - //} - //& .bi-textarea { - // color: @color-bi-background-default; - //} .background-color(@color-bi-background-black, 50%); } @@ -508,734 +493,3 @@ textarea { .background-color(@color-bi-background-black-theme-dark, 50%); } } - -//只有背景变化 -.bi-list-item { - &:hover, &.hover { - color: @color-bi-text-black; - & .bi-input { - color: @color-bi-text-black; - } - & .bi-textarea { - color: @color-bi-text-black; - } - .background-color(@color-bi-background-highlight, 10%); - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -.bi-theme-dark { - .bi-list-item { - &:hover, &.hover { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - .background-color(@color-bi-background-highlight, 10%); - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - } - } -} - -.bi-list-item-border { - &:active, &.active { - border: 1px solid @color-bi-border-highlight; - } -} - -//极简,hover文字高亮一下 -.bi-list-item-simple { - &:hover, &.hover { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - } - &.disabled { - &, &:hover, &:active { - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -// 只有文字在hover和active时变化 -.bi-list-item-effect { - &:hover { - color: @color-bi-text-black; - & .bi-input { - color: @color-bi-text-black; - } - & .bi-textarea { - color: @color-bi-text-black; - } - } - &.active, &:active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - } - &.disabled { - &, &:hover, &:active { - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -.bi-theme-dark { - .bi-list-item-effect { - &:hover { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - } - &.active, &:active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - } - } -} - -//文字和背景hover和active时变化, hover和点击时文本和背景变化，active后文本变化，背景不变化 -.bi-list-item-active { - &:hover, &.hover { - color: @color-bi-text-black; - & .bi-input { - color: @color-bi-text-black; - } - & .bi-textarea { - color: @color-bi-text-black; - } - .background-color(@color-bi-background-highlight, 10%); - } - &:active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - .background-color(@color-bi-background-highlight, 15%); - } - &.active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -.bi-theme-dark { - .bi-list-item-active { - &:hover, &.hover { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - .background-color(@color-bi-background-default, 5%); - } - &.active, &:active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - .background-color(@color-bi-background-default, 5%); - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - } - } -} - -//文字和背景hover和active时变化 hover -.bi-list-item-active2 { - &:hover, &.hover { - color: @color-bi-text-black; - & .bi-input { - color: @color-bi-text-black; - } - & .bi-textarea { - color: @color-bi-text-black; - } - .background-color(@color-bi-background-highlight, 10%); - } - &:active, &.active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - .background-color(@color-bi-background-highlight, 15%); - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -.bi-theme-dark { - .bi-list-item-active2 { - &:hover, &.hover { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - .background-color(@color-bi-background-highlight, 10%); - } - &:active, &.active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - .background-color(@color-bi-background-highlight, 15%); - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - } - } -} - -// 激活和选中时背景高亮 -.bi-list-item-select { - &:hover, &.hover { - .background-color(@color-bi-background-highlight, 10%); - } - &:active, &.active { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - background-color: @color-bi-background-highlight; - & .bi-high-light { - color: @color-bi-text; - } - } - &.button-success { - &:active, &.active { - color: @color-bi-text; - background-color: @color-bi-background-success; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - & .bi-high-light { - color: @color-bi-text; - } - &.bi-high-light-border { - border-color: @color-bi-border-success; - } - } - } - &.button-warning { - & { - color: @color-bi-text-failure; - & .bi-input { - color: @color-bi-text-failure; - } - & .bi-textarea { - color: @color-bi-text-failure; - } - & .bi-high-light { - color: @color-bi-text-failure; - } - &.bi-high-light-border { - border-color: @color-bi-border-failure; - } - } - &:hover, &.hover { - color: @color-bi-text-failure; - & .bi-input { - color: @color-bi-text-failure; - } - & .bi-textarea { - color: @color-bi-text-failure; - } - background-color: @color-bi-background-light-failure; - & .bi-high-light { - color: @color-bi-text-failure; - } - &.bi-high-light-border { - border-color: @color-bi-border-failure; - } - } - &:active, &.active { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - background-color: @color-bi-background-failure; - & .bi-high-light { - color: @color-bi-text; - } - &.bi-high-light-border { - border-color: @color-bi-border-failure; - } - } - } - &.disabled { - &, &:hover, &:active { - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - background-color: transparent !important; - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - &.bi-high-light-border { - border-color: @color-bi-border-disabled; - } - &.hover, &.active { - color: @color-bi-text !important; - & .bi-input { - color: @color-bi-text !important; - } - & .bi-textarea { - color: @color-bi-text !important; - } - background-color: @color-bi-background-dark-gray !important; - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - &.bi-high-light-border { - border-color: @color-bi-border-disabled; - } - } - } - } -} - -.bi-theme-dark { - .bi-list-item-select { - &:hover, &.hover { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - .background-color(@color-bi-background-default, 5%); - } - &:active, &.active { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - background-color: @color-bi-background-highlight; - & .bi-high-light { - color: @color-bi-text; - } - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - &.hover, &.active { - background-color: @background-color-black-theme-dark !important; - } - } - } -} - -//文字和背景hover和active时变化 hover和点击时边框变化，active后背景和边框变化 -.bi-list-item-select2 { - &:hover, &.hover { - color: @color-bi-text-black; - & .bi-input { - color: @color-bi-text-black; - } - & .bi-textarea { - color: @color-bi-text-black; - } - &.bi-border { - border-color: @color-bi-border-highlight; - } - } - &:active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - &.bi-border { - border-color: @color-bi-border-highlight; - } - } - &.active { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - &.bi-border { - border-color: @color-bi-border-highlight; - } - background-color: @color-bi-background-highlight; - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -.bi-theme-dark { - .bi-list-item-select2 { - &:hover, &.hover { - color: @color-bi-text; - & .bi-input { - color: @color-bi-text; - } - & .bi-textarea { - color: @color-bi-text; - } - } - - &.active { - background-color: @color-bi-background-default-theme-dark; - } - - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - &.active { - background-color: @background-color-black-theme-dark !important; - } - } - } -} - -//与bi-list-item-select的区别是背景是灰的 -.bi-list-item-select3 { - &:hover, &.hover { - background-color: @color-bi-background-normal; - } - &:active, &.active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - background-color: @color-bi-background-normal; - } - &.disabled { - &:hover, &.hover, &:active, &.active { - background-color: @color-bi-background-default !important; - } - } -} - -.bi-theme-dark { - .bi-list-item-select3 { - &:hover, &.hover { - background-color: @color-bi-background-normal-theme-dark; - } - &:active, &.active { - color: @color-bi-text-highlight; - & .bi-input { - color: @color-bi-text-highlight; - } - & .bi-textarea { - color: @color-bi-text-highlight; - } - background-color: @color-bi-background-normal-theme-dark; - } - &.disabled { - &:hover, &.hover, &:active, &.active { - background-color: @color-bi-background-default-theme-dark !important; - } - } - } -} - -//去掉list-item效果 -.bi-list-item-none { - &:hover, &.hover { - color: inherit; - & .bi-input { - color: inherit; - } - & .bi-textarea { - color: inherit; - } - background-color: transparent; - } - &:active, &.active { - color: inherit; - & .bi-input { - color: inherit; - } - & .bi-textarea { - color: inherit; - } - background-color: transparent; - & .bi-high-light { - color: inherit; - } - } - &.disabled { - &, &:hover, &:active { - color: @color-bi-text-disabled !important; - & .bi-input { - color: @color-bi-text-disabled !important; - } - & .bi-textarea { - color: @color-bi-text-disabled !important; - } - background-color: transparent !important; - & .bi-high-light { - color: @color-bi-text-disabled !important; - } - } - } -} - -.bi-theme-dark { - .bi-list-item-none { - &:hover, &.hover { - color: inherit; - & .bi-input { - color: inherit; - } - & .bi-textarea { - color: inherit; - } - background-color: transparent; - } - &:active, &.active { - color: inherit; - & .bi-input { - color: inherit; - } - & .bi-textarea { - color: inherit; - } - background-color: transparent; - & .bi-high-light { - color: inherit; - } - } - &.disabled { - &, &:hover, &:active { - background-color: transparent !important; - color: @color-bi-text-disabled-theme-dark !important; - & .bi-input { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-textarea { - color: @color-bi-text-disabled-theme-dark !important; - } - & .bi-high-light { - color: @color-bi-text-disabled-theme-dark !important; - } - } - } - } -} - -.bi-user-select-enable { - .user-select-enable(); -} - -.bi-user-select-disable { - .user-select-disable(); -} diff --git a/src/less/core/utils/list-item.less b/src/less/core/utils/list-item.less new file mode 100644 index 000000000..f6e1a4549 --- /dev/null +++ b/src/less/core/utils/list-item.less @@ -0,0 +1,732 @@ +@import "../../index"; + +// hover的时候背景变化,文字变黑 +.bi-list-item { + &:hover, &.hover { + color: @color-bi-text-black; + & .bi-input { + color: @color-bi-text-black; + } + & .bi-textarea { + color: @color-bi-text-black; + } + .background-color(@color-bi-background-highlight, 10%); + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +.bi-theme-dark { + .bi-list-item { + &:hover, &.hover { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + .background-color(@color-bi-background-highlight, 10%); + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + } + } +} + +// active的时候边框高亮 +.bi-list-item-border { + &:active, &.active { + border: 1px solid @color-bi-border-highlight; + } +} + +// 极简,hover的时候文字高亮 +.bi-list-item-simple { + &:hover, &.hover { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + } + &.disabled { + &, &:hover, &:active { + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +// hover的时候文字变黑 +// active的时候文字高亮 +.bi-list-item-effect { + &:hover { + color: @color-bi-text-black; + & .bi-input { + color: @color-bi-text-black; + } + & .bi-textarea { + color: @color-bi-text-black; + } + } + &.active, &:active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + } + &.disabled { + &, &:hover, &:active { + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +.bi-theme-dark { + .bi-list-item-effect { + &:hover { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + } + &.active, &:active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + } + } +} + +// hover的时候背景变化,文字变黑 +// :active的时候文字高亮,背景变化 +.bi-list-item-active { + &:hover, &.hover { + color: @color-bi-text-black; + & .bi-input { + color: @color-bi-text-black; + } + & .bi-textarea { + color: @color-bi-text-black; + } + .background-color(@color-bi-background-highlight, 10%); + } + &:active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + .background-color(@color-bi-background-highlight, 15%); + } + &.active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +.bi-theme-dark { + .bi-list-item-active { + &:hover, &.hover { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + .background-color(@color-bi-background-default, 5%); + } + &.active, &:active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + .background-color(@color-bi-background-default, 5%); + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + } + } +} + +// hover的时候背景变化,文字变黑 +// active的时候文字高亮,背景变化 +.bi-list-item-active2 { + &:hover, &.hover { + color: @color-bi-text-black; + & .bi-input { + color: @color-bi-text-black; + } + & .bi-textarea { + color: @color-bi-text-black; + } + .background-color(@color-bi-background-highlight, 10%); + } + &:active, &.active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + .background-color(@color-bi-background-highlight, 15%); + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +.bi-theme-dark { + .bi-list-item-active2 { + &:hover, &.hover { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + .background-color(@color-bi-background-highlight, 10%); + } + &:active, &.active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + .background-color(@color-bi-background-highlight, 15%); + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + } + } +} + +// hover的时候背景变化 +// active的时候背景高亮 +.bi-list-item-select { + &:hover, &.hover { + .background-color(@color-bi-background-highlight, 10%); + } + &:active, &.active { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + background-color: @color-bi-background-highlight; + & .bi-high-light { + color: @color-bi-text; + } + } + &.button-success { + &:active, &.active { + color: @color-bi-text; + background-color: @color-bi-background-success; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + & .bi-high-light { + color: @color-bi-text; + } + &.bi-high-light-border { + border-color: @color-bi-border-success; + } + } + } + &.button-warning { + & { + color: @color-bi-text-failure; + & .bi-input { + color: @color-bi-text-failure; + } + & .bi-textarea { + color: @color-bi-text-failure; + } + & .bi-high-light { + color: @color-bi-text-failure; + } + &.bi-high-light-border { + border-color: @color-bi-border-failure; + } + } + &:hover, &.hover { + color: @color-bi-text-failure; + & .bi-input { + color: @color-bi-text-failure; + } + & .bi-textarea { + color: @color-bi-text-failure; + } + background-color: @color-bi-background-light-failure; + & .bi-high-light { + color: @color-bi-text-failure; + } + &.bi-high-light-border { + border-color: @color-bi-border-failure; + } + } + &:active, &.active { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + background-color: @color-bi-background-failure; + & .bi-high-light { + color: @color-bi-text; + } + &.bi-high-light-border { + border-color: @color-bi-border-failure; + } + } + } + &.disabled { + &, &:hover, &:active { + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + background-color: transparent !important; + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + &.bi-high-light-border { + border-color: @color-bi-border-disabled; + } + &.hover, &.active { + color: @color-bi-text !important; + & .bi-input { + color: @color-bi-text !important; + } + & .bi-textarea { + color: @color-bi-text !important; + } + background-color: @color-bi-background-dark-gray !important; + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + &.bi-high-light-border { + border-color: @color-bi-border-disabled; + } + } + } + } +} + +.bi-theme-dark { + .bi-list-item-select { + &:hover, &.hover { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + .background-color(@color-bi-background-default, 5%); + } + &:active, &.active { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + background-color: @color-bi-background-highlight; + & .bi-high-light { + color: @color-bi-text; + } + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + &.hover, &.active { + background-color: @background-color-black-theme-dark !important; + } + } + } +} + +// hover的时候边框高亮,文字变黑 +// :active的时候文字高亮，边框高亮 +// .active的时候背景高亮，边框高亮 +.bi-list-item-select2 { + &:hover, &.hover { + color: @color-bi-text-black; + & .bi-input { + color: @color-bi-text-black; + } + & .bi-textarea { + color: @color-bi-text-black; + } + &.bi-border { + border-color: @color-bi-border-highlight; + } + } + &:active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + &.bi-border { + border-color: @color-bi-border-highlight; + } + } + &.active { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + &.bi-border { + border-color: @color-bi-border-highlight; + } + background-color: @color-bi-background-highlight; + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +.bi-theme-dark { + .bi-list-item-select2 { + &:hover, &.hover { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + } + + &.active { + background-color: @color-bi-background-default-theme-dark; + } + + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + &.active { + background-color: @background-color-black-theme-dark !important; + } + } + } +} + +// hover的时候背景变化 -- 变灰 +// active的时候文字高亮背景变化 -- 变灰 +.bi-list-item-select3 { + &:hover, &.hover { + background-color: @color-bi-background-normal; + } + &:active, &.active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + background-color: @color-bi-background-normal; + } + &.disabled { + &:hover, &.hover, &:active, &.active { + background-color: @color-bi-background-default !important; + } + } +} + +.bi-theme-dark { + .bi-list-item-select3 { + &:hover, &.hover { + background-color: @color-bi-background-normal-theme-dark; + } + &:active, &.active { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + background-color: @color-bi-background-normal-theme-dark; + } + &.disabled { + &:hover, &.hover, &:active, &.active { + background-color: @color-bi-background-default-theme-dark !important; + } + } + } +} + +// 去掉list-item效果 +.bi-list-item-none { + &:hover, &.hover { + color: inherit; + & .bi-input { + color: inherit; + } + & .bi-textarea { + color: inherit; + } + background-color: transparent; + } + &:active, &.active { + color: inherit; + & .bi-input { + color: inherit; + } + & .bi-textarea { + color: inherit; + } + background-color: transparent; + & .bi-high-light { + color: inherit; + } + } + &.disabled { + &, &:hover, &:active { + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + background-color: transparent !important; + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +.bi-theme-dark { + .bi-list-item-none { + &:hover, &.hover { + color: inherit; + & .bi-input { + color: inherit; + } + & .bi-textarea { + color: inherit; + } + background-color: transparent; + } + &:active, &.active { + color: inherit; + & .bi-input { + color: inherit; + } + & .bi-textarea { + color: inherit; + } + background-color: transparent; + & .bi-high-light { + color: inherit; + } + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled-theme-dark !important; + & .bi-input { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-textarea { + color: @color-bi-text-disabled-theme-dark !important; + } + & .bi-high-light { + color: @color-bi-text-disabled-theme-dark !important; + } + } + } + } +} diff --git a/src/less/core/utils/pos.less b/src/less/core/utils/position.less similarity index 74% rename from src/less/core/utils/pos.less rename to src/less/core/utils/position.less index 255a8464b..a9693147e 100644 --- a/src/less/core/utils/pos.less +++ b/src/less/core/utils/position.less @@ -1,8 +1,10 @@ @import "../../index"; -.display-block{ + +.display-block { display: block; } -.display-inline{ + +.display-inline { .inline-block(); } @@ -11,10 +13,11 @@ } /**常用于span元素在与combo并列时**/ -.vertical-super{ +.vertical-super { vertical-align: super; } -.vertical-top{ + +.vertical-top { vertical-align: top; } @@ -22,6 +25,6 @@ text-align: center; } -.horizon-left{ +.horizon-left { text-align: left; } \ No newline at end of file diff --git a/src/less/core/utils/overflow.less b/src/less/core/utils/typographic.less similarity index 73% rename from src/less/core/utils/overflow.less rename to src/less/core/utils/typographic.less index 16f3b0d76..e15f24cf9 100644 --- a/src/less/core/utils/overflow.less +++ b/src/less/core/utils/typographic.less @@ -1,4 +1,5 @@ @import "../../index"; + .y-overflow-auto { overflow-y: auto; overflow-x: hidden; @@ -19,17 +20,17 @@ overflow-x: scroll; } -.overflow-auto{ +.overflow-auto { overflow-x: auto; overflow-y: auto; } -.overflow-scroll{ +.overflow-scroll { overflow-x: scroll; overflow-y: scroll; } -.overflow-hidden{ +.overflow-hidden { overflow-x: hidden; overflow-y: hidden; } @@ -39,7 +40,14 @@ word-break: break-all; } - -.overflow-dot{ +.overflow-dot { .overflow-dot(); +} + +.bi-user-select-enable { + .user-select-enable(); +} + +.bi-user-select-disable { + .user-select-disable(); } \ No newline at end of file diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 8dc1ec5a2..28a3aaf7c 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -4,20 +4,24 @@ //默认字体颜色 @color-bi-text-normal: @font-color-normal; -//默认字体颜色深色系 +//深色主题默认字体颜色 +@color-bi-text-theme-dark: @font-color-normal-theme-dark; @color-bi-text-normal-theme-dark: @font-color-normal-theme-dark; //黑色字体颜色 @color-bi-text-black: @font-color-black; -//深色主题默认字体颜色 -@color-bi-text-theme-dark: @font-color-normal-theme-dark; +//深色主题黑色字体颜色 +@color-bi-text-black-theme-dark: @font-color-normal-theme-dark; //灰色字体颜色 @color-bi-text-gray: @font-color-gray; //浅灰色字体 @color-bi-text-light-gray: @font-color-light-gray; -//深色浅灰色字体 +//深色主题浅灰色字体 @color-bi-text-light-gray-theme-dark: @font-color-light-gray-theme-dark; //白色字体颜色 @color-bi-text: @font-color-white; +@color-bi-text-white: @font-color-white; +//深色主题白色字体颜色 +@color-bi-text-white-theme-dark: @font-color-white-theme-dark; //灰化字体颜色 @color-bi-text-disabled: @font-color-disabled; //深色主题灰化字体颜色 @@ -39,6 +43,7 @@ //普通背景 @color-bi-background-normal: @background-color-normal; +//深色主题普通背景 @color-bi-background-normal-theme-dark: @background-color-normal-theme-dark; //默认背景 @color-bi-background-default: @background-color-default; @@ -46,19 +51,19 @@ @color-bi-background-default-theme-dark: @background-color-default-theme-dark; //黑色背景 @color-bi-background-black: @background-color-black; -//深色系黑色背景 +//深色主题黑色背景 @color-bi-background-black-theme-dark: @background-color-black-theme-dark; //浅黑色背景 @color-bi-background-light-black: @background-color-light-black; -//深色系浅黑色背景 +//深色主题浅黑色背景 @color-bi-background-light-black-theme-dark: @background-color-light-black-theme-dark; //深灰色背景 @color-bi-background-dark-gray: @background-color-dark-gray; -//深色系深灰色背景 +//深色主题深灰色背景 @color-bi-background-dark-gray-theme-dark: @background-color-dark-gray-theme-dark; //灰色背景(浅) @color-bi-background-light-gray: @background-color-light-gray; -//深色主题灰色背景 +//深色主题灰色背景(浅) @color-bi-background-light-gray-theme-dark: @background-color-light-gray-theme-dark; //灰色背景(中) @color-bi-background-medium-gray: @background-color-medium-gray; @@ -95,17 +100,17 @@ @color-bi-border-black: @border-color-black; //默认边框色 @color-bi-border-default: @border-color-default; -//边框线颜色 +//边框线色 @color-bi-border-line: @border-color-line; -//深色系边框线色 +//深色主题边框线色 @color-bi-border-line-theme-dark: @border-color-line-theme-dark; //深色边框线 @color-bi-border-dark-line: @border-color-dark-line; -//深色系深色边框线 +//深色主题深色边框线 @color-bi-border-dark-line-theme-dark: @border-color-dark-line-theme-dark; //灰化边框 @color-bi-border-disabled: @border-color-disabled; -//深色系灰化边框 +//深色主题灰化边框 @color-bi-border-disabled-theme-dark: @border-color-disabled-theme-dark; //成功边框色 @color-bi-border-success: @border-color-success; @@ -179,11 +184,3 @@ @color-bi-yellow-40: fade(@font-color-yellow, 40); @color-bi-yellow-20: fade(@font-color-yellow, 20); @color-bi-yellow-5: fade(@font-color-yellow, 5); - - - - - - - - diff --git a/src/widget/datepane/datepane.js b/src/widget/datepane/datepane.js index 85add1b6b..f470de0d9 100644 --- a/src/widget/datepane/datepane.js +++ b/src/widget/datepane/datepane.js @@ -4,7 +4,7 @@ BI.DynamicDatePane = BI.inherit(BI.Widget, { baseCls: "bi-dynamic-date-pane", minDate: "1900-01-01", maxDate: "2099-12-31", - supportDynamic: true, + supportDynamic: true }, render: function () { @@ -55,7 +55,7 @@ BI.DynamicDatePane = BI.inherit(BI.Widget, { self.switcher = this; } }, - height: 30 + height: o.supportDynamic ? 30 : 0 }, { type: "bi.tab", ref: function () { @@ -94,7 +94,7 @@ BI.DynamicDatePane = BI.inherit(BI.Widget, { listeners: [{ eventName: "EVENT_CHANGE", action: function () { - if(self._checkValue(self.getValue())) { + if (self._checkValue(self.getValue())) { self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); } } diff --git a/src/widget/datetimepane/datetimepane.js b/src/widget/datetimepane/datetimepane.js index c96291093..61f3be8ac 100644 --- a/src/widget/datetimepane/datetimepane.js +++ b/src/widget/datetimepane/datetimepane.js @@ -55,7 +55,7 @@ BI.DynamicDateTimePane = BI.inherit(BI.Widget, { self.switcher = this; } }, - height: 30 + height: o.supportDynamic ? 30 : 0 }, { type: "bi.tab", ref: function () { diff --git a/src/widget/multiselect/multiselect.loader.nobar.js b/src/widget/multiselect/multiselect.loader.nobar.js index 46bcdbe4b..45b3b6d92 100644 --- a/src/widget/multiselect/multiselect.loader.nobar.js +++ b/src/widget/multiselect/multiselect.loader.nobar.js @@ -166,7 +166,7 @@ BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, { }, resetHeight: function (h) { - this.button_group.element.css({"max-height": h + "px"}); + this.button_group.element.css({"max-height": h / BI.pixRatio + BI.pixUnit}); }, resetWidth: function () { @@ -175,4 +175,4 @@ BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, { }); BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader); \ No newline at end of file +BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader); diff --git a/src/widget/singleselect/search/singleselect.search.loader.js b/src/widget/singleselect/search/singleselect.search.loader.js index 6886ec602..6bb72bf76 100644 --- a/src/widget/singleselect/search/singleselect.search.loader.js +++ b/src/widget/singleselect/search/singleselect.search.loader.js @@ -84,7 +84,7 @@ BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, { _createItems: function (items) { return BI.createItems(items, { - type: this.options.allowNoSelect ? "bi.single_select_item" : "bi.single_select_combo_item", + type: this.options.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item", cls: "bi-list-item-active", logic: { dynamic: false @@ -150,4 +150,4 @@ BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, { }); BI.SingleSelectSearchLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_search_loader", BI.SingleSelectSearchLoader); \ No newline at end of file +BI.shortcut("bi.single_select_search_loader", BI.SingleSelectSearchLoader); diff --git a/src/widget/singleselect/singleselect.item.js b/src/widget/singleselect/singleselect.item.js deleted file mode 100644 index 4c581201b..000000000 --- a/src/widget/singleselect/singleselect.item.js +++ /dev/null @@ -1,65 +0,0 @@ -BI.SingleSelectComboItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.SingleSelectComboItem.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-single-select-radio-item", - logic: { - dynamic: false - }, - height: 24 - }); - }, - _init: function () { - BI.SingleSelectComboItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.radio = BI.createWidget({ - type: "bi.radio" - }); - this.text = BI.createWidget({ - type: "bi.label", - cls: "list-item-text", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - keyword: o.keyword, - value: o.value, - py: o.py - }); - - BI.createWidget(BI.extend({ - element: this - }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, { - items: BI.LogicFactory.createLogicItemsByDirection("left", { - type: "bi.center_adapt", - items: [this.radio], - width: 26 - }, this.text) - })))); - }, - - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, - - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, - - doClick: function () { - BI.SingleSelectComboItem.superclass.doClick.apply(this, arguments); - this.radio.setSelected(this.isSelected()); - if (this.isValid()) { - this.fireEvent(BI.SingleSelectComboItem.EVENT_CHANGE, this.isSelected(), this); - } - }, - - setSelected: function (v) { - BI.SingleSelectComboItem.superclass.setSelected.apply(this, arguments); - this.radio.setSelected(v); - - } -}); -BI.SingleSelectComboItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_combo_item", BI.SingleSelectComboItem); \ No newline at end of file diff --git a/src/widget/singleselect/singleselect.list.js b/src/widget/singleselect/singleselect.list.js index 98340ede0..8d4b00b9e 100644 --- a/src/widget/singleselect/singleselect.list.js +++ b/src/widget/singleselect/singleselect.list.js @@ -116,7 +116,7 @@ BI.SingleSelectList = BI.inherit(BI.Widget, { resetHeight: function (h) { this.list.resetHeight ? this.list.resetHeight(h) : - this.list.element.css({"max-height": h + "px"}); + this.list.element.css({"max-height": h / BI.pixRatio + BI.pixUnit}); }, setNotSelectedValue: function () { @@ -156,4 +156,4 @@ BI.SingleSelectList = BI.inherit(BI.Widget, { } }); BI.SingleSelectList.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.single_select_list", BI.SingleSelectList); \ No newline at end of file +BI.shortcut("bi.single_select_list", BI.SingleSelectList); diff --git a/src/widget/singleselect/singleselect.loader.js b/src/widget/singleselect/singleselect.loader.js index f2cebd488..e1362eb89 100644 --- a/src/widget/singleselect/singleselect.loader.js +++ b/src/widget/singleselect/singleselect.loader.js @@ -105,7 +105,7 @@ BI.SingleSelectLoader = BI.inherit(BI.Widget, { _createItems: function (items) { return BI.createItems(items, { - type: this.options.allowNoSelect ? "bi.single_select_item" : "bi.single_select_combo_item", + type: this.options.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item", logic: this.options.logic, cls: "bi-list-item-active", height: 24, diff --git a/src/widget/year/combo.year.js b/src/widget/year/combo.year.js index 830af2988..071eca302 100644 --- a/src/widget/year/combo.year.js +++ b/src/widget/year/combo.year.js @@ -64,6 +64,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, { isNeedAdjustWidth: false, el: this.trigger, destroyWhenHide: true, + adjustLength: 1, popup: { minWidth: 85, stopPropagation: false, @@ -205,4 +206,4 @@ BI.shortcut("bi.dynamic_year_combo", BI.DynamicYearCombo); BI.extend(BI.DynamicYearCombo, { Static: 1, Dynamic: 2 -}); \ No newline at end of file +}); diff --git a/src/widget/yearmonth/combo.yearmonth.js b/src/widget/yearmonth/combo.yearmonth.js index 45713f96c..b6eaef978 100644 --- a/src/widget/yearmonth/combo.yearmonth.js +++ b/src/widget/yearmonth/combo.yearmonth.js @@ -62,6 +62,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, { isNeedAdjustWidth: false, el: this.trigger, destroyWhenHide: true, + adjustLength: 1, popup: { minWidth: 100, stopPropagation: false, @@ -203,4 +204,4 @@ BI.shortcut("bi.dynamic_year_month_combo", BI.DynamicYearMonthCombo); BI.extend(BI.DynamicYearMonthCombo, { Static: 1, Dynamic: 2 -}); \ No newline at end of file +}); diff --git a/src/widget/yearquarter/combo.yearquarter.js b/src/widget/yearquarter/combo.yearquarter.js index 13fdd8c60..1bbf3c364 100644 --- a/src/widget/yearquarter/combo.yearquarter.js +++ b/src/widget/yearquarter/combo.yearquarter.js @@ -62,6 +62,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, { isNeedAdjustWidth: false, el: this.trigger, destroyWhenHide: true, + adjustLength: 1, popup: { minWidth: 85, stopPropagation: false, @@ -203,4 +204,4 @@ BI.shortcut("bi.dynamic_year_quarter_combo", BI.DynamicYearQuarterCombo); BI.extend(BI.DynamicYearQuarterCombo, { Static: 1, Dynamic: 2 -}); \ No newline at end of file +}); diff --git a/template/index.html b/template/index.html index 500aca846..3cd341242 100644 --- a/template/index.html +++ b/template/index.html @@ -3,10 +3,13 @@ + + + Demo
- \ No newline at end of file +