mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Notification list enhancements, fix striped tables on dark theme (#24639)

Browse Source 
- 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">
pull/24476/head^2
silverwind 2 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      templates/repo/issue/list.tmpl
  2. 6
      templates/repo/issue/milestone_issues.tmpl
  3. 2
      templates/user/dashboard/navbar.tmpl
  4. 20
      templates/user/notification/notification_div.tmpl
  5. 16
      web_src/css/base.css
  6. 8
      web_src/css/helpers.css
  7. 2
      web_src/css/themes/theme-arc-green.css

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

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

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

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

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

@ -78,7 +78,7 @@
{{if .ContextUser.IsOrganization}}
<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"}}
</a>
{{if not .UnitIssuesGlobalDisabled}}

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

@ -11,17 +11,17 @@
{{.locale.Tr "notification.read"}}
</a>
{{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}}
<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"}}
</button>
</div>
</form>
{{end}}
</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 .Status 1}}
{{.locale.Tr "notification.no_unread"}}
@ -29,7 +29,7 @@
{{.locale.Tr "notification.no_read"}}
{{end}}
{{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>
{{range $notification := .Notifications}}
{{$issue := .Issue}}
@ -59,16 +59,16 @@
{{end}}
</td>
<td class="eleven wide">
<a class="item" href="{{.Link}}">
<a class="item issue-title muted" href="{{.Link}}">
{{if $issue}}
#{{$issue.Index}} - {{$issue.Title}}
#{{$issue.Index}} - {{$issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
{{else}}
{{$repo.FullName}}
{{end}}
</a>
</td>
<td>
<a class="item" href="{{$repo.Link}}">{{$repo.FullName}}</a>
<a class="item muted" href="{{$repo.Link}}">{{$repo.FullName}}</a>
</td>
<td class="collapsing">
{{if ne .Status 3}}
@ -76,7 +76,7 @@
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<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-status="pinned"
data-page="{{$.Page.Paginater.Current}}"
@ -94,7 +94,7 @@
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="read">
<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-status="read"
data-page="{{$.Page.Paginater.Current}}"
@ -109,7 +109,7 @@
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="unread">
<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-status="unread"
data-page="{{$.Page.Paginater.Current}}"

16
web_src/css/base.css
Unescape View File

@ -1148,6 +1148,12 @@ a.ui.card:hover {
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.table td.active {
color: var(--color-text);
@ -2232,6 +2238,16 @@ a.ui.active.label:hover {
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 {
border-right: none;
}

8
web_src/css/helpers.css
Unescape 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-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-1 { padding: .125rem !important; }
.gt-p-2 { padding: .25rem !important; }

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

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

Write Preview
Loading…
Cancel
Save