Skip to content

Commit a3d9f0d

Browse files
silverwindwxiaoguangGiteaBot
authored
Fix all rounded borders, change affected tab menus to pills (#30707)
Fixes #30673, all 23 issues. Notes: - Tab bar menus had to change to pills because of unsolvable issue with the border-radius as tab bar renders a overlapping border onto the box below. And I think pills look better. - Added padding to code editor empty preview message - Hide monaco's built-in blue focus border, we don't need it and it never showed before either. - Label add menu is simplified, removing the nested segment. <img width="1322" alt="Screenshot 2024-04-25 at 22 26 19" src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1"> <img width="1326" alt="Screenshot 2024-04-25 at 22 28 00" src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65"> <img width="997" alt="Screenshot 2024-04-25 at 22 36 53" src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae"> <img width="832" alt="Screenshot 2024-04-25 at 22 56 09" src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c"> <img width="361" alt="Screenshot 2024-04-25 at 22 57 12" src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c"> --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 4daea7c commit a3d9f0d

25 files changed

+107
-68
lines changed

‎routers/web/repo/editor.go

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -419,11 +419,9 @@ func DiffPreviewPost(ctx *context.Context) {
419419
return
420420
}
421421

422-
if diff.NumFiles == 0 {
423-
ctx.PlainText(http.StatusOK, ctx.Locale.TrString("repo.editor.no_changes_to_show"))
424-
return
422+
if diff.NumFiles != 0 {
423+
ctx.Data["File"] = diff.Files[0]
425424
}
426-
ctx.Data["File"] = diff.Files[0]
427425

428426
ctx.HTML(http.StatusOK, tplEditDiffPreview)
429427
}

‎templates/org/team/members.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="ui ten wide column">
99
{{template "org/team/navbar" .}}
1010
{{if .IsOrganizationOwner}}
11-
<div class="ui attached segment">
11+
<div class="ui top attached segment">
1212
<form class="ui form ignore-dirty tw-flex tw-flex-wrap tw-gap-2" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/add" method="post">
1313
{{.CsrfTokenHtml}}
1414
<input type="hidden" name="uid" value="{{.SignedUser.ID}}">
@@ -21,7 +21,7 @@
2121
</form>
2222
</div>
2323
{{end}}
24-
<div class="ui attached segment">
24+
<div class="ui{{if not .IsOrganizationOwner}} top{{end}} attached segment">
2525
<div class="flex-list">
2626
{{range .Team.Members}}
2727
<div class="flex-item tw-items-center">

‎templates/org/team/navbar.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ui top attached tabular menu org-team-navbar">
1+
<div class="ui compact small menu small-menu-items org-team-navbar">
22
<a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}">{{svg "octicon-person"}} <strong>{{.Team.NumMembers}}</strong>&nbsp; {{ctx.Locale.Tr "org.lower_members"}}</a>
33
<a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/repositories">{{svg "octicon-repo"}} <strong>{{.Team.NumRepos}}</strong>&nbsp; {{ctx.Locale.Tr "org.lower_repositories"}}</a>
44
</div>

‎templates/org/team/repositories.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</div>
2626
</div>
2727
{{end}}
28-
<div class="ui attached segment">
28+
<div class="ui{{if not $canAddRemove}} top{{end}} attached segment">
2929
<div class="flex-list">
3030
{{range .Team.Repos}}
3131
<div class="flex-item tw-items-center">

‎templates/repo/commit_page.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
{{end}}
140140
{{template "repo/commit_load_branches_and_tags" .}}
141141
</div>
142-
<div class="ui attached segment tw-flex tw-items-center tw-justify-between tw-py-1 commit-header-row tw-flex-wrap {{$class}}">
142+
<div class="ui{{if not .Commit.Signature}} bottom{{end}} attached segment tw-flex tw-items-center tw-justify-between tw-py-1 commit-header-row tw-flex-wrap {{$class}}">
143143
<div class="tw-flex tw-items-center author">
144144
{{if .Author}}
145145
{{ctx.AvatarUtils.Avatar .Author 28 "tw-mr-2"}}

