mirror of
https://github.com/go-gitea/gitea
synced 2024-09-10 08:27:04 +02:00
Backport #30849 by wxiaoguang Follow #30345 Follow #30547 Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
parent
e2e326f154
commit
b22d7fd8cd
109
templates/devtest/fomantic-dropdown.tmpl
Normal file
109
templates/devtest/fomantic-dropdown.tmpl
Normal 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 & 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" .}}
|
@ -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 & 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>
|
||||
|
@ -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}}
|
||||
|
@ -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>
|
||||
|
@ -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}}
|
||||
>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 */
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user