forked from rDrama/rDrama
More cosmetic changes
parent
6016af54e5
commit
4c5a46f80a
|
@ -6,14 +6,13 @@ body {
|
||||||
.App {
|
.App {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1000px) {
|
@media screen and (min-width: 1000px) {
|
||||||
.App {
|
.App-content {
|
||||||
height: calc(100vh - 12rem);
|
height: 740px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,10 +46,13 @@ body {
|
||||||
.App-content {
|
.App-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 3;
|
flex: 3;
|
||||||
height: 720px;
|
height: 360px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-bottom: 1px dashed var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-content::-webkit-scrollbar {
|
.App-content::-webkit-scrollbar {
|
||||||
|
@ -64,27 +66,30 @@ body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-input {
|
|
||||||
flex-basis: 7rem;
|
|
||||||
padding: 0 1rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
flex: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-center {
|
.App-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-bottom {
|
.App-bottom-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.App-bottom {
|
||||||
|
flex: 3;
|
||||||
|
}
|
||||||
|
|
||||||
.App-bottom-dummy {
|
.App-bottom-dummy {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.App-bottom-extra {
|
||||||
|
padding: 1rem;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
/* On mobile, hide the sidebar and make the input full-width. */
|
/* On mobile, hide the sidebar and make the input full-width. */
|
||||||
@media screen and (max-width: 1100px) {
|
@media screen and (max-width: 1100px) {
|
||||||
.App-side {
|
.App-side {
|
||||||
|
@ -94,6 +99,11 @@ body {
|
||||||
.App-bottom-dummy {
|
.App-bottom-dummy {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.App-bottom-wrapper {
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
lite-youtube {
|
lite-youtube {
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { HTML5Backend } from "react-dnd-html5-backend";
|
||||||
import {
|
import {
|
||||||
ChatHeading,
|
ChatHeading,
|
||||||
ChatMessageList,
|
ChatMessageList,
|
||||||
|
QuotedMessage,
|
||||||
UserInput,
|
UserInput,
|
||||||
UserList,
|
UserList,
|
||||||
UsersTyping,
|
UsersTyping,
|
||||||
|
@ -11,7 +12,7 @@ import {
|
||||||
import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
|
import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
|
||||||
const SCROLL_CANCEL_THRESHOLD = 200;
|
const SCROLL_CANCEL_THRESHOLD = 500;
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
return (
|
return (
|
||||||
|
@ -32,17 +33,22 @@ function AppInner() {
|
||||||
const { open, config } = useDrawer();
|
const { open, config } = useDrawer();
|
||||||
const contentWrapper = useRef<HTMLDivElement>(null);
|
const contentWrapper = useRef<HTMLDivElement>(null);
|
||||||
const initiallyScrolledDown = useRef(false);
|
const initiallyScrolledDown = useRef(false);
|
||||||
const { messages } = useChat();
|
const { messages, quote } = useChat();
|
||||||
|
|
||||||
|
console.log({ quote });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (messages.length > 0) {
|
if (messages.length > 0) {
|
||||||
if (initiallyScrolledDown.current) {
|
if (initiallyScrolledDown.current) {
|
||||||
/* We only want to scroll back down on a new message
|
/* We only want to scroll back down on a new message
|
||||||
if the user is not scrolled up looking at previous messages. */
|
if the user is not scrolled up looking at previous messages. */
|
||||||
const scrollableDistance = contentWrapper.current.scrollHeight - contentWrapper.current.clientHeight;
|
const scrollableDistance =
|
||||||
|
contentWrapper.current.scrollHeight -
|
||||||
|
contentWrapper.current.clientHeight;
|
||||||
const scrolledDistance = contentWrapper.current.scrollTop;
|
const scrolledDistance = contentWrapper.current.scrollTop;
|
||||||
const hasScrolledEnough = scrollableDistance - scrolledDistance >= SCROLL_CANCEL_THRESHOLD;
|
const hasScrolledEnough =
|
||||||
|
scrollableDistance - scrolledDistance >= SCROLL_CANCEL_THRESHOLD;
|
||||||
|
|
||||||
if (hasScrolledEnough) {
|
if (hasScrolledEnough) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -50,7 +56,7 @@ function AppInner() {
|
||||||
// Always scroll to the bottom on first load.
|
// Always scroll to the bottom on first load.
|
||||||
initiallyScrolledDown.current = true;
|
initiallyScrolledDown.current = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
|
contentWrapper.current.scrollTop = contentWrapper.current.scrollHeight;
|
||||||
}
|
}
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
@ -64,18 +70,26 @@ function AppInner() {
|
||||||
</div>
|
</div>
|
||||||
<div className="App-center">
|
<div className="App-center">
|
||||||
<div className="App-content" ref={contentWrapper}>
|
<div className="App-content" ref={contentWrapper}>
|
||||||
{open ? (
|
{open ? (
|
||||||
<div className="App-drawer">{config.content}</div>
|
<div className="App-drawer">{config.content}</div>
|
||||||
) : (
|
) : (
|
||||||
<ChatMessageList />
|
<ChatMessageList />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="App-side">
|
<div className="App-side">
|
||||||
<UserList />
|
<UserList />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="App-bottom">
|
<div className="App-bottom-wrapper">
|
||||||
<div className="App-input">
|
<div className="App-bottom">
|
||||||
|
<div
|
||||||
|
className="App-bottom-extra"
|
||||||
|
style={{
|
||||||
|
visibility: quote ? "visible" : "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quote && <QuotedMessage />}
|
||||||
|
</div>
|
||||||
<UserInput />
|
<UserInput />
|
||||||
<UsersTyping />
|
<UsersTyping />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -49,3 +49,8 @@
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* List */
|
||||||
|
.ChatMessageList {
|
||||||
|
flex: 1;
|
||||||
|
}
|
|
@ -1,28 +1,15 @@
|
||||||
@keyframes sliding-up {
|
|
||||||
from {
|
|
||||||
top: 50px;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.QuotedMessage {
|
.QuotedMessage {
|
||||||
position: relative;
|
display: flex;
|
||||||
padding: 0.5rem 0;
|
align-items: center;
|
||||||
border-top: 1px solid var(--primary);
|
justify-content: space-between;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
animation: sliding-up 0.3s forwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.QuotedMessage-content {
|
.QuotedMessage-content {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
max-height: 40px;
|
max-height: 40px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue