Skip to content

Commit f7ede92

Browse files
silverwindsilverwind
authoredMay 10, 2023
Notification list enhancements, fix striped tables on dark theme (#24639)
- Make code block rendering via backticks work - Remove link color unless hovered - Remove table stripes and fix stripes rendering on dark theme for other tables - Introduce new `button-link` class discussed previously for buttons that look and act like links and apply it to the two right-side buttons - Reduce box padding by 8px on each side - Fix "Mark all read" button margin-right - brighten `--color-markup-code-block` on arc-green ### Before <img width="1216" alt="Screenshot 2023-05-10 at 20 00 30" src="https://github.com/go-gitea/gitea/assets/115237/66da9ec2-dd09-4ef0-8f1d-1822a18b6b43"> <img width="1211" alt="Screenshot 2023-05-10 at 20 00 48" src="https://github.com/go-gitea/gitea/assets/115237/f48e30a2-9a00-4723-93aa-79b97ca0ba0c"> ### After <img width="1222" alt="Screenshot 2023-05-10 at 20 09 59" src="https://github.com/go-gitea/gitea/assets/115237/c956e0d0-b3d9-42a4-a3ed-f0431c22bf3f"> <img width="1218" alt="Screenshot 2023-05-10 at 20 05 34" src="https://github.com/go-gitea/gitea/assets/115237/f72c1628-3961-4c28-9263-07cdf7531316">
·
v1.24.0-devv1.20.0-rc0
1 parent 23ae939 commit f7ede92

File tree

7 files changed

+41
-17
lines changed

7 files changed

+41
-17
lines changed
 

‎templates/repo/issue/list.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -215,9 +215,9 @@
215215
{{if not .Repository.IsArchived}}
216216
<!-- Action Button -->
217217
{{if .IsShowClosed}}
218-
<button class="ui green active basic button issue-action" data-action="open" data-url="{{$.RepoLink}}/issues/status" style="margin-left: auto">{{.locale.Tr "repo.issues.action_open"}}</button>
218+
<button class="ui green active basic button issue-action gt-ml-auto" data-action="open" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_open"}}</button>
219219
{{else}}
220-
<button class="ui red active basic button issue-action" data-action="close" data-url="{{$.RepoLink}}/issues/status" style="margin-left: auto">{{.locale.Tr "repo.issues.action_close"}}</button>
220+
<button class="ui red active basic button issue-action gt-ml-auto" data-action="close" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_close"}}</button>
221221
{{end}}
222222
<!-- Labels -->
223223
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">

‎templates/repo/issue/milestone_issues.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<div class="issue-list-toolbar-right">
5252
<div class="ui secondary filter stackable menu labels">
5353
<!-- Label -->
54-
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
54+
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter gt-ml-auto">
5555
<span class="text">
5656
{{.locale.Tr "repo.issues.filter_label"}}
5757
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -153,9 +153,9 @@
153153
<div class="ui secondary filter stackable menu">
154154
<!-- Action Button -->
155155
{{if .IsShowClosed}}
156-
<button class="ui green active basic button issue-action" data-action="open" data-url="{{$.RepoLink}}/issues/status" style="margin-left: auto">{{.locale.Tr "repo.issues.action_open"}}</button>
156+
<button class="ui green active basic button issue-action gt-ml-auto" data-action="open" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_open"}}</button>
157157
{{else}}
158-
<button class="ui red active basic button issue-action" data-action="close" data-url="{{$.RepoLink}}/issues/status" style="margin-left: auto">{{.locale.Tr "repo.issues.action_close"}}</button>
158+
<button class="ui red active basic button issue-action gt-ml-auto" data-action="close" data-url="{{$.RepoLink}}/issues/status">{{.locale.Tr "repo.issues.action_close"}}</button>
159159
{{end}}
160160
<!-- Labels -->
161161
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">

‎templates/user/dashboard/navbar.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
{{if .ContextUser.IsOrganization}}
8080
<div class="right stackable menu">
81-
<a class="{{if .PageIsNews}}active {{end}}item" style="margin-left: auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
81+
<a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
8282
{{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}}
8383
</a>
8484
{{if not .UnitIssuesGlobalDisabled}}

‎templates/user/notification/notification_div.tmpl

+10-10
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,25 @@
1111
{{.locale.Tr "notification.read"}}
1212
</a>
1313
{{if and (eq .Status 1)}}
14-
<form action="{{AppSubUrl}}/notifications/purge" method="POST" style="margin-left: auto;">
14+
<form class="gt-ml-auto" action="{{AppSubUrl}}/notifications/purge" method="POST">
1515
{{$.CsrfTokenHtml}}
1616
<div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}">
17-
<button class="ui mini button primary" title='{{$.locale.Tr "notification.mark_all_as_read"}}'>
17+
<button class="ui mini button primary gt-mr-0" title='{{$.locale.Tr "notification.mark_all_as_read"}}'>
1818
{{svg "octicon-checklist"}}
1919
</button>
2020
</div>
2121
</form>
2222
{{end}}
2323
</div>
24-
<div class="ui bottom attached active tab segment">
24+
<div class="ui bottom attached active tab segment gt-p-3">
2525
{{if eq (len .Notifications) 0}}
2626
{{if eq .Status 1}}
2727
{{.locale.Tr "notification.no_unread"}}
2828
{{else}}
2929
{{.locale.Tr "notification.no_read"}}
3030
{{end}}
3131
{{else}}
32-
<table class="ui unstackable striped very compact small selectable table" id="notification_table">
32+
<table class="ui unstackable very compact small table" id="notification_table">
3333
<tbody>
3434
{{range $notification := .Notifications}}
3535
{{$issue := .Issue}}
@@ -59,24 +59,24 @@
5959
{{end}}
6060
</td>
6161
<td class="eleven wide">
62-
<a class="item" href="{{.Link}}">
62+
<a class="item issue-title muted" href="{{.Link}}">
6363
{{if $issue}}
64-
#{{$issue.Index}} - {{$issue.Title}}
64+
#{{$issue.Index}} - {{$issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
6565
{{else}}
6666
{{$repo.FullName}}
6767
{{end}}
6868
</a>
6969
</td>
7070
<td>
71-
<a class="item" href="{{$repo.Link}}">{{$repo.FullName}}</a>
71+
<a class="item muted" href="{{$repo.Link}}">{{$repo.FullName}}</a>
7272
</td>
7373
<td class="collapsing">
7474
{{if ne .Status 3}}
7575
<form action="{{AppSubUrl}}/notifications/status" method="POST">
7676
{{$.CsrfTokenHtml}}
7777
<input type="hidden" name="notification_id" value="{{.ID}}">
7878
<input type="hidden" name="status" value="pinned">
79-
<button class="ui mini button" title='{{$.locale.Tr "notification.pin"}}'
79+
<button class="ui mini button button-link" title='{{$.locale.Tr "notification.pin"}}'
8080
data-url="{{AppSubUrl}}/notifications/status"
8181
data-status="pinned"
8282
data-page="{{$.Page.Paginater.Current}}"
@@ -94,7 +94,7 @@
9494
<input type="hidden" name="notification_id" value="{{.ID}}">
9595
<input type="hidden" name="status" value="read">
9696
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
97-
<button class="ui mini button" title='{{$.locale.Tr "notification.mark_as_read"}}'
97+
<button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_read"}}'
9898
data-url="{{AppSubUrl}}/notifications/status"
9999
data-status="read"
100100
data-page="{{$.Page.Paginater.Current}}"
@@ -109,7 +109,7 @@
109109
<input type="hidden" name="notification_id" value="{{.ID}}">
110110
<input type="hidden" name="status" value="unread">
111111
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
112-
<button class="ui mini button" title='{{$.locale.Tr "notification.mark_as_unread"}}'
112+
<button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_unread"}}'
113113
data-url="{{AppSubUrl}}/notifications/status"
114114
data-status="unread"
115115
data-page="{{$.Page.Paginater.Current}}"

