Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Add "spotlight" on first notification.

This commit is contained in:
Guo Xiang Tan 2016-11-15 10:56:34 +08:00
parent 095767bdb4
commit 5613c5f81a
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/widgets/header.js.es6
View File

@ -42,7 +42,10 @@ createWidget('header-notifications', {
const unreadPMs = currentUser.get('unread_private_messages'); const unreadPMs = currentUser.get('unread_private_messages');
if (!!unreadPMs) { if (!!unreadPMs) {
if (!currentUser.get('read_first_notification')) contents.push(h('span.ring')); if (!currentUser.get('read_first_notification')) {
contents.push(h('span.ring'));
contents.push(h('span.ring-backdrop'));
};
contents.push(this.attach('link', { action: attrs.action, contents.push(this.attach('link', { action: attrs.action,
className: 'badge-notification unread-private-messages', className: 'badge-notification unread-private-messages',

10
app/assets/stylesheets/common/base/discourse.scss
View File

@ -166,6 +166,16 @@ body {
&.badge-notification[href] {color: $secondary;} &.badge-notification[href] {color: $secondary;}
} }
.ring-backdrop {
width: 80px;
height: 80px;
top: -18px !important;
right: -18px !important;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
border-radius: 100%;
z-index: 1040;
}
.ring { .ring {
$gradient-start: transparent; $gradient-start: transparent;
$gradient-end: #090; $gradient-end: #090;

4
app/assets/stylesheets/common/base/header.scss
View File

@ -123,7 +123,7 @@
.notifications { .notifications {
position: relative; position: relative;
} }
.badge-notification, .ring { .badge-notification, .ring, .ring-backdrop {
position: absolute; position: absolute;
top: -9px; top: -9px;
z-index: 1; z-index: 1;
@ -133,7 +133,7 @@
right: 0; right: 0;
background-color: scale-color($tertiary, $lightness: 50%); background-color: scale-color($tertiary, $lightness: 50%);
} }
.unread-private-messages, .ring { .unread-private-messages, .ring, .ring-backdrop {
right: 25px; right: 25px;
} }
.flagged-posts { .flagged-posts {