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

Jump to bottom

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

Merged
merged 7 commits into from
May 10, 2023
Merged

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

Show file tree
Hide file tree
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/milestone_issues.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion templates/user/dashboard/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
20 changes: 10 additions & 10 deletions templates/user/notification/notification_div.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down Expand Up @@ -59,24 +59,24 @@
{{end}}
</td>
<td class="eleven wide">
<a class="item" href="{{.Link}}">
<a class="item issue-title muted" href="{{.Link}}">
silverwind marked this conversation as resolved.
Show resolved Hide resolved
{{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"}}'
silverwind marked this conversation as resolved.
Show resolved Hide resolved
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}}"
Expand All @@ -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}}"
Expand All @@ -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}}"
Expand Down
16 changes: 16 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
Expand Down
8 changes: 8 additions & 0 deletions web_src/css/helpers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/themes/theme-arc-green.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down