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.
877 lines
31 KiB
877 lines
31 KiB
2 years ago
|
import {
|
||
|
|
Widget,
|
||
|
|
Label,
|
||
|
|
shortcut,
|
||
|
|
each,
|
||
|
|
Msg,
|
||
|
|
StyleLoaders,
|
||
|
|
ColorChooser,
|
||
|
|
VerticalAdaptLayout,
|
||
|
|
HTapeLayout,
|
||
|
|
TextButton,
|
||
|
|
IconTextItem,
|
||
|
|
VerticalLayout,
|
||
|
|
Button,
|
||
|
|
DownListCombo,
|
||
|
|
IconTextIconItem,
|
||
|
|
GridLayout,
|
||
|
|
Layout,
|
||
|
|
} from '@fui/core';
|
||
|
|
|
||
|
|
@shortcut()
|
||
|
|
export class Face extends Widget {
|
||
|
|
static xtype = 'demo.face';
|
||
|
|
|
||
|
|
props = {
|
||
|
|
baseCls: 'demo-face',
|
||
|
|
};
|
||
|
|
|
||
|
|
_createLabel(text) {
|
||
|
|
return {
|
||
|
|
width: 200,
|
||
|
|
el: {
|
||
|
|
type: Label.xtyp,
|
||
|
|
text: text,
|
||
|
|
textAlign: 'left',
|
||
|
|
hgap: 5,
|
||
|
|
height: 40,
|
||
|
|
cls: 'config-label',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createColorPicker(ref, action) {
|
||
|
|
return {
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: ColorChooser.xtype,
|
||
|
|
listeners: [
|
||
|
|
{
|
||
|
|
eventName: ColorChooser.EVENT_CHANGE,
|
||
|
|
action: action,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
ref: ref,
|
||
|
|
width: 24,
|
||
|
|
height: 24,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createBackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('背景色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.backgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createFontConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('字体颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.fontColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createActiveFontConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('激活状态字体颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.activeFontColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: TextButton.xtype,
|
||
|
|
cls: 'bi-list-item-active',
|
||
|
|
text: '测试激活状态',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createSelectFontConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('选中状态字体颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.selectFontColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: TextButton.xtype,
|
||
|
|
cls: 'bi-list-item-active',
|
||
|
|
text: '测试选中状态',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createGrayFontConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('tip提示字体颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.grayFontColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: IconTextItem.xtype,
|
||
|
|
cls: 'bi-tips copy-font',
|
||
|
|
height: 40,
|
||
|
|
text: '测试提示文字',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createDisableFontConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('灰化字体颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.disabledFontColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: TextButton.xtype,
|
||
|
|
text: '这个按钮是灰化的',
|
||
|
|
disabled: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createCardBackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('Card背景颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.cardBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createHoverBackgroundColor() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('悬浮状态背景颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.hoverBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: TextButton.xtype,
|
||
|
|
cls: 'bi-list-item-active',
|
||
|
|
text: '测试悬浮状态',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createActiveBackgroundColor() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('激活状态背景颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.activeBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: TextButton.xtype,
|
||
|
|
cls: 'bi-list-item-active',
|
||
|
|
text: '测试激活状态',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createSelectBackgroundColor() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('选中状态背景颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.selectBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: TextButton.xtype,
|
||
|
|
cls: 'bi-list-item-active',
|
||
|
|
text: '测试选中状态',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createSlitColor() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('分割线颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.slitColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createBaseConfig() {
|
||
|
|
return {
|
||
|
|
type: VerticalLayout.xtype,
|
||
|
|
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() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('按钮背景色1：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.button1BackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: Button.xtype,
|
||
|
|
cls: 'config-button1',
|
||
|
|
text: '测试按钮',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createButton2BackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('按钮背景色2：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.button2BackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: Button.xtype,
|
||
|
|
level: 'success',
|
||
|
|
cls: 'config-button2',
|
||
|
|
text: '测试按钮',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createButton3BackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('按钮背景色3：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.button3BackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: Button.xtype,
|
||
|
|
level: 'warning',
|
||
|
|
cls: 'config-button3',
|
||
|
|
text: '测试按钮',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createButton4BackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('按钮背景色4：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.button4BackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: Button.xtype,
|
||
|
|
level: 'ignore',
|
||
|
|
cls: 'config-button4',
|
||
|
|
text: '测试按钮',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createScrollBackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('滚动条底色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.scrollBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createScrollThumbConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('滚动条thumb颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.scrollThumbColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createPopupBackgroundConfig() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('下拉框背景颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.popupBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: DownListCombo.xtype,
|
||
|
|
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: IconTextIconItem.xtype,
|
||
|
|
text: 'column 2',
|
||
|
|
iconCls1: 'chart-type-e-font',
|
||
|
|
cls: 'dot-e-font',
|
||
|
|
value: 12,
|
||
|
|
},
|
||
|
|
disabled: true,
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
type: IconTextItem.xtype,
|
||
|
|
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() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: HTapeLayout.xtype,
|
||
|
|
cls: 'config-item bi-border-bottom',
|
||
|
|
height: 40,
|
||
|
|
items: [
|
||
|
|
this._createLabel('弹出层蒙版颜色：'),
|
||
|
|
this._createColorPicker(
|
||
|
|
function () {
|
||
|
|
self.maskBackgroundColor = this;
|
||
|
|
},
|
||
|
|
function () {
|
||
|
|
self._runGlobalStyle();
|
||
|
|
}
|
||
|
|
),
|
||
|
|
{
|
||
|
|
width: 100,
|
||
|
|
el: {
|
||
|
|
type: VerticalAdaptLayout.xtype,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: Button.xtype,
|
||
|
|
text: 'mask测试',
|
||
|
|
handler() {
|
||
|
|
Msg.alert('弹出层', '弹出层面板');
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_createCommonConfig() {
|
||
|
|
return {
|
||
|
|
type: VerticalLayout.xtype,
|
||
|
|
items: [
|
||
|
|
this._createLabel('--一般配色--'),
|
||
|
|
this._createButton1BackgroundConfig(),
|
||
|
|
this._createButton2BackgroundConfig(),
|
||
|
|
this._createButton3BackgroundConfig(),
|
||
|
|
this._createButton4BackgroundConfig(),
|
||
|
|
this._createScrollBackgroundConfig(),
|
||
|
|
this._createScrollThumbConfig(),
|
||
|
|
this._createPopupBackgroundConfig(),
|
||
|
|
this._createMaskBackgroundConfig(),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: GridLayout.xtype,
|
||
|
|
items: [
|
||
|
|
[
|
||
|
|
{
|
||
|
|
el: {
|
||
|
|
type: VerticalLayout.xtype,
|
||
|
|
cls: 'face-config bi-border-right',
|
||
|
|
items: [this._createBaseConfig(), this._createCommonConfig()],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
el: {
|
||
|
|
type: Layout.xtype,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
_setStyle(objects) {
|
||
|
|
var result = '';
|
||
|
|
each(objects, function (cls, object) {
|
||
|
|
result += cls + '{';
|
||
|
|
each(object, function (name, value) {
|
||
|
|
result += name + ':' + value + ';';
|
||
|
|
});
|
||
|
|
result += '} ';
|
||
|
|
});
|
||
|
|
StyleLoaders.removeStyle('style').loadStyle('style', result);
|
||
|
|
}
|
||
|
|
|
||
|
|
_runGlobalStyle() {
|
||
|
|
var backgroundColor = this.backgroundColor.getValue();
|
||
|
|
var fontColor = this.fontColor.getValue();
|
||
|
|
var activeFontColor = this.activeFontColor.getValue();
|
||
|
|
var selectFontColor = this.selectFontColor.getValue();
|
||
|
|
var grayFontColor = this.grayFontColor.getValue();
|
||
|
|
var disabledFontColor = this.disabledFontColor.getValue();
|
||
|
|
var cardBackgroundColor = this.cardBackgroundColor.getValue();
|
||
|
|
var hoverBackgroundColor = this.hoverBackgroundColor.getValue();
|
||
|
|
var activeBackgroundColor = this.activeBackgroundColor.getValue();
|
||
|
|
var selectBackgroundColor = this.selectBackgroundColor.getValue();
|
||
|
|
var slitColor = this.slitColor.getValue();
|
||
|
|
|
||
|
|
var button1BackgroundColor = this.button1BackgroundColor.getValue();
|
||
|
|
var button2BackgroundColor = this.button2BackgroundColor.getValue();
|
||
|
|
var button3BackgroundColor = this.button3BackgroundColor.getValue();
|
||
|
|
var button4BackgroundColor = this.button4BackgroundColor.getValue();
|
||
|
|
var scrollBackgroundColor = this.scrollBackgroundColor.getValue();
|
||
|
|
var scrollThumbColor = this.scrollThumbColor.getValue();
|
||
|
|
var popupBackgroundColor = this.popupBackgroundColor.getValue();
|
||
|
|
var 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();
|
||
|
|
}
|
||
|
|
}
|