-

- {{svg "octicon-bell" 28 "gt-mr-3 gt-mt-1"}} - {{.locale.Tr "notification.notifications"}} -

-
- {{$notificationUnreadCount := call .NotificationUnreadCount}} - - {{.locale.Tr "notification.unread"}} -
{{$notificationUnreadCount}}
- - - {{.locale.Tr "notification.read"}} - + {{$notificationUnreadCount := call .NotificationUnreadCount}} +
+
+ + {{.locale.Tr "notification.unread"}} +
{{$notificationUnreadCount}}
+ + + {{.locale.Tr "notification.read"}} + +
{{if and (eq .Status 1)}} -
+ {{$.CsrfTokenHtml}}
-
- {{if eq (len .Notifications) 0}} -
- {{svg "octicon-inbox" 56 "gt-mb-4"}} - {{if eq .Status 1}} - {{.locale.Tr "notification.no_unread"}} - {{else}} - {{.locale.Tr "notification.no_read"}} - {{end}} -
- {{else}} - - - {{range $notification := .Notifications}} - {{$issue := .Issue}} - {{$repo := .Repository}} - - - - - - - +
+
+ {{if eq (len .Notifications) 0}} +
+ {{svg "octicon-inbox" 56 "gt-mb-4"}} + {{if eq .Status 1}} + {{.locale.Tr "notification.no_unread"}} + {{else}} + {{.locale.Tr "notification.no_read"}} {{end}} -
-
- {{if eq .Status 3}} - {{svg "octicon-pin" 16 "text blue"}} - {{else if not $issue}} - {{svg "octicon-repo" 16 "text grey"}} - {{else if $issue.IsPull}} - {{if $issue.IsClosed}} - {{if $issue.GetPullRequest.HasMerged}} - {{svg "octicon-git-merge" 16 "text purple"}} - {{else}} - {{svg "octicon-git-pull-request" 16 "text red"}} - {{end}} - {{else}} - {{svg "octicon-git-pull-request" 16 "text green"}} - {{end}} - {{else}} - {{if $issue.IsClosed}} - {{svg "octicon-issue-closed" 16 "text red"}} - {{else}} - {{svg "octicon-issue-opened" 16 "text green"}} - {{end}} - {{end}} - - - {{if $issue}} - #{{$issue.Index}} - {{$issue.Title | RenderEmoji $.Context | RenderCodeBlock}} - {{else}} - {{$repo.FullName}} - {{end}} - - - {{$repo.FullName}} - - {{if ne .Status 3}} -
- {{$.CsrfTokenHtml}} - - - -
- {{end}} - 		- {{if or (eq .Status 1) (eq .Status 3)}} -
- {{$.CsrfTokenHtml}} - - - - -
- {{else if eq .Status 2}} -
- {{$.CsrfTokenHtml}} - - - - -
- {{end}} -
- {{end}} +
+ {{else}} + {{$locale := .locale}} + {{range $notification := .Notifications}} +
+
+ {{if .Issue}} + {{template "shared/issueicon" .Issue}} + {{else}} + {{svg "octicon-repo" 16 "text grey"}} + {{end}} +
+ +
+ {{.Repository.FullName}} #{{.Issue.Index}} + {{if eq .Status 3}} + {{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}} + {{end}} +
+
+ + {{if .Issue}} + {{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}} + {{else}} + {{.Repository.FullName}} + {{end}} + +
+ +
+ {{TimeSinceUnix .Issue.UpdatedUnix $locale}} +
+
+ {{if ne .Status 3}} +
+ {{$.CsrfTokenHtml}} + + + +
+ {{end}} + {{if or (eq .Status 1) (eq .Status 3)}} +
+ {{$.CsrfTokenHtml}} + + + + +
+ {{else if eq .Status 2}} +
+ {{$.CsrfTokenHtml}} + + + + +
+ {{end}} +
+
+ {{end}} + {{end}} +
{{template "base/paginate" .}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index eee364bf1d..a6576a4fe9 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -8,6 +8,7 @@ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; + --font-weight-bold: 700; /* backgrounds */ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); @@ -373,6 +374,7 @@ a.muted:hover [class*="color-text"], a.silenced:hover { color: inherit; + text-decoration: none; } .delete-button, @@ -1417,6 +1419,18 @@ img.ui.avatar, color: var(--color-text-light) !important; } +.text.light { + color: var(--color-text-light) !important; +} + +.text.light-2 { + color: var(--color-text-light-2) !important; +} + +.text.light-3 { + color: var(--color-text-light-3) !important; +} + .text.light.grey { color: var(--color-grey-light) !important; } @@ -2201,7 +2215,7 @@ a.ui.active.label:hover { border-left: none; } -/* a ghost button can be used as inline text, it doesn't have obvious styles */ +/* a ghost button is a button without border */ .button.button-ghost { background: transparent; border: none; @@ -2211,7 +2225,11 @@ a.ui.active.label:hover { } .button.button-ghost:hover { - color: var(--color-primary); + background: var(--color-hover); +} + +.button.button-ghost:active { + background: var(--color-active); } .two-toggle-buttons .button:not(.active):first-of-type { @@ -2538,8 +2556,8 @@ a.ui.basic.label:hover { padding: 2.75px; border-radius: 1em; font-size: 11px; - font-weight: var(--font-weight-semibold); - line-height: .67em; + font-weight: var(--font-weight-bold); + line-height: .7; } .rss-icon { @@ -2751,7 +2769,3 @@ table th[data-sortt-desc] .svg { width: 15px; height: 15px; } - -.color-text-light-2 { - color: var(--color-text-light-2); -} diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index a415670afe..73829dbca8 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -73,6 +73,8 @@ Gitea's private styles use `g-` prefix. .gt-whitespace-pre-wrap { white-space: pre-wrap !important; } .gt-object-contain { object-fit: contain !important; } .gt-self-center { align-self: center !important; } +.gt-self-start { align-self: flex-start !important; } +.gt-self-end { align-self: flex-end !important; } .gt-overflow-x-auto { overflow-x: auto !important; } .gt-overflow-x-scroll { overflow-x: scroll !important; } @@ -88,6 +90,7 @@ Gitea's private styles use `g-` prefix. .gt-font-normal { font-weight: var(--font-weight-normal) !important }; .gt-font-medium { font-weight: var(--font-weight-medium) !important }; .gt-font-semibold { font-weight: var(--font-weight-semibold) !important }; +.gt-font-bold { font-weight: var(--font-weight-bold) !important }; .gt-rounded { border-radius: var(--border-radius) !important; } .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } @@ -249,6 +252,13 @@ Gitea's private styles use `g-` prefix. .gt-shrink-0 { flex-shrink: 0 !important; } +.gt-font-13 { font-size: 13px !important } +.gt-font-14 { font-size: 14px !important } +.gt-font-15 { font-size: 15px !important } +.gt-font-16 { font-size: 16px !important } +.gt-font-17 { font-size: 17px !important } +.gt-font-18 { font-size: 18px !important } + @media (max-width: 767px) { .gt-db-small { display: block !important; } .gt-w-100-small { width: 100% !important; } diff --git a/web_src/css/user.css b/web_src/css/user.css index 252e595f3b..7b6db8f2f8 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -121,18 +121,6 @@ object-fit: contain; } -#notification_div .tab.segment { - overflow-x: auto; -} - -#notification_div .tabular.menu .active.item { - background: var(--color-box-body); -} - -#notification_table { - border: none; -} - #readme_profile { padding: 10px; border-radius: 0.28571429rem; @@ -140,11 +128,29 @@ border: 1px solid var(--color-secondary); } -#notification_table tr { - cursor: default; +#notification_table { + background: var(--color-box-body); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); } -#notification_table td a { - width: 100%; - display: inline-block; +.notifications-item:hover { + background: var(--color-hover); +} + +.notifications-buttons { + display: none; + min-width: 74px; +} + +.notifications-updated { + display: flex; +} + +.notifications-item:hover .notifications-buttons { + display: flex; +} + +.notifications-item:hover .notifications-updated { + display: none; } diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js index 6c056c6d14..0c24d36e56 100644 --- a/web_src/js/features/notification.js +++ b/web_src/js/features/notification.js @@ -4,6 +4,30 @@ const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window let notificationSequenceNumber = 0; export function initNotificationsTable() { + const table = document.getElementById('notification_table'); + if (!table) return; + + // when page restores from bfcache, delete previously clicked items + window.addEventListener('pageshow', (e) => { + if (e.persisted) { // page was restored from bfcache + const table = document.getElementById('notification_table'); + const unreadCountEl = document.querySelector('.notifications-unread-count'); + let unreadCount = parseInt(unreadCountEl.textContent); + for (const item of table.querySelectorAll('.notifications-item[data-remove="true"]')) { + item.remove(); + unreadCount -= 1; + } + unreadCountEl.textContent = unreadCount; + } + }); + + // mark clicked unread links for deletion on bfcache restore + for (const link of table.querySelectorAll('.notifications-item[data-status="1"] .notifications-link')) { + link.addEventListener('click', (e) => { + e.target.closest('.notifications-item').setAttribute('data-remove', 'true'); + }); + } + $('#notification_table .button').on('click', function () { (async () => { const data = await updateNotification(