From 96bf16484c1e04e717ac753e9ebeba29cfab6a49 Mon Sep 17 00:00:00 2001 From: Outrun Colors Date: Sun, 25 Sep 2022 14:23:10 -0500 Subject: [PATCH] Change how chat actions look --- chat/src/App.css | 6 + chat/src/features/chat/ChatMessage.css | 59 +++++++-- chat/src/features/chat/ChatMessage.tsx | 121 +++++++++++++------ chat/src/features/chat/QuotedMessageLink.css | 3 + chat/src/features/chat/QuotedMessageLink.tsx | 3 +- chat/src/features/chat/UserInput.tsx | 2 +- 6 files changed, 145 insertions(+), 49 deletions(-) create mode 100644 chat/src/features/chat/QuotedMessageLink.css diff --git a/chat/src/App.css b/chat/src/App.css index 83fa2025a..81aab32a0 100644 --- a/chat/src/App.css +++ b/chat/src/App.css @@ -37,6 +37,7 @@ body { .App-heading small { opacity: 0.2; + font-size: 10px; } .App-side { @@ -122,4 +123,9 @@ lite-youtube { .btn-secondary { border: none !important; +} + +.btn-secondary:focus { + border: none !important; + box-shadow: none !important; } \ No newline at end of file diff --git a/chat/src/features/chat/ChatMessage.css b/chat/src/features/chat/ChatMessage.css index 066c0d88a..d6c445d31 100644 --- a/chat/src/features/chat/ChatMessage.css +++ b/chat/src/features/chat/ChatMessage.css @@ -10,8 +10,20 @@ .ChatMessage { position: relative; animation: fading-in 0.3s ease-in-out forwards; - padding: 1rem; - padding-right: 3rem; + padding-right: 1.5rem; + min-height: 28px; +} + +.ChatMessage p { + margin: 0; +} + +.ChatMessage__showingUser:not(:first-child) { + margin-top: 2rem; +} + +.ChatMessage:not(.ChatMessage__showingUser) { + padding-bottom: 0; } .ChatMessage .btn { @@ -25,6 +37,8 @@ .ChatMessage-timestamp { margin-left: 0.5rem; + opacity: 0.5; + font-size: 10px; } .ChatMessage-bottom { @@ -41,20 +55,51 @@ } .ChatMessage-button { - background: transparent !important; + margin: 0 0.5rem; } -.ChatMessage-button__confirmed i { +.ChatMessage-button i { + margin-right: 0.5rem; +} + +.ChatMessage-button__confirmed { color: red !important; } -.ChatMessage-delete { +.ChatMessage-actions-button { position: absolute; - top: 4px; - right: 4px; + top: 0; + right: 0; + cursor: pointer; + z-index: 5; + background: none !important; + border: none !important; + box-shadow: none !important; +} + +.ChatMessage-actions { + z-index: 1; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(20, 20, 20, 0.85); + display: flex; + align-items: center; + justify-content: flex-end; + padding: 1rem; + padding-right: 3rem; + animation: fading-in 0.3s ease-in-out forwards; +} + +.ChatMessage-actions button { + font-size: 10px; + background: none !important; } /* List */ .ChatMessageList { flex: 1; + padding-bottom: 2rem; } \ No newline at end of file diff --git a/chat/src/features/chat/ChatMessage.tsx b/chat/src/features/chat/ChatMessage.tsx index 6c985d0b2..b4c667858 100644 --- a/chat/src/features/chat/ChatMessage.tsx +++ b/chat/src/features/chat/ChatMessage.tsx @@ -1,9 +1,4 @@ -import React, { - useCallback, - useEffect, - useMemo, - useState, -} from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import cx from "classnames"; import key from "weak-key"; import humanizeDuration from "humanize-duration"; @@ -37,20 +32,16 @@ export function ChatMessage({ time, quotes, } = message; - const { - username: loggedInUsername, - admin, - censored, - themeColor, - } = useRootContext(); + const { admin, censored } = useRootContext(); const { messageLookup, deleteMessage, quoteMessage } = useChat(); const quotedMessage = messageLookup[quotes]; const content = censored ? text_censored : text_html; - const hasMention = content.includes(loggedInUsername); - const mentionStyle = hasMention - ? { backgroundColor: `#${themeColor}55` } - : {}; + const [showingActions, setShowingActions] = useState(false); const [confirmedDelete, setConfirmedDelete] = useState(false); + const timestamp = useMemo( + () => formatTimeAgo(time), + [time, timestampUpdates] + ); const handleDeleteMessage = useCallback(() => { if (confirmedDelete) { deleteMessage(text); @@ -58,13 +49,63 @@ export function ChatMessage({ setConfirmedDelete(true); } }, [text, confirmedDelete]); - const timestamp = useMemo( - () => formatTimeAgo(time), - [time, timestampUpdates] + const toggleMessageActions = useCallback( + () => setShowingActions((prev) => !prev), + [] ); + const handleQuoteMessage = useCallback(() => { + quoteMessage(message); + setShowingActions(false); + }, [message]); + + useEffect(() => { + if (!showingActions) { + setConfirmedDelete(false); + } + }, [showingActions]); return ( -
+
+ {!showingActions && ( + + )} + {showingActions && ( +
+ + {admin && ( + + )} + +
+ )} {showUser && (
-
- {admin && ( - - )}
); @@ -138,12 +163,28 @@ export function ChatMessageList() { } function formatTimeAgo(time: number) { - const now = new Date().getTime(); - const humanized = `${humanizeDuration(time * 1000 - now, { + const shortEnglishHumanizer = humanizeDuration.humanizer({ + language: "shortEn", + languages: { + shortEn: { + y: () => "y", + mo: () => "mo", + w: () => "w", + d: () => "d", + h: () => "h", + m: () => "m", + s: () => "s", + ms: () => "ms", + }, + }, round: true, units: ["h", "m", "s"], largest: 2, - })} ago`; + spacer: "", + delimiter: ", ", + }); + const now = new Date().getTime(); + const humanized = `${shortEnglishHumanizer(time * 1000 - now)} ago`; - return humanized === "0 seconds ago" ? "just now" : humanized; + return humanized === "0s ago" ? "just now" : humanized; } diff --git a/chat/src/features/chat/QuotedMessageLink.css b/chat/src/features/chat/QuotedMessageLink.css new file mode 100644 index 000000000..e6667b8d5 --- /dev/null +++ b/chat/src/features/chat/QuotedMessageLink.css @@ -0,0 +1,3 @@ +.QuotedMessageLink { + font-size: 10px; +} \ No newline at end of file diff --git a/chat/src/features/chat/QuotedMessageLink.tsx b/chat/src/features/chat/QuotedMessageLink.tsx index 103d3a8ed..46ee0f546 100644 --- a/chat/src/features/chat/QuotedMessageLink.tsx +++ b/chat/src/features/chat/QuotedMessageLink.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useMemo } from "react"; import { useRootContext } from "../../hooks"; +import "./QuotedMessageLink.css"; const SCROLL_TO_QUOTED_OVERFLOW = 250; const QUOTED_MESSAGE_CONTEXTUAL_HIGHLIGHTING_DURATION = 2500; @@ -40,7 +41,7 @@ export function QuotedMessageLink({ message }: { message: IChatMessage }) { }, [message, censored]); return ( - + Replying to @{message.username}:{" "} "{replyText}" diff --git a/chat/src/features/chat/UserInput.tsx b/chat/src/features/chat/UserInput.tsx index b1743db68..96dbd0f1d 100644 --- a/chat/src/features/chat/UserInput.tsx +++ b/chat/src/features/chat/UserInput.tsx @@ -47,7 +47,7 @@ export function UserInput() { ); const handleKeyUp = useCallback( (event: KeyboardEvent) => { - if (event.key === "Enter") { + if (event.key === "Enter" && !event.shiftKey) { handleSendMessage(); } },