feat: theme item highlight (#959)

* feat: theme item highlight * feat: 优化了高亮功能的实现 * chore: 在每次展开面板的时候调整高亮 * chore: 移除多余配置
Tencent · Oct 31, 2024 · fdf9fc4 · fdf9fc4
1 parent 66a898c
commit fdf9fc4
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,13 +256,15 @@ 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') {
       // 如果是隐藏的，则先隐藏所有二级菜单，再显示当前二级菜单
       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
@@ -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}`),
+    );
   }
 
   /**