动画迁移 & 部分 PR 样式 (#7)

* 弹窗动画

* 优化 PR 中的合并提交按钮颜色

* 优化按钮样式

* 同步 PR 的合并提交头像样式

* 同步 Issue/PR 的时间线样式

* Issue/PR 的时间线样式间隔和大小

* 同步 PR 的合并提交操作面板样式

* PR 操作间隔

* green

* PR 操作边框色

* 已合并颜色

* 仓库同步派生栏样式同步

* 动画迁移 & 一些圆角修复

* 修复工单下依赖工单选择框

* 评论标题颜色&分支字体&提交栏样式

---------

Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>

.github/release.md

@@ -2,11 +2,20 @@
 
 #### 更符合 GitHub 风格
 
+- 同步 PR 的合并提交操作面板样式
+- 同步 Issue/PR 的时间线样式
+- 仓库同步派生栏样式同步
+- 添加一些颜色的渐变过渡动画
+- 同步 Issue/PR 的评论标题颜色
+- 同步 PR/Actions 的分支字体
+- 同步文件打开时的提交栏样式
+
 ## 🎈 Perf
 
-- 优化提交中 Action 状态标签的位置
+- 优化全局按钮样式
-- 优化按钮和菜单下的图标颜色
+- 优化顶部导航栏按钮圆角
-- 优化仓库发布中的分支选择按钮样式
-- 优化向上弹窗的菜单动画
 
 ## 🐞 Fix
+
+- 修复一些圆角问题
+- 修复工单下依赖工单选择框的高度对齐

TODO.md

@@ -1,8 +1,3 @@
-### 轻量
-
-- hover 动画迁移
-- 列表部分 item 展开动画迁移
-
 ### 重大
 
 - gitea issue 默认标签颜色匹配使用 github 样式
@@ -12,6 +7,7 @@
 - defineTheme 颜色生成代码重构
 - 亮色主题适配/测试
 - 自动颜色主题生成
+- github primer 官方库集成
 
 ### 其他
 

src/core/github.ts

@@ -350,6 +350,9 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
       },
     },
     control: {
+      bgColor: {
+        rest: githubColor.control.bgColor.rest,
+      },
       transparent: {
         bgColor: {
           hover: githubColor.control.transparent.bgColor.hover,

src/core/theme.ts

@@ -48,14 +48,16 @@ export function createTheme(theme: Theme): void {
   }
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
+    border: {
+      radius: "6px",
+    },
+    color: {
       git: "#f05133",
       light: {
         mimicEnabled: isDarkTheme
           ? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
           : "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
       },
-    border: {
-      radius: "6px",
     },
   });
   globalStyle(":root", {
@@ -63,11 +65,11 @@ export function createTheme(theme: Theme): void {
     colorScheme: isDarkTheme ? "dark" : "light",
   });
   globalKeyframes(overlayAppearDown, {
-    "0%": { opacity: 0, transform: "translateY(-12px)" },
+    "0%": { opacity: 0, transform: "translateY(-8px)" },
     "100%": { opacity: 1, transform: "translateY(0)" },
   });
   globalKeyframes(overlayAppearUp, {
-    "0%": { opacity: 0, transform: "translateY(12px)" },
+    "0%": { opacity: 0, transform: "translateY(8px)" },
     "100%": { opacity: 1, transform: "translateY(0)" },
   });
 }

src/types/color/github.ts

@@ -41,6 +41,7 @@ export const github = {
     success: {
       /** 成功的背景颜色
        * @issue `babel` 重新开启图标背景颜色
+       * @issue `prMerge` 合并提交的图标背景色
        */
       emphasis: null,
     },
@@ -157,6 +158,12 @@ export const github = {
     },
   },
   control: {
+    bgColor: {
+      /** 背景色
+       * @issue `timeline` 时间线标签背景色
+       */
+      rest: null,
+    },
     transparent: {
       bgColor: {
         /** 悬停色

src/types/vars.ts

@@ -30,7 +30,9 @@ const otherVars = {
   border: {
     radius: null,
   },
+  color: {
     ...color.otherAuto,
+  },
 };
 
 export const themeVars = createGlobalThemeContract(vars, varMapper);

styles/components/actions.tsx

@@ -1,3 +1,4 @@
+import { animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 仓库 Actions 页面
@@ -57,6 +58,7 @@ export const actions = css`
         .run-list-ref {
           background-color: ${themeVars.github.bgColor.accent.muted};
           color: ${themeVars.github.fgColor.accent};
+          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
           font-weight: 400;
           &:hover {
             background-color: ${themeVars.github.bgColor.accent.muted};
@@ -132,6 +134,7 @@ export const actionViewHeader = css`
       .ui.label {
         background-color: ${themeVars.github.bgColor.accent.muted};
         color: ${themeVars.github.fgColor.accent};
+        font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
         font-weight: 400;
         > a {
           opacity: 1;
@@ -212,6 +215,7 @@ export const actionViewRight = css`
     }
 
     .job-step-container {
+      // 步骤标题
       .job-step-summary {
         color: ${themeVars.color.console.fg.subtle};
         padding: 8px 10px;
@@ -238,6 +242,9 @@ export const actionViewRight = css`
           }
         }
       }
+      // 步骤日志
+      .job-step-logs {
+        animation: ${animationDown};
         /* 日志字体颜色白色 */
         .job-log-line {
           color: ${themeVars.color.console.fg.self};
@@ -248,4 +255,5 @@ export const actionViewRight = css`
         }
       }
     }
+  }
 `;

styles/components/filelist.tsx

@@ -16,12 +16,15 @@ export const branchButton = css`
   }
 `;
 
-// 仓库按钮
+// 仓库同步派生
-export const repoButton = css`
+export const syncFork = css`
   .page-content.repository.file.list {
-    // clone 按钮调整
+    .repo-home-filelist > .ui.message {
-    .repo-button-row .repo-button-row-right .ui.primary.button span {
+      background: ${themeVars.color.box.header};
-      margin: 0px 3px;
+      padding: 8px 8px 8px 16px;
+      .ui.button {
+        min-width: 96px;
+      }
     }
   }
 `;
@@ -107,6 +110,29 @@ export const repoFilesMobile = css`
   }
 `;
 
+// 仓库打开文件时的视图
+export const repoFileView = css`
+  .page-content.repository.file.list {
+    .repo-view-container {
+      // 右侧文件视图内容
+      .repo-view-content {
+        // 头部提交信息
+        #repo-file-commit-box {
+          padding: 8px 12px;
+          > .latest-commit {
+            gap: 8px;
+          }
+          // 右侧提交时间
+          > .age {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+`;
+
 // 仓库代码布局调整, 侧边栏宽度调整
 export const repoGrid = css`
   .repo-grid-filelist-sidebar {
@@ -198,7 +224,7 @@ export const repoSidebarBottom = css`
         .color-icon {
           height: 8px;
           width: 8px;
-          margin-right: 6px;
+          margin-right: 8px;
         }
         .tw-font-semibold {
           color: ${themeVars.color.text.self};

styles/components/issue.tsx

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 export const button = css`
@@ -26,17 +26,14 @@ export const babel = css`
       // 时间线打开状态标签
       &.tw-bg-green {
         background-color: ${themeVars.github.bgColor.success.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.success.emphasis} !important;
       }
       // 时间线关闭状态标签
       &.tw-bg-red {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
       }
       // 时间线合并状态标签
       &.tw-bg-purple {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
       }
     }
   }
@@ -70,8 +67,19 @@ export const prBranch = css`
   #issue-list .flex-item-body .branches .branch {
     color: ${themeVars.github.fgColor.accent};
     background-color: ${themeVars.github.bgColor.accent.muted};
+    border-radius: ${otherThemeVars.border.radius};
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
     font-size: 12px;
     padding: 0 5px;
+    line-height: 20px;
+  }
+
+  .repository.view.issue .pull-desc code {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    a:hover {
+      text-decoration-line: none;
+    }
   }
 `;
 
@@ -94,6 +102,10 @@ export const comment = css`
       }
     }
     .comment-header-right {
+      > .item,
+      > .label {
+        color: ${themeVars.color.text.light.num1};
+      }
       .context-dropdown {
         // 评论菜单的删除按钮
         .menu .item.delete-comment {
@@ -121,3 +133,142 @@ export const dropdown = css`
     }
   }
 `;
+
+// PR 界面的 PR 操作评论
+export const prMerge = css`
+  .repository.view.issue .comment-list .timeline-item.pull-merge-box {
+    // 头像
+    .timeline-avatar {
+      color: ${themeVars.color.text.self} !important;
+      border-radius: ${otherThemeVars.border.radius};
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+      // 可以合并
+      &.green {
+        background-color: ${themeVars.github.bgColor.success.emphasis};
+        // 操作评论边框色
+        + .content > .ui.attached.segment {
+          border-left-color: ${themeVars.github.bgColor.success.emphasis};
+          border-right-color: ${themeVars.github.bgColor.success.emphasis};
+          &:first-child {
+            border-top-color: ${themeVars.github.bgColor.success.emphasis};
+          }
+          &:last-child {
+            border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
+          }
+        }
+      }
+      // 已合并
+      &.purple {
+        background-color: ${themeVars.github.bgColor.done.emphasis};
+        + .content > .ui.attached.segment {
+          border-left-color: ${themeVars.github.bgColor.done.emphasis};
+          border-right-color: ${themeVars.github.bgColor.done.emphasis};
+          &:first-child {
+            border-top-color: ${themeVars.github.bgColor.done.emphasis};
+          }
+          &:last-child {
+            border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
+          }
+        }
+      }
+    }
+    // 检查状态
+    .commit-status-panel {
+      .commit-status-header {
+        background: ${themeVars.color.body};
+        padding: 16px;
+        font-size: 16px;
+        font-weight: 600;
+        .ui.right {
+          color: ${themeVars.color.text.light.num1};
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      // 检查状态列表
+      .commit-status-list {
+        background: ${themeVars.color.menu};
+        .commit-status-item {
+          border-radius: ${otherThemeVars.border.radius};
+          padding: 2px 8px;
+          margin: 0px 8px;
+          height: 37px;
+          &:first-child {
+            margin-top: 8px;
+          }
+          &:last-child {
+            margin-bottom: 8px;
+          }
+          &:hover {
+            background-color: ${themeVars.color.hover.opaque};
+          }
+        }
+      }
+    }
+    // 合并信息和操作
+    .merge-section {
+      color: ${themeVars.color.text.light.num1};
+      padding: 16px;
+      display: grid;
+      gap: 8px;
+    }
+  }
+`;
+
+// 时间线
+export const timeline = css`
+  .repository.view.issue {
+    .comment-list {
+      .timeline-item,
+      .timeline-item-group {
+        padding: 16px 0;
+        // 事件
+        &.event {
+          // 修复覆盖后的位置问题
+          padding-left: 15px;
+          .avatar {
+            width: 20px;
+            height: 20px;
+          }
+          .badge {
+            border: 2px solid ${themeVars.color.body};
+          }
+          // 仅匹配只有 badge
+          .badge:not([class*=" "]) {
+            background-color: ${themeVars.github.control.bgColor.rest};
+            svg {
+              color: ${themeVars.color.text.light.num1};
+            }
+          }
+        }
+        // 提交
+        &.commits-list {
+          // 每个提交之间的间隔
+          .flex-text-block {
+            padding-top: 4px;
+          }
+          .badge svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+          // 仅覆盖左侧 commit 不覆盖右侧 SHA
+          a.muted {
+            font-size: 12px;
+            color: ${themeVars.color.text.light.num1};
+            text-decoration-line: underline;
+            &:hover {
+              color: ${themeVars.color.primary.self};
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/repo.tsx

@@ -6,10 +6,6 @@ export const repoHeader = css`
     // 点星/关注/克隆/RSS 按钮
     .ui.compact.button {
       padding: 3px 12px;
-      // 文本跟图标间隔, 文本在手机下不显示
-      span {
-        margin-left: 0.5rem;
-      }
     }
     // 仓库图标
     img.ui.avatar {

styles/public/button.tsx

@@ -18,16 +18,27 @@ export const baseButton = css`
     min-height: 30px;
     font-weight: 500;
     padding: 9px 16px;
+    &.ui {
+      gap: 8px;
+    }
   }
   .ui.button:not(.primary):not(.red) svg {
     color: ${themeVars.color.text.light.num1};
   }
-  .ui.primary.button {
+  // 主色调按钮保持白色
+  .ui.primary.buttons .button svg {
+    color: ${themeVars.color.text.self};
+  }
+  .ui.primary {
+    &.button,
+    // 按钮组, PR 里的压缩合并按钮
+    &.buttons .button {
       ${primaryStyle}
       &:hover {
         ${primaryHoverStyle}
       }
     }
+  }
   // 主色调基本按钮和普通按钮一样
   // 作者的关注按钮
   .ui.basic.primary.button {

styles/public/dropdown.tsx

@@ -14,6 +14,7 @@ export const dropdown = css`
       box-shadow: ${themeVars.github.shadow.floating.small} !important;
       // 忽略隐藏
       > .item:not(.tw-hidden) {
+        animation: ${animationDown};
         display: flex !important;
         align-items: center;
         gap: 0.5rem;
@@ -37,9 +38,6 @@ export const dropdown = css`
             background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
           }
         }
-        svg {
-          margin-right: 0.5rem;
-        }
         &.active,
         &.selected {
           &:after {
@@ -154,6 +152,13 @@ export const selectionDropdown = css`
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }
+  // 修复因为上面的排除导致的圆角问题
+  // 具体工单页面下依赖菜单选择框
+  #new-dependency-drop-list.ui.selection.dropdown.active,
+  // 提交图分支选择框
+  #git-graph-container #flow-select-refs-dropdown {
+    border-bottom-right-radius: 0 !important;
+  }
   // 修复选择框的下拉菜单向上显示时的样式问题
   .ui.upward.selection.dropdown.visible:not(.small),
   .ui.active.upward.selection.dropdown:not(.small) {
@@ -161,3 +166,11 @@ export const selectionDropdown = css`
     border-top-right-radius: ${otherThemeVars.border.radius}!important;
   }
 `;
+
+export const fixSelectionDropdown = css`
+  // 具体工单页面下依赖菜单选择框
+  #new-dependency-drop-list.ui.selection.dropdown {
+    // 高度对齐问题, 应该与 input 框高度一致
+    min-height: 32px;
+  }
+`;

styles/public/index.tsx

@@ -2,6 +2,7 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮

styles/public/modal.tsx

@@ -1,7 +1,9 @@
+import { animationDown } from "src/core/theme";
 import { css, themeVars } from "src/types/vars";
 
 export const modal = css`
   .ui.modal {
+    animation: ${animationDown};
     border: 1.5px solid ${themeVars.color.light.border};
 
     > .header {

styles/public/navbar.tsx

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
@@ -13,6 +13,7 @@ export const navbarRight = css`
         align-content: center;
         justify-content: center;
         border: 1px solid ${themeVars.color.light.border};
+        border-radius: ${otherThemeVars.border.radius};
         padding: unset;
         height: 32px;
         min-width: 32px;

styles/public/radius.tsx

@@ -78,8 +78,10 @@ export const radiusImportant = css`
     border-radius: ${otherThemeVars.border.radius} !important;
   }
   // 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
-  .ui.tabular.menu .active.item {
+  .ui.secondary.tabular.menu .item {
     border-radius: ${otherThemeVars.border.radius} !important;
+    &.active,
+    &.active:hover,
     &:hover {
       border-radius: ${otherThemeVars.border.radius} !important;
     }
@@ -113,10 +115,10 @@ export const radiusTop = css`
 
 // 上半部分圆角替换(原CSS带!important)
 export const radiusTopImportant = css`
+  .ui.tabular.menu .item,
   .ui.simple.upward.dropdown {
-    &.active {
+    &.active,
-      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
+    &.active:hover,
-    }
     &:hover {
       border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
     }

styles/public/transition.scss

@@ -1,45 +0,0 @@
-// Made by Luting ^-^
-@keyframes overlay-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-#navbar .item,
-.header-wrapper .ui.tabular.menu .item,
-.job-step-summary,
-.job-step-logs,
-.job-brief-item,
-.tippy-box .flex-items-block .item,
-.clone-panel-tab .item,
-.ui.form select,
-.ui.label,
-.ui.modal,
-.ui.selection.dropdown,
-.ui.checkbox label:before,
-.ui.checkbox input:checked ~ label:before,
-.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
-.ui.selection.active.dropdown,
-.ui.selection.active.dropdown:hover,
-.ui.selection.active.dropdown .menu,
-.ui.selection.active.dropdown:hover .menu,
-.ui.vertical.menu .header.item,
-.ui.secondary.menu .item {
-  transition: 0.12s ease-out;
-}
-
-textarea,
-.ui.form input,
-.menu .item,
-.ui.modal,
-.job-step-summary,
-.job-step-logs,
-.job-brief-item {
-  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
-}

styles/public/transition.tsx

@@ -0,0 +1,49 @@
+import { css } from "src/types/vars";
+
+// 简单的渐变过渡
+export const transition = css`
+  // 迁移的元素
+  #navbar .item,
+  .header-wrapper .ui.tabular.menu .item,
+  .job-step-summary,
+  .job-step-logs,
+  .job-brief-item,
+  .repo-file-cell,
+  .tippy-box .flex-items-block .item,
+  .clone-panel-tab .item,
+  .ui.form select,
+  .ui.label,
+  .ui.modal,
+  .ui.checkbox label:before,
+  .ui.checkbox input:checked ~ label:before,
+  .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
+  .ui.selection.dropdown,
+  .ui.selection.active.dropdown,
+  .ui.selection.active.dropdown:hover,
+  .ui.selection.active.dropdown .menu,
+  .ui.selection.active.dropdown:hover .menu,
+  .ui.vertical.menu .header.item,
+  .ui.secondary.menu .item {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  // Gitea 表单元素原始过渡覆盖
+  input,
+  textarea,
+  tr,
+  .ui.input textarea,
+  .ui.form textarea,
+  .ui.form input:not([type]),
+  .ui.form input[type="date"],
+  .ui.form input[type="datetime-local"],
+  .ui.form input[type="email"],
+  .ui.form input[type="number"],
+  .ui.form input[type="password"],
+  .ui.form input[type="search"],
+  .ui.form input[type="tel"],
+  .ui.form input[type="time"],
+  .ui.form input[type="text"],
+  .ui.form input[type="file"],
+  .ui.form input[type="url"] {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+`;