mirror of
https://github.com/discourse/discourse.git
synced 2024-12-19 07:15:58 +08:00
4fdb275683
Some of the changes in this commit are extracted from https://github.com/discourse/discourse/pull/17379. The bookmarks tab in the new user menu is different from the other tabs in that it can display a mixture of notifications and bookmarks. When there are unread bookmark reminder notifications, the tab displays all of these notifications at the top and fills the remaining space in the menu with the rest of the bookmarks. The bubble/badge count on the bookmarks tab indicates how many unread bookmark reminder notifications there are. On the technical aspect, since this commit introduces a new `bookmark-item` component, we've done some refactoring so that all 3 "item" components (`notification-item`, `reviewable-item` and the new `bookmark-item`) inherit from a base component and get identical HTML structure so they all look consistent. Internal tickets: t70584 and t65045.
631 lines
12 KiB
SCSS
631 lines
12 KiB
SCSS
.menu-panel.slide-in {
|
|
position: fixed;
|
|
right: 0;
|
|
box-shadow: shadow("header");
|
|
|
|
.panel-body {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.header-cloak {
|
|
display: none;
|
|
}
|
|
|
|
.menu-panel.drop-down {
|
|
position: absolute;
|
|
// positions are relative to the .d-header .panel div
|
|
top: 100%; // directly underneath .panel
|
|
right: -10px; // 10px to the right of .panel - adjust as needed
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.menu-panel {
|
|
border: 1px solid var(--primary-low);
|
|
box-shadow: shadow("menu-panel");
|
|
background-color: var(--secondary);
|
|
z-index: z("header");
|
|
padding: 0.5em;
|
|
width: 320px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
hr {
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.panel-header {
|
|
position: absolute;
|
|
right: 20px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.panel-body {
|
|
display: flex;
|
|
touch-action: pan-y pinch-zoom;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.panel-body-contents {
|
|
max-height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel-body-bottom {
|
|
display: flex;
|
|
flex: 1 0 0%; // safari height fix
|
|
margin-top: 0.5em;
|
|
flex-wrap: wrap;
|
|
|
|
.show-all {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.notifications-dismiss {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.btn {
|
|
background-color: var(--primary-very-low);
|
|
color: var(--primary-high);
|
|
&:hover {
|
|
background: var(--primary-low);
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge-notification {
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
.user-menu.revamped {
|
|
right: 0;
|
|
width: 320px;
|
|
padding: 0;
|
|
|
|
.panel-body-bottom {
|
|
flex: 0;
|
|
}
|
|
|
|
.menu-tabs-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border-left: 1px solid var(--primary-low);
|
|
}
|
|
|
|
.tabs-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.btn {
|
|
display: flex;
|
|
padding: 0.857em;
|
|
position: relative;
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.badge-notification {
|
|
background-color: var(--tertiary-med-or-tertiary);
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 6px;
|
|
font-size: var(--font-down-3);
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--tertiary-low);
|
|
}
|
|
&:hover {
|
|
background-color: var(--highlight-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-body-contents {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.quick-access-panel {
|
|
width: 320px;
|
|
padding: 0.75em;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
|
|
.double-user,
|
|
.multi-user {
|
|
white-space: unset;
|
|
}
|
|
|
|
.item-label {
|
|
color: var(--primary);
|
|
}
|
|
|
|
li {
|
|
background-color: var(--secondary);
|
|
|
|
&.unread,
|
|
&.pending {
|
|
background-color: var(--tertiary-low);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--highlight-medium);
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-within {
|
|
background: var(--highlight-medium);
|
|
a {
|
|
// we don't need the link focus because we're styling the parent
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// remove when the widgets-based implementation of the user menu is removed
|
|
.user-menu:not(.revamped) {
|
|
.quick-access-panel {
|
|
li {
|
|
span:first-child {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hamburger-panel {
|
|
a.widget-link {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
@include ellipsis;
|
|
}
|
|
.panel-body {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
span.badge-category {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
|
|
.menu-links.columned {
|
|
li {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.menu-panel {
|
|
.widget-link,
|
|
.categories-link {
|
|
padding: 0.25em 0.5em;
|
|
display: block;
|
|
color: var(--primary);
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--highlight-medium);
|
|
outline: none;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.new {
|
|
font-size: $font-down-1;
|
|
margin-left: 0.5em;
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
|
|
&.show-help,
|
|
&.filter {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
li.category-link {
|
|
float: left;
|
|
background-color: transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25em 0.5em;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
a {
|
|
display: inline-flex;
|
|
&:hover,
|
|
&:focus {
|
|
background: transparent;
|
|
|
|
.category-name {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
.badge-notification {
|
|
color: var(--primary-med-or-secondary-med);
|
|
background-color: transparent;
|
|
display: inline;
|
|
padding: 0;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-large;
|
|
}
|
|
.badge-wrapper {
|
|
&.bar,
|
|
&.bullet {
|
|
color: var(--primary);
|
|
padding: 0 0 0 0.15em;
|
|
}
|
|
&.box {
|
|
color: var(--secondary);
|
|
+ a.badge.badge-notification {
|
|
padding-top: 2px;
|
|
}
|
|
span {
|
|
z-index: z("base") * -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// note these topic counts only appear for anons in the category hamburger drop down
|
|
b.topics-count {
|
|
color: var(--primary-med-or-secondary-med);
|
|
font-weight: normal;
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
div.discourse-tags {
|
|
font-size: $font-down-1;
|
|
}
|
|
}
|
|
|
|
.user-menu {
|
|
.quick-access-panel {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding-top: 0.75em;
|
|
margin-top: -1px;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
h3 {
|
|
padding: 0 0.4em;
|
|
font-weight: bold;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.d-icon,
|
|
&:hover .d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
.icon {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.btn-primary {
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
}
|
|
|
|
li {
|
|
background-color: var(--tertiary-low);
|
|
box-sizing: border-box;
|
|
list-style-type: none;
|
|
|
|
// This is until other languages remove the HTML from within
|
|
// notifications. It can then be removed
|
|
div .fa {
|
|
display: none;
|
|
}
|
|
|
|
span.double-user,
|
|
// e.g., "username, username2"
|
|
span.multi-user
|
|
// e.g., "username, username2, and n others"
|
|
{
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
align-items: baseline;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.multi-user
|
|
// e.g., "username, username2, and n others"
|
|
{
|
|
span.multi-username:nth-of-type(2) {
|
|
// margin between username2 and "and n others"
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
|
|
// truncate when usernames are very long
|
|
span.multi-username {
|
|
@include ellipsis;
|
|
flex: 0 1 auto;
|
|
min-width: 1.2em;
|
|
max-width: 10em;
|
|
&:nth-of-type(2) {
|
|
// margin for comma between username and username2
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--highlight-medium);
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-within {
|
|
background: var(--highlight-medium);
|
|
a {
|
|
// we don't need the link focus because we're styling the parent
|
|
outline: 0;
|
|
}
|
|
.btn-flat:focus {
|
|
// undo default btn-flat style
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
margin: 0.25em;
|
|
padding: 0em 0.25em;
|
|
}
|
|
|
|
button {
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
a,
|
|
button {
|
|
> div {
|
|
overflow: hidden; // clears the text from wrapping below icons
|
|
overflow-wrap: anywhere;
|
|
@supports not (overflow-wrap: anywhere) {
|
|
word-break: break-word;
|
|
}
|
|
|
|
// Truncate items with more than 2 lines.
|
|
@include line-clamp(2);
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
li:not(.show-all) {
|
|
padding: 0;
|
|
align-self: flex-start;
|
|
width: 100%;
|
|
.d-icon {
|
|
padding-top: 0.2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
img.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
padding-top: 0.2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
.is-warning {
|
|
.d-icon-far-envelope {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
.read {
|
|
background-color: var(--secondary);
|
|
}
|
|
.none {
|
|
padding-top: 5px;
|
|
}
|
|
.spinner-container {
|
|
min-height: 2em;
|
|
}
|
|
.spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-width: 2px;
|
|
margin: 0 auto;
|
|
}
|
|
.show-all a {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
color: var(--primary-med-or-secondary-high);
|
|
background: var(--blend-primary-secondary-5);
|
|
&:hover {
|
|
color: var(--primary);
|
|
background: var(--primary-low);
|
|
}
|
|
}
|
|
/* as a big ol' click target, don't let text inside be selected */
|
|
@include unselectable;
|
|
|
|
&.quick-access-profile {
|
|
display: inline;
|
|
li:not(.show-all) a {
|
|
color: var(--primary);
|
|
display: flex;
|
|
}
|
|
ul button {
|
|
line-height: 1.4; // match 'ul a' link height
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
@media screen and (max-height: 360px) {
|
|
// two column grid to avoid scroll
|
|
ul {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-gap: 0 1em;
|
|
a {
|
|
@include ellipsis;
|
|
> div {
|
|
display: block;
|
|
}
|
|
}
|
|
button {
|
|
span:not(.relative-date) {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
li:not(.show-all) a {
|
|
color: var(--primary);
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.menu-links-header {
|
|
width: 100%;
|
|
.menu-links-row {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
width: 100%;
|
|
z-index: 2;
|
|
justify-content: space-between;
|
|
|
|
.glyphs {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
|
|
button {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
padding: 0.65em 0.25em 0.75em;
|
|
justify-content: center;
|
|
|
|
svg {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
// This is to make sure active and inactive tab icons have the same
|
|
// size. `box-sizing` does not work and I have no idea why.
|
|
border: 1px solid transparent;
|
|
&:not(.active):hover {
|
|
border-bottom: 0;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
button.active {
|
|
border: 1px solid var(--primary-low);
|
|
border-bottom: 1px solid var(--secondary);
|
|
position: relative;
|
|
|
|
.d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
button:hover,
|
|
button:focus {
|
|
background-color: var(--primary-low);
|
|
outline: none;
|
|
&.active {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
button {
|
|
padding: 0.3em 0.5em;
|
|
}
|
|
|
|
.glyphs {
|
|
display: table-cell;
|
|
width: auto;
|
|
text-align: center;
|
|
}
|
|
.glyphs:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.glyphs:last-child {
|
|
text-align: right;
|
|
}
|
|
.fa,
|
|
button {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
}
|
|
|
|
// Sidebar-hamburger hybrid
|
|
|
|
.hamburger-menu.revamped {
|
|
--d-sidebar-highlight-color: var(--highlight-medium);
|
|
width: var(--d-sidebar-width);
|
|
|
|
.panel-body-content {
|
|
width: 100%;
|
|
min-width: 0; // prevent content blowing out width
|
|
}
|
|
|
|
.sidebar-section-wrapper {
|
|
.sidebar-section-header-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sidebar-section-link.active {
|
|
font-weight: normal;
|
|
color: var(--primary-high);
|
|
background: var(--tertiary-low);
|
|
}
|
|
}
|
|
|
|
.sidebar-footer-wrapper {
|
|
padding: 0.5em 0 0;
|
|
}
|
|
}
|