Align sidebar gears to the right (#33721)

Currently, the issue/pr sidebar is hard to read visually. One of the
reason is that the gear icons make reading difficult because they are
"in the way" when reading, and not aligned together.

This PR proposes to align them on the right.

Actions are also better highlighted this way.

## Screenshots

### Issue

| Before this PR | After this PR |
| --- | --- |
| <img width="322" alt="Capture d’écran 2025-02-25 à 19 59 39"
src="https://github.com/user-attachments/assets/efdd13af-7b22-4f2b-8e65-dd17d6f3ffad"
/> | <img width="322" alt="Capture d’écran 2025-02-25 à 19 58 56"
src="https://github.com/user-attachments/assets/eeacc3f4-5e2c-4558-a4b3-0f1ab4742107"
/> |

### Pull Request


| Before this PR | After this PR |
| --- | --- |
| <img width="322" alt="Capture d’écran 2025-02-25 à 20 16 12"
src="https://github.com/user-attachments/assets/c274b58b-ad50-4ad8-b3da-91dbabd1b120"
/> | <img width="322" alt="Capture d’écran 2025-02-25 à 20 15 54"
src="https://github.com/user-attachments/assets/ecfd6d60-a525-4767-872d-2ef84030d81e"
/> |

Signed-off-by: Quentin Guidée <quentin.guidee@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
pull/33735/head
Quentin 2025-02-26 23:03:23 +01:00 committed by GitHub
parent 6c5951dabd
commit 793c0e1fa6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 8 deletions

View File

@ -6,7 +6,7 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="assignee_ids" type="hidden" value="{{$data.SelectedAssigneeIDs}}">
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>

View File

@ -4,7 +4,7 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>

View File

@ -6,7 +6,7 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="milestone_id" type="hidden" value="{{$data.SelectedMilestoneID}}">
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>

View File

@ -6,7 +6,7 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="project_id" type="hidden" value="{{$data.SelectedProjectID}}">
<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>

View File

@ -6,7 +6,7 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
<div class="ui dropdown {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
<div class="ui dropdown text-flex-grow {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
<a class="text muted">
<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
</a>

View File

@ -2,10 +2,12 @@
{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
<div class="divider"></div>
<div>
<div class="ui dropdown jump">
<div class="ui dropdown text-flex-grow jump">
<a class="text muted">
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{svg "octicon-gear"}}
{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
<div>
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
</div>
{{svg "octicon-gear"}}
</a>
<div class="menu">
<a class="item issue-set-time-estimate show-modal" data-modal="#issue-time-set-estimate-modal">

View File

@ -1188,3 +1188,13 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.ui.dropdown.text-flex-grow {
display: flex;
}
.ui.dropdown.text-flex-grow > .text {
display: flex;
flex-grow: 1;
justify-content: space-between;
}