mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 06:56:35 +08:00
6bcb38f410
This consolidates various empty states to use a single `EmptyState` component. I've also added a new state when there are no pending invites. I've moved the SVGs to stand-alone components in a `components/svg/` directory. I believe these need to be embedded (rather than separate `.svg` assets) because we're using color variables within. Most of the `EmptyState` component is optional so it should be flexible. An optional tip block is used for when we may need to utilize an action instead of a link (as invites do). The invite tip includes a prefix and suffix so translators can adjust as needed for their locale. The existing empty states should only change slightly... New  Unread  Chat channels  Plus the new invite state:  These simpler empty states are also using the component now, it will now be easy to enhance these with illustrations in the future as well.  
75 lines
1.3 KiB
SCSS
Vendored
75 lines
1.3 KiB
SCSS
Vendored
.c-user-thread {
|
|
padding-block: 1.25rem;
|
|
margin-inline: 1rem;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
.c-unread-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.chat-message-thread-indicator {
|
|
margin-left: 0;
|
|
margin-top: 1rem;
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.chat__thread-title {
|
|
&-container {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
&__name {
|
|
font-size: var(--font-up-1-rem);
|
|
word-break: break-all;
|
|
|
|
&:hover {
|
|
color: var(--primary-very-high);
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-icon {
|
|
font-size: var(--font-down-1-rem);
|
|
}
|
|
|
|
.chat-channel-name {
|
|
font-size: var(--font-down-1-rem);
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.chat-channel-title__name {
|
|
color: var(--primary-high);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
.c-list-empty-state {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.c-user-threads .empty-state-threads {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1.25rem 1rem;
|
|
font-size: var(--font-up-1-rem);
|
|
color: var(--primary);
|
|
}
|
|
|
|
// sidebar
|
|
#sidebar-section-content-user-threads {
|
|
padding-bottom: 0.35em;
|
|
|
|
.sidebar-section-link-content-text {
|
|
color: var(--d-sidebar-link-color);
|
|
}
|
|
|
|
.active .sidebar-section-link-content-text {
|
|
color: var(--d-sidebar-active-color);
|
|
}
|
|
}
|
