Browse Source

BI-24689 color_chooser视觉规范

es6
windy 6 years ago
parent
commit
861b720078
  1. 46
      dist/_fineui.min.js
  2. 3
      dist/base.css
  3. 3
      dist/bundle.css
  4. 154
      dist/bundle.js
  5. 2
      dist/bundle.min.css
  6. 36
      dist/bundle.min.js
  7. 154
      dist/case.js
  8. 3
      dist/fineui.css
  9. 154
      dist/fineui.js
  10. 2
      dist/fineui.min.css
  11. 46
      dist/fineui.min.js
  12. 2
      src/case/colorchooser/colorchooser.js
  13. 45
      src/case/colorchooser/colorchooser.popup.js
  14. 83
      src/case/colorchooser/colorpicker/editor.colorpicker.js
  15. 24
      src/case/colorchooser/colorpicker/editor.colorpicker.simple.js
  16. 3
      src/css/base/colorchooser/colorpicker/editor.css
  17. 1
      src/less/base/colorchooser/colorpicker/editor.colorpicker.less

46
dist/_fineui.min.js vendored

File diff suppressed because one or more lines are too long

3
dist/base.css vendored

@ -22,9 +22,6 @@
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0px 0px 2px 1px #d4dadd inset;
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
}
.farbtastic {
position: relative;

3
dist/bundle.css vendored

@ -1719,9 +1719,6 @@ textarea {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0px 0px 2px 1px #d4dadd inset;
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
}
.farbtastic {
position: relative;

154
dist/bundle.js vendored

@ -76138,7 +76138,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
}]
}, o.popup),
stopPropagation: false,
width: 202
width: 230
},
value: o.value
});
@ -76194,7 +76194,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
width: 200,
width: 230,
height: 145
},
@ -76202,7 +76202,9 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.colorEditor = BI.createWidget(o.editor, {
type: "bi.color_picker_editor",
value: o.value
value: o.value,
cls: "bi-background bi-border-bottom",
height: 30
});
this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
@ -76237,8 +76239,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
value: "",
disabled: true
}]],
width: 190,
height: 25,
width: 210,
height: 24,
value: o.value
});
this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () {
@ -76248,7 +76250,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
this.colorPicker = BI.createWidget({
type: "bi.color_picker",
width: 190,
width: 210,
height: 50,
value: o.value
});
@ -76283,7 +76285,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.text_item",
cls: "color-chooser-popup-more bi-list-item",
textAlign: "center",
height: 20,
height: 24,
text: BI.i18nText("BI-Basic_More") + "..."
},
popup: panel
@ -76310,43 +76312,32 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
items: [{
el: {
type: "bi.vtape",
items: [{
el: {
type: "bi.absolute",
cls: "bi-background bi-border-bottom",
items: [{
el: this.colorEditor,
left: 0,
right: 0,
top: 5
}]
},
height: 30
}, {
items: [this.colorEditor, {
el: {
type: "bi.absolute",
items: [{
el: this.storeColors,
left: 5,
right: 5,
left: 10,
right: 10,
top: 5
}]
},
height: 30
height: 29
}, {
el: {
type: "bi.absolute",
items: [{
el: this.colorPicker,
left: 5,
right: 5,
top: 5
left: 10,
right: 10,
top: 5,
bottom: 5
}]
},
height: 65
height: 60
}, {
el: this.more,
height: 20
height: 24
}]
},
left: 0,
@ -76935,7 +76926,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 20
height: 30
});
},
@ -76946,12 +76937,13 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 16,
width: 16
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -76984,8 +76976,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.none = BI.createWidget({
type: "bi.icon_button",
cls: "auto-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Basic_Auto")
@ -77006,8 +76998,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.transparent = BI.createWidget({
type: "bi.icon_button",
cls: "trans-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Transparent_Color")
@ -77030,44 +77022,44 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
});
BI.createWidget({
type: "bi.htape",
type: "bi.absolute",
element: this,
items: [{
el: this.colorShow,
width: "fill"
}, {
el: RGB[0],
lgap: 10,
width: 16
}, {
el: this.R,
width: 32
}, {
el: RGB[1],
lgap: 10,
width: 16
}, {
el: this.G,
width: 32
}, {
el: RGB[2],
lgap: 10,
width: 16
}, {
el: this.B,
width: 32
}, {
el: {
type: "bi.center_adapt",
items: [this.none]
},
width: 18
}, {
el: {
type: "bi.center_adapt",
items: [this.transparent]
type: "bi.vertical_adapt",
items: [{
el: this.colorShow,
width: 16
}, {
el: RGB[0],
width: 20
}, {
el: this.R,
width: 30
}, {
el: RGB[1],
width: 20
}, {
el: this.G,
width: 30
}, {
el: RGB[2],
width: 20
}, {
el: this.B,
width: 30
}, {
el: this.transparent,
width: 24
}, {
el: this.none,
width: 24
}]
},
width: 18
left: 10,
right: 20,
top: 0,
bottom: 0
}]
});
},
@ -77172,12 +77164,13 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 20,
width: 40
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -77207,34 +77200,31 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.B = Ws[2];
BI.createWidget({
type: "bi.htape",
type: "bi.vertical_adapt",
element: this,
items: [{
el: this.colorShow,
width: 40,
lgap: 5,
rgap: 5
}, {
el: RGB[0],
lgap: 10,
width: 16
width: 20
}, {
el: this.R,
width: 36
width: 30
}, {
el: RGB[1],
lgap: 10,
width: 16
width: 20
}, {
el: this.G,
width: 36
width: 30
}, {
el: RGB[2],
lgap: 10,
width: 16
width: 20
}, {
el: this.B,
width: 36,
rgap: 10
width: 30
}]
});
},