‎web_src/css/base.css

+16
Original file line numberDiff line numberDiff line change
@@ -1148,6 +1148,12 @@ a.ui.card:hover {
11481148
border-top-color: var(--color-secondary-alpha-50);
11491149
}
11501150

1151+
.ui.striped.table > tr:nth-child(2n),
1152+
.ui.striped.table > tbody > tr:nth-child(2n),
1153+
.ui.basic.striped.table > tbody > tr:nth-child(2n) {
1154+
background: var(--color-light);
1155+
}
1156+
11511157
.ui.ui.ui.ui.table tr.active,
11521158
.ui.ui.table td.active {
11531159
color: var(--color-text);
@@ -2232,6 +2238,16 @@ a.ui.active.label:hover {
22322238
border-left: none;
22332239
}
22342240

2241+
.ui.button.button-link {
2242+
background: transparent;
2243+
border: none;
2244+
color: inherit;
2245+
}
2246+
2247+
.ui.button.button-link:hover {
2248+
color: var(--color-primary);
2249+
}
2250+
22352251
.two-toggle-buttons .button:not(.active):first-of-type {
22362252
border-right: none;
22372253
}

‎web_src/css/helpers.css

+8
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,14 @@ Gitea's private styles use `g-` prefix.
163163
.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
164164
.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
165165

166+
.gt-m-auto { margin: auto !important; }
167+
.gt-mx-auto { margin-left: auto !important; margin-right: auto !important; }
168+
.gt-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
169+
.gt-mt-auto { margin-top: auto !important; }
170+
.gt-mr-auto { margin-right: auto !important; }
171+
.gt-mb-auto { margin-bottom: auto !important; }
172+
.gt-ml-auto { margin-left: auto !important; }
173+
166174
.gt-p-0 { padding: 0 !important; }
167175
.gt-p-1 { padding: .125rem !important; }
168176
.gt-p-2 { padding: .25rem !important; }

‎web_src/css/themes/theme-arc-green.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@
151151
--color-menu: #2e323e;
152152
--color-card: #2e323e;
153153
--color-markup-table-row: #ffffff06;
154-
--color-markup-code-block: #ffffff0d;
154+
--color-markup-code-block: #ffffff16;
155155
--color-button: #353846;
156156
--color-code-bg: #2a2e3a;
157157
--color-code-sidebar-bg: #2e323e;

0 commit comments

Comments
 (0)
Please sign in to comment.