Skip to content

Menus: Put the merge method and Update branch menus into one menu component #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
whereareiam merged 1 commit into from
Oct 4, 2026
Merged

Menus: Put the merge method and Update branch menus into one menu component #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions components/common/menu/menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
24 changes: 0 additions & 24 deletions styles/components/issues/pull_review.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
40 changes: 0 additions & 40 deletions styles/pages/pull-request.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
1 change: 1 addition & 0 deletions templates/base/component_assets.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/counter/counter.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/empty/empty.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/list-heading/list-heading.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/menu/menu.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/search/search.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/select/select.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/switch/switch.css">
Expand Down
Loading