core
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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">
This commit is contained in:
silverwind 2023-05-10 23:59:58 +02:00 committed by GitHub
parent 23ae939ef3
commit f7ede92f82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/repo/issue/list.tmpl
View File

@ -215,9 +215,9 @@
{{if not .Repository.IsArchived}} {{if not .Repository.IsArchived}}
<!-- Action Button --> <!-- Action Button -->
{{if .IsShowClosed}} {{if .IsShowClosed}}
<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> <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>
{{else}} {{else}}
<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> <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>
{{end}} {{end}}
<!-- Labels --> <!-- Labels -->
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item"> <div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">

6
templates/repo/issue/milestone_issues.tmpl
View File

@ -51,7 +51,7 @@
<div class="issue-list-toolbar-right"> <div class="issue-list-toolbar-right">
<div class="ui secondary filter stackable menu labels"> <div class="ui secondary filter stackable menu labels">
<!-- Label --> <!-- Label -->
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto"> <div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter gt-ml-auto">
<span class="text"> <span class="text">
{{.locale.Tr "repo.issues.filter_label"}} {{.locale.Tr "repo.issues.filter_label"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
@ -153,9 +153,9 @@
<div class="ui secondary filter stackable menu"> <div class="ui secondary filter stackable menu">
<!-- Action Button --> <!-- Action Button -->
{{if .IsShowClosed}} {{if .IsShowClosed}}
<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> <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>
{{else}} {{else}}
<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> <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>
{{end}} {{end}}
<!-- Labels --> <!-- Labels -->
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item"> <div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">

2
templates/user/dashboard/navbar.tmpl
View File

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

20
templates/user/notification/notification_div.tmpl
View File

@ -11,17 +11,17 @@
{{.locale.Tr "notification.read"}} {{.locale.Tr "notification.read"}}
</a> </a>
{{if and (eq .Status 1)}} {{if and (eq .Status 1)}}
<form action="{{AppSubUrl}}/notifications/purge" method="POST" style="margin-left: auto;"> <form class="gt-ml-auto" action="{{AppSubUrl}}/notifications/purge" method="POST">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}"> <div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}">
<button class="ui mini button primary" title='{{$.locale.Tr "notification.mark_all_as_read"}}'> <button class="ui mini button primary gt-mr-0" title='{{$.locale.Tr "notification.mark_all_as_read"}}'>
{{svg "octicon-checklist"}} {{svg "octicon-checklist"}}
</button> </button>
</div> </div>
</form> </form>
{{end}} {{end}}
</div> </div>
<div class="ui bottom attached active tab segment"> <div class="ui bottom attached active tab segment gt-p-3">
{{if eq (len .Notifications) 0}} {{if eq (len .Notifications) 0}}
{{if eq .Status 1}} {{if eq .Status 1}}
{{.locale.Tr "notification.no_unread"}} {{.locale.Tr "notification.no_unread"}}
@ -29,7 +29,7 @@
{{.locale.Tr "notification.no_read"}} {{.locale.Tr "notification.no_read"}}
{{end}} {{end}}
{{else}} {{else}}
<table class="ui unstackable striped very compact small selectable table" id="notification_table"> <table class="ui unstackable very compact small table" id="notification_table">
<tbody> <tbody>
{{range $notification := .Notifications}} {{range $notification := .Notifications}}
{{$issue := .Issue}} {{$issue := .Issue}}
@ -59,16 +59,16 @@
{{end}} {{end}}
</td> </td>
<td class="eleven wide"> <td class="eleven wide">
<a class="item" href="{{.Link}}"> <a class="item issue-title muted" href="{{.Link}}">
{{if $issue}} {{if $issue}}
#{{$issue.Index}} - {{$issue.Title}} #{{$issue.Index}} - {{$issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
{{else}} {{else}}
{{$repo.FullName}} {{$repo.FullName}}
{{end}} {{end}}
</a> </a>
</td> </td>
<td> <td>
<a class="item" href="{{$repo.Link}}">{{$repo.FullName}}</a> <a class="item muted" href="{{$repo.Link}}">{{$repo.FullName}}</a>
</td> </td>
<td class="collapsing"> <td class="collapsing">
{{if ne .Status 3}} {{if ne .Status 3}}
@ -76,7 +76,7 @@
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}"> <input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="pinned"> <input type="hidden" name="status" value="pinned">
<button class="ui mini button" title='{{$.locale.Tr "notification.pin"}}' <button class="ui mini button button-link" title='{{$.locale.Tr "notification.pin"}}'
data-url="{{AppSubUrl}}/notifications/status" data-url="{{AppSubUrl}}/notifications/status"
data-status="pinned" data-status="pinned"
data-page="{{$.Page.Paginater.Current}}" data-page="{{$.Page.Paginater.Current}}"
@ -94,7 +94,7 @@
<input type="hidden" name="notification_id" value="{{.ID}}"> <input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="read"> <input type="hidden" name="status" value="read">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}"> <input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button" title='{{$.locale.Tr "notification.mark_as_read"}}' <button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_read"}}'
data-url="{{AppSubUrl}}/notifications/status" data-url="{{AppSubUrl}}/notifications/status"
data-status="read" data-status="read"
data-page="{{$.Page.Paginater.Current}}" data-page="{{$.Page.Paginater.Current}}"
@ -109,7 +109,7 @@
<input type="hidden" name="notification_id" value="{{.ID}}"> <input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="unread"> <input type="hidden" name="status" value="unread">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}"> <input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button" title='{{$.locale.Tr "notification.mark_as_unread"}}' <button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_unread"}}'
data-url="{{AppSubUrl}}/notifications/status" data-url="{{AppSubUrl}}/notifications/status"
data-status="unread" data-status="unread"
data-page="{{$.Page.Paginater.Current}}" data-page="{{$.Page.Paginater.Current}}"

