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

BI-91199 颜色选择器新交互

es6
windy 3 years ago
parent
09de740ccc
commit
35d47faf18
11 changed files with 460 additions and 235 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. 1
      changelog.md
  2. 3
      i18n/i18n.cn.js
  3. 4
      src/case/colorchooser/colorchooser.custom.js
  4. 1
      src/case/colorchooser/colorchooser.js
  5. 98
      src/case/colorchooser/colorchooser.popup.hex.js
  6. 8
      src/case/colorchooser/colorpicker/button/button.colorpicker.js
  7. 53
      src/case/colorchooser/colorpicker/button/button.colorshow.js
  8. 170
      src/case/colorchooser/colorpicker/colorpicker.hex.js
  9. 161
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  10. 37
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  11. 7
      src/less/base/colorchooser/colorpicker/button.colorshow.less

1
changelog.md
Unescape View File

@ -1,5 +1,6 @@
# 更新日志
2.0(2021-07)
- 修改了颜色选择器交互
- 新增bi.horizontal_fill、bi.vertical_fill布局
- 增加module定义插件版本号
- bubble使用popper.js实现

3
i18n/i18n.cn.js
Unescape View File

@ -195,5 +195,6 @@ BI.i18n = {
"BI-Basic_Year_Range_Error": "请选择{R1}年-{R2}年的日期",
"BI-Basic_Year_Month_Range_Error": "请选择{R1}年{R2}月-{R3}年{R4}月的日期",
"BI-Basic_Year_Quarter_Range_Error": "请选择{R1}年{R2}季度-{R3}年{R4}季度的日期",
"BI-Basic_Search_And_Patch_Paste": "搜索，支持批量粘贴、粘贴值通过换行识别"
"BI-Basic_Search_And_Patch_Paste": "搜索，支持批量粘贴、粘贴值通过换行识别",
"BI-Basic_Recommend_Color": "推荐色"
};

4
src/case/colorchooser/colorchooser.custom.js
Unescape View File

