dropdown 迁移

.github/release.md

@@ -26,6 +26,7 @@
 - Issue/PR 评论边框样式同步
 - Code/Runner/PR 提示框样式同步
 - 下拉菜单样式同步
+- 选择下拉菜单样式同步
 
 ## 🎈 Perf
 

styles/components/repo.tsx

@@ -53,3 +53,19 @@ export const commit = css`
     }
   }
 `;
+
+// 文件列表页面下的分支按钮
+export const branchButton = css`
+  .page-content.repository.file.list {
+    .ui.dropdown.branch-selector-dropdown > .menu > .menu {
+      // 显示默认分支的标签
+      .ui.label {
+        background-color: ${themeVars.color.menu};
+        border: 1px solid ${themeVars.color.light.border};
+        margin-top: 1px;
+        margin-left: auto;
+        margin-right: 16px; // gitea 有 RSS 留出足够的空间
+      }
+    }
+  }
+`;

styles/public/dropdown.scss

@@ -1,144 +0,0 @@
-// Made by Luting ^-^
-// 下拉菜单动画
-@keyframes overlay-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-
-  35% {
-    transform: translateY(-2px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// 下拉菜单
-.ui.dropdown .menu {
-  margin-top: 3.75px !important;
-  border-radius: 12px !important;
-  overflow: hidden auto;
-  box-shadow:
-    0px 0px 0px 0.5px #30363d,
-    0px 6px 12px -3px #01040966,
-    0px 6px 18px 0px #01040966;
-  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
-
-  > .item {
-    padding: 8px 10px !important;
-  }
-}
-
-.ui.dropdown .menu,
-.branch-tag-item.active,
-.ui.pointing.dropdown > .menu:not(.hidden):after {
-  background: var(--color-box-header) !important;
-}
-
-%item-style {
-  background: #1f6feb;
-}
-
-.ui.dropdown .menu > .item.context:hover {
-  @extend %item-style;
-}
-
-.user-main-content,
-.repo-setting-content,
-.user-setting-content,
-.org-setting-content,
-.admin-setting-content {
-  .ui.dropdown .menu > .item {
-    &:hover {
-      @extend %item-style;
-
-      a {
-        color: var(--color-text);
-      }
-    }
-  }
-}
-
-// 按钮菜单选项(主要为仓库)
-.tippy-box .flex-items-block,
-.ui.dropdown > .visible.menu .scrolling.menu,
-.ui.button.dropdown .menu {
-  .item {
-    display: flex;
-    align-items: center;
-    border-radius: var(--border-radius);
-    margin: 0 8px;
-
-    &:first-of-type {
-      border-radius: var(--border-radius);
-      margin-top: 8px;
-    }
-
-    &:last-of-type {
-      border-radius: var(--border-radius);
-      margin-bottom: 8px;
-    }
-  }
-}
-
-// 下拉菜单分隔线
-.ui.dropdown .menu > .divider {
-  border: 0;
-  height: 1px;
-  background-color: #3d444db3;
-  margin-top: calc(7px);
-  margin-bottom: 8px;
-  list-style: none;
-}
-
-.ui.dropdown.branch-selector-dropdown > .visible.menu {
-  // 仓库分支列表下查看操作按钮
-  > .item {
-    display: flex;
-    align-items: center;
-    border-radius: var(--border-radius);
-    margin: 8px;
-    padding: 6px 8px !important;
-  }
-
-  .scrolling.menu .item {
-    padding: 6px 16px !important;
-
-    // 分支菜单下划线
-    &:before {
-      content: " ";
-      display: block;
-      position: absolute;
-      width: 100%;
-      top: 0px;
-      left: 0px;
-      border-width: 1px 0px 0px;
-      border-style: solid;
-      border-image: initial;
-      border-color: #3d444db3;
-    }
-
-    &:first-of-type:before {
-      border-color: transparent;
-    }
-
-    &:hover {
-      &:before {
-        border-color: transparent;
-      }
-
-      + :before {
-        border-color: transparent;
-      }
-    }
-
-    .ui.label {
-      margin-top: 1px;
-      margin-left: auto;
-      margin-right: 0;
-    }
-  }
-}

styles/public/dropdown.tsx

@@ -12,27 +12,35 @@ export const dropdown = css`
       border: unset !important;
       border-radius: 12px !important;
       box-shadow: ${themeVars.github.shadow.floating.small} !important;
-
+      // 忽略隐藏
-      > .item {
+      > .item:not(.tw-hidden) {
+        display: flex !important;
+        align-items: center;
+        gap: 0.5rem;
         padding: 8px 10px !important;
         border-radius: ${otherThemeVars.border.radius} !important;
         margin: 0 0.5rem;
-        &:first-child {
+        &:first-of-type {
           margin-top: 0.5rem;
         }
-        &:last-child {
+        // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
+        &.cherry-pick-button,
+        &:last-of-type {
           margin-bottom: 0.5rem;
         }
         &:hover {
           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
         }
-        &.active,
         &.selected {
           background-color: ${themeVars.color.active} !important;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
           }
         }
+        svg {
+          color: ${themeVars.color.text.light.num1};
+          margin-right: 0.5rem;
+        }
       }
       > .divider {
         margin: 0.5rem 0;
@@ -54,4 +62,33 @@ export const dropdown = css`
   .ui.selection.dropdown .menu > .item {
     border: unset;
   }
+  // 修复一些菜单下的菜单元素溢出问题
+  // 目前主要为分支菜单
+  .ui.dropdown .menu .menu {
+    border-radius: 12px !important;
+  }
+`;
+
+// 选择框的下拉菜单看起来像普通按钮
+export const selectionDropdown = css`
+  .ui.selection.dropdown,
+  .ui.selection.dropdown.active {
+    background-color: ${themeVars.color.button};
+    border-color: ${themeVars.color.light.border};
+    border-radius: ${otherThemeVars.border.radius};
+    padding: 9px 16px;
+    min-height: 33px;
+    &:focus {
+      background: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+    }
+    &:hover {
+      background: ${themeVars.color.hover.self};
+      border-color: ${themeVars.color.light.border};
+    }
+  }
+  .ui.selection.dropdown.active {
+    border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
+    border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
+  }
 `;

styles/public/radius.tsx

@@ -280,3 +280,11 @@ export const fixRadius = css`
     border-bottom-right-radius: ${otherThemeVars.border.radius};
   }
 `;
+
+// 修复一些根本无法理解的生效顺序
+export const fixWhyRadius = css`
+  // Issue 菜单第一个按钮
+  .ui.secondary.menu .item {
+    border-radius: ${otherThemeVars.border.radius};
+  }
+`;

styles/public/tippy.tsx

@@ -1,5 +1,5 @@
 import { animation } from "src/core/theme";
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
 export const tippyBox = css`
@@ -23,5 +23,17 @@ export const tippyBox = css`
         }
       }
     }
+    // 差异对比中文件路径行右侧的三个点菜单
+    &[data-theme="menu"] {
+      .tippy-content {
+        padding: 0.5rem;
+        .item {
+          border-radius: ${otherThemeVars.border.radius};
+          &:hover {
+            background-color: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+      }
+    }
   }
 `;

themes/dark.css.tsx

@@ -105,7 +105,9 @@ const github: GithubColor = {
       bgColor: {
         active: "#656c7640",
         hover: "#656c7633",
-        selected: "#656c761a",
+        // 非官方颜色, 实在是太淡了
+        // selected: "#656c761a",
+        selected: "#656c762a",
       },
     },
   },