gerudo
/
rDrama
forked from rDrama/rDrama
1
0
Fork 0
Code Pull Requests Activity

Merge branch 'frost' of https://github.com/Aevann1/rDrama into frost

master
Aevann1 2022-09-25 05:08:46 +02:00
parent f4b41f0049 d4c76391e1
commit 9a04df862b
4 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
chat/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "chat", "name": "chat",
"version": "0.0.16", "version": "0.0.18",
"main": "./src/index.tsx", "main": "./src/index.tsx",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

4
chat/src/App.css
View File

@ -94,6 +94,10 @@ body {
/* 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-heading {
padding: 0 1rem;
}
.App-side { .App-side {
display: none; display: none;
} }

12
chat/src/features/chat/UserInput.css
View File

@ -1,11 +1,17 @@
.UserInput { .UserInput {
position: relative; position: relative;
display: flex;
align-items: center;
}
.UserInput-input {
flex: 1;
margin-right: 2rem;
} }
.UserInput-emoji { .UserInput-emoji {
cursor: pointer; cursor: pointer;
position: absolute;
top: 12px;
right: 12px;
font-size: 20px; font-size: 20px;
transform: rotateY(180deg);
margin-right: 1rem;
} }

49
chat/src/features/chat/UserInput.tsx
View File

@ -12,7 +12,7 @@ import { EmojiDrawer, QuickEmojis } from "../emoji";
import "./UserInput.css"; import "./UserInput.css";
export function UserInput() { export function UserInput() {
const { messages, draft, sendMessage, updateDraft } = useChat(); const { draft, sendMessage, updateDraft } = useChat();
const { reveal, hide, open } = useDrawer(); const { reveal, hide, open } = useDrawer();
const builtChatInput = useRef<HTMLTextAreaElement>(null); const builtChatInput = useRef<HTMLTextAreaElement>(null);
const { visible, addQuery } = useEmojis(); const { visible, addQuery } = useEmojis();
@ -53,8 +53,8 @@ export function UserInput() {
}, },
[handleSendMessage] [handleSendMessage]
); );
const handleOpenEmojiDrawer = useCallback( const handleToggleEmojiDrawer = useCallback(() => {
() => if (open) {
reveal({ reveal({
title: "Select an emoji", title: "Select an emoji",
content: ( content: (
@ -63,13 +63,12 @@ export function UserInput() {
onClose={() => builtChatInput.current?.focus()} onClose={() => builtChatInput.current?.focus()}
/> />
), ),
}), });
[] } else {
); builtChatInput.current?.focus();
const handleCloseEmojiDrawer = useCallback(() => { hide();
builtChatInput.current?.focus(); }
hide(); }, [open]);
}, [hide]);
const handleSelectEmoji = useCallback((emoji: string) => { const handleSelectEmoji = useCallback((emoji: string) => {
updateDraft((prev) => `${prev} :${emoji}: `); updateDraft((prev) => `${prev} :${emoji}: `);
}, []); }, []);
@ -108,7 +107,7 @@ export function UserInput() {
<textarea <textarea
ref={builtChatInput} ref={builtChatInput}
id="builtChatInput" id="builtChatInput"
className="form-control" className="UserInput-input form-control"
style={{ style={{
minHeight: 50, minHeight: 50,
height: 50, height: 50,
@ -123,22 +122,18 @@ export function UserInput() {
autoComplete="off" autoComplete="off"
value={draft} value={draft}
/> />
{open ? ( <i
<span role="button"
role="button" onClick={handleToggleEmojiDrawer}
onClick={handleCloseEmojiDrawer} className="UserInput-emoji fas fa-smile-beam"
className="UserInput-emoji" />
style={{ top: 6 }} <button
> className="btn btn-secondary"
X disabled={draft.length === 0}
</span> onClick={sendMessage}
) : ( >
<i <i className="UserInput-emoji fas fa-reply" />
role="button" </button>
onClick={handleOpenEmojiDrawer}
className="UserInput-emoji fas fa-smile-beam"
/>
)}
</form> </form>
); );
} }