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