Browse Source

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

* commit '0684c11e2b82962cd83d3eee13a2be8942423d89':
  auto upgrade version to 2.0.20221216100516
  auto upgrade version to 2.0.20221215221629
  auto upgrade version to 2.0.20221215220552
  BI-119055 fix: needadaptive的下拉计算NaN
  无JRIA fix: 再检查一遍输入框圆角问题
  auto upgrade version to 2.0.20221215171537
research/test
superman 2 years ago
parent
commit
12a59f3235
  1. 2
      package.json
  2. 38
      src/case/colorchooser/colorpicker/button/button.colorshow.js
  3. 274
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  4. 170
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  5. 96
      src/case/colorchooser/colorpicker/editor.colorpicker.js
  6. 64
      src/case/colorchooser/colorpicker/editor.colorpicker.simple.js
  7. 2
      src/core/platform/web/dom.js

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "fineui", "name": "fineui",
"version": "2.0.20221215144622", "version": "2.0.20221216100516",
"description": "fineui", "description": "fineui",
"main": "dist/fineui_without_conflict.min.js", "main": "dist/fineui_without_conflict.min.js",
"types": "dist/lib/index.d.ts", "types": "dist/lib/index.d.ts",

38
src/case/colorchooser/colorpicker/button/button.colorshow.js

@ -6,30 +6,32 @@
BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
props: { props: {
baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect', baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius',
}, },
render: function () { render: function () {
var self = this, o = this.options; var self = this, o = this.options;
return { return {
type: 'bi.htape', type: 'bi.htape',
items: [{ items: [
el: { {
type: "bi.icon_label", el: {
ref: function (_ref) { type: "bi.icon_label",
self.icon = _ref; ref: function (_ref) {
self.icon = _ref;
},
iconWidth: 16,
iconHeight: 16,
}, },
iconWidth: 16, hgap: 20,
iconHeight: 16, width: 16,
}, }, {
hgap: 20, type: 'bi.label',
width: 16, textAlign: 'left',
}, { text: o.text,
type: 'bi.label', }
textAlign: 'left', ]
text: o.text, };
}]
}
}, },
doClick: function () { doClick: function () {
@ -40,4 +42,4 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
}, },
}); });
BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE"; BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton); BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton);

274
src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

