From eda10cc2bb229a6b13ace76caea118384b381429 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 6 May 2024 15:17:22 +0800 Subject: [PATCH] Fix some UI problems (dropdown/container) (#30849) Follow #30345 Follow #30547 `ellipsis` / `white-space` shouldn't be put on the general dropdown components. --- templates/devtest/fomantic-dropdown.tmpl | 109 +++++++++++ templates/devtest/gitea-ui.tmpl | 88 --------- templates/repo/branch_dropdown.tmpl | 2 +- templates/repo/header.tmpl | 184 +++++++++--------- .../repo/issue/branch_selector_field.tmpl | 2 +- .../view_content/reference_issue_dialog.tmpl | 2 +- templates/repo/settings/options.tmpl | 2 +- web_src/css/base.css | 22 ++- web_src/css/form.css | 4 + web_src/css/modules/container.css | 22 +-- web_src/css/repo.css | 6 + .../js/components/RepoBranchTagSelector.vue | 4 +- web_src/js/features/repo-issue.js | 4 +- 13 files changed, 246 insertions(+), 205 deletions(-) create mode 100644 templates/devtest/fomantic-dropdown.tmpl diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl new file mode 100644 index 000000000..57a7c1313 --- /dev/null +++ b/templates/devtest/fomantic-dropdown.tmpl @@ -0,0 +1,109 @@ +{{template "base/head" .}} + +
+
+

Dropdown

+
+
+ search-input & flex-item in menu + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
{{svg "octicon-search"}}
+
item
+
item
+
+
+
+ search ... + + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} +
+
item
+
+
+
+ + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} +
empty multiple dropdown
+
+
item
+
+
+
+ + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} +
clearable search dropdown
+
+
item
+
+
+
+ +
+ {{svg "octicon-triangle-down"}} +
+
item
+
+
+
+
+ +

Selection

+
+ {{/* the "selection" class is optional, it will be added by JS automatically */}} + + +
+

Dropdown Button (demo only without menu)

