mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 22:39:36 +08:00
b79ea986ac
Introduce the concept of "high priority notifications" which include PM and bookmark reminder notifications. Now bookmark reminder notifications act in the same way as PM notifications (float to top of recent list, show in the green bubble) and most instances of unread_private_messages in the UI have been replaced with unread_high_priority_notifications. The user email digest is changed to just have a section about unread high priority notifications, the unread PM section has been removed. A high_priority boolean column has been added to the Notification table and relevant indices added to account for it. unread_private_messages has been kept on the User model purely for backwards compat, but now just returns unread_high_priority_notifications count so this may cause some inconsistencies in the UI.
374 lines
6.8 KiB
SCSS
374 lines
6.8 KiB
SCSS
.d-header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: z("header");
|
|
background-color: $header_background;
|
|
box-shadow: shadow("header");
|
|
|
|
> .wrap {
|
|
width: calc(100% - 16px); // accommodates for 8px vertical padding
|
|
height: 100%;
|
|
.contents {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.header-row {
|
|
width: 100%;
|
|
|
|
.logo-wrapper {
|
|
float: left;
|
|
}
|
|
.auth-buttons {
|
|
float: right;
|
|
margin-top: 0.4em;
|
|
|
|
.login-button,
|
|
.signup-button {
|
|
padding: 8px 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.docked & {
|
|
position: fixed;
|
|
backface-visibility: hidden; /** do magic for scrolling performance **/
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
a,
|
|
a:visited {
|
|
color: $header_primary;
|
|
}
|
|
}
|
|
|
|
#site-logo {
|
|
width: auto;
|
|
}
|
|
|
|
.d-icon-home {
|
|
font-size: $font-up-6;
|
|
}
|
|
|
|
.panel {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.hamburger-panel,
|
|
.user-menu,
|
|
.search-menu {
|
|
width: 0; // Flexbox fix for Safari
|
|
}
|
|
|
|
.header-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
.login-button,
|
|
.sign-up-button {
|
|
padding: 6px 10px;
|
|
.fa {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
.login-button {
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
|
|
.header-dropdown-toggle,
|
|
.drop-down,
|
|
.panel-body {
|
|
.flagged-posts,
|
|
.reviewables {
|
|
background: $danger;
|
|
min-width: 6px;
|
|
}
|
|
}
|
|
|
|
.d-header-icons {
|
|
text-align: center;
|
|
margin: 0 0 0 5px;
|
|
list-style: none;
|
|
|
|
> li {
|
|
float: left;
|
|
}
|
|
.icon {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.2857em;
|
|
height: 2.2857em;
|
|
padding: 0.2143em;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
border-top: 1px solid transparent;
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
transition: all linear 0.15s;
|
|
outline: none;
|
|
img.avatar {
|
|
width: 2.1333em;
|
|
height: 2.1333em;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $primary-low;
|
|
border-top: 1px solid transparent;
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
.d-icon {
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
&:active {
|
|
color: $primary;
|
|
background-color: $primary-low;
|
|
}
|
|
}
|
|
.drop-down-mode & {
|
|
.active .icon {
|
|
position: relative;
|
|
background-color: $secondary;
|
|
cursor: default;
|
|
border-top: 1px solid $primary-low;
|
|
border-left: 1px solid $primary-low;
|
|
border-right: 1px solid $primary-low;
|
|
.d-icon {
|
|
color: $primary-medium;
|
|
}
|
|
&:after {
|
|
display: block;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: z("header") + 1; // Higher than .menu-panel
|
|
width: 100%;
|
|
height: 0;
|
|
content: "";
|
|
border-top: 1px solid $secondary;
|
|
}
|
|
&:hover {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
width: 100%;
|
|
font-size: $font-up-4;
|
|
line-height: $line-height-large;
|
|
display: inline-block;
|
|
color: $header_primary-low-mid;
|
|
}
|
|
.notifications {
|
|
position: relative;
|
|
}
|
|
.ring {
|
|
position: absolute;
|
|
top: -9px;
|
|
z-index: z("base");
|
|
margin-left: 0;
|
|
}
|
|
.header-dropdown-toggle {
|
|
position: relative;
|
|
}
|
|
.badge-notification {
|
|
position: absolute;
|
|
z-index: z("base");
|
|
left: 0;
|
|
top: -4px;
|
|
min-width: 0.6em;
|
|
}
|
|
.unread-notifications {
|
|
left: auto;
|
|
right: -3px;
|
|
background-color: dark-light-choose($tertiary-medium, $tertiary);
|
|
}
|
|
.unread-high-priority-notifications,
|
|
.ring {
|
|
left: auto;
|
|
right: 25px;
|
|
}
|
|
}
|
|
|
|
.highlight-strong {
|
|
background-color: $highlight-medium;
|
|
}
|
|
|
|
.search-highlight {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#search-help table td {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
// we don't need this X to clear field
|
|
#search-term::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
// topic info in the header
|
|
.extra-info-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
line-height: $line-height-medium;
|
|
padding: 0 1.5em 0 0.5em;
|
|
// we need to hide overflow in both to truncate the title in a flexbox
|
|
overflow: hidden;
|
|
.extra-info {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
-webkit-animation: fadein 0.5s;
|
|
animation: fadein 0.5s;
|
|
}
|
|
.topic-link {
|
|
color: $header_primary;
|
|
display: block;
|
|
@include ellipsis;
|
|
}
|
|
.topic-statuses {
|
|
.d-icon {
|
|
color: $header_primary-medium;
|
|
}
|
|
.d-icon-envelope {
|
|
color: $danger;
|
|
}
|
|
}
|
|
.header-title {
|
|
margin: 0 0 0.15em 0;
|
|
.archetype-private_message & {
|
|
// PMs might have participant avatars in the header
|
|
margin: 0;
|
|
}
|
|
font-size: $font-up-3;
|
|
width: 100%;
|
|
}
|
|
.categories-wrapper {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
// Protection against a very rare edge case in mobile header for topics with
|
|
// very long category names and lots of tags at the same time
|
|
max-width: 80%;
|
|
flex: 0 1 auto;
|
|
min-width: 1px;
|
|
.badge-wrapper {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
.badge-wrapper {
|
|
margin-right: 8px;
|
|
}
|
|
.badge-wrapper.bullet {
|
|
.badge-category-parent-bg,
|
|
.badge-category-bg {
|
|
min-width: 5px;
|
|
}
|
|
}
|
|
.badge-wrapper {
|
|
&.bullet,
|
|
&.bar,
|
|
&.none {
|
|
span.badge-category {
|
|
color: $header_primary-high;
|
|
}
|
|
}
|
|
}
|
|
.topic-header-extra {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
.discourse-tags {
|
|
color: $header_primary-high;
|
|
@include ellipsis;
|
|
.discourse-tag {
|
|
display: inline; // tags need to stay inline in order for them to truncate
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// PM header participants
|
|
|
|
$avatar-height: 1.641em;
|
|
$mobile-avatar-height: 1.532em;
|
|
|
|
.topic-header-participants {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
font-size: $font-down-1;
|
|
&:not(:first-child) {
|
|
margin-left: 5px;
|
|
}
|
|
.trigger-user-card,
|
|
.trigger-group-card {
|
|
&:not(:last-of-type) {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.trigger-user-card {
|
|
.icon {
|
|
height: $avatar-height;
|
|
.mobile-view & {
|
|
height: $mobile-avatar-height;
|
|
}
|
|
display: inline-block;
|
|
img {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.trigger-group-card {
|
|
padding: 0 5px;
|
|
border: 1px solid $primary-low;
|
|
border-radius: 0.25em;
|
|
@include ellipsis;
|
|
|
|
.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
height: $avatar-height;
|
|
.mobile-view & {
|
|
height: $mobile-avatar-height;
|
|
}
|
|
color: $primary-high;
|
|
|
|
.d-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.more-participants {
|
|
color: $header_primary-high;
|
|
margin-left: 5px;
|
|
}
|
|
}
|