mirror of
https://github.com/discourse/discourse.git
synced 2026-08-15 17:24:47 +08:00
1734bdfef7User status is currently hidden from the chat channel title for DMs which can be confusing and make it easy to miss updates. We show it in the channel list in the sidebar, drawer and mobile so it seems like this should be in the chat title too. I have added proper vertical alignment to match emojis used in the public channel titles and sidebar lists. ### Before <img width="474" height="360" alt="Screenshot 2026-01-13 at 12 50 53 PM" src="https://github.com/user-attachments/assets/d4a54081-48f7-4601-844e-82a0183f514f" /> ### After <img width="479" height="350" alt="Screenshot 2026-01-13 at 12 51 12 PM" src="https://github.com/user-attachments/assets/505352f0-7e4b-4560-8eba-3c0633e17cae" />
156 lines
2.6 KiB
SCSS
Vendored
156 lines
2.6 KiB
SCSS
Vendored
.c-navbar-container {
|
|
position: relative;
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
background: var(--secondary);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding: 0 0.67em;
|
|
|
|
&.-clickable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.c-navbar {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
position: relative;
|
|
container-type: inline-size;
|
|
|
|
.is-collapsed & {
|
|
&__title {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
&__toggle-drawer-button {
|
|
&::after {
|
|
@container (inline-size) {
|
|
content: "";
|
|
position: absolute;
|
|
height: 100%;
|
|
left: -1rem;
|
|
width: calc(100cqw - 2.3em + 1rem);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--tertiary-hover);
|
|
|
|
.d-icon {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.single-select-header {
|
|
padding: 0.3675rem 0.584rem;
|
|
}
|
|
}
|
|
|
|
.c-navbar__back-button {
|
|
height: var(--chat-header-offset);
|
|
padding: 0.5rem 0.8rem 0.5rem 0.25rem;
|
|
}
|
|
|
|
.c-navbar__channel-title {
|
|
@include ellipsis;
|
|
font-weight: 700;
|
|
height: var(--chat-header-offset);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.chat-channel-title.is-dm .user-status-message {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.chat-channel-title.is-dm .chat-channel-name__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.c-navbar__star-channel-button {
|
|
height: var(--chat-header-offset);
|
|
color: var(--primary-medium);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--primary);
|
|
}
|
|
|
|
&.--starred {
|
|
color: var(--tertiary);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--tertiary-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-navbar__title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@include ellipsis;
|
|
height: var(--chat-header-offset);
|
|
|
|
&-text {
|
|
@include ellipsis;
|
|
font-weight: 700;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
padding-block: 5px;
|
|
|
|
> .d-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.c-navbar__sub-title {
|
|
line-height: var(--line-height-small);
|
|
font-size: var(--font-down-1-rem);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.c-navbar__threads-list-button {
|
|
gap: 0.25rem;
|
|
|
|
&.has-unreads {
|
|
.d-icon-discourse-threads {
|
|
color: var(--tertiary-med-or-tertiary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-navbar__actions {
|
|
list-style: none;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--chat-header-offset);
|
|
|
|
.d-icon {
|
|
color: var(--primary-low-mid);
|
|
}
|
|
|
|
.c-navbar__filter {
|
|
&.active {
|
|
.d-icon {
|
|
color: var(--d-button-transparent-text-color--hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-navbar__back-button ~ .c-navbar__title {
|
|
padding-left: 0;
|
|
}
|
