From 7bd414f0d59e08c448ebf93e8b6a6ff81a1d472e Mon Sep 17 00:00:00 2001 From: whereareiam Date: Sat, 3 Oct 2026 13:19:40 +0200 Subject: [PATCH] Controls: Share button sizing and the select across pages Profile, project and package pages restated the 32px button box in their page stylesheets, and the package filters carried the theme's only styled select as profile-specific rules. Those buttons now use theme-control, with a theme-control-wide variant for the 16px padding GitHub keeps on profile pages, and the select moves to components/common/select as theme-select. Page stylesheets keep only layout. The contributing guide states when to use native button classes, theme-control and theme-icon-button, and a test keeps template selects on the shared one. Co-Authored-By: Claude Opus 5.5 --- CONTRIBUTING.md | 17 ++++--- components/common/button/button.css | 4 ++ components/common/select/select.css | 41 +++++++++++++++ components/common/select/select.test.ts | 19 +++++++ styles/pages/profile-subpages.css | 50 +------------------ styles/pages/user-profile.css | 11 ++-- templates/base/component_assets.tmpl | 1 + templates/user/profile_package_versions.tmpl | 6 +-- templates/user/profile_packages.tmpl | 4 +- templates/user/profile_projects.tmpl | 2 +- templates/user/profile_repository_search.tmpl | 4 +- 11 files changed, 91 insertions(+), 68 deletions(-) create mode 100644 components/common/select/select.css create mode 100644 components/common/select/select.test.ts diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8e83fa5..296a401 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -204,10 +204,10 @@ For complex logic, it is recommended to extract it into functions under the `src ### Reuse shared page controls -Use `components/common/*/*.css` for sidebars, search fields, and compact buttons, and `components/common/dropdown/*` for -dropdown variants. `templates/base/head_navbar.tmpl` loads the shared styles and controllers for all pages. Keep page -layout rules in the page stylesheet and pass the page's existing routes, permissions, and form values into the shared -controls. +Use `components/common/*/*.css` for sidebars, search fields, selects, and compact buttons, and +`components/common/dropdown/*` for dropdown variants. `templates/base/head_navbar.tmpl` loads the shared styles and +controllers for all pages. Keep page layout rules in the page stylesheet and pass the page's existing routes, +permissions, and form values into the shared controls. - **Sidebar:** add `theme-sidebar-layout` and a unique `data-theme-sidebar` storage key to the page, then use `theme-sidebar`, `theme-sidebar-content`, and `theme-sidebar-main` for its children. Include @@ -229,8 +229,13 @@ controls. native checkboxes, and action menus omit selection indicators. The controller handles Escape, outside clicks, and opening one menu at a time. See `components/repository/filter/filter`, `components/repository/sort/sort`, and `org/action_menu_items`. -- **Buttons:** add `theme-control` for standard 32px controls or `theme-control-small` for 28px controls. Keep native - `primary`, `secondary`, and permission checks on actions. +- **Buttons:** keep Forgejo's native `ui button` classes on buttons Forgejo already renders; the theme styles those + globally. For a button the theme adds, use `button theme-control` (32px, 12px inline padding) instead of sizing it in + a page stylesheet, with `theme-control-wide` for the 16px padding GitHub uses on profile pages or + `theme-control-small` for 28px controls. Use `theme-icon-button` only for icon-only controls. Keep native `primary`, + `secondary`, and permission checks on actions, and leave page stylesheets to layout such as `flex` and `order`. +- **Select:** wrap a native ` + {{if eq .PackageDescriptor.Package.Type "container"}} - {{$isTagged := or (eq .Tagged "") (eq .Tagged "tagged")}} {{end}} - +
diff --git a/templates/user/profile_packages.tmpl b/templates/user/profile_packages.tmpl index e93b152..a82b212 100644 --- a/templates/user/profile_packages.tmpl +++ b/templates/user/profile_packages.tmpl @@ -5,14 +5,14 @@
{{template "components/common/search/search" dict "Kind" "plain" "Value" .Query "Placeholder" (ctx.Locale.Tr "search.package_kind")}} - {{range $type := .AvailableTypes}} {{$type.Name}} {{end}} - +
{{end}} diff --git a/templates/user/profile_projects.tmpl b/templates/user/profile_projects.tmpl index 2a8ffb9..129bafe 100644 --- a/templates/user/profile_projects.tmpl +++ b/templates/user/profile_projects.tmpl @@ -12,7 +12,7 @@ {{ctx.Locale.PrettyNumber .ClosedCount}} {{ctx.Locale.Tr "repo.issues.closed_title"}}
- {{ctx.Locale.Tr "repo.projects.new"}} + {{ctx.Locale.Tr "repo.projects.new"}} {{end}} diff --git a/templates/user/profile_repository_search.tmpl b/templates/user/profile_repository_search.tmpl index 63d3863..53ceb4d 100644 --- a/templates/user/profile_repository_search.tmpl +++ b/templates/user/profile_repository_search.tmpl @@ -5,12 +5,12 @@ {{if .Org}}{{else if .TabName}}{{end}} {{$placeholder := ctx.Locale.Tr "search.repo_kind"}}{{if .Org}}{{$placeholder = "Find a repository…"}}{{end}} {{template "components/common/search/search" dict "Kind" "plain" "Class" "profile-repo-query" "Value" .Keyword "Placeholder" $placeholder "Label" (ctx.Locale.Tr "search.repo_kind")}} - {{if .PageIsProfileStarList}}{{end}} + {{if .PageIsProfileStarList}}{{end}} {{template "components/repository/filter/filter" .}} {{template "components/repository/sort/sort" dict "Data" .}} {{if and .IsSigned (eq .SignedUserID .ContextUser.ID) (eq .TabName "repositories")}} - {{svg "octicon-repo" 16}}{{ctx.Locale.Tr "new_repo.link"}} + {{svg "octicon-repo" 16}}{{ctx.Locale.Tr "new_repo.link"}} {{end}} {{if .Org}}{{template "org/repository_actions" .}}{{end}}