@ -21,7 +21,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
render: function () { render: function () {
var self = this, o = this.options, c = this.constants; var self = this, o = this.options, c = this.constants;
this.storeValue = {}; this.storeValue = {};
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label", type: "bi.label",
cls: "color-picker-editor-label", cls: "color-picker-editor-label",
height: 20 height: 20
@ -33,146 +33,162 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
var Ws = BI.map(BI.range(0, 3), function () { var Ws = BI.map(BI.range(0, 3), function () {
return { return {
type: "bi.small_text_editor", type: "bi.small_text_editor",
cls: "color-picker-editor-input", cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker, validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true, allowBlank: true,
value: 255, value: 255,
width: c.RGB_WIDTH, width: c.RGB_WIDTH,
height: 24, height: 24,
listeners: [{ listeners: [
eventName: BI.TextEditor.EVENT_CHANGE, {
action: function () { eventName: BI.TextEditor.EVENT_CHANGE,
self._checkEditors(); action: function () {
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { self._checkEditors();
self.colorShow.element.css("background-color", self.getValue()); if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
} }
} }
}] ]
}; };
}); });
return { return {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [
el: { {
type: "bi.vertical", el: {
tgap: 10, type: "bi.vertical",
items: [{ tgap: 10,
type: 'bi.vertical_adapt', items: [
columnSize: ["fill", 'fill'], {
height: 24, type: 'bi.vertical_adapt',
items: [{ columnSize: ["fill", 'fill'],
type: "bi.color_picker_show_button",
cls: "trans-color-icon",
height: 22,
title: BI.i18nText("BI-Transparent_Color"),
text: BI.i18nText("BI-Transparent_Color"),
listeners: [{
eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
action: function () {
self.setValue("transparent");
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}],
ref: function (_ref) {
self.transparent = _ref;
}
}, {
el: {
type: "bi.color_picker_show_button",
cls: "auto-color-icon",
height: 22,
title: BI.i18nText("BI-Basic_Auto"),
text: BI.i18nText("BI-Basic_Auto"),
listeners: [{
eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
action: function () {
self.setValue("");
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}],
ref: function (_ref) {
self.none = _ref;
}
},
lgap: 10,
}]
}, {
el: {
type: "bi.vertical_adapt",
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
rgap: 5,
items: [{
el: {
type: "bi.layout",
cls: "color-picker-editor-display bi-card bi-border",
height: 22,
width: 22,
ref: function (_ref) {
self.colorShow = _ref;
}
},
width: 18
}, {
type: "bi.label",
text: "#",
width: 10
}, {
type: "bi.small_text_editor",
ref: function (_ref) {
self.hexEditor = _ref;
},
cls: "color-picker-editor-input",
validationChecker: this._hexChecker,
allowBlank: true,
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
width: c.HEX_WIDTH,
height: 24, height: 24,
listeners: [{ items: [
eventName: "EVENT_CHANGE", {
action: function () { type: "bi.color_picker_show_button",
self._checkHexEditor(); cls: "trans-color-icon",
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { height: 22,
self.colorShow.element.css("background-color", self.getValue()); title: BI.i18nText("BI-Transparent_Color"),
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); text: BI.i18nText("BI-Transparent_Color"),
listeners: [
{
eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
action: function () {
self.setValue("transparent");
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
],
ref: function (_ref) {
self.transparent = _ref;
} }
}, {
el: {
type: "bi.color_picker_show_button",
cls: "auto-color-icon",
height: 22,
title: BI.i18nText("BI-Basic_Auto"),
text: BI.i18nText("BI-Basic_Auto"),
listeners: [
{
eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
action: function () {
self.setValue("");
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
],
ref: function (_ref) {
self.none = _ref;
}
},
lgap: 10,
} }
}] ]
}, RGB[0], { }, {
el: BI.extend(Ws[0], { el: {
ref: function (_ref) { type: "bi.vertical_adapt",
self.R = _ref columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
}
}), rgap: 5,
width: c.RGB_WIDTH items: [
}, RGB[1], { {
el: BI.extend(Ws[1], { el: {
ref: function (_ref) { type: "bi.layout",
self.G = _ref cls: "color-picker-editor-display bi-card bi-border",
} height: 22,
}), width: 22,
width: c.RGB_WIDTH ref: function (_ref) {
}, RGB[2], { self.colorShow = _ref;
el: BI.extend(Ws[2], { }
ref: function (_ref) { },
self.B = _ref width: 18
} }, {
}), type: "bi.label",
rgap: -5, text: "#",
width: c.RGB_WIDTH width: 10
}] }, {
} type: "bi.small_text_editor",
}] ref: function (_ref) {
}, self.hexEditor = _ref;
left: 0, },
right: 0, cls: "color-picker-editor-input bi-border-radius",
top: 0, validationChecker: this._hexChecker,
bottom: 0 allowBlank: true,
}] errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
width: c.HEX_WIDTH,
height: 24,
listeners: [
{
eventName: "EVENT_CHANGE",
action: function () {
self._checkHexEditor();
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
}
]
}, RGB[0], {
el: BI.extend(Ws[0], {
ref: function (_ref) {
self.R = _ref;
}
}),
width: c.RGB_WIDTH
}, RGB[1], {
el: BI.extend(Ws[1], {
ref: function (_ref) {
self.G = _ref;
}
}),
width: c.RGB_WIDTH
}, RGB[2], {
el: BI.extend(Ws[2], {
ref: function (_ref) {
self.B = _ref;
}
}),
rgap: -5,
width: c.RGB_WIDTH
}
]
}
}
]
},
left: 0,
right: 0,
top: 0,
bottom: 0
}
]
}; };
}, },
@ -181,13 +197,13 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
}, },
_checkEditors: function () { _checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) { if (BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0); this.R.setValue(0);
} }
if(BI.isEmptyString(this.G.getValue())) { if (BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0); this.G.setValue(0);
} }
if(BI.isEmptyString(this.B.getValue())) { if (BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0); this.B.setValue(0);
} }
this.storeValue = { this.storeValue = {
@ -223,7 +239,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
} else if (color === "transparent") { } else if (color === "transparent") {
this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background"); this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background");
} else { } else {
this.colorShow.element.css({"background-color": color}).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background");
} }
}, },

170
src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

