haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-27 07:44:50 +00:00
Code Issues Releases Wiki Activity

Merge pull request #7082 from haiwen/update-user-notifications

Browse Source 
Update user notifications
This commit is contained in:
Ranjiwei
2025-02-25 16:21:07 +08:00
committed by GitHub
parent d1ac836de6 9807cbd752
commit 49896f53ef
15 changed files with 941 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/css/notice-item.css Normal file
View File

@@ -0,0 +1,94 @@
.notification-item {
padding: 14px 16px 14px 10px;
border-bottom: 1px solid #ededed;
position: relative;
cursor: pointer;
}
.notification-item:last-child {
border-bottom: none;
}
.notification-item:hover {
background: #f5f5f5;
}
.notification-item .notification-item-header {
display: flex;
align-items: center
}
.notification-item .notification-point {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: red;
margin-right: 12px;
position: absolute;
}
.notification-item .notification-header-info {
display: flex;
justify-content: space-between;
flex: 1;
margin-left: 20px;
width: calc(100% - 20px);
}
.notification-item .notification-user-detail {
display: flex;
width: 65%;
}
.notification-item .notification-user-detail .notification-user-avatar {
width: 24px;
height: 24px;
margin-top: 3px;
border-radius: 50%;
}
.notification-item .notification-user-detail .notification-user-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: 500;
margin-left: 8px;
}
.notification-item .notification-header-info .notification-time {
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 13px;
}
.notification-item .notification-content-wrapper {
font-size: 13px;
margin-left: 52px;
}
.notification-item .notification-content-quotes {
width: 8px;
}
.notification-item .notification-comment-content {
max-width: calc(100% - 16px);
}
.notification-item .notification-comment-content p {
display: inline-block;
letter-spacing: 1px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
.notification-item .notification-comment-content p img {
max-width: 70%;
height: auto;
max-height: 60px;
}

33
frontend/src/css/notification.css
View File

@@ -56,44 +56,11 @@
font-weight: normal;
}
#notice-popover li {
padding: 9px 0 3px;
border-bottom: 1px solid #dfdfe1;
}
#notice-popover li.unread {
padding-right: 10px;
padding-left: 10px;
border-left: 2px solid #feac74;
}
#notice-popover li.read {
padding-right: 10px;
padding-left: 10px;
border-left: 2px solid transparent;
}
#notice-popover li:hover {
background: #f5f5f7;
}
#notice-popover li.read:hover {
background: #f5f5f7;
border-left: 2px solid #dfdfe1;
}
#notice-popover .avatar {
border-radius: 1000px;
float: left;
}
#notice-popover .brief {
margin-left: 40px;
margin-bottom: 1rem;
font-size: 0.8125rem;
line-height: 1.5rem;
}
#notice-popover .time {
margin: 0;
color: #999;

115
frontend/src/css/user-notifications.css
View File

@@ -1,5 +1,5 @@
.notification-list-dialog {
width: 720px;
width: calc(100% - 20rem);
max-width: calc(100% - 1rem);
height: calc(100% - 56px);
}
@@ -35,13 +35,55 @@
.notification-list-content .notification-modal-body {
height: 100%;
display: flex;
flex-direction: row;
min-height: 27rem;
overflow: hidden;
padding: 0;
}
.notification-list-content .notification-modal-body .notice-dialog-side {
border-right: 1px solid #eee;
display: flex;
flex: 0 0 20%;
padding: 12px 8px;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item {
position: relative;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link {
border: none;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active {
background-color: #F5F5F5;
color: #212529;
}
.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active::before {
content: '';
position: absolute;
display: block;
width: 3px;
height: 26px;
left: -5px;
top: 2px;
background-color: #ff9800;
border-radius: 2px;
z-index: 2;
}
.notification-list-content .notification-modal-body .notice-dialog-main {
display: flex;
flex: 0 0 80%;
overflow: inherit;
}
.notification-modal-body .notification-dialog-body {
overflow: auto;
padding: 2rem 1rem;
padding: 1rem;
height: 100%;
}
@@ -75,27 +117,64 @@
.notification-dialog-body table td {
padding: 0.5rem 0.1875rem;
border-bottom: 1px solid #eee;
border-bottom: none;
color: #212529;
font-size: 14px;
word-break: break-all;
}
.wechat-dialog-body {
display: flex;
justify-content: center;
padding: 3rem;
flex-direction: column;
align-items: center;
.notification-dialog-body table td ul {
list-style: none;
}
.wechat-dialog-message {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 1rem;
color: #666;
font-size: 14px;
.notification-dialog-body .notification-user-name {
font-weight: normal;
}
.notification-dialog-body .notification-item .avatar {
width: 24px;
height: 24px;
}
.notification-dialog-body .notification-item .notification-point {
top: calc(50% - 4px);
}
@media (max-width: 768px) {
.notification-list-dialog {
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
}
.notification-list-content .notification-modal-body {
display: block;
}
.notification-list-content .notification-modal-body .notice-dialog-side {
display: block;
padding: 0;
}
.notification-list-content .notification-item .notification-user-name {
display: none;
}
.notification-list-content .notice-dialog-main {
height: 100%;
}
.notification-list-content .notice-dialog-side>ul {
flex-direction: row !important;
}
.notification-list-content .notice-dialog-side>ul>li {
width: 50% !important;
}
.notification-list-content .notice-dialog-side>ul>li .nav-link:before {
display: none;
}
}