Rework notifications list (#24812)
- Replace `<table>` with flexbox - Add issue modification time and issue number - Remove big title - Replace tabs with menu items - Add clicked item deletion on back button cache restoration --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
GitHub
parent
309354c70e
commit
27c221aa5d
9 changed files with 221 additions and 177 deletions
|
|
@ -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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue