diff --git a/CHANGELOG.md b/CHANGELOG.md index ecf0b1d..393487e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ##### 更符合 GitHub 风格 +- 修复并同步工单或 PR 详细页面下的标签菜单样式 #19 - 同步页脚样式 - 优化创建标签菜单的菜单项的样式 diff --git a/styles/components/issue.ts b/styles/components/issue.ts index bce6b14..e2ce9b5 100644 --- a/styles/components/issue.ts +++ b/styles/components/issue.ts @@ -547,6 +547,7 @@ export const issueSidebar = css` .page-content.repository.issue { .issue-content { gap: 24px; + // 侧边栏 .issue-content-right { border: 0; font-size: 12px; @@ -596,6 +597,49 @@ export const issueSidebar = css` margin-top: 0 !important; margin-bottom: 0 !important; } + // 标签菜单项 + .ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) { + // 修复标签菜单中描述文本过长没有换行挤掉标签的问题 + display: grid !important; + grid-template-columns: auto auto 1fr; + row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\]) + // 如果是归档标签则隐藏 + &.tw-hidden { + display: none !important; + } + // 默认隐藏多余信息避免标签对齐问题 + .item-secondary-info { + display: none; + grid-column: 2 / -1; // 从第2列对齐 + color: ${themeVars.color.text.light.num1}; + > .tw-pl-\\\[20px\\\] { + // 已经与第二列对齐, 不需要额外的 padding + padding-left: 0px !important; + padding-top: 4px; + // 显示全部描述信息与 Github 保持一致 + white-space: normal; + small { + font-size: 12px; + } + } + > .archived-label-hint { + // 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item) + top: 6px; + right: 8px; + } + // 如果有描述信息则显示 + &:has(.tw-pl-\\\[20px\\\]) { + display: block; + > .archived-label-hint { + top: 4px; // 有描述信息的归档标签与标签对齐需要更高点 + } + } + // 如果有归档标签则显示 + &:has(.archived-label-hint > .ui.label) { + display: block; + } + } + } } // 时间追踪 > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted { diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index 17aca0b..29800ec 100644 --- a/styles/public/dropdown.ts +++ b/styles/public/dropdown.ts @@ -17,6 +17,7 @@ export const dropdown = css` > .item:not(.tw-hidden) { display: flex !important; align-items: center; + align-content: center; padding: 6px 8px !important; border-radius: ${otherThemeVars.border.radius} !important; gap: 4px; @@ -25,6 +26,10 @@ export const dropdown = css` } &:not(.emoji):first-of-type { margin-top: 8px; + // 工单详细页面的标签菜单中的清除选中标签按钮 + &.clear-selection { + margin-top: 0px; + } } // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 &.cherry-pick-button, @@ -224,7 +229,8 @@ export const selectionDropdown = css` // 创建仓库页面的标签选择框 .ui.search.selection.dropdown { > .menu > .item { - flex-wrap: wrap; + flex-direction: column; + align-items: flex-start; > i { color: ${themeVars.color.text.light.num1}; }