@ -19,7 +19,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
render: function () { render: function () {
var self = this, o = this.options, c = this.constants; var self = this, o = this.options, c = this.constants;
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label", type: "bi.label",
cls: "color-picker-editor-label", cls: "color-picker-editor-label",
height: 20 height: 20
@ -31,97 +31,105 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
var Ws = BI.map(BI.range(0, 3), function () { var Ws = BI.map(BI.range(0, 3), function () {
return { return {
type: "bi.small_text_editor", type: "bi.small_text_editor",
cls: "color-picker-editor-input", cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker, validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true, allowBlank: true,
value: 255, value: 255,
width: c.RGB_WIDTH, width: c.RGB_WIDTH,
height: 24, height: 24,
listeners: [{ listeners: [
eventName: BI.TextEditor.EVENT_CHANGE, {
action: function () { eventName: BI.TextEditor.EVENT_CHANGE,
self._checkEditors(); action: function () {
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) { self._checkEditors();
self.colorShow.element.css("background-color", self.getValue()); if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE); self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
}
} }
} }
}] ]
} };
}); });
return { return {
type: "bi.vertical", type: "bi.vertical",
tgap: 10, tgap: 10,
items: [{ items: [
el: { {
type: "bi.vertical_adapt", el: {
rgap: 5, type: "bi.vertical_adapt",
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], rgap: 5,
items: [{ columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
el: { items: [
type: "bi.layout", {
cls: "color-picker-editor-display bi-card bi-border", el: {
height: 22, type: "bi.layout",
width: 22, cls: "color-picker-editor-display bi-card bi-border",
ref: function (_ref) { height: 22,
self.colorShow = _ref; width: 22,
} ref: function (_ref) {
}, self.colorShow = _ref;
width: 18, }
}, { },
type: "bi.label", width: 18,
text: "#", }, {
width: 10 type: "bi.label",
}, { text: "#",
type: "bi.small_text_editor", width: 10
ref: function (_ref) { }, {
self.hexEditor = _ref; type: "bi.small_text_editor",
}, ref: function (_ref) {
cls: "color-picker-editor-input", self.hexEditor = _ref;
validationChecker: this._hexChecker, },
allowBlank: true, cls: "color-picker-editor-input bi-border-radius",
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), validationChecker: this._hexChecker,
width: c.HEX_WIDTH, allowBlank: true,
height: 24, errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
listeners: [{ width: c.HEX_WIDTH,
eventName: "EVENT_CHANGE", height: 24,
action: function () { listeners: [
self._checkHexEditor(); {
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { eventName: "EVENT_CHANGE",
self.colorShow.element.css("background-color", self.getValue()); action: function () {
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); self._checkHexEditor();
} if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
} self.colorShow.element.css("background-color", self.getValue());
}] self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}, RGB[0], { }
el: BI.extend(Ws[0], { }
ref: function (_ref) { }
self.R = _ref ]
} }, RGB[0], {
}), el: BI.extend(Ws[0], {
width: c.RGB_WIDTH ref: function (_ref) {
}, RGB[1], { self.R = _ref;
el: BI.extend(Ws[1], { }
ref: function (_ref) { }),
self.G = _ref width: c.RGB_WIDTH
}, RGB[1], {
el: BI.extend(Ws[1], {
ref: function (_ref) {
self.G = _ref;
}
}),
width: c.RGB_WIDTH
}, RGB[2], {
el: BI.extend(Ws[2], {
ref: function (_ref) {
self.B = _ref;
}
}),
rgap: -5,
width: c.RGB_WIDTH
} }
}), ]
width: c.RGB_WIDTH }
}, RGB[2], {
el: BI.extend(Ws[2], {
ref: function (_ref) {
self.B = _ref
}
}),
rgap: -5,
width: c.RGB_WIDTH
}]
} }
}] ]
} };
}, },
_hexChecker: function (v) { _hexChecker: function (v) {
@ -129,13 +137,13 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
}, },
_checkEditors: function () { _checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) { if (BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0); this.R.setValue(0);
} }
if(BI.isEmptyString(this.G.getValue())) { if (BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0); this.G.setValue(0);
} }
if(BI.isEmptyString(this.B.getValue())) { if (BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0); this.B.setValue(0);
} }
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
@ -157,7 +165,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
}, },
setValue: function (color) { setValue: function (color) {
this.colorShow.element.css({"background-color": color}); this.colorShow.element.css({ "background-color": color });
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
this.R.setValue(BI.isNull(json.r) ? "" : json.r); this.R.setValue(BI.isNull(json.r) ? "" : json.r);
this.G.setValue(BI.isNull(json.g) ? "" : json.g); this.G.setValue(BI.isNull(json.g) ? "" : json.g);
@ -174,4 +182,4 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
} }
}); });
BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor); BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor);

96
src/case/colorchooser/colorpicker/editor.colorpicker.js