2
dist/bundle.min.css vendored

File diff suppressed because one or more lines are too long

36
dist/bundle.min.js vendored

File diff suppressed because one or more lines are too long

154
dist/case.js vendored

@ -3668,7 +3668,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
}]
}, o.popup),
stopPropagation: false,
width: 202
width: 230
},
value: o.value
});
@ -3724,7 +3724,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
width: 200,
width: 230,
height: 145
},
@ -3732,7 +3732,9 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.colorEditor = BI.createWidget(o.editor, {
type: "bi.color_picker_editor",
value: o.value
value: o.value,
cls: "bi-background bi-border-bottom",
height: 30
});
this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
@ -3767,8 +3769,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
value: "",
disabled: true
}]],
width: 190,
height: 25,
width: 210,
height: 24,
value: o.value
});
this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () {
@ -3778,7 +3780,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
this.colorPicker = BI.createWidget({
type: "bi.color_picker",
width: 190,
width: 210,
height: 50,
value: o.value
});
@ -3813,7 +3815,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.text_item",
cls: "color-chooser-popup-more bi-list-item",
textAlign: "center",
height: 20,
height: 24,
text: BI.i18nText("BI-Basic_More") + "..."
},
popup: panel
@ -3840,43 +3842,32 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
items: [{
el: {
type: "bi.vtape",
items: [{
el: {
type: "bi.absolute",
cls: "bi-background bi-border-bottom",
items: [{
el: this.colorEditor,
left: 0,
right: 0,
top: 5
}]
},
height: 30
}, {
items: [this.colorEditor, {
el: {
type: "bi.absolute",
items: [{
el: this.storeColors,
left: 5,
right: 5,
left: 10,
right: 10,
top: 5
}]
},
height: 30
height: 29
}, {
el: {
type: "bi.absolute",
items: [{
el: this.colorPicker,
left: 5,
right: 5,
top: 5
left: 10,
right: 10,
top: 5,
bottom: 5
}]
},
height: 65
height: 60
}, {
el: this.more,
height: 20
height: 24
}]
},
left: 0,
@ -4465,7 +4456,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 20
height: 30
});
},
@ -4476,12 +4467,13 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 16,
width: 16
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -4514,8 +4506,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.none = BI.createWidget({
type: "bi.icon_button",
cls: "auto-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Basic_Auto")
@ -4536,8 +4528,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.transparent = BI.createWidget({
type: "bi.icon_button",
cls: "trans-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Transparent_Color")
@ -4560,44 +4552,44 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
});
BI.createWidget({
type: "bi.htape",
type: "bi.absolute",
element: this,
items: [{
el: this.colorShow,
width: "fill"
}, {
el: RGB[0],
lgap: 10,
width: 16
}, {
el: this.R,
width: 32
}, {
el: RGB[1],
lgap: 10,
width: 16
}, {
el: this.G,
width: 32
}, {
el: RGB[2],
lgap: 10,
width: 16
}, {
el: this.B,
width: 32
}, {
el: {
type: "bi.center_adapt",
items: [this.none]
},
width: 18
}, {
el: {
type: "bi.center_adapt",
items: [this.transparent]
type: "bi.vertical_adapt",
items: [{
el: this.colorShow,
width: 16
}, {
el: RGB[0],
width: 20
}, {
el: this.R,
width: 30
}, {
el: RGB[1],
width: 20
}, {
el: this.G,
width: 30
}, {
el: RGB[2],
width: 20
}, {
el: this.B,
width: 30
}, {
el: this.transparent,
width: 24
}, {
el: this.none,
width: 24
}]
},
width: 18
left: 10,
right: 20,
top: 0,
bottom: 0
}]
});
},
@ -4702,12 +4694,13 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 20,
width: 40
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -4737,34 +4730,31 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.B = Ws[2];
BI.createWidget({
type: "bi.htape",
type: "bi.vertical_adapt",
element: this,
items: [{
el: this.colorShow,
width: 40,
lgap: 5,
rgap: 5
}, {
el: RGB[0],
lgap: 10,
width: 16
width: 20
}, {
el: this.R,
width: 36
width: 30
}, {
el: RGB[1],
lgap: 10,
width: 16
width: 20
}, {
el: this.G,
width: 36
width: 30
}, {
el: RGB[2],
lgap: 10,
width: 16
width: 20
}, {
el: this.B,
width: 36,
rgap: 10
width: 30
}]
});
},

