mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 15:43:43 +08:00
4512e5652f
This update adds three tabs to the bottom of the chat overlay to make it easier for users to navigate chat on mobile. As a result of this change: - Direct Messages are now shown separately from public channels on mobile - My Threads has now moved from the channel list to it's own tab on mobile - My Threads can still be accessed on desktop via the sidebar and within the drawer channel list - Chat back button has been updated to navigate to the correct tab (for both channels and threads) Some special cases: - If DMs are not used then the tab is not rendered - If the user has no threads then the tab is not rendered - If both the tabs for DMs and Threads aren't available then the whole footer will not be rendered - Chat footer is only shown on the listing pages (DMs, Channels, My Threads) --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
179 lines
3.6 KiB
SCSS
179 lines
3.6 KiB
SCSS
// Styles to make channels list in sidebar match sidebar theme
|
|
.chat-enabled {
|
|
.has-sidebar {
|
|
.sidebar-header {
|
|
.d-header .menu-panel {
|
|
top: calc(3.4em - 2px) !important;
|
|
}
|
|
.d-header-icons .icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
img.avatar,
|
|
#logo-small {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
}
|
|
}
|
|
.header-dropdown-toggle.chat-header-icon {
|
|
.chat-channel-unread-indicator {
|
|
border-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
.sidebar-container {
|
|
.channels-list {
|
|
.chat-channel-divider {
|
|
padding: 0 0.5em 0 1.75rem;
|
|
}
|
|
.chat-channel-row {
|
|
padding-right: 0.75em;
|
|
}
|
|
.chat-channel-leave-btn {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-section-wrapper.sidebar-section[data-section-name="my-threads"] {
|
|
.sidebar-section-content {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar-container {
|
|
.channels-list {
|
|
color: var(--primary);
|
|
font-size: var(--font-down-1);
|
|
padding-bottom: 2em;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
|
|
.chat-channel-divider {
|
|
padding: 0 1.75rem;
|
|
|
|
&:hover {
|
|
.title-caret {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.channels-list-container {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.channel-list-empty-message {
|
|
margin: 0;
|
|
padding: 0em 2em 0.5em;
|
|
}
|
|
|
|
.chat-channel-row:not(.active) {
|
|
&:hover {
|
|
.category-chat-private {
|
|
.d-icon {
|
|
background-color: var(--primary-low);
|
|
}
|
|
}
|
|
}
|
|
.category-chat-private {
|
|
.d-icon {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
}
|
|
}
|
|
|
|
.open-new-message-btn,
|
|
.open-browse-page-btn,
|
|
.edit-channels-dropdown .select-kit-header,
|
|
.chat-channel-leave-btn {
|
|
display: flex;
|
|
padding: 0.25em;
|
|
border-radius: 0.25em;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-low);
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
padding: 0.25em;
|
|
}
|
|
}
|
|
|
|
.chat-channel-leave-btn {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-row {
|
|
padding-left: calc(1.8rem / 2);
|
|
margin-left: calc(1.8rem / 2);
|
|
border-radius: 0.25em;
|
|
padding-right: 1.8rem;
|
|
min-height: 28px;
|
|
margin-bottom: 0.125rem;
|
|
|
|
&:hover {
|
|
background-color: var(--primary-low);
|
|
}
|
|
|
|
.chat-channel-title {
|
|
padding: 0.25rem;
|
|
font-weight: unset;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-enabled {
|
|
.sidebar-section-link-prefix {
|
|
.prefix-image {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
&.active .prefix-image {
|
|
box-shadow: 0px 0px 0px 1px var(--success);
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-content-text {
|
|
.user-status {
|
|
margin-left: 0.3em;
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link--active {
|
|
background: var(--primary-low);
|
|
}
|
|
|
|
.sidebar-section-link--muted {
|
|
opacity: 0.5;
|
|
|
|
.sidebar-section-link-prefix.icon .d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
&.active {
|
|
.sidebar-section-link-prefix.icon .d-icon {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
}
|