‎templates/repo/editor/diff_preview.tmpl

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
{{if .File}}
12
<div class="diff-file-box">
23
<div class="ui attached table segment">
34
<div class="file-body file-code code-diff code-diff-unified unicode-escaped">
@@ -9,3 +10,8 @@
910
</div>
1011
</div>
1112
</div>
13+
{{else}}
14+
<div class="tw-p-6 tw-text-center">
15+
{{ctx.Locale.Tr "repo.editor.no_changes_to_show"}}
16+
</div>
17+
{{end}}

‎templates/repo/editor/edit.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,25 @@
2626
</div>
2727
</div>
2828
<div class="field">
29-
<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
29+
<div class="ui compact small menu small-menu-items repo-editor-menu">
3030
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
3131
<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
3232
{{if not .IsNewFile}}
3333
<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
3434
{{end}}
3535
</div>
36-
<div class="ui bottom attached active tab segment" data-tab="write">
36+
<div class="ui active tab segment tw-rounded" data-tab="write">
3737
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
3838
data-url="{{.Repository.Link}}/markup"
3939
data-context="{{.RepoLink}}"
4040
data-previewable-extensions="{{.PreviewableExtensions}}"
4141
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
4242
<div class="editor-loading is-loading"></div>
4343
</div>
44-
<div class="ui bottom attached tab segment markup" data-tab="preview">
44+
<div class="ui tab segment markup tw-rounded" data-tab="preview">
4545
{{ctx.Locale.Tr "loading"}}
4646
</div>
47-
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
47+
<div class="ui tab segment diff edit-diff" data-tab="diff">
4848
<div class="tw-p-16"></div>
4949
</div>
5050
</div>

‎templates/repo/editor/patch.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
</div>
2020
</div>
2121
<div class="field">
22-
<div class="ui top attached tabular menu" data-write="write">
22+
<div class="ui compact small menu small-menu-items repo-editor-menu">
2323
<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
2424
</div>
25-
<div class="ui bottom attached active tab segment" data-tab="write">
25+
<div class="ui active tab segment tw-rounded tw-p-0" data-tab="write">
2626
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-patch"
2727
data-context="{{.RepoLink}}"
2828
data-line-wrap-extensions="{{.LineWrapExtensions}}">

‎templates/repo/issue/labels/label_load_template.tmpl

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<div class="ui centered grid">
22
<div class="twelve wide computer column">
3-
<div class="ui attached left aligned segment">
4-
<p>{{ctx.Locale.Tr "repo.issues.label_templates.info"}}</p>
5-
<br>
6-
<form class="ui form center" action="{{.Link}}/initialize" method="post">
7-
{{.CsrfTokenHtml}}
8-
<div class="field">
9-
<div class="ui selection dropdown">
10-
<input type="hidden" name="template_name" value="Default">
11-
<div class="default text">{{ctx.Locale.Tr "repo.issues.label_templates.helper"}}</div>
12-
<div class="menu">
13-
{{range .LabelTemplateFiles}}
14-
<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><i>({{.Description}})</i></div>
15-
{{end}}
16-
</div>
17-
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
3+
<p>{{ctx.Locale.Tr "repo.issues.label_templates.info"}}</p>
4+
<form class="ui form center" action="{{.Link}}/initialize" method="post">
5+
{{.CsrfTokenHtml}}
6+
<div class="field">
7+
<div class="ui selection dropdown">
8+
<input type="hidden" name="template_name" value="Default">
9+
<div class="default text">{{ctx.Locale.Tr "repo.issues.label_templates.helper"}}</div>
10+
<div class="menu">
11+
{{range .LabelTemplateFiles}}
12+
<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><i>({{.Description}})</i></div>
13+
{{end}}
1814
</div>
15+
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
1916
</div>
20-
<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.label_templates.use"}}</button>
21-
</form>
22-
</div>
17+
</div>
18+
<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.label_templates.use"}}</button>
19+
</form>
2320
</div>
2421
</div>

‎templates/repo/tag/list.tmpl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<div class="ui container">
55
{{template "base/alert" .}}
66
{{template "repo/release_tag_header" .}}
7+
{{if .Releases}}
78
<h4 class="ui top attached header">
89
<div class="five wide column tw-flex tw-items-center">
910
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.tags"}}
@@ -57,6 +58,7 @@
5758
</tbody>
5859
</table>
5960
</div>
61+
{{end}}
6062

