0
0
mirror of https://github.com/go-gitea/gitea.git synced 2025-04-06 06:15:30 +02:00

Refactor dropdown ellipsis (#34123)

Remove legacy `truncated-item-container` and `truncated-item-name`.
This commit is contained in:
wxiaoguang 2025-04-05 11:21:11 +08:00 committed by GitHub
parent 7a09bc904a
commit ee6929d96b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 117 additions and 129 deletions

View File

@ -75,12 +75,12 @@
<h2>Selection</h2>
<div>
{{/* the "selection" class is optional, it will be added by JS automatically */}}
<select class="ui dropdown selection ellipsis-items-nowrap">
<select class="ui dropdown selection ellipsis-text-items">
<option>a</option>
<option>abcdefuvwxyz</option>
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
</select>
<select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]">
<select class="ui dropdown ellipsis-text-items tw-max-w-[8em]">
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
<option>abcdefuvwxyz</option>
<option>a</option>

View File

@ -10,7 +10,7 @@
<span class="ui inline required field">
<label>{{ctx.Locale.Tr "actions.workflow.from_ref"}}:</label>
</span>
<div class="ui inline field dropdown button select-branch branch-selector-dropdown ellipsis-items-nowrap">
<div class="ui inline field dropdown button select-branch branch-selector-dropdown ellipsis-text-items">
<input type="hidden" name="ref" hx-sync="this:replace" hx-target="#runWorkflowDispatchModalInputs" hx-swap="innerHTML" hx-get="{{$.Link}}/workflow-dispatch-inputs?workflow={{$.CurWorkflow}}" hx-trigger="change" value="refs/heads/{{index .Branches 0}}">
{{svg "octicon-git-branch" 14}}
<div class="default text">{{index .Branches 0}}</div>

View File

@ -46,7 +46,7 @@ Search "repo/branch_dropdown" in the template directory to find all occurrences.
data-enable-feed="{{ctx.RootData.EnableFeed}}"
>
{{/* 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 ellipsis-items-nowrap">
<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
<div class="ui button branch-dropdown-button">
<span class="flex-text-block gt-ellipsis">
{{if not .DropdownFixedText}}

View File

@ -12,23 +12,23 @@
<div id="create-repo-error-message" class="ui negative message tw-text-center tw-hidden"></div>
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection dropdown" id="repo_owner_dropdown">
<div class="ui selection dropdown ellipsis-text-items" id="repo_owner_dropdown">
<input type="hidden" name="uid" value="{{.ContextUser.ID}}">
<span class="text truncated-item-name"></span>
<span class="text"></span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}"
<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}"
{{if not .CanCreateRepoInDoer}}
data-create-repo-disallowed-prompt="{{ctx.Locale.TrN .MaxCreationLimit "repo.form.reach_limit_of_creation_1" "repo.form.reach_limit_of_creation_n" .MaxCreationLimitOfDoer}}"
{{end}}
>
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -14,7 +14,7 @@ Still needs to figure out:
*/}}
{{if and (not .Issue.IsPull) (not .PageIsComparePull)}}
<input id="ref_selector" name="ref" type="hidden" value="{{.Reference}}">
<div class="ui dropdown select-branch branch-selector-dropdown ellipsis-items-nowrap {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
<div class="ui dropdown select-branch branch-selector-dropdown ellipsis-text-items {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
data-no-results="{{ctx.Locale.Tr "no_results_found"}}"
{{if and .Issue (or .IsIssueWriter .HasIssuesOrPullsWritePermission)}}data-url-update-issueref="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref"{{end}}
>

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 ellipsis-items-nowrap">
<div class="ui search selection dropdown issue_reference_repository_search ellipsis-text-items">
<div class="default text gt-ellipsis">{{.Repository.FullName}}</div>
<div class="menu"></div>
</div>

View File

@ -60,22 +60,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -61,22 +61,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -34,22 +34,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar .}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -76,22 +76,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -72,22 +72,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar .}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -74,22 +74,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -71,22 +71,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -74,22 +74,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar .}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -61,22 +61,22 @@
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu" title="{{.SignedUser.Name}}">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
<div class="item" data-value="{{.SignedUser.ID}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>

View File