+
+
+ mini dropdown + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+ tiny dropdown + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+ button dropdown + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+ +
+
+ mini compact + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+ tiny compact + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+ button compact + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+ +
+
+
Other button align with ...
+
+ ... Dropdown Button + {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+
+
+
+{{template "base/footer" .}} diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 3b13c13be..ea293fd3b 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -180,94 +180,6 @@ - -

Dropdown with SVG

-
-
- search-input & flex-item in menu - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
{{svg "octicon-search"}}
-
item
-
item
-
-
-
- search ... - - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - {{svg "octicon-x" 14 "remove icon"}} -
-
item
-
-
-
- - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - {{svg "octicon-x" 14 "remove icon"}} -
empty multiple dropdown
-
-
item
-
-
-
- - {{svg "octicon-triangle-down" 14 "dropdown icon"}} - {{svg "octicon-x" 14 "remove icon"}} -
clearable search dropdown
-
-
item
-
-
-
- -
- {{svg "octicon-triangle-down"}} -
-
item
-
-
-
-
- -
-
- mini dropdown - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
- tiny dropdown - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
- button dropdown - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
- -
-
- mini compact - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
- tiny compact - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
- button compact - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
- -
-
-
Button align with ...
-
- ... Dropdown Button - {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
-
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index 8f58826c6..c4f73875f 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -69,7 +69,7 @@
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}} -
+
{{if .release}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index c0d833a18..34f47b7d8 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -128,107 +128,109 @@ {{if .IsGenerated}}
{{ctx.Locale.Tr "repo.generated_from"}} {{(.TemplateRepo ctx).FullName}}
{{end}}
{{end}} - - {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} -
- {{if .Permission.CanRead ctx.Consts.RepoUnitTypeCode}} - - {{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}} - - {{end}} - - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeIssues}} - - {{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues"}} - {{if .Repository.NumOpenIssues}} - {{CountFmt .Repository.NumOpenIssues}} - {{end}} +
+ + {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} +
+ {{if .Permission.CanRead ctx.Consts.RepoUnitTypeCode}} + + {{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}} - {{end}} - - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalTracker}} - - {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.issues"}} - - {{end}} - - {{if and .Repository.CanEnablePulls (.Permission.CanRead ctx.Consts.RepoUnitTypePullRequests)}} - - {{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.pulls"}} - {{if .Repository.NumOpenPulls}} - {{CountFmt .Repository.NumOpenPulls}} - {{end}} - - {{end}} - - {{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeActions)}} - - {{svg "octicon-play"}} {{ctx.Locale.Tr "actions.actions"}} - {{if .Repository.NumOpenActionRuns}} - {{CountFmt .Repository.NumOpenActionRuns}} - {{end}} - - {{end}} - - {{if .Permission.CanRead ctx.Consts.RepoUnitTypePackages}} - - {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} - - {{end}} - - {{$projectsUnit := .Repository.MustGetUnit $.Context ctx.Consts.RepoUnitTypeProjects}} - {{if and (not .UnitProjectsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeProjects) ($projectsUnit.ProjectsConfig.IsProjectsAllowed "repo")}} - - {{svg "octicon-project"}} {{ctx.Locale.Tr "repo.project_board"}} - {{if .Repository.NumOpenProjects}} - {{CountFmt .Repository.NumOpenProjects}} - {{end}} - - {{end}} - - {{if and (.Permission.CanRead ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} - - {{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.releases"}} - {{if .NumReleases}} - {{CountFmt .NumReleases}} {{end}} - - {{end}} - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}} - - {{svg "octicon-book"}} {{ctx.Locale.Tr "repo.wiki"}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeIssues}} + + {{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues"}} + {{if .Repository.NumOpenIssues}} + {{CountFmt .Repository.NumOpenIssues}} + {{end}} + + {{end}} + + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalTracker}} + + {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.issues"}} + + {{end}} + + {{if and .Repository.CanEnablePulls (.Permission.CanRead ctx.Consts.RepoUnitTypePullRequests)}} + + {{svg "octicon-git-pull-request"}} {{ctx.Locale.Tr "repo.pulls"}} + {{if .Repository.NumOpenPulls}} + {{CountFmt .Repository.NumOpenPulls}} + {{end}} + + {{end}} + + {{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeActions)}} + + {{svg "octicon-play"}} {{ctx.Locale.Tr "actions.actions"}} + {{if .Repository.NumOpenActionRuns}} + {{CountFmt .Repository.NumOpenActionRuns}} + {{end}} + + {{end}} + + {{if .Permission.CanRead ctx.Consts.RepoUnitTypePackages}} + + {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} + + {{end}} + + {{$projectsUnit := .Repository.MustGetUnit $.Context ctx.Consts.RepoUnitTypeProjects}} + {{if and (not .UnitProjectsGlobalDisabled) (.Permission.CanRead ctx.Consts.RepoUnitTypeProjects) ($projectsUnit.ProjectsConfig.IsProjectsAllowed "repo")}} + + {{svg "octicon-project"}} {{ctx.Locale.Tr "repo.project_board"}} + {{if .Repository.NumOpenProjects}} + {{CountFmt .Repository.NumOpenProjects}} + {{end}} + + {{end}} + + {{if and (.Permission.CanRead ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} + + {{svg "octicon-tag"}} {{ctx.Locale.Tr "repo.releases"}} + {{if .NumReleases}} + {{CountFmt .NumReleases}} + {{end}} - {{end}} + {{end}} - {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalWiki}} - - {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.wiki"}} - - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}} + + {{svg "octicon-book"}} {{ctx.Locale.Tr "repo.wiki"}} + + {{end}} - {{if and (.Permission.CanReadAny ctx.Consts.RepoUnitTypePullRequests ctx.Consts.RepoUnitTypeIssues ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} - - {{svg "octicon-pulse"}} {{ctx.Locale.Tr "repo.activity"}} - - {{end}} + {{if .Permission.CanRead ctx.Consts.RepoUnitTypeExternalWiki}} + + {{svg "octicon-link-external"}} {{ctx.Locale.Tr "repo.wiki"}} + + {{end}} - {{template "custom/extra_tabs" .}} + {{if and (.Permission.CanReadAny ctx.Consts.RepoUnitTypePullRequests ctx.Consts.RepoUnitTypeIssues ctx.Consts.RepoUnitTypeReleases) (not .IsEmptyRepo)}} + + {{svg "octicon-pulse"}} {{ctx.Locale.Tr "repo.activity"}} + + {{end}} - {{if .Permission.IsAdmin}} - + {{template "custom/extra_tabs" .}} + + {{if .Permission.IsAdmin}} + + + {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} + + {{end}} +
+ {{else if .Permission.IsAdmin}} +
{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} - {{end}} -
- {{else if .Permission.IsAdmin}} -
- - {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} - -
- {{end}} - +
+ {{end}} + +
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index e9e5574cd..cbf7929fd 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -4,7 +4,7 @@
{{$.CsrfTokenHtml}}
-
diff --git a/templates/repo/issue/view_content/reference_issue_dialog.tmpl b/templates/repo/issue/view_content/reference_issue_dialog.tmpl index c7a471f55..d6c908100 100644 --- a/templates/repo/issue/view_content/reference_issue_dialog.tmpl +++ b/templates/repo/issue/view_content/reference_issue_dialog.tmpl @@ -7,7 +7,7 @@ {{.CsrfTokenHtml}}
-
+
{{.Repository.FullName}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 40617021d..b94c202f1 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -345,7 +345,7 @@
{{$unitInternalWiki := .Repository.MustGetUnit ctx ctx.Consts.RepoUnitTypeWiki}} - {{/* everyone access mode is different from others, none means it is unset and won't be applied */}} diff --git a/web_src/css/base.css b/web_src/css/base.css index c0ced2955..412d9094e 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -342,8 +342,6 @@ a.label, .ui.dropdown .menu > .item { color: var(--color-text); - overflow: hidden; - text-overflow: ellipsis; } .ui.dropdown .menu > .item:hover { @@ -374,7 +372,6 @@ a.label, .ui.selection.dropdown .menu > .item { border-color: var(--color-secondary); - white-space: nowrap; } .ui.selection.visible.dropdown > .text:not(.default) { @@ -1342,7 +1339,11 @@ table th[data-sortt-desc] .svg { align-items: center; gap: .25rem; vertical-align: middle; - min-width: 0; + min-width: 0; /* make ellipsis work */ +} + +.ui.ui.dropdown.selection { + min-width: 14em; /* match the default min width */ } .ui.dropdown .ui.label .svg { @@ -1369,3 +1370,16 @@ table th[data-sortt-desc] .svg { gap: .5rem; min-width: 0; } + +.ui.dropdown.ellipsis-items-nowrap > .text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.ellipsis-items-nowrap > .item, +.ui.dropdown.ellipsis-items-nowrap .menu > .item { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} diff --git a/web_src/css/form.css b/web_src/css/form.css index 7479af0c4..66ead3276 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -448,6 +448,10 @@ textarea:focus, } } +.ui.form .field > .selection.dropdown { + min-width: 14em; /* matches the default min width */ +} + .new.webhook form .help { margin-left: 25px; } diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css index 9f67ceb8d..c9df6ab3f 100644 --- a/web_src/css/modules/container.css +++ b/web_src/css/modules/container.css @@ -2,26 +2,20 @@ unused rules here after refactoring, please remove them. */ .ui.container { - display: block; - max-width: 100%; -} - -.ui.fluid.container { - width: 100%; -} - -.ui[class*="center aligned"].container { - text-align: center; -} - -/* overwrite width of containers inside the main page content div (div with class "page-content") */ -.page-content .ui.ui.ui.container:not(.fluid) { width: 1280px; max-width: calc(100% - calc(2 * var(--page-margin-x))); margin-left: auto; margin-right: auto; } +.ui.fluid.container { + width: 100%; +} + .ui.container.fluid.padded { padding: 0 var(--page-margin-x); } + +.ui[class*="center aligned"].container { + text-align: center; +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 7695b632b..f02b2b757 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2860,6 +2860,10 @@ tbody.commit-list { margin-top: 4px; } +.ui.dropdown.branch-selector-dropdown .scrolling.menu { + max-width: min(400px, 90vw); +} + .branch-selector-dropdown .branch-dropdown-button { margin: 0; max-width: 340px; @@ -2909,6 +2913,8 @@ tbody.commit-list { } .branch-selector-dropdown .menu .item .rss-icon { + position: absolute; + right: 4px; visibility: hidden; /* only show RSS icon on hover */ } diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index 8a741b68d..87530225e 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -246,7 +246,7 @@ export function initRepoBranchTagSelector(selector) { export default sfc; // activate IDE's Vue plugin