6163
{{template "base/paginate" .}}
6264
</div>

‎templates/user/notification/notification_subscriptions.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{{template "base/head" .}}
22
<div role="main" aria-label="{{.Title}}" class="page-content user notification">
33
<div class="ui container">
4-
<div class="ui top attached tabular menu">
4+
<div class="ui compact small menu small-menu-items">
55
<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
66
{{ctx.Locale.Tr "notification.subscriptions"}}
77
</a>
88
<a href="{{AppSubUrl}}/notifications/watching" class="{{if eq .Status 2}}active {{end}}item">
99
{{ctx.Locale.Tr "notification.watching"}}
1010
</a>
1111
</div>
12-
<div class="ui bottom attached active tab segment">
12+
<div class="ui top attached segment">
1313
{{if eq .Status 1}}
1414
<div class="tw-flex tw-justify-between">
1515
<div class="tw-flex">

‎templates/user/settings/account.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
{{end}}
112112
</div>
113113
</div>
114-
<div class="ui attached bottom segment">
114+
<div class="ui bottom attached segment">
115115
<form class="ui form" action="{{AppSubUrl}}/user/settings/account/email" method="post">
116116
{{.CsrfTokenHtml}}
117117
<div class="required field {{if .Err_Email}}error{{end}}">

‎templates/user/settings/applications.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
{{end}}
5050
</div>
5151
</div>
52-
<div class="ui attached bottom segment">
52+
<div class="ui bottom attached segment">
5353
<h5 class="ui top header">
5454
{{ctx.Locale.Tr "settings.generate_new_token"}}
5555
</h5>

‎templates/user/settings/applications_oauth2_edit_form.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</form>
3131
</div>
3232
</div>
33-
<div class="ui attached bottom segment">
33+
<div class="ui bottom attached segment">
3434
<form class="ui form ignore-dirty" action="{{.FormActionPath}}" method="post">
3535
{{.CsrfTokenHtml}}
3636
<div class="field {{if .Err_AppName}}error{{end}}">

‎templates/user/settings/applications_oauth2_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</div>
4848
</div>
4949

50-
<div class="ui attached bottom segment">
50+
<div class="ui bottom attached segment">
5151
<h5 class="ui top header">
5252
{{ctx.Locale.Tr "settings.create_oauth2_application"}}
5353
</h5>

‎templates/user/settings/security/openid.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
{{end}}
3939
</div>
4040
</div>
41-
<div class="ui attached bottom segment">
41+
<div class="ui bottom attached segment">
4242
<form class="ui form" action="{{AppSubUrl}}/user/settings/security/openid" method="post">
4343
{{.CsrfTokenHtml}}
4444
<div class="required field {{if .Err_OpenID}}error{{end}}">

‎web_src/css/features/codeeditor.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
background-color: transparent !important;
2222
}
2323

24+
.monaco-editor,
25+
.monaco-editor .overflow-guard {
26+
border-radius: var(--border-radius);
27+
}
28+
2429
/* these seem unthemeable */
2530
.monaco-scrollable-element > .scrollbar > .slider {
2631
background: var(--color-primary) !important;

‎web_src/css/modules/card.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
border: 1px solid var(--color-secondary);
2222
box-shadow: none;
2323
word-wrap: break-word;
24+
border-radius: var(--border-radius);
2425
}
2526

2627
.ui.card {

‎web_src/css/modules/menu.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -799,3 +799,23 @@
799799
.ui.segment .ui.tabular.menu .active.item:hover {
800800
background: var(--color-box-body);
801801
}
802+
803+
.small-menu-items {
804+
min-height: 35.4px !important; /* match .small.button in height */
805+
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
806+
user-select: none;
807+
}
808+
809+
.small-menu-items .item {
810+
background: var(--color-menu) !important;
811+
padding-top: 6px !important;
812+
padding-bottom: 6px !important;
813+
}
814+
815+
.small-menu-items .item:hover {
816+
background: var(--color-hover) !important;
817+
}
818+
819+
.small-menu-items .item.active {
820+
background: var(--color-active) !important;
821+
}

‎web_src/css/modules/modal.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ These inconsistent layouts should be refactored to simple ones.
5454
.ui.modal form > .content {
5555
padding: 1.5em;
5656
background: var(--color-body);
57+
border-radius: 0 0 var(--border-radius) var(--border-radius);
5758
}
5859

5960
.ui.modal > .actions,
@@ -63,6 +64,7 @@ These inconsistent layouts should be refactored to simple ones.
6364
border-color: var(--color-secondary);
6465
padding: 1rem;
6566
text-align: right;
67+
border-radius: 0 0 var(--border-radius) var(--border-radius);
6668
}
6769