@ -29,7 +29,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
height: 16, height: 16,
width: 16 width: 16
}); });
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label", type: "bi.label",
cls: "color-picker-editor-label", cls: "color-picker-editor-label",
width: 20, width: 20,
@ -41,7 +41,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
}; };
var Ws = BI.createWidgets([{}, {}, {}], { var Ws = BI.createWidgets([{}, {}, {}], {
type: "bi.small_text_editor", type: "bi.small_text_editor",
cls: "color-picker-editor-input", cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker, validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true, allowBlank: true,
@ -95,56 +95,60 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
element: this, element: this,
items: [{ items: [
el: { {
type: "bi.vertical_adapt", el: {
items: [{ type: "bi.vertical_adapt",
el: this.colorShow, items: [
width: 16 {
}, { el: this.colorShow,
el: RGB[0], width: 16
width: 20 }, {
}, { el: RGB[0],
el: this.R, width: 20
width: c.RGB_WIDTH }, {
}, { el: this.R,
el: RGB[1], width: c.RGB_WIDTH
width: 20 }, {
}, { el: RGB[1],
el: this.G, width: 20
width: c.RGB_WIDTH }, {
}, { el: this.G,
el: RGB[2], width: c.RGB_WIDTH
width: 20 }, {
}, { el: RGB[2],
el: this.B, width: 20
width: c.RGB_WIDTH }, {
}, { el: this.B,
el: this.transparent, width: c.RGB_WIDTH
width: 16, }, {
lgap: 5 el: this.transparent,
}, { width: 16,
el: this.none, lgap: 5
width: 16, }, {
lgap: 5 el: this.none,
}] width: 16,
}, lgap: 5
left: 10, }
right: 10, ]
top: 0, },
bottom: 0 left: 10,
}] right: 10,
top: 0,
bottom: 0
}
]
}); });
}, },
_checkEditors: function () { _checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) { if (BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0); this.R.setValue(0);
} }
if(BI.isEmptyString(this.G.getValue())) { if (BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0); this.G.setValue(0);
} }
if(BI.isEmptyString(this.B.getValue())) { if (BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0); this.B.setValue(0);
} }
this.storeValue = { this.storeValue = {
@ -164,7 +168,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
} else if (color === "transparent") { } else if (color === "transparent") {
this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background"); this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background");
} else { } else {
this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background"); this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background");
} }
}, },
@ -223,4 +227,4 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
} }
}); });
BI.ColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; BI.ColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor); BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor);

64
src/case/colorchooser/colorpicker/editor.colorpicker.simple.js

@ -28,7 +28,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
height: 16, height: 16,
width: 16 width: 16
}); });
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label", type: "bi.label",
cls: "color-picker-editor-label", cls: "color-picker-editor-label",
width: 20, width: 20,
@ -40,7 +40,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
}; };
var Ws = BI.createWidgets([{}, {}, {}], { var Ws = BI.createWidgets([{}, {}, {}], {
type: "bi.small_text_editor", type: "bi.small_text_editor",
cls: "color-picker-editor-input", cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker, validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true, allowBlank: true,
@ -64,47 +64,49 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
BI.createWidget({ BI.createWidget({
type: "bi.vertical_adapt", type: "bi.vertical_adapt",
element: this, element: this,
items: [{ items: [
el: this.colorShow, {
width: 16, el: this.colorShow,
lgap: 20, width: 16,
rgap: 15 lgap: 20,
}, { rgap: 15
el: RGB[0], }, {
width: 20 el: RGB[0],
}, { width: 20
el: this.R, }, {
width: c.RGB_WIDTH el: this.R,
}, { width: c.RGB_WIDTH
el: RGB[1], }, {
width: 20 el: RGB[1],
}, { width: 20
el: this.G, }, {
width: c.RGB_WIDTH el: this.G,
}, { width: c.RGB_WIDTH
el: RGB[2], }, {
width: 20 el: RGB[2],
}, { width: 20
el: this.B, }, {
width: c.RGB_WIDTH el: this.B,
}] width: c.RGB_WIDTH
}
]
}); });
}, },
_checkEditors: function () { _checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) { if (BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0); this.R.setValue(0);
} }
if(BI.isEmptyString(this.G.getValue())) { if (BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0); this.G.setValue(0);
} }
if(BI.isEmptyString(this.B.getValue())) { if (BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0); this.B.setValue(0);
} }
}, },
setValue: function (color) { setValue: function (color) {
this.colorShow.element.css({"background-color": color}); this.colorShow.element.css({ "background-color": color });
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
this.R.setValue(BI.isNull(json.r) ? "" : json.r); this.R.setValue(BI.isNull(json.r) ? "" : json.r);
this.G.setValue(BI.isNull(json.g) ? "" : json.g); this.G.setValue(BI.isNull(json.g) ? "" : json.g);
@ -120,4 +122,4 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
} }
}); });
BI.SimpleColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; BI.SimpleColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor); BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);

2
src/core/platform/web/dom.js

@ -413,7 +413,7 @@
}, },
getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) { getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) {
var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), var comboBounds = combo.element[0].getBoundingClientRect(), popupBounds = popup.element[0].getBoundingClientRect(),
windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); windowBounds = BI.Widget._renderEngine.createElement("body").bounds();
if (BI.DOM.isBottomSpaceEnough(combo, popup, extraHeight)) { if (BI.DOM.isBottomSpaceEnough(combo, popup, extraHeight)) {
return BI.DOM.getBottomPosition(combo, popup, extraHeight); return BI.DOM.getBottomPosition(combo, popup, extraHeight);

Loading…
Cancel
Save