fineui/demo/js/face.js

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();
    }
}