16
web_src/css/base.css
View File

@ -1148,6 +1148,12 @@ a.ui.card:hover {
border-top-color: var(--color-secondary-alpha-50); border-top-color: var(--color-secondary-alpha-50);
} }
.ui.striped.table > tr:nth-child(2n),
.ui.striped.table > tbody > tr:nth-child(2n),
.ui.basic.striped.table > tbody > tr:nth-child(2n) {
background: var(--color-light);
}
.ui.ui.ui.ui.table tr.active, .ui.ui.ui.ui.table tr.active,
.ui.ui.table td.active { .ui.ui.table td.active {
color: var(--color-text); color: var(--color-text);
@ -2232,6 +2238,16 @@ a.ui.active.label:hover {
border-left: none; border-left: none;
} }
.ui.button.button-link {
background: transparent;
border: none;
color: inherit;
}
.ui.button.button-link:hover {
color: var(--color-primary);
}
.two-toggle-buttons .button:not(.active):first-of-type { .two-toggle-buttons .button:not(.active):first-of-type {
border-right: none; border-right: none;
} }

8
web_src/css/helpers.css
View File

@ -163,6 +163,14 @@ Gitea's private styles use `g-` prefix.
.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.gt-m-auto { margin: auto !important; }
.gt-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.gt-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.gt-mt-auto { margin-top: auto !important; }
.gt-mr-auto { margin-right: auto !important; }
.gt-mb-auto { margin-bottom: auto !important; }
.gt-ml-auto { margin-left: auto !important; }
.gt-p-0 { padding: 0 !important; } .gt-p-0 { padding: 0 !important; }
.gt-p-1 { padding: .125rem !important; } .gt-p-1 { padding: .125rem !important; }
.gt-p-2 { padding: .25rem !important; } .gt-p-2 { padding: .25rem !important; }

2
web_src/css/themes/theme-arc-green.css
View File

@ -151,7 +151,7 @@
--color-menu: #2e323e; --color-menu: #2e323e;
--color-card: #2e323e; --color-card: #2e323e;
--color-markup-table-row: #ffffff06; --color-markup-table-row: #ffffff06;
--color-markup-code-block: #ffffff0d; --color-markup-code-block: #ffffff16;
--color-button: #353846; --color-button: #353846;
--color-code-bg: #2a2e3a; --color-code-bg: #2a2e3a;
--color-code-sidebar-bg: #2e323e; --color-code-sidebar-bg: #2e323e;