6870
.ui.modal .content > .actions {

‎web_src/css/modules/segment.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@
152152
}
153153

154154
.ui.attached.segment:has(+ .ui[class*="top attached"].header),
155-
.ui.attached.segment:last-child {
155+
.ui.attached.segment:last-child,
156+
.ui.segment:has(+ .ui.segment:not(.attached)),
157+
.ui.attached.segment:has(+ .ui.modal) {
156158
border-radius: 0 0 0.28571429rem 0.28571429rem;
157159
}
158160

@@ -166,6 +168,10 @@
166168
.ui.segment[class*="top attached"]:first-child {
167169
margin-top: 0;
168170
}
171+
.ui[class*="top attached"].segment:last-child {
172+
border-top-left-radius: 0.28571429rem;
173+
border-top-right-radius: 0.28571429rem;
174+
}
169175

170176
.ui.segment[class*="bottom attached"] {
171177
bottom: 0;

‎web_src/css/repo.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1586,6 +1586,7 @@ td .commit-summary {
15861586

15871587
.repository .diff-file-box .file-body.file-code {
15881588
background: var(--color-code-bg);
1589+
border-radius: var(--border-radius);
15891590
}
15901591

15911592
.repository .diff-file-box .file-body.file-code .lines-num {
@@ -2382,6 +2383,22 @@ tbody.commit-list {
23822383
vertical-align: middle;
23832384
}
23842385

2386+
/* fix bottom border radius on diff files */
2387+
.diff-file-body tr.tag-code:last-child {
2388+
background: none;
2389+
}
2390+
.diff-file-body tr.tag-code:last-child > td {
2391+
background: var(--color-box-body-highlight);
2392+
}
2393+
.diff-file-body tr.tag-code:last-child td:first-child,
2394+
.diff-file-body tr.tag-code:last-child td:first-child * {
2395+
border-bottom-left-radius: 3px;
2396+
}
2397+
.diff-file-body tr.tag-code:last-child td:last-child,
2398+
.diff-file-body tr.tag-code:last-child td:last-child * {
2399+
border-bottom-right-radius: 3px;
2400+
}
2401+
23852402
.resolved-placeholder {
23862403
font-weight: var(--font-weight-normal) !important;
23872404
border: 1px solid var(--color-secondary) !important;
@@ -2491,6 +2508,7 @@ tbody.commit-list {
24912508

24922509
.diff-file-header {
24932510
padding: 5px 8px !important;
2511+
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
24942512
}
24952513

24962514
.diff-file-box[data-folded="true"] .diff-file-body {

‎web_src/css/repo/list-header.css

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,6 @@
2525
flex: 1;
2626
}
2727

28-
.small-menu-items {
29-
min-height: 35.4px !important; /* match .small.button in height */
30-
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
31-
}
32-
33-
.small-menu-items .item {
34-
background: var(--color-menu) !important;
35-
padding-top: 6px !important;
36-
padding-bottom: 6px !important;
37-
}
38-
39-
.small-menu-items .item:hover {
40-
background: var(--color-hover) !important;
41-
}
42-
43-
.small-menu-items .item.active {
44-
background: var(--color-active) !important;
45-
}
46-
4728
@media (max-width: 767.98px) {
4829
.list-header-search {
4930
order: 0;

‎web_src/js/features/codeeditor.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
9898
'input.foreground': getColor('--color-input-text'),
9999
'scrollbar.shadow': getColor('--color-shadow'),
100100
'progressBar.background': getColor('--color-primary'),
101+
'focusBorder': '#0000', // prevent blue border
101102
},
102103
});
103104

0 commit comments

Comments
 (0)