3
dist/fineui.css vendored

@ -1719,9 +1719,6 @@ textarea {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0px 0px 2px 1px #d4dadd inset;
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
}
.farbtastic {
position: relative;

154
dist/fineui.js vendored

@ -76381,7 +76381,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
}]
}, o.popup),
stopPropagation: false,
width: 202
width: 230
},
value: o.value
});
@ -76437,7 +76437,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
width: 200,
width: 230,
height: 145
},
@ -76445,7 +76445,9 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.colorEditor = BI.createWidget(o.editor, {
type: "bi.color_picker_editor",
value: o.value
value: o.value,
cls: "bi-background bi-border-bottom",
height: 30
});
this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
@ -76480,8 +76482,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
value: "",
disabled: true
}]],
width: 190,
height: 25,
width: 210,
height: 24,
value: o.value
});
this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () {
@ -76491,7 +76493,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
this.colorPicker = BI.createWidget({
type: "bi.color_picker",
width: 190,
width: 210,
height: 50,
value: o.value
});
@ -76526,7 +76528,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.text_item",
cls: "color-chooser-popup-more bi-list-item",
textAlign: "center",
height: 20,
height: 24,
text: BI.i18nText("BI-Basic_More") + "..."
},
popup: panel
@ -76553,43 +76555,32 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
items: [{
el: {
type: "bi.vtape",
items: [{
el: {
type: "bi.absolute",
cls: "bi-background bi-border-bottom",
items: [{
el: this.colorEditor,
left: 0,
right: 0,
top: 5
}]
},
height: 30
}, {
items: [this.colorEditor, {
el: {
type: "bi.absolute",
items: [{
el: this.storeColors,
left: 5,
right: 5,
left: 10,
right: 10,
top: 5
}]
},
height: 30
height: 29
}, {
el: {
type: "bi.absolute",
items: [{
el: this.colorPicker,
left: 5,
right: 5,
top: 5
left: 10,
right: 10,
top: 5,
bottom: 5
}]
},
height: 65
height: 60
}, {
el: this.more,
height: 20
height: 24
}]
},
left: 0,
@ -77178,7 +77169,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 20
height: 30
});
},
@ -77189,12 +77180,13 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 16,
width: 16
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -77227,8 +77219,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.none = BI.createWidget({
type: "bi.icon_button",
cls: "auto-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Basic_Auto")
@ -77249,8 +77241,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.transparent = BI.createWidget({
type: "bi.icon_button",
cls: "trans-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Transparent_Color")
@ -77273,44 +77265,44 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
});
BI.createWidget({
type: "bi.htape",
type: "bi.absolute",
element: this,
items: [{
el: this.colorShow,
width: "fill"
}, {
el: RGB[0],
lgap: 10,
width: 16
}, {
el: this.R,
width: 32
}, {
el: RGB[1],
lgap: 10,
width: 16
}, {
el: this.G,
width: 32
}, {
el: RGB[2],
lgap: 10,
width: 16
}, {
el: this.B,
width: 32
}, {
el: {
type: "bi.center_adapt",
items: [this.none]
},
width: 18
}, {
el: {
type: "bi.center_adapt",
items: [this.transparent]
type: "bi.vertical_adapt",
items: [{
el: this.colorShow,
width: 16
}, {
el: RGB[0],
width: 20
}, {
el: this.R,
width: 30
}, {
el: RGB[1],
width: 20
}, {
el: this.G,
width: 30
}, {
el: RGB[2],
width: 20
}, {
el: this.B,
width: 30
}, {
el: this.transparent,
width: 24
}, {
el: this.none,
width: 24
}]
},
width: 18
left: 10,
right: 20,
top: 0,
bottom: 0
}]
});
},
@ -77415,12 +77407,13 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 20,
width: 40
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -77450,34 +77443,31 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.B = Ws[2];
BI.createWidget({
type: "bi.htape",
type: "bi.vertical_adapt",
element: this,
items: [{
el: this.colorShow,
width: 40,
lgap: 5,
rgap: 5
}, {
el: RGB[0],
lgap: 10,
width: 16
width: 20
}, {
el: this.R,
width: 36
width: 30
}, {
el: RGB[1],
lgap: 10,
width: 16
width: 20
}, {
el: this.G,
width: 36
width: 30
}, {
el: RGB[2],
lgap: 10,
width: 16
width: 20
}, {
el: this.B,
width: 36,
rgap: 10
width: 30
}]
});
},

