mirror of
https://github.com/discourse/discourse.git
synced 2025-03-02 20:35:24 +08:00
5ce0697348
Before this commit chat was applying a fixed height on everything under the `/chat` route. It's only really needed on the channel page with the composer at the bottom of the page. This commits makes the following changes: - moves height limitation from `#main-outlet-wrapper` to `.chat-channel` - makes browse channel page and members list page full height and rely on main document scrollbar - adds height computation for draft header and direct message creator block to ensure the height is correct when creating a draft channel - makes chat index full height to rely on the browser scrollbar. As a result the <kbd> + </kbd> button used on mobile to create a direct message as been moved out of `<ChannelsList>` into the chat index template - sidebar height was relying on chat setting a max height, as a result the height computation of sidebar has been changed to work correctly, especially with an opened keyboard on mobile or ipad
616 lines
11 KiB
SCSS
616 lines
11 KiB
SCSS
$float-height: 530px;
|
|
|
|
:root {
|
|
--message-left-width: 42px;
|
|
--full-page-border-radius: 12px;
|
|
--full-page-sidebar-width: 275px;
|
|
--channel-list-avatar-size: 30px;
|
|
--chat-header-offset: 50px;
|
|
}
|
|
|
|
.chat-message-move-to-channel-modal-modal {
|
|
.modal-inner-container {
|
|
.chat-move-message-channel-chooser {
|
|
width: 100%;
|
|
.category-chat-badge {
|
|
.d-icon {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.uppy-is-drag-over .chat-composer .drop-a-file {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
z-index: z("header");
|
|
&-content {
|
|
width: max-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 2em;
|
|
background-color: #1d1d1d;
|
|
border-radius: 0.25em;
|
|
&-images {
|
|
.d-icon {
|
|
height: 3em;
|
|
width: 3em;
|
|
color: var(--secondary-or-primary);
|
|
&:first-of-type {
|
|
transform: rotate(-5deg);
|
|
}
|
|
&:nth-of-type(2) {
|
|
height: 4em;
|
|
width: 4em;
|
|
}
|
|
&:last-of-type {
|
|
transform: rotate(5deg);
|
|
}
|
|
}
|
|
}
|
|
&-text {
|
|
margin: 1.5em 0 0 0;
|
|
font-size: var(--font-up-1);
|
|
color: var(--secondary-or-primary);
|
|
.d-icon-upload {
|
|
padding-right: 0.25em;
|
|
position: relative;
|
|
bottom: 2px;
|
|
color: var(--secondary-or-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-unread-indicator {
|
|
@include unselectable;
|
|
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 100%;
|
|
box-sizing: content-box;
|
|
-webkit-touch-callout: none;
|
|
background: var(--tertiary-med-or-tertiary);
|
|
color: var(--secondary);
|
|
font-size: var(--font-down-2);
|
|
text-align: center;
|
|
|
|
&.urgent {
|
|
background: var(--success);
|
|
color: var(--secondary);
|
|
|
|
.number-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.number {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-dropdown-toggle.chat-header-icon {
|
|
.icon {
|
|
.chat-channel-unread-indicator {
|
|
border: 2px solid var(--header_background);
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
transition: border-color linear 0.15s;
|
|
}
|
|
}
|
|
|
|
span.icon {
|
|
cursor: auto;
|
|
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--header_primary-low-mid);
|
|
}
|
|
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
a.icon {
|
|
&.active {
|
|
.d-icon-comment {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.chat-channel-unread-indicator {
|
|
border-color: var(--primary-low);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-messages-container {
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
position: relative;
|
|
|
|
.chat-message-container {
|
|
display: grid;
|
|
|
|
&.selecting-messages {
|
|
grid-template-columns: 1.5em 1fr;
|
|
}
|
|
|
|
.chat-message-selector {
|
|
align-self: center;
|
|
justify-self: end;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.chat-time {
|
|
color: var(--primary-high);
|
|
font-size: var(--font-down-2);
|
|
}
|
|
|
|
.emoji-picker {
|
|
position: fixed;
|
|
}
|
|
|
|
&:hover {
|
|
.chat-.chat-message-react-btn {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-emoji-avatar {
|
|
width: var(--message-left-width);
|
|
align-items: center;
|
|
|
|
img {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
border: 1px solid transparent;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
|
|
.is-online & {
|
|
border: 1px solid var(--secondary);
|
|
box-shadow: 0px 0px 0px 1px var(--success);
|
|
}
|
|
}
|
|
|
|
.chat-user-avatar {
|
|
@include unselectable;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.chat-message:not(.is-reply) & {
|
|
width: var(--message-left-width);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&.is-online {
|
|
.chat-user-avatar-container .avatar {
|
|
box-shadow: 0px 0px 0px 1px var(--success);
|
|
border: 1px solid var(--secondary);
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.chat-user-avatar-container {
|
|
position: relative;
|
|
padding: 1px; //for is-online boxshadow effect, preventing cutoff
|
|
|
|
.avatar {
|
|
padding: 1px; ////for is-online boxshadow effect, preventing shift
|
|
}
|
|
|
|
.chat-user-presence-flair {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
background-color: var(--success);
|
|
border: 1px solid var(--secondary);
|
|
border-radius: 50%;
|
|
|
|
.chat-message & {
|
|
width: 10px;
|
|
height: 10px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.chat-channel-title & {
|
|
width: 8px;
|
|
height: 8px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-title & {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.chat-channel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-height: 1px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.open-drawer-btn {
|
|
color: var(--primary-low-mid);
|
|
|
|
&:visited {
|
|
color: var(--primary-low-mid);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
> * {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.chat-messages-scroll {
|
|
flex-grow: 1;
|
|
overflow-y: scroll;
|
|
overscroll-behavior: contain;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
z-index: 1;
|
|
margin: 0 1px 0 0;
|
|
will-change: transform;
|
|
@include chat-scrollbar();
|
|
|
|
.join-channel-btn.in-float {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
top: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.all-loaded-message {
|
|
text-align: center;
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
padding: 0.5em 0.25em 0.25em;
|
|
}
|
|
}
|
|
|
|
.scroll-stick-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-scroll-to-bottom {
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
z-index: 1;
|
|
flex-direction: column;
|
|
bottom: -25px;
|
|
background: none;
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease, transform 0.5s ease;
|
|
transform: scale(0.1);
|
|
padding: 0;
|
|
|
|
> * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background: none !important;
|
|
}
|
|
|
|
&.visible {
|
|
transform: translateY(-32px) scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&__arrow {
|
|
display: flex;
|
|
background: var(--primary-medium);
|
|
border-radius: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 32px;
|
|
width: 32px;
|
|
position: relative;
|
|
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
margin-left: 1px; // "fixes" the 1px svg shift
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
|
|
.chat-scroll-to-bottom__arrow {
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-title-chat-icon {
|
|
display: inline-block;
|
|
* {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
|
gap: 0;
|
|
}
|
|
|
|
body.has-full-page-chat {
|
|
.alert-error,
|
|
.alert-info,
|
|
.alert-success,
|
|
.alert-warning {
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
.full-page-chat {
|
|
display: grid;
|
|
grid-template-columns: var(--full-page-sidebar-width) 1fr;
|
|
|
|
.chat-full-page-header {
|
|
border-top: 1px solid var(--primary-low);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
background: var(--secondary);
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__back-btn {
|
|
width: 40px;
|
|
min-width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chat-channel-title {
|
|
.category-chat-name,
|
|
.chat-name,
|
|
.dm-usernames {
|
|
color: var(--primary);
|
|
display: inline;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.-not-following {
|
|
.chat-channel-title {
|
|
max-width: calc(100% - 50px);
|
|
}
|
|
.join-channel-btn {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-messages-scroll {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-full-page-header__left-actions {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.chat-full-page-header__title {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.chat-full-page-header__right-actions {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
font-size: var(--font-up-1);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.chat-full-page-header {
|
|
box-sizing: border-box;
|
|
|
|
.chat-channel-header-details {
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex: 1;
|
|
max-width: 100%;
|
|
|
|
.chat-channel-archive-status {
|
|
text-align: right;
|
|
padding-right: 1em;
|
|
}
|
|
}
|
|
|
|
.chat-channel-title {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
|
|
.d-icon:not(.d-icon-lock) {
|
|
height: 1.25em;
|
|
width: 1.25em;
|
|
}
|
|
|
|
.category-chat-name,
|
|
.dm-username {
|
|
font-weight: 700;
|
|
font-size: var(--font-up-1);
|
|
line-height: var(--font-up-1);
|
|
}
|
|
|
|
.dm-usernames {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.chat-channel-retry-archive {
|
|
display: flex;
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.chat-channel-archive-modal-inner {
|
|
.chat-to-topic-selector {
|
|
width: 500px;
|
|
height: 300px;
|
|
}
|
|
|
|
.radios {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.radio-label {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
details {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
input[type="text"],
|
|
.select-kit.combo-box.category-chooser {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-channel-archive-modal-inner {
|
|
.chat-to-topic-selector {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.user-preferences .chat-setting .controls {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.chat-message-collapser,
|
|
.chat-message-text {
|
|
> p {
|
|
margin: 0.5em 0 0.5em;
|
|
}
|
|
|
|
> p:first-of-type {
|
|
margin-top: 0.1em;
|
|
}
|
|
|
|
> p:last-of-type {
|
|
margin-bottom: 0.1em;
|
|
}
|
|
}
|
|
|
|
.reviewable-chat-message {
|
|
.chat-channel-title {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-channel-dm-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.channel-name {
|
|
font-weight: 700;
|
|
font-size: var(--font-up-1);
|
|
line-height: var(--font-up-1);
|
|
}
|
|
}
|
|
|
|
.chat-channel-status {
|
|
background: var(--secondary);
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
|
|
html.has-full-page-chat {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
#main-outlet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.full-page-chat {
|
|
height: 100%;
|
|
min-height: 0;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.main-chat-outlet {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mobile-view {
|
|
#main-outlet-wrapper {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// these need to apply to desktop too, because iPads
|
|
&.discourse-touch {
|
|
.full-page-chat,
|
|
.chat-channel,
|
|
#main-outlet {
|
|
// allows containers to shrink to fit
|
|
min-height: 0;
|
|
}
|
|
}
|
|
[data-popper-reference-hidden] {
|
|
visibility: hidden;
|
|
}
|
|
}
|