@ -10,24 +10,24 @@
{{.CsrfTokenHtml}}
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<div class="ui selection owner dropdown ellipsis-text-items">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
<span class="text" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
{{.ContextUser.ShortName 40}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
{{if .CanForkToUser}}
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
{{.SignedUser.ShortName 40}}
</div>
{{end}}
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
<div class="item" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
{{.ShortName 40}}
</div>
{{end}}
</div>
@ -52,10 +52,10 @@
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.fork_branch"}}</label>
<div class="ui selection dropdown ellipsis-items-nowrap">
<div class="ui selection dropdown ellipsis-text-items">
<input type="hidden" id="fork_single_branch" name="fork_single_branch" value="" required>
<div class="text" title="{{ctx.Locale.Tr "repo.all_branches"}}">
<span class="truncated-item-name">{{ctx.Locale.Tr "repo.all_branches"}}</span>
{{ctx.Locale.Tr "repo.all_branches"}}
</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">

View File

@ -4,18 +4,14 @@
{{ctx.Locale.Tr "repo.settings.githooks"}}
</h4>
<div class="ui attached segment">
<div class="ui list">
<div class="item">
{{ctx.Locale.Tr "repo.settings.githooks_desc"}}
</div>
<div class="ui list flex-items-block">
<div class="item"><span>{{ctx.Locale.Tr "repo.settings.githooks_desc"}}</span></div>
{{range .Hooks}}
<div class="item truncated-item-container">
<span class="text {{if .IsActive}}green{{else}}grey{{end}} tw-mr-2">{{svg "octicon-dot-fill" 22}}</span>
<span class="text truncate tw-flex-1 tw-mr-2">{{.Name}}</span>
<a class="muted tw-float-right tw-p-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
{{svg "octicon-pencil"}}
</a>
</div>
<div class="item">
<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill" 22}}</span>
<span class="gt-ellipsis tw-flex-1">{{.Name}}</span>
<a class="muted tw-p-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">{{svg "octicon-pencil"}}</a>
</div>
{{end}}
</div>
</div>

View File

@ -8,14 +8,12 @@
</div>
</h4>
<div class="ui attached segment">
<div class="ui list">
<div class="item">
{{.Description}}
</div>
<div class="ui list flex-items-block">
<div class="item"><span>{{.Description}}</span></div>
{{range .Webhooks}}
<div class="item truncated-item-container">
<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} tw-mr-2">{{svg "octicon-dot-fill" 22}}</span>
<div class="text truncate tw-flex-1 tw-mr-2">
<div class="item">
<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}}">{{svg "octicon-dot-fill" 22}}</span>
<div class="gt-ellipsis tw-flex-1">
<a title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
</div>
<a class="muted tw-p-2" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>

View File

@ -2,32 +2,32 @@
<div class="ui secondary stackable menu">
<div class="item">
<div class="ui floating dropdown jump">
<span class="text truncated-item-container">
<span class="text">
{{ctx.AvatarUtils.Avatar .ContextUser 24 "tw-mr-1"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
<span class="gt-ellipsis">{{.ContextUser.ShortName 40}}</span>
<span class="org-visibility">
{{if .ContextUser.Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .ContextUser.Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon tw-ml-1"}}
</span>
<div class="context user overflow menu">
<div class="menu context-user-switch">
<div class="header">
{{ctx.Locale.Tr "home.switch_dashboard_context"}}
</div>
<div class="scrolling menu items">
<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item truncated-item-container" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
<div class="scrolling menu">
<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
{{ctx.AvatarUtils.Avatar .SignedUser}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
<span class="gt-ellipsis">{{.SignedUser.ShortName 40}}</span>
<span class="org-visibility">
{{if .SignedUser.Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .SignedUser.Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
</span>
</a>
{{range .Orgs}}
<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item truncated-item-container" title="{{.Name}}" href="{{.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item" title="{{.Name}}" href="{{.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
{{ctx.AvatarUtils.Avatar .}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
<span class="gt-ellipsis">{{.ShortName 40}}</span>
<span class="org-visibility">
{{if .Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
{{if .Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}

View File

@ -347,6 +347,7 @@ a.label,
.ui.dropdown .menu > .item {
color: var(--color-text);
line-height: var(--line-height-default);
}
.ui.dropdown .menu > .item:hover {
@ -646,10 +647,11 @@ img.ui.avatar,
border: 1px solid;
}
.ui.floating.dropdown .overflow.menu .scrolling.menu.items {
.ui.dropdown .menu.context-user-switch .scrolling.menu {
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: 1px solid var(--color-secondary);
max-width: 80vw;
}
.user-menu > .item {
@ -1028,11 +1030,6 @@ table th[data-sortt-desc] .svg {
text-align: left;
}
.truncated-item-container {
display: flex !important;
align-items: center;
}
.ellipsis-button {
padding: 0 5px 8px !important;
display: inline-block !important;
@ -1041,15 +1038,6 @@ table th[data-sortt-desc] .svg {
vertical-align: middle !important;
}
.truncated-item-name {
line-height: 2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: -0.5em;
margin-bottom: -0.5em;
}
.precolors {
display: flex;
flex-direction: column;
@ -1166,14 +1154,20 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
margin: 0; /* use gap, but not margin */
}
.ui.dropdown.ellipsis-items-nowrap > .text {
.ui.dropdown.ellipsis-text-items {
/* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */
padding-top: 0;
padding-bottom: 0;
}
.ui.dropdown.ellipsis-text-items > .text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 2.71; /* matches fomantic dropdown's default min-height */
}
.ellipsis-items-nowrap > .item,
.ui.dropdown.ellipsis-items-nowrap .menu > .item {
.ui.dropdown.ellipsis-text-items .menu > .item {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;

View File

@ -216,7 +216,7 @@ export default defineComponent({
});
</script>
<template>
<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
<div tabindex="0" class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible">
<span class="flex-text-block gt-ellipsis">
<template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>