2
dist/fineui.min.css vendored

File diff suppressed because one or more lines are too long

46
dist/fineui.min.js vendored

File diff suppressed because one or more lines are too long

2
src/case/colorchooser/colorchooser.js

@ -52,7 +52,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
}]
}, o.popup),
stopPropagation: false,
width: 202
width: 230
},
value: o.value
});

45
src/case/colorchooser/colorchooser.popup.js

@ -9,7 +9,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
width: 200,
width: 230,
height: 145
},
@ -17,7 +17,9 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
var self = this, o = this.options;
this.colorEditor = BI.createWidget(o.editor, {
type: "bi.color_picker_editor",
value: o.value
value: o.value,
cls: "bi-background bi-border-bottom",
height: 30
});
this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
@ -52,8 +54,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
value: "",
disabled: true
}]],
width: 190,
height: 25,
width: 210,
height: 24,
value: o.value
});
this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () {
@ -63,7 +65,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
this.colorPicker = BI.createWidget({
type: "bi.color_picker",
width: 190,
width: 210,
height: 50,
value: o.value
});
@ -98,7 +100,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.text_item",
cls: "color-chooser-popup-more bi-list-item",
textAlign: "center",
height: 20,
height: 24,
text: BI.i18nText("BI-Basic_More") + "..."
},
popup: panel
@ -125,43 +127,32 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
items: [{
el: {
type: "bi.vtape",
items: [{
el: {
type: "bi.absolute",
cls: "bi-background bi-border-bottom",
items: [{
el: this.colorEditor,
left: 0,
right: 0,
top: 5
}]
},
height: 30
}, {
items: [this.colorEditor, {
el: {
type: "bi.absolute",
items: [{
el: this.storeColors,
left: 5,
right: 5,
left: 10,
right: 10,
top: 5
}]
},
height: 30
height: 29
}, {
el: {
type: "bi.absolute",
items: [{
el: this.colorPicker,
left: 5,
right: 5,
top: 5
left: 10,
right: 10,
top: 5,
bottom: 5
}]
},
height: 65
height: 60
}, {
el: this.more,
height: 20
height: 24
}]
},
left: 0,

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

@ -11,7 +11,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 20
height: 30
});
},
@ -22,12 +22,13 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 16,
width: 16
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -60,8 +61,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.none = BI.createWidget({
type: "bi.icon_button",
cls: "auto-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Basic_Auto")
@ -82,8 +83,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.transparent = BI.createWidget({
type: "bi.icon_button",
cls: "trans-color-icon",
width: 16,
height: 16,
width: 24,
height: 24,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Transparent_Color")
@ -106,44 +107,44 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
});
BI.createWidget({
type: "bi.htape",
type: "bi.absolute",
element: this,
items: [{
el: this.colorShow,
width: "fill"
}, {
el: RGB[0],
lgap: 10,
width: 16
}, {
el: this.R,
width: 32
}, {
el: RGB[1],
lgap: 10,
width: 16
}, {
el: this.G,
width: 32
}, {
el: RGB[2],
lgap: 10,
width: 16
}, {
el: this.B,
width: 32
}, {
el: {
type: "bi.center_adapt",
items: [this.none]
},
width: 18
}, {
el: {
type: "bi.center_adapt",
items: [this.transparent]
type: "bi.vertical_adapt",
items: [{
el: this.colorShow,
width: 16
}, {
el: RGB[0],
width: 20
}, {
el: this.R,
width: 30
}, {
el: RGB[1],
width: 20
}, {
el: this.G,
width: 30
}, {
el: RGB[2],
width: 20
}, {
el: this.B,
width: 30
}, {
el: this.transparent,
width: 24
}, {
el: this.none,
width: 24
}]
},
width: 18
left: 10,
right: 20,
top: 0,
bottom: 0
}]
});
},

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

@ -21,12 +21,13 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.colorShow = BI.createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card",
height: 20
height: 20,
width: 40
});
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 10,
width: 20,
height: 20
}));
@ -56,34 +57,31 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.B = Ws[2];
BI.createWidget({
type: "bi.htape",
type: "bi.vertical_adapt",
element: this,
items: [{
el: this.colorShow,
width: 40,
lgap: 5,
rgap: 5
}, {
el: RGB[0],
lgap: 10,
width: 16
width: 20
}, {
el: this.R,
width: 36
width: 30
}, {
el: RGB[1],
lgap: 10,
width: 16
width: 20
}, {
el: this.G,
width: 36
width: 30
}, {
el: RGB[2],
lgap: 10,
width: 16
width: 20
}, {
el: this.B,
width: 36,
rgap: 10
width: 30
}]
});
},

3
src/css/base/colorchooser/colorpicker/editor.css

@ -2,7 +2,4 @@
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: 0px 0px 2px 1px #d4dadd inset;
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
}

1
src/less/base/colorchooser/colorpicker/editor.colorpicker.less

@ -3,6 +3,5 @@
.bi-color-picker-editor {
& .color-picker-editor-display {
.border-radius(2px);
.box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark, inset);
}
}
Loading…
Cancel
Save