评论和表情样式同步

.github/release.md

@@ -1,31 +1,6 @@
-## ✨ Feat
-
-🎉 支持自定义 CSS 变量设置主题样式
-
-#### CSS 变量
-
-- 支持克隆菜单自定义长度
-
 ## 🌈 Style
 
-- 分支菜单项目添加动画效果
-
 #### 更符合 GitHub 风格
 
-- 同步 PR 的合并提交操作面板样式
-- 同步 Issue/PR 的时间线样式
-- 仓库同步派生栏样式同步
-- 添加一些颜色的渐变过渡动画
-- 同步 Issue/PR 的评论标题颜色
-- 同步 PR/Actions 的分支字体
-- 同步文件打开时的提交栏样式
-
-## 🎈 Perf
-
-- 优化全局按钮样式
-- 优化顶部导航栏按钮圆角
-
-## 🐞 Fix
-
-- 修复一些圆角问题
-- 修复工单下依赖工单选择框的高度对齐
+- 同步 Issue/PR 的评论样式
+- 同步表情菜单样式

src/types/color/github.ts

@@ -28,6 +28,7 @@ export const github = {
        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        * @navbar `navbarRight` 头像管理员标识背景颜色
+       * @dropdown `dropdown` emoji 的悬停背景色
        */
       emphasis: null,
       /** 暗淡的背景颜色

styles/components/issue.ts

@@ -85,7 +85,7 @@ export const prBranch = css`
 
 // 评论
 export const comment = css`
-  .comment {
+  .comment .comment-container {
     // 去除评论标题左侧指向头像的小箭头
     .comment-header,
     &:target .comment-header {
@@ -101,12 +101,29 @@ export const comment = css`
         box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
       }
     }
+    .comment-header {
+      padding: 4px 4px 4px 16px;
+    }
     .comment-header-right {
       > .item,
       > .label {
         color: ${themeVars.color.text.light.num1};
       }
+      > .ui.label {
+        background-color: initial;
+        font-size: 12px;
+        height: 20px;
+        padding: 0 6px;
+      }
+      // 隐藏顶部菜单的表情按钮
+      .ui.dropdown.action.select-reaction {
+        display: none;
+      }
       .context-dropdown {
+        a.context-menu {
+          display: flex;
+          align-items: center;
+        }
         // 评论菜单的删除按钮
         .menu .item.delete-comment {
           color: ${themeVars.color.red.self};
@@ -117,6 +134,44 @@ export const comment = css`
         }
       }
     }
+    // 表情菜单按钮头部+底部
+    .ui.dropdown.action.select-reaction > a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${themeVars.color.button};
+      border-radius: 25px;
+      border: 1px solid ${themeVars.color.light.border};
+      color: ${themeVars.color.text.light.num1};
+      padding: 0px 8px !important;
+      height: 28px;
+      width: 28px;
+    }
+    // 底部表情栏
+    .bottom-reactions {
+      .ui.ui.ui.label {
+        background-color: unset !important;
+        border-radius: 25px;
+        border-color: ${themeVars.color.light.border};
+        &:hover {
+          background-color: ${themeVars.color.reaction.hoverBg} !important;
+          border-color: ${themeVars.color.light.border};
+        }
+        .reaction {
+          font-size: 12px;
+        }
+        .reaction-count {
+          color: ${themeVars.color.text.light.self};
+          font-weight: 500;
+          margin-left: 0;
+        }
+      }
+      // 显示表情菜单按钮
+      .select-reaction {
+        padding: 0;
+        visibility: visible;
+      }
+    }
   }
 `;
 

styles/public/dropdown.ts

@@ -19,13 +19,15 @@ export const dropdown = css`
         gap: 0.5rem;
         padding: 8px 10px !important;
         border-radius: ${otherThemeVars.border.radius} !important;
+        &:not(.emoji) {
           margin: 0 0.5rem;
-        &:first-of-type {
+        }
+        &:not(.emoji):first-of-type {
           margin-top: 0.5rem;
         }
         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
         &.cherry-pick-button,
-        &:last-of-type {
+        &:not(.emoji):last-of-type {
           margin-bottom: 0.5rem;
         }
         &:hover {
@@ -180,3 +182,23 @@ export const branchDropdown = css`
     animation: ${animationDown};
   }
 `;
+
+// 包含表情的下拉菜单
+export const emojiDropdown = css`
+  .ui.dropdown.action.select-reaction.active .menu:has(.emoji) {
+    display: flex !important;
+    flex-direction: row;
+    gap: 4px;
+    padding: 4px;
+    min-width: auto;
+    > .item.emoji {
+      font-size: 14px;
+      min-height: 32px;
+      height: 32px;
+      margin: 0px;
+      &:hover {
+        background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
+      }
+    }
+  }
+`;