From 91751e8aa6d4aa51d0bb15141916c634f56d1737 Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sun, 4 Oct 2026 16:17:33 +0200 Subject: [PATCH] Menus: Put the merge method and Update branch menus into one menu component Both menus restyle Forgejo's native dropdown as GitHub's menu of 32px rows without dividers, but one lived in the pull request theme styles and the other in the pull request page stylesheet, written separately. components/common/menu/menu.css now holds both: the shared row rules once, then what differs between an action menu and a single-choice menu with its check mark. Another menu is styled by adding it to the list. No visual change. Co-Authored-By: Claude Opus 5.5 --- components/common/menu/menu.css | 79 +++++++++++++++++++++++++ styles/components/issues/pull_review.ts | 24 -------- styles/pages/pull-request.css | 40 ------------- templates/base/component_assets.tmpl | 1 + 4 files changed, 80 insertions(+), 64 deletions(-) create mode 100644 components/common/menu/menu.css diff --git a/components/common/menu/menu.css b/components/common/menu/menu.css new file mode 100644 index 0000000..6359806 --- /dev/null +++ b/components/common/menu/menu.css @@ -0,0 +1,79 @@ +/* + * Action menu: GitHub's menu of plain 32px rows with no divider lines, applied to menus Forgejo + * renders itself and that cannot take a class. To style another menu, add it to these lists. + * + * Two kinds: an action menu (each row does something) and a single-choice menu (the current + * choice carries a check mark and every row is indented to make room for it). + */ + +/* Action menus */ +.page-content.repository.view.issue.github-pull-review .merge.box .pull-merge-actions .ui.dropdown .menu, +/* Single-choice menus */ +.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu { + padding: 8px; +} + +.page-content.repository.view.issue.github-pull-review .merge.box .pull-merge-actions .ui.dropdown .menu > .item, +.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item { + min-height: 32px; + margin: 0 !important; + border: 0 !important; + border-radius: var(--border-radius); + font-weight: 400; + line-height: 20px; +} + +/* Action menu rows: the merge method menu */ +.page-content.repository.view.issue.github-pull-review .merge.box .pull-merge-actions .ui.dropdown .menu { + min-width: 280px; +} + +.page-content.repository.view.issue.github-pull-review .merge.box .pull-merge-actions .ui.dropdown .menu > .item { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 8px !important; +} + +.page-content.repository.view.issue.github-pull-review .merge.box .pull-merge-actions .ui.dropdown .menu .action-text { + flex: 1; + padding: 0; +} + +.page-content.repository.view.issue.github-pull-review + .merge.box + .pull-merge-actions + .ui.dropdown + .menu + .auto-merge-small { + color: var(--color-text-light-1); +} + +/* Single-choice rows: the "Update branch" menu. It opens 4px below its button, at the group's width. */ +.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu { + top: calc(100% + 4px) !important; + width: max-content; + margin-top: 0 !important; +} + +.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item { + position: relative; + padding: 6px 8px 6px 32px !important; + background: transparent !important; +} + +.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item:hover { + background: var(--github-control-transparent-bgColor-hover) !important; +} + +.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item.active::before { + content: ""; + position: absolute; + top: 8px; + left: 8px; + width: 16px; + height: 16px; + background: currentcolor; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") + center / 16px no-repeat; +} diff --git a/styles/components/issues/pull_review.ts b/styles/components/issues/pull_review.ts index 0bda39a..29cded9 100644 --- a/styles/components/issues/pull_review.ts +++ b/styles/components/issues/pull_review.ts @@ -475,30 +475,6 @@ export default css` padding: 0; justify-content: center; } - /* The merge method menu: plain 32px rows as in GitHub's action menus. */ - & .ui.dropdown .menu { - min-width: 280px; - padding: 8px; - & > .item { - display: flex; - align-items: center; - gap: 8px; - min-height: 32px; - margin: 0 !important; - padding: 6px 8px !important; - border: 0 !important; - border-radius: ${otherThemeVars.border.radius}; - font-weight: 400; - line-height: 20px; - } - & .action-text { - flex: 1; - padding: 0; - } - & .auto-merge-small { - color: ${themeVars.color.text.light.num1}; - } - } /* The expanded form takes the whole row: title, message, then the buttons. */ & > #pull-request-merge-form:has(form .field) { flex: 0 0 100%; diff --git a/styles/pages/pull-request.css b/styles/pages/pull-request.css index 6b9b00f..e670fe3 100644 --- a/styles/pages/pull-request.css +++ b/styles/pages/pull-request.css @@ -54,43 +54,3 @@ .github-pull-review .pull-merge-actions .tw-flex > form { margin: 0 !important; } - -/* - * The "Update branch" menu: GitHub's single-choice menu. It opens 4px below the button instead of - * overlapping it, rows have no divider lines, and the current choice is marked with a check - * instead of a filled row. - */ -.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu { - top: calc(100% + 4px) !important; - margin-top: 0 !important; - width: max-content; - padding: 8px; -} - -.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item { - position: relative; - min-height: 32px; - margin: 0 !important; - padding: 6px 8px 6px 32px !important; - border: 0 !important; - border-radius: var(--border-radius); - background: transparent !important; - font-weight: 400; - line-height: 20px; -} - -.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item:hover { - background: var(--github-control-transparent-bgColor-hover) !important; -} - -.github-pull-review .merge-section .update-button .ui.ui.ui.dropdown > .menu > .item.active::before { - content: ""; - position: absolute; - top: 8px; - left: 8px; - width: 16px; - height: 16px; - background: currentcolor; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") - center / 16px no-repeat; -} diff --git a/templates/base/component_assets.tmpl b/templates/base/component_assets.tmpl index 227336d..c7cf804 100644 --- a/templates/base/component_assets.tmpl +++ b/templates/base/component_assets.tmpl @@ -2,6 +2,7 @@ +