forked from fanruan/fineui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
878 lines
29 KiB
878 lines
29 KiB
import { shortcut, Widget, each } from "@/core"; |
|
import { Msg, StyleLoaders } from "@/base"; |
|
import { ColorChooser } from "@/case"; |
|
|
|
@shortcut() |
|
export class Face extends Widget { |
|
static xtype = "demo.face"; |
|
|
|
props = { baseCls: "demo-face" }; |
|
|
|
_createLabel(text) { |
|
return { |
|
width: 200, |
|
el: { |
|
type: "bi.label", |
|
text, |
|
textAlign: "left", |
|
hgap: 5, |
|
height: 40, |
|
cls: "config-label", |
|
}, |
|
}; |
|
} |
|
|
|
_createColorPicker(ref, action) { |
|
return { |
|
el: { |
|
type: "bi.vertical_adapt", |
|
items: [ |
|
{ |
|
type: "bi.color_chooser", |
|
listeners: [ |
|
{ |
|
eventName: ColorChooser.EVENT_CHANGE, |
|
action, |
|
} |
|
], |
|
ref, |
|
width: 24, |
|
height: 24, |
|
} |
|
], |
|
}, |
|
}; |
|
} |
|
|
|
_createBackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("背景色："), |
|
this._createColorPicker( |
|
function () { |
|
self.backgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
) |
|
], |
|
}; |
|
} |
|
|
|
_createFontConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("字体颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.fontColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
) |
|
], |
|
}; |
|
} |
|
|
|
_createActiveFontConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("激活状态字体颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.activeFontColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.text_button", |
|
cls: "bi-list-item-active", |
|
text: "测试激活状态", |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createSelectFontConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("选中状态字体颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.selectFontColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.text_button", |
|
cls: "bi-list-item-active", |
|
text: "测试选中状态", |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createGrayFontConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("tip提示字体颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.grayFontColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.icon_text_item", |
|
cls: "bi-tips copy-font", |
|
height: 40, |
|
text: "测试提示文字", |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createDisableFontConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("灰化字体颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.disabledFontColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.text_button", |
|
text: "这个按钮是灰化的", |
|
disabled: true, |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createCardBackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("Card背景颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.cardBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
) |
|
], |
|
}; |
|
} |
|
|
|
_createHoverBackgroundColor() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("悬浮状态背景颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.hoverBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.text_button", |
|
cls: "bi-list-item-active", |
|
text: "测试悬浮状态", |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createActiveBackgroundColor() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("激活状态背景颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.activeBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.text_button", |
|
cls: "bi-list-item-active", |
|
text: "测试激活状态", |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createSelectBackgroundColor() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("选中状态背景颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.selectBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.text_button", |
|
cls: "bi-list-item-active", |
|
text: "测试选中状态", |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createSlitColor() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("分割线颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.slitColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
) |
|
], |
|
}; |
|
} |
|
|
|
_createBaseConfig() { |
|
return { |
|
type: "bi.vertical", |
|
items: [ |
|
this._createLabel("--通用配色--"), |
|
this._createBackgroundConfig(), |
|
this._createCardBackgroundConfig(), |
|
this._createFontConfig(), |
|
this._createActiveFontConfig(), |
|
this._createSelectFontConfig(), |
|
this._createGrayFontConfig(), |
|
this._createDisableFontConfig(), |
|
this._createHoverBackgroundColor(), |
|
this._createActiveBackgroundColor(), |
|
this._createSelectBackgroundColor(), |
|
this._createSlitColor() |
|
], |
|
}; |
|
} |
|
|
|
_createButton1BackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("按钮背景色1："), |
|
this._createColorPicker( |
|
function () { |
|
self.button1BackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.vertical_adapt", |
|
height: 40, |
|
items: [ |
|
{ |
|
type: "bi.button", |
|
cls: "config-button1", |
|
text: "测试按钮", |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createButton2BackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("按钮背景色2："), |
|
this._createColorPicker( |
|
function () { |
|
self.button2BackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.vertical_adapt", |
|
height: 40, |
|
items: [ |
|
{ |
|
type: "bi.button", |
|
level: "success", |
|
cls: "config-button2", |
|
text: "测试按钮", |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createButton3BackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("按钮背景色3："), |
|
this._createColorPicker( |
|
function () { |
|
self.button3BackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.vertical_adapt", |
|
height: 40, |
|
items: [ |
|
{ |
|
type: "bi.button", |
|
level: "warning", |
|
cls: "config-button3", |
|
text: "测试按钮", |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createButton4BackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("按钮背景色4："), |
|
this._createColorPicker( |
|
function () { |
|
self.button4BackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.vertical_adapt", |
|
height: 40, |
|
items: [ |
|
{ |
|
type: "bi.button", |
|
level: "ignore", |
|
cls: "config-button4", |
|
text: "测试按钮", |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createScrollBackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("滚动条底色："), |
|
this._createColorPicker( |
|
function () { |
|
self.scrollBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
) |
|
], |
|
}; |
|
} |
|
|
|
_createScrollThumbConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("滚动条thumb颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.scrollThumbColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
) |
|
], |
|
}; |
|
} |
|
|
|
_createPopupBackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("下拉框背景颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.popupBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.vertical_adapt", |
|
items: [ |
|
{ |
|
type: "bi.down_list_combo", |
|
items: [ |
|
[ |
|
{ |
|
el: { |
|
text: "column 1111", |
|
iconCls1: "check-mark-e-font", |
|
value: 11, |
|
}, |
|
children: [ |
|
{ |
|
text: "column 1.1", |
|
value: 21, |
|
cls: "dot-e-font", |
|
selected: true, |
|
}, |
|
{ |
|
text: "column 1.222222222222222222222222222222222222", |
|
cls: "dot-e-font", |
|
value: 22, |
|
}, |
|
{ |
|
text: "column 1.3", |
|
cls: "dot-e-font", |
|
value: 23, |
|
}, |
|
{ |
|
text: "column 1.4", |
|
cls: "dot-e-font", |
|
value: 24, |
|
}, |
|
{ |
|
text: "column 1.5", |
|
cls: "dot-e-font", |
|
value: 25, |
|
} |
|
], |
|
} |
|
], |
|
[ |
|
{ |
|
el: { |
|
type: "bi.icon_text_icon_item", |
|
text: "column 2", |
|
iconCls1: "chart-type-e-font", |
|
cls: "dot-e-font", |
|
value: 12, |
|
}, |
|
disabled: true, |
|
children: [ |
|
{ |
|
type: "bi.icon_text_item", |
|
cls: "dot-e-font", |
|
height: 25, |
|
text: "column 2.1", |
|
value: 11, |
|
}, |
|
{ text: "column 2.2", value: 12, cls: "dot-e-font" } |
|
], |
|
} |
|
], |
|
[ |
|
{ |
|
text: "column 33333333333333333333333333333333", |
|
cls: "style-set-e-font", |
|
value: 13, |
|
} |
|
], |
|
[ |
|
{ |
|
text: "column 4", |
|
cls: "filter-e-font", |
|
value: 14, |
|
} |
|
], |
|
[ |
|
{ |
|
text: "column 5", |
|
cls: "copy-e-font", |
|
value: 15, |
|
} |
|
], |
|
[ |
|
{ |
|
text: "column 6", |
|
cls: "delete-e-font", |
|
value: 16, |
|
} |
|
], |
|
[ |
|
{ |
|
text: "column 7", |
|
cls: "dimension-from-e-font", |
|
value: 17, |
|
disabled: true, |
|
} |
|
] |
|
], |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createMaskBackgroundConfig() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.htape", |
|
cls: "config-item bi-border-bottom", |
|
height: 40, |
|
items: [ |
|
this._createLabel("弹出层蒙版颜色："), |
|
this._createColorPicker( |
|
function () { |
|
self.maskBackgroundColor = this; |
|
}, |
|
() => { |
|
self._runGlobalStyle(); |
|
} |
|
), |
|
{ |
|
width: 100, |
|
el: { |
|
type: "bi.vertical_adapt", |
|
items: [ |
|
{ |
|
type: "bi.button", |
|
text: "mask测试", |
|
handler() { |
|
Msg.alert("弹出层", "弹出层面板"); |
|
}, |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_createCommonConfig() { |
|
return { |
|
type: "bi.vertical", |
|
items: [ |
|
this._createLabel("--一般配色--"), |
|
this._createButton1BackgroundConfig(), |
|
this._createButton2BackgroundConfig(), |
|
this._createButton3BackgroundConfig(), |
|
this._createButton4BackgroundConfig(), |
|
this._createScrollBackgroundConfig(), |
|
this._createScrollThumbConfig(), |
|
this._createPopupBackgroundConfig(), |
|
this._createMaskBackgroundConfig() |
|
], |
|
}; |
|
} |
|
|
|
render() { |
|
const self = this; |
|
|
|
return { |
|
type: "bi.grid", |
|
items: [ |
|
[ |
|
{ |
|
el: { |
|
type: "bi.vertical", |
|
cls: "face-config bi-border-right", |
|
items: [this._createBaseConfig(), this._createCommonConfig()], |
|
}, |
|
}, |
|
{ |
|
el: { |
|
type: "bi.layout", |
|
}, |
|
} |
|
] |
|
], |
|
}; |
|
} |
|
|
|
_setStyle(objects) { |
|
let result = ""; |
|
each(objects, (cls, object) => { |
|
result += `${cls}{`; |
|
each(object, (name, value) => { |
|
result += `${name}:${value};`; |
|
}); |
|
result += "} "; |
|
}); |
|
StyleLoaders.removeStyle("style").loadStyle("style", result); |
|
} |
|
|
|
_runGlobalStyle() { |
|
const backgroundColor = this.backgroundColor.getValue(); |
|
const fontColor = this.fontColor.getValue(); |
|
const activeFontColor = this.activeFontColor.getValue(); |
|
const selectFontColor = this.selectFontColor.getValue(); |
|
const grayFontColor = this.grayFontColor.getValue(); |
|
const disabledFontColor = this.disabledFontColor.getValue(); |
|
const cardBackgroundColor = this.cardBackgroundColor.getValue(); |
|
const hoverBackgroundColor = this.hoverBackgroundColor.getValue(); |
|
const activeBackgroundColor = this.activeBackgroundColor.getValue(); |
|
const selectBackgroundColor = this.selectBackgroundColor.getValue(); |
|
const slitColor = this.slitColor.getValue(); |
|
|
|
const button1BackgroundColor = this.button1BackgroundColor.getValue(); |
|
const button2BackgroundColor = this.button2BackgroundColor.getValue(); |
|
const button3BackgroundColor = this.button3BackgroundColor.getValue(); |
|
const button4BackgroundColor = this.button4BackgroundColor.getValue(); |
|
const scrollBackgroundColor = this.scrollBackgroundColor.getValue(); |
|
const scrollThumbColor = this.scrollThumbColor.getValue(); |
|
const popupBackgroundColor = this.popupBackgroundColor.getValue(); |
|
const maskBackgroundColor = this.maskBackgroundColor.getValue(); |
|
|
|
this._setStyle({ |
|
"body.bi-background, body .bi-background": { |
|
"background-color": backgroundColor, |
|
color: fontColor, |
|
}, |
|
"body .bi-card": { |
|
"background-color": cardBackgroundColor, |
|
color: fontColor, |
|
}, |
|
"body .bi-tips": { |
|
color: grayFontColor, |
|
}, |
|
"div::-webkit-scrollbar,.scrollbar-layout-main": { |
|
"background-color": `${scrollBackgroundColor}!important`, |
|
}, |
|
"div::-webkit-scrollbar-thumb,.public-scrollbar-face:after": { |
|
"background-color": `${scrollThumbColor}!important`, |
|
}, |
|
".base-disabled": { |
|
color: `${disabledFontColor}!important`, |
|
}, |
|
".base-disabled .b-font:before": { |
|
color: `${disabledFontColor}!important`, |
|
}, |
|
".list-view-outer": { |
|
"background-color": `${popupBackgroundColor}!important`, |
|
}, |
|
".bi-z-index-mask": { |
|
"background-color": `${maskBackgroundColor}!important`, |
|
}, |
|
".bi-list-item:hover,.bi-list-item-hover:hover,.bi-list-item-active:hover,.bi-list-item-select:hover,.bi-list-item-effect:hover": |
|
{ |
|
"background-color": `${hoverBackgroundColor}!important`, |
|
}, |
|
".bi-list-item-active:active,.bi-list-item-select:active,.bi-list-item-effect:active": { |
|
"background-color": `${activeBackgroundColor}!important`, |
|
color: `${activeFontColor}!important`, |
|
}, |
|
".bi-list-item-active.active,.bi-list-item-select.active,.bi-list-item-effect.active": { |
|
"background-color": `${selectBackgroundColor}!important`, |
|
color: `${selectFontColor}!important`, |
|
}, |
|
"body .bi-button.button-common": { |
|
"background-color": button1BackgroundColor, |
|
"border-color": button1BackgroundColor, |
|
}, |
|
"body .bi-button.button-success": { |
|
"background-color": button2BackgroundColor, |
|
"border-color": button2BackgroundColor, |
|
}, |
|
"body .bi-button.button-warning": { |
|
"background-color": button3BackgroundColor, |
|
"border-color": button3BackgroundColor, |
|
}, |
|
"body .bi-button.button-ignore": { |
|
"background-color": button4BackgroundColor, |
|
}, |
|
// 以下是分割线颜色 |
|
"body .bi-border,body .bi-border-top,#wrapper .bi-border-bottom,body .bi-border-left,body .bi-border-right": |
|
{ |
|
"border-color": slitColor, |
|
}, |
|
".bi-collection-table-cell": { |
|
"border-right-color": slitColor, |
|
"border-bottom-color": slitColor, |
|
}, |
|
".bi-collection-table-cell.first-col": { |
|
"border-left-color": slitColor, |
|
}, |
|
".bi-collection-table-cell.first-row": { |
|
"border-top-color": slitColor, |
|
}, |
|
}); |
|
} |
|
|
|
mounted() { |
|
this.backgroundColor.setValue(""); |
|
this.fontColor.setValue(""); |
|
this.activeFontColor.setValue(""); |
|
this.selectFontColor.setValue(""); |
|
this.grayFontColor.setValue(""); |
|
this.disabledFontColor.setValue(""); |
|
this.cardBackgroundColor.setValue(""); |
|
this.hoverBackgroundColor.setValue(""); |
|
this.activeBackgroundColor.setValue(""); |
|
this.selectBackgroundColor.setValue(""); |
|
|
|
this.button1BackgroundColor.setValue(""); |
|
this.button2BackgroundColor.setValue(""); |
|
this.button3BackgroundColor.setValue(""); |
|
this.button4BackgroundColor.setValue(""); |
|
this.scrollBackgroundColor.setValue(""); |
|
this.scrollThumbColor.setValue(""); |
|
this.popupBackgroundColor.setValue(""); |
|
this.maskBackgroundColor.setValue(""); |
|
this.slitColor.setValue(""); |
|
this._runGlobalStyle(); |
|
} |
|
}
|
|
|