codection-admin/gitea
1
0
Fork 0
Code Issues 1 Discussions 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some UI problems (dropdown/container) (#30849) (#30871)

Browse Source 
Backport #30849 by wxiaoguang

Follow #30345
Follow #30547

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot 2024-05-06 15:45:04 +08:00 committed by GitHub
parent e2e326f154
commit b22d7fd8cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

AI 샘플 코드 생성 중입니다

Loading...
13 changed files with 246 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
templates/devtest/fomantic-dropdown.tmpl Normal file
View File

@ -0,0 +1,109 @@
{{template "base/head" .}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
<div class="page-content devtest ui container">
<div>
<h2>Dropdown</h2>
<div>
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
<span class="text">search-input &amp; flex-item in menu</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu flex-items-menu">
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
<div class="item"><input type="radio">item</div>
<div class="item"><input type="radio">item</div>
</div>
</div>
<div class="ui search selection dropdown">
<span class="text">search ...</span>
<input name="value" class="search">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple selection dropdown">
<input class="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">empty multiple dropdown</div>
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple clearable search selection dropdown">
<input type="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">clearable search dropdown</div>
<div class="menu">
<div class="item" data-value="1">item</div>
</div>
</div>
<div class="ui buttons">
<button class="ui button">Button with Dropdown</button>
<div class="ui dropdown button icon">
{{svg "octicon-triangle-down"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
</div>
</div>
<h2>Selection</h2>
<div>
{{/* the "selection" class is optional, it will be added by JS automatically */}}
<select class="ui dropdown selection ellipsis-items-nowrap">
<option>a</option>
<option>abcdefuvwxyz</option>
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
</select>
<select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]">
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
<option>abcdefuvwxyz</option>
<option>a</option>
</select>
</div>
<h2>Dropdown Button (demo only without menu)</h2>
<div>
<div class="ui dropdown mini button">
<span class="text">mini dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown tiny button">
<span class="text">tiny dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui button dropdown">
<span class="text">button dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
<div>
<div class="ui dropdown mini compact button">
<span class="text">mini compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown tiny compact button">
<span class="text">tiny compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui button compact dropdown">
<span class="text">button compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
<div>
<hr>
<div class="ui tiny button">Other button align with ...</div>
<div class="ui dropdown tiny button">
<span class="text">... Dropdown Button</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
</div>
</div>
{{template "base/footer" .}}

88
templates/devtest/gitea-ui.tmpl
View File

@ -180,94 +180,6 @@
<input type="text" placeholder="place holder">
</div>
</div>
<h2>Dropdown with SVG</h2>
<div>
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
<span class="text">search-input &amp; flex-item in menu</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu flex-items-menu">
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
<div class="item"><input type="radio">item</div>
<div class="item"><input type="radio">item</div>
</div>
</div>
<div class="ui search selection dropdown">
<span class="text">search ...</span>
<input name="value" class="search">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple selection dropdown">
<input class="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">empty multiple dropdown</div>
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple clearable search selection dropdown">
<input type="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">clearable search dropdown</div>
<div class="menu">
<div class="item" data-value="1">item</div>
</div>
</div>
<div class="ui buttons">
<button class="ui button">Button with Dropdown</button>
<div class="ui dropdown button icon">
{{svg "octicon-triangle-down"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
</div>
</div>
<div>
<div class="ui dropdown mini button">
<span class="text">mini dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown tiny button">
<span class="text">tiny dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui button dropdown">
<span class="text">button dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
<div>
<div class="ui dropdown mini compact button">
<span class="text">mini compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui dropdown tiny compact button">
<span class="text">tiny compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
<div class="ui button compact dropdown">
<span class="text">button compact</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
<div>
<hr>
<div class="ui tiny button">Button align with ...</div>
<div class="ui dropdown tiny button">
<span class="text">... Dropdown Button</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
</div>
<div>

2
templates/repo/branch_dropdown.tmpl
View File

@ -69,7 +69,7 @@
<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
<div class="ui dropdown custom branch-selector-dropdown">
<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
<div class="ui button branch-dropdown-button">
<span class="flex-text-block gt-ellipsis">
{{if .release}}

4
templates/repo/header.tmpl
View File

@ -128,7 +128,8 @@
{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
</div>
{{end}}
<overflow-menu class="ui container secondary pointing tabular top attached borderless menu tw-pt-0 tw-my-0">
<div class="ui container">
<overflow-menu class="ui secondary pointing menu">
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
<div class="overflow-menu-items">
{{if .Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
@ -230,5 +231,6 @@
</div>
{{end}}
</overflow-menu>
</div>
<div class="ui tabs divider"></div>
</div>

2
templates/repo/issue/branch_selector_field.tmpl
View File

@ -4,7 +4,7 @@
<form method="post" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref" id="update_issueref_form">
{{$.CsrfTokenHtml}}
</form>
<div class="ui dropdown select-branch branch-selector-dropdown {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
<div class="ui dropdown select-branch branch-selector-dropdown ellipsis-items-nowrap {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
data-no-results="{{ctx.Locale.Tr "no_results_found"}}"
{{if not .Issue}}data-for-new-issue="true"{{end}}
>

2
templates/repo/issue/view_content/reference_issue_dialog.tmpl
View File

@ -7,7 +7,7 @@
{{.CsrfTokenHtml}}
<div class="field">
<label><strong>{{ctx.Locale.Tr "repository"}}</strong></label>
<div class="ui search selection dropdown issue_reference_repository_search">
<div class="ui search selection dropdown issue_reference_repository_search ellipsis-items-nowrap">
<div class="default text gt-ellipsis">{{.Repository.FullName}}</div>
<div class="menu"></div>
</div>

2
templates/repo/settings/options.tmpl
View File

@ -345,7 +345,7 @@
<div class="inline field">
{{$unitInternalWiki := .Repository.MustGetUnit ctx ctx.Consts.RepoUnitTypeWiki}}
<label>{{ctx.Locale.Tr "repo.settings.default_wiki_everyone_access"}}</label>
<select name="default_wiki_everyone_access" class="ui dropdown">
<select name="default_wiki_everyone_access" class="ui selection dropdown">
{{/* everyone access mode is different from others, none means it is unset and won't be applied */}}
<option value="none" {{Iif (eq $unitInternalWiki.EveryoneAccessMode 0) "selected"}}>{{ctx.Locale.Tr "settings.permission_not_set"}}</option>
<option value="read" {{Iif (eq $unitInternalWiki.EveryoneAccessMode 1) "selected"}}>{{ctx.Locale.Tr "settings.permission_read"}}</option>

22
web_src/css/base.css
View File

@ -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) {
@ -1346,7 +1343,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 {
@ -1373,3 +1374,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;
}

4
web_src/css/form.css
View File

@ -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;
}

22
web_src/css/modules/container.css
View File

@ -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;
}

6
web_src/css/repo.css
View File

@ -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 */
}

4
web_src/js/components/RepoBranchTagSelector.vue
View File

@ -246,7 +246,7 @@ export function initRepoBranchTagSelector(selector) {
export default sfc; // activate IDE's Vue plugin
</script>
<template>
<div class="ui dropdown custom branch-selector-dropdown">
<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
<div class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
<span class="flex-text-block gt-ellipsis">
<template v-if="release">{{ textReleaseCompare }}</template>
@ -280,7 +280,7 @@ export default sfc; // activate IDE's Vue plugin
<div class="ui label" v-if="item.name===repoDefaultBranch && mode === 'branches'">
{{ textDefaultBranchLabel }}
</div>
<a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon tw-float-right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
<a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
<!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
<svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
</a>

4
web_src/js/features/repo-issue.js
View File

@ -124,8 +124,8 @@ export function initRepoIssueSidebarList() {
return;
}
filteredResponse.results.push({
name: `#${issue.number} ${htmlEscape(issue.title)
}<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`,
name: `<div class="gt-ellipsis">#${issue.number} ${htmlEscape(issue.title)}</div>
<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`,
value: issue.id,
});
});