caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

无JRIA fix: 再检查一遍输入框圆角问题

master
zsmj 2 years ago
parent
18391d2656
commit
41e1388738
5 changed files with 337 additions and 305 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      src/case/colorchooser/colorpicker/button/button.colorshow.js
  2. 274
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  3. 168
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  4. 94
      src/case/colorchooser/colorpicker/editor.colorpicker.js
  5. 62
      src/case/colorchooser/colorpicker/editor.colorpicker.simple.js

36
src/case/colorchooser/colorpicker/button/button.colorshow.js
Unescape View File

@ -6,30 +6,32 @@
BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
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 () {
var self = this, o = this.options;
return {
type: 'bi.htape',
items: [{
el: {
type: "bi.icon_label",
ref: function (_ref) {
self.icon = _ref;
items: [
{
el: {
type: "bi.icon_label",
ref: function (_ref) {
self.icon = _ref;
},
iconWidth: 16,
iconHeight: 16,
},
iconWidth: 16,
iconHeight: 16,
},
hgap: 20,
width: 16,
}, {
type: 'bi.label',
textAlign: 'left',
text: o.text,
}]
}
hgap: 20,
width: 16,
}, {
type: 'bi.label',
textAlign: 'left',
text: o.text,
}
]
};
},
doClick: function () {

274
src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
Unescape View File

@ -21,7 +21,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
render: function () {
var self = this, o = this.options, c = this.constants;
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",
cls: "color-picker-editor-label",
height: 20
@ -33,146 +33,162 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
var Ws = BI.map(BI.range(0, 3), function () {
return {
type: "bi.small_text_editor",
cls: "color-picker-editor-input",
cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
height: 24,
listeners: [{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
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);
listeners: [
{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
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);
}
}
}
}]
]
};
});
return {
type: "bi.absolute",
items: [{
el: {
type: "bi.vertical",
tgap: 10,
items: [{
type: 'bi.vertical_adapt',
columnSize: ["fill", 'fill'],
height: 24,
items: [{
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,
items: [
{
el: {
type: "bi.vertical",
tgap: 10,
items: [
{
type: 'bi.vertical_adapt',
columnSize: ["fill", 'fill'],
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);
items: [
{
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,
}
}]
}, 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
}]
]
}, {
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 bi-border-radius",
validationChecker: this._hexChecker,
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 () {
if(BI.isEmptyString(this.R.getValue())) {
if (BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if(BI.isEmptyString(this.G.getValue())) {
if (BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if(BI.isEmptyString(this.B.getValue())) {
if (BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.storeValue = {
@ -223,7 +239,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
} else if (color === "transparent") {
this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background");
} 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");
}
},

168
src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
Unescape View File

@ -19,7 +19,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
render: function () {
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",
cls: "color-picker-editor-label",
height: 20
@ -31,97 +31,105 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
var Ws = BI.map(BI.range(0, 3), function () {
return {
type: "bi.small_text_editor",
cls: "color-picker-editor-input",
cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
height: 24,
listeners: [{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
listeners: [
{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
}
}
}
}]
}
]
};
});
return {
type: "bi.vertical",
tgap: 10,
items: [{
el: {
type: "bi.vertical_adapt",
rgap: 5,
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
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,
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
items: [
{
el: {
type: "bi.vertical_adapt",
rgap: 5,
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
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 bi-border-radius",
validationChecker: this._hexChecker,
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
}
}),
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) {
@ -129,13 +137,13 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
},
_checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) {
if (BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if(BI.isEmptyString(this.G.getValue())) {
if (BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if(BI.isEmptyString(this.B.getValue())) {
if (BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
@ -157,7 +165,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
},
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));
this.R.setValue(BI.isNull(json.r) ? "" : json.r);
this.G.setValue(BI.isNull(json.g) ? "" : json.g);

94
src/case/colorchooser/colorpicker/editor.colorpicker.js
Unescape View File

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

62
src/case/colorchooser/colorpicker/editor.colorpicker.simple.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save