Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
May 10, 2023
+41 −17
Merged

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

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d0bbe4d
Notification list enhancements
silverwind May 10, 2023
984a1a8
fix button margin-right
silverwind May 10, 2023
95e7983
brighten color-markup-code-block on arc-green
silverwind May 10, 2023
f5c46f1
add margin helpers and replace all instances of inline margin-left: auto
silverwind May 10, 2023
19ac416
add another striped table selector
silverwind May 10, 2023
219bbb9
fix helpers
silverwind May 10, 2023
4b1c5b7
restart ci
silverwind May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions templates/repo/issue/list.tmpl
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 3 deletions templates/repo/issue/milestone_issues.tmpl
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion templates/user/dashboard/navbar.tmpl
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 10 additions & 10 deletions templates/user/notification/notification_div.tmpl
View file
Original file line number Diff line number Diff line change
@@ -11,25 +11,25 @@
{{.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"}}
{{else}}
{{.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,24 +59,24 @@
{{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}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.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"}}'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I think this is one of the places where the button can also look like a button.
Otherwise, it's really hard for a user to guess where they can click, and there is enough space that it doesn't increase the height/width of the containing element.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same below.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm we could add a hover highlight like GitHub has:

image

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 changes: 16 additions & 0 deletions web_src/css/base.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What we should also think about is whether we set margin: inherit;
If I've seen correctly, buttons get margin by default otherwise while links don't.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, we should undo any conflicting button styles here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the other hand, I think we do want to retain size stuff so the "button" takes a area similar to what a regular button takes.

}

.ui.button.button-link:hover {
color: var(--color-primary);
}

.two-toggle-buttons .button:not(.active):first-of-type {
border-right: none;
}
8 changes: 8 additions & 0 deletions web_src/css/helpers.css
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion web_src/css/themes/theme-arc-green.css
View file
Original file line number Diff line number Diff line change
@@ -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;