From 26f9a41508049746aacb7602c7e344df4f5cd8c2 Mon Sep 17 00:00:00 2001 From: t1enne Date: Sat, 2 Jul 2022 09:08:36 +0200 Subject: [PATCH] Few changes to chat Added moderator icon changed styling for a name change message Now usernames collapse as long as the user is the same Imported two weights of Poppins and the OpenSans variable instead of def 400 This is some progress on #1859 and #1625 --- .../ChatContainer/ChatContainer.module.scss | 17 ++++++++++++ .../chat/ChatContainer/ChatContainer.tsx | 27 ++++++++++++++----- .../ChatUserMessage.module.scss | 22 +++++++-------- .../chat/ChatUserMessage/ChatUserMessage.tsx | 4 ++- web/components/ui/ModIcon.tsx | 23 ++++++++++++++++ web/components/ui/index.tsx | 1 + web/styles/globals.scss | 5 ++-- 7 files changed, 79 insertions(+), 20 deletions(-) create mode 100644 web/components/ui/ModIcon.tsx diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss index 46ef88f81..a171718bd 100644 --- a/web/components/chat/ChatContainer/ChatContainer.module.scss +++ b/web/components/chat/ChatContainer/ChatContainer.module.scss @@ -15,3 +15,20 @@ position: absolute; bottom: 5px; } + +.nameChangeView { + display: flex; + font-size: 0.9rem; + border-radius: var(--theme-rounded-corners); + padding: 5px 15px; + color: var(--color-owncast-gray-300); + background-color: var(--color-owncast-background); + & .nameChangeText { + font-weight: bold; + font-family: var(--theme-header-font-family); + & .plain { + font-weight: normal; + font-family: var(--font-owncast-family) !important; + } + } +} diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index 2c441c761..a3c9b9274 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -1,7 +1,7 @@ import { Button, Spin } from 'antd'; import { Virtuoso } from 'react-virtuoso'; import { useState, useMemo, useRef } from 'react'; -import { LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'; +import { EditFilled, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons'; import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events'; import s from './ChatContainer.module.scss'; import { ChatMessage } from '../../../interfaces/chat-message.model'; @@ -29,13 +29,20 @@ export default function ChatContainer(props: Props) { const color = `var(--theme-user-colors-${displayColor})`; return ( -
- {oldName} is now known as {displayName} +
+
+ +
+
+ {oldName} + is now known as + {displayName} +
); }; - const getViewForMessage = (message: ChatMessage | NameChangeEvent) => { + const getViewForMessage = (index: number, message: ChatMessage | NameChangeEvent) => { switch (message.type) { case MessageType.CHAT: return ( @@ -44,7 +51,7 @@ export default function ChatContainer(props: Props) { showModeratorMenu={isModerator} // Moderators have access to an additional menu highlightString={usernameToHighlight} // What to highlight in the message sentBySelf={message.user?.id === chatUserId} // The local user sent this message - sameUserAsLast={message.user?.id === messages[messages.length - 1].user?.id} + sameUserAsLast={isSameUserAsLast(messages, index)} key={message.id} /> ); @@ -63,7 +70,7 @@ export default function ChatContainer(props: Props) { ref={chatContainerRef} initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom data={messages} - itemContent={(_, message) => getViewForMessage(message)} + itemContent={(index, message) => getViewForMessage(index, message)} followOutput="auto" alignToBottom atBottomStateChange={bottom => setAtBottom(bottom)} @@ -100,3 +107,11 @@ export default function ChatContainer(props: Props) {
); } + +function isSameUserAsLast(messages: ChatMessage[], index: number) { + const message = messages[index] + const { user: { id }} = message + const lastMessage = messages[index - 1] + + return id === lastMessage?.user.id +} diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss index 11f77f437..0d2fe8fb4 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss @@ -3,7 +3,6 @@ font-size: 0.9rem; padding: 5px 15px 5px 5px; padding-left: 1rem; - // animation: chatFadeIn .1s ease-in; .background { position: absolute; z-index: -1; @@ -17,11 +16,16 @@ overflow: hidden; } .user { + display: flex; + align-items: center; font-family: var(--theme-header-font-family); font-weight: bold; + .userName { + margin-left: .3rem; + } } .message { - color: var(--color-owncast-grey-100); + color: var(--color-owncast-gray-300); mark { color: white; @@ -68,11 +72,16 @@ } } + .modMenuWrapper { position: absolute; display: none; top: 0; right: 10px; + & button:focus, + & button:active { + display: block !important; + } } &:hover .modMenuWrapper { @@ -81,12 +90,3 @@ } -@keyframes chatFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx index 82e5f6a64..d2f784c60 100644 --- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx +++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx @@ -8,6 +8,7 @@ import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icon import s from './ChatUserMessage.module.scss'; import { formatTimestamp } from './messageFmt'; import { ChatMessage } from '../../../interfaces/chat-message.model'; +import { ModIcon } from '../../ui'; interface Props { message: ChatMessage; @@ -46,7 +47,8 @@ export default function ChatUserMessage({ > {!sameUserAsLast && (
- {displayName} + + {displayName}
)} diff --git a/web/components/ui/ModIcon.tsx b/web/components/ui/ModIcon.tsx new file mode 100644 index 000000000..f0b2ed012 --- /dev/null +++ b/web/components/ui/ModIcon.tsx @@ -0,0 +1,23 @@ +export default function ModIcon({ + style = { width: '1rem', height: '1rem' }, + fill = 'none', + stroke = 'var(--color-owncast-gray-300)', +}) { + return ( + + This user has moderation rights + + + ); +} diff --git a/web/components/ui/index.tsx b/web/components/ui/index.tsx index 2d59f9be8..c8e2899d1 100644 --- a/web/components/ui/index.tsx +++ b/web/components/ui/index.tsx @@ -2,3 +2,4 @@ export { default as Header } from './Header/index'; export { default as Sidebar } from './Sidebar/index'; export { default as Footer } from './Footer/index'; export { default as Content } from './Content/index'; +export { default as ModIcon } from './ModIcon'; diff --git a/web/styles/globals.scss b/web/styles/globals.scss index e3003ca01..ff08c1fc8 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -1,5 +1,6 @@ -@import "@fontsource/open-sans"; -@import "@fontsource/poppins"; +@import "@fontsource/open-sans/variable.css"; +@import "@fontsource/poppins/400.css"; +@import "@fontsource/poppins/600.css"; // @import "~antd/dist/antd.dark";