From fdf9fc470e243665ae9911f471ec2607099d3c4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= Date: Thu, 31 Oct 2024 11:19:52 +0800 Subject: [PATCH] feat: theme item highlight (#959) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: theme item highlight * feat: 优化了高亮功能的实现 * chore: 在每次展开面板的时候调整高亮 * chore: 移除多余配置 --- src/sass/cherry.scss | 8 ++++++++ src/sass/themes/blue.scss | 5 +++++ src/sass/themes/dark.scss | 5 +++++ src/sass/themes/green.scss | 5 +++++ src/sass/themes/light.scss | 5 +++++ src/sass/themes/red.scss | 5 +++++ src/sass/themes/violet.scss | 5 +++++ src/toolbars/MenuBase.js | 9 +++++++++ src/toolbars/Toolbar.js | 14 ++++++++++++++ src/toolbars/hooks/Theme.js | 36 ++++++++++++++++++++---------------- 10 files changed, 81 insertions(+), 16 deletions(-) diff --git a/src/sass/cherry.scss b/src/sass/cherry.scss index c53273f2..8a686191 100644 --- a/src/sass/cherry.scss +++ b/src/sass/cherry.scss @@ -152,6 +152,10 @@ background: $toolbarBtnBgHoverLight; color: $toolbarBtnHoverColorLight; } + &__selected { + background: $toolbarBtnBgHoverLight; + color: $toolbarBtnHoverColorLight; + } .ch-icon { margin-right: 10px; @@ -169,6 +173,10 @@ background: $toolbarBtnBgHoverDark; color: $toolbarBtnHoverColorDark; } + &__selected { + background: $toolbarBtnBgHoverDark; + color: $toolbarBtnHoverColorLight; + } } } } diff --git a/src/sass/themes/blue.scss b/src/sass/themes/blue.scss index 01cad222..297f5344 100644 --- a/src/sass/themes/blue.scss +++ b/src/sass/themes/blue.scss @@ -81,6 +81,11 @@ $mdBlockquoteBg: $VIOLET1; background: $toolbarBg; .cherry-dropdown-item { color: $toolbarBtnColor; + // 选中子菜单高亮 + &__selected { + background-color: $toolbarBtnBgHover; + color: $toolbarBtnHoverColor; + } &:hover { background-color: $toolbarBtnBgHover; color: $toolbarBtnHoverColor; diff --git a/src/sass/themes/dark.scss b/src/sass/themes/dark.scss index 5fd3ab1c..4f8494fc 100644 --- a/src/sass/themes/dark.scss +++ b/src/sass/themes/dark.scss @@ -54,6 +54,11 @@ $mdSvgTextColor: rgb(250, 160, 0); background: $toolbarBg; .cherry-dropdown-item { color: $toolbarBtnColor; + // 选中子菜单高亮 + &__selected { + background-color: $toolbarBtnBgHover; + color: $toolbarBtnHoverColor; + } &:hover { background-color: $toolbarBtnBgHover; color: $toolbarBtnHoverColor; diff --git a/src/sass/themes/green.scss b/src/sass/themes/green.scss index d255141c..93c0ee54 100644 --- a/src/sass/themes/green.scss +++ b/src/sass/themes/green.scss @@ -68,6 +68,11 @@ $mdBlockquoteBg: $GREEN1; background: $toolbarBg; .cherry-dropdown-item { color: $toolbarBtnColor; + // 选中子菜单高亮 + &__selected { + background-color: $toolbarBtnBgHover; + color: $toolbarBtnHoverColor; + } &:hover { background-color: $toolbarBtnBgHover; color: $toolbarBtnHoverColor; diff --git a/src/sass/themes/light.scss b/src/sass/themes/light.scss index 49fce380..73736fc5 100644 --- a/src/sass/themes/light.scss +++ b/src/sass/themes/light.scss @@ -54,6 +54,11 @@ $mdBlockquoteBg: rgb(231, 245, 255); background: $toolbarBg; .cherry-dropdown-item { color: $toolbarBtnColor; + // 选中子菜单高亮 + &__selected { + background-color: $toolbarBtnBgHover; + color: $toolbarBtnHoverColor; + } &:hover { background-color: $toolbarBtnBgHover; color: $toolbarBtnHoverColor; diff --git a/src/sass/themes/red.scss b/src/sass/themes/red.scss index b091c902..9069575b 100644 --- a/src/sass/themes/red.scss +++ b/src/sass/themes/red.scss @@ -68,6 +68,11 @@ $mdBlockquoteBg: $PINK1; background: $toolbarBg; .cherry-dropdown-item { color: $toolbarBtnColor; + // 选中子菜单高亮 + &__selected { + background-color: $toolbarBtnBgHover; + color: $toolbarBtnHoverColor; + } &:hover { background-color: $toolbarBtnBgHover; color: $toolbarBtnHoverColor; diff --git a/src/sass/themes/violet.scss b/src/sass/themes/violet.scss index 2ff4d1d9..748b2f66 100644 --- a/src/sass/themes/violet.scss +++ b/src/sass/themes/violet.scss @@ -67,6 +67,11 @@ $mdBlockquoteBg: $VIOLET1; background: $toolbarBg; .cherry-dropdown-item { color: $toolbarBtnColor; + // 选中子菜单高亮 + &__selected { + background-color: $toolbarBtnBgHover; + color: $toolbarBtnHoverColor; + } &:hover { background-color: $toolbarBtnBgHover; color: $toolbarBtnHoverColor; diff --git a/src/toolbars/MenuBase.js b/src/toolbars/MenuBase.js index 17e0845a..88b088fc 100644 --- a/src/toolbars/MenuBase.js +++ b/src/toolbars/MenuBase.js @@ -544,4 +544,13 @@ export default class MenuBase { } return parent; } + + /** + * 绑定子菜单点击事件 + * @param {HTMLDivElement} subMenuDomPanel + * @returns {number} 当前激活的子菜单索引 + */ + getActiveSubMenuIndex(subMenuDomPanel) { + return -1; + } } diff --git a/src/toolbars/Toolbar.js b/src/toolbars/Toolbar.js index 245d4bc9..b03fd640 100644 --- a/src/toolbars/Toolbar.js +++ b/src/toolbars/Toolbar.js @@ -235,6 +235,18 @@ export default class Toolbar { } } + /** + * 激活二级菜单添加选中颜色 + * @param {string} name + */ + activeSubMenuItem(name) { + const subMenu = this.subMenus[name]; + const index = this.menus.hooks?.[name]?.getActiveSubMenuIndex(subMenu); + subMenu?.querySelectorAll('.cherry-dropdown-item').forEach((item, i) => { + item.classList.toggle('cherry-dropdown-item__selected', i === index); + }); + } + /** * 展开/收起二级菜单 */ @@ -244,6 +256,7 @@ export default class Toolbar { this.hideAllSubMenu(); this.drawSubMenus(name); this.subMenus[name].style.display = 'block'; + this.activeSubMenuItem(name); return; } if (this.subMenus[name].style.display === 'none') { @@ -251,6 +264,7 @@ export default class Toolbar { this.hideAllSubMenu(); this.subMenus[name].style.display = 'block'; this.setSubMenuPosition(this.menus.hooks[name], this.subMenus[name]); + this.activeSubMenuItem(name); } else { // 如果是显示的，则隐藏当前二级菜单 this.subMenus[name].style.display = 'none'; diff --git a/src/toolbars/hooks/Theme.js b/src/toolbars/hooks/Theme.js index 670cb1ef..365c4ac9 100644 --- a/src/toolbars/hooks/Theme.js +++ b/src/toolbars/hooks/Theme.js @@ -24,23 +24,27 @@ export default class Theme extends MenuBase { this.setName('theme', 'insertChart'); this.subMenuConfig = []; const self = this; - if (typeof $cherry.options.theme !== 'undefined') { - $cherry.options.theme.forEach((one) => { - self.subMenuConfig.push({ - iconName: one.className, - name: one.label, - onclick: self.bindSubClick.bind(self, one.className), - }); - }); - } else { - $cherry.options.themeSettings.themeList.forEach((one) => { - self.subMenuConfig.push({ - iconName: one.className, - name: one.label, - onclick: self.bindSubClick.bind(self, one.className), - }); + + const themes = $cherry.options.theme || $cherry.options.themeSettings.themeList; + themes.forEach((one) => { + self.subMenuConfig.push({ + iconName: one.className, + name: one.label, + onclick: self.bindSubClick.bind(self, one.className), }); - } + }); + } + + /** + * 绑定子菜单点击事件 + * @param {HTMLDivElement} subMenuDomPanel + * @returns {number} 当前激活的子菜单索引 + */ + getActiveSubMenuIndex(subMenuDomPanel) { + const theme = this.$cherry.wrapperDom.className.match(/theme__([^\s]+)/)?.[1] || ''; + return Array.from(subMenuDomPanel.querySelectorAll('.cherry-dropdown-item')).findIndex((item) => + item.querySelector(`.ch-icon-${theme}`), + ); } /**