@ -38,9 +38,9 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
type: "bi.absolute",
items: [{
el: this.editor,
left: 0,
left: 10,
top: 0,
right: 0
right: 10
}],
height: 50
}, {

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

@ -38,6 +38,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
popup: {
el: BI.extend({
type: "bi.hex_color_chooser_popup",
recommendColorsGetter: o.recommendColorsGetter,
ref: function (_ref) {
self.colorPicker = _ref;
},

98
src/case/colorchooser/colorchooser.popup.hex.js
Unescape View File

@ -8,23 +8,24 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
width: 292,
height: 195,
recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
simple: false // 简单模式, popup中没有自动和透明
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.absolute",
items: [{
var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter());
return [{
el: {
type: "bi.vtape",
type: 'bi.vertical',
items: [{
el: BI.extend({
el: {
type: "bi.vertical",
hgap: 10,
items: [BI.extend({
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
value: o.value,
height: 30,
height: o.simple ? 30 : 64,
listeners: [{
eventName: BI.ColorPickerEditor.EVENT_CHANGE,
action: function () {
@ -36,17 +37,12 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
ref: function (_ref) {
self.colorEditor = _ref;
}
}, o.editor),
height: 50
}, {
}, o.editor), {
el: {
type: "bi.absolute",
items: [{
el: {
type: "bi.color_picker",
type: "bi.hex_color_picker",
cls: "bi-border-bottom bi-border-right",
items: [this._digestStoreColors(this._getStoreColors())],
height: 34,
height: 22,
value: o.value,
listeners: [{
eventName: BI.ColorPicker.EVENT_CHANGE,
@ -60,18 +56,50 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
self.storeColors = _ref;
}
},
left: 10,
right: 10,
top: 5
tgap: 10,
height: 22
}, {
el: hasRecommendColors ? {
type: 'bi.vertical',
items: [{
type: 'bi.label',
text: BI.i18nText('BI-Basic_Recommend_Color'),
textAlign: 'left',
height: 24,
}, {
type: "bi.hex_color_picker",
cls: "bi-border-bottom bi-border-right",
items: [this._digestStoreColors(o.recommendColorsGetter())],
height: 22,
value: o.value,
listeners: [{
eventName: BI.ColorPicker.EVENT_CHANGE,
action: function () {
self.setValue(this.getValue()[0]);
self._dealStoreColors();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
}
}],
ref: function (_ref) {
self.recommendColors = _ref;
}
}]
},
height: 38
} : { type: 'bi.layout' },
tgap: hasRecommendColors ? 10 : 0,
height: hasRecommendColors ? 47 : 0
}, {
el: {
type: "bi.absolute",
type: 'bi.layout',
cls: 'bi-border-top',
},
vgap: 10,
height: 1
}, {
type: 'bi.absolute',
items: [{
el: {
type: "bi.color_picker",
type: "bi.hex_color_picker",
space: true,
value: o.value,
listeners: [{
eventName: BI.ColorPicker.EVENT_CHANGE,
@ -83,12 +111,14 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
}],
ref: function (_ref) {
self.colorPicker = _ref;
}
},
left: 10,
right: 10,
top: 5,
bottom: 10
},
top: 0,
left: 0,
right: 0,
bottom: 1,
}],
height: 80,
}]
}
}, {
@ -153,6 +183,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
self.more = _ref;
}
},
tgap: 10,
height: 24
}]
},
@ -161,6 +192,8 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
top: 0,
bottom: 0
}, {
type: "bi.absolute",
items: [{
el: {
type: "bi.layout",
cls: "disable-mask",
@ -174,7 +207,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
top: 0,
bottom: 0
}]
};
}];
},
// 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示
@ -194,7 +227,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
_dealStoreColors: function () {
var color = this.getValue();
var colors = this._getStoreColors();
var que = new BI.Queue(8);
var que = new BI.Queue(12);
que.fromArray(colors);
que.remove(color);
que.unshift(color);
@ -209,9 +242,9 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
value: color
};
});
BI.count(colors.length, 8, function (i) {
BI.count(colors.length, 12, function (i) {
items.push({
value: "",
value: "empty",
disabled: true
});
});
@ -242,6 +275,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
this.colorEditor.setValue(color);
this.colorPicker.setValue(color);
this.storeColors.setValue(color);
this.recommendColors && this.recommendColors.setValue(color);
},
getValue: function () {

8
src/case/colorchooser/colorpicker/button/button.colorpicker.js
Unescape View File

@ -17,8 +17,14 @@ BI.ColorPickerButton = BI.inherit(BI.BasicButton, {
_init: function () {
BI.ColorPickerButton.superclass._init.apply(this, arguments);
var self = this, o = this.options;
if (o.value) {
if (BI.isNotNull(o.value)) {
if (o.value === '') {
this.element.addClass("auto-color-normal-background");
} else if (o.value === "transparent") {
this.element.addClass("trans-color-background");
} else {
this.element.css("background-color", o.value);
}
var name = this.getName();
this.element.hover(function () {
self._createMask();

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

@ -0,0 +1,53 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2021/7/28
*/
BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
props: {
baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect',
},
render: function () {
var self = this, o = this.options;
return {
type: 'bi.htape',
items: [{
el: {
type: "bi.icon_label",
cls: o.iconCls,
ref: function (_ref) {
self.icon = _ref;
},
iconWidth: 16,
iconHeight: 16,
},
hgap: 20,
width: 16,
}, {
type: 'bi.label',
textAlign: 'left',
text: o.text,
}]
}
},
doClick: function () {
BI.ColorChooserShowButton.superclass.doClick.apply(this, arguments);
if (this.isValid()) {
this.fireEvent(BI.ColorChooserShowButton.EVENT_CHANGE, this);
}
},
setSelected: function (b) {
BI.ColorChooserShowButton.superclass.setSelected.apply(this, arguments);
if (b) {
this.icon.element.addClass("active");
} else {
this.icon.element.removeClass("active");
}
},
});
BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton);

170
src/case/colorchooser/colorpicker/colorpicker.hex.js
Unescape View File

@ -0,0 +1,170 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2021/7/28
*/
BI.HexColorPicker = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-hex-color-picker",
items: null,
},
_items: [
[{
value: "#808080"
}, {
value: "#ffffff"
}, {
value: "#ffebe5"
}, {
value: "#ffddba"
}, {
value: "#ffeebb"
}, {
value: "#d4e9bf"
}, {
value: "#c7e1e1"
}, {
value: "#bfe3f0"
}, {
value: "#ccd6eb"
}],
[{
value: "#616161"
}, {
value: "#f2f2f2"
}, {
value: "#ffd6cc"
}, {
value: "#ffb87a"
}, {
value: "#ffdf91"
}, {
value: "#b7d2b6"
}, {
value: "#a3d2c9"
}, {
value: "#8ab6d6"
}, {
value: "#bcbce0"
}],
[{
value: "#404040"
}, {
value: "#dedede"
}, {
value: "#ffab9b"
}, {
value: "#eb8a3a"
}, {
value: "#ffc947"
}, {
value: "#8aa964"
}, {
value: "#5eaaa0"
}, {
value: "#2978b5"
}, {
value: "#8f8faa"
}],
[{
value: "#202020"
}, {
value: "#bfbfbf"
}, {
value: "#df7461"
}, {
value: "#cf7536"
}, {
value: "#e6b63b"
}, {
value: "#5b8a72"
}, {
value: "#3b9aa3"
}, {
value: "#336291"
}, {
value: "#58568f"
}],
[{
value: "#000000"
}, {
value: "#a1a1a1"
}, {
value: "#b55140"
}, {
value: "#a6713c"
}, {
value: "#ad975f"
}, {
value: "#5f7d6e"
}, {
value: "#3b7480"
}, {
value: "#425d78"
}, {
value: "#62608a"
}]
],
render: function () {
var self = this, o = this.options;
this.colors = BI.createWidget();
return {
type: "bi.button_group",
items: this._digest(o.items || this._items),
layouts: [{
type: "bi.grid",
}],
value: o.value,
listeners: [{
eventName: BI.ButtonGroup.EVENT_CHANGE,
action: function () {
self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments);
}
}],
ref: function (_ref) {
self.colors = _ref;
}
};
},
_digest: function (items) {
var o = this.options;
var blocks = [];
BI.each(items, function (idx, row) {
var bRow = [];
BI.each(row, function (idx, item) {
bRow.push(BI.extend({
type: "bi.color_picker_button",
once: false,
cls: o.space ? 'bi-border-right' : '',
}, item));
if (o.space && idx < row.length - 1) {
bRow.push({ type: 'bi.layout' });
}
});
blocks.push(bRow);
});
return blocks;
},
populate: function (items) {
var args = [].slice.call(arguments);
args[0] = this._digest(items);
this.colors.populate.apply(this.colors, args);
},
setValue: function (color) {
this.colors.setValue(color);
},
getValue: function () {
return this.colors.getValue();
}
});
BI.HexColorPicker.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.hex_color_picker", BI.HexColorPicker);

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

@ -8,15 +8,14 @@
BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
constants: {
RGB_WIDTH: 32,
RGB_WIDTH: 36,
HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1
},
props: {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 50
height: 30
},
render: function () {
@ -59,8 +58,68 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
items: [{
el: {
type: "bi.vertical",
tgap: 5,
tgap: 10,
items: [{
type: 'bi.vertical_adapt',
columnSize: [0.5, 'fill'],
height: 24,
items: [{
type: "bi.color_picker_show_button",
iconCls: "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 () {
if (this.isSelected()) {
self.lastColor = self.getValue();
self.setValue("transparent");
} else {
if (self.lastColor === "transparent") {
self.lastColor = "";
}
self.setValue(self.lastColor || "#ffffff");
}
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) ||
self._isEmptyRGB()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
}],
ref: function (_ref) {
self.transparent = _ref;
}
}, {
el: {
type: "bi.color_picker_show_button",
iconCls: "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 () {
if (this.isSelected()) {
self.lastColor = self.getValue();
self.setValue("");
} else {
self.setValue(self.lastColor || "#ffffff");
}
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
}],
ref: function (_ref) {
self.none = _ref;
}
},
lgap: 10,
}]
}, {
type: "bi.vertical_adapt",
rgap: 5,
items: [{
@ -100,116 +159,32 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
}
}]
}, {
}, 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
}
}),
width: c.RGB_WIDTH
}, {
el: {
type: "bi.icon_button",
cls: "trans-color-icon",
width: 16,
height: 16,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Transparent_Color"),
listeners: [{
eventName: BI.IconButton.EVENT_CHANGE,
action: function () {
if (this.isSelected()) {
self.lastColor = self.getValue();
self.setValue("transparent");
} else {
if (self.lastColor === "transparent") {
self.lastColor = "";
}
self.setValue(self.lastColor || "#ffffff");
}
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) ||
self._isEmptyRGB()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
}],
ref: function (_ref) {
self.transparent = _ref;
}
},
width: 16,
lgap: 5
}, {
el: {
type: "bi.icon_button",
cls: "auto-color-icon",
width: 16,
height: 16,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Basic_Auto"),
listeners: [{
eventName: BI.IconButton.EVENT_CHANGE,
action: function () {
if (this.isSelected()) {
self.lastColor = self.getValue();
self.setValue("");
} else {
self.setValue(self.lastColor || "#ffffff");
}
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
}],
ref: function (_ref) {
self.none = _ref;
}
},
width: 16,
lgap: 5
}]
}, {
type: "bi.vertical_adapt",
items: [{
el: {
type: "bi.label",
cls: "color-picker-editor-label",
height: 20,
text: "HEX"
},
lgap: 60
},{
el: RGB[0].el,
lgap: 44
}, {
el: RGB[1].el,
lgap: 28
}, {
el: RGB[2].el,
lgap: 28
}]
}]
},
left: 10,
right: 10,
left: 0,
right: 0,
top: 0,
bottom: 0
}]

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

