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

BI-24689 color_chooser视觉规范

es6
windy 6 years ago
parent
48737d37e2
commit
861b720078
17 changed files with 354 additions and 407 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 46
      dist/_fineui.min.js
  2. 3
      dist/base.css
  3. 3
      dist/bundle.css
  4. 126
      dist/bundle.js
  5. 2
      dist/bundle.min.css
  6. 36
      dist/bundle.min.js
  7. 126
      dist/case.js
  8. 3
      dist/fineui.css
  9. 126
      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. 55
      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
View File

File diff suppressed because one or more lines are too long

3
dist/base.css vendored
Unescape View File

@ -22,9 +22,6 @@
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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 { .farbtastic {
position: relative; position: relative;

3
dist/bundle.css vendored
Unescape View File

@ -1719,9 +1719,6 @@ textarea {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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 { .farbtastic {
position: relative; position: relative;

126
dist/bundle.js vendored
Unescape View File

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

2
dist/bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

36
dist/bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

126
dist/case.js vendored
Unescape View File

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

3
dist/fineui.css vendored
Unescape View File

@ -1719,9 +1719,6 @@ textarea {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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 { .farbtastic {
position: relative; position: relative;

126
dist/fineui.js vendored
Unescape View File

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

2
dist/fineui.min.css vendored
View File

File diff suppressed because one or more lines are too long

46
dist/fineui.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/case/colorchooser/colorchooser.js
Unescape View File

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

45
src/case/colorchooser/colorchooser.popup.js
Unescape View File

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

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

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

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

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

3
src/css/base/colorchooser/colorpicker/editor.css
Unescape View File

@ -2,7 +2,4 @@
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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
Unescape View File

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