@ -6,15 +6,14 @@
BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
constants: {
RGB_WIDTH: 40,
RGB_WIDTH: 36,
HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1
},
props: {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 50
height: 30
},
render: function () {
@ -54,10 +53,10 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
return {
type: "bi.vertical",
tgap: 5,
tgap: 10,
items: [{
type: "bi.vertical_adapt",
rgap: 10,
rgap: 5,
items: [{
el: {
type: "bi.layout",
@ -69,8 +68,6 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
}
},
width: 16,
lgap: 10,
rgap: 5
}, {
type: "bi.label",
text: "#",
@ -96,21 +93,21 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
}
}
}]
}, {
}, 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
@ -118,26 +115,6 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
}),
width: c.RGB_WIDTH
}]
}, {
type: "bi.vertical_adapt",
items: [{
el: {
type: "bi.label",
cls: "color-picker-editor-label",
height: 20,
text: "HEX"
},
lgap: 86
},{
el: RGB[0].el,
lgap: 50
}, {
el: RGB[1].el,
lgap: 40
}, {
el: RGB[2].el,
lgap: 40
}]
}]
}

7
src/less/base/colorchooser/colorpicker/button.colorshow.less
Unescape View File

@ -0,0 +1,7 @@
@import "../../../index";
.bi-color-chooser-show-button {
&.active, &:active {
border-color: @color-bi-border-highlight;
}
}
Write Preview
Loading…
Cancel
Save