ref(chat) Move styles from SCSS to JSS (#13559)

2026-02-28 08:40:20 +00:00 · 2023-07-17 16:01:24 +03:00
parent 1c80771405
commit 1395bd94de
6 changed files with 97 additions and 196 deletions
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -174,3 +174,16 @@ form {
 .jitsi-icon svg path {
    fill: inherit !important;
 }
+
+.sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+}
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -1,35 +1,3 @@
-#sideToolbarContainer {
-    background-color: $chatBackgroundColor;
-    flex-shrink: 0;
-    overflow: hidden;
-    position: relative;
-    transition: width .16s ease-in-out;
-    width: $sidebarWidth;
-    z-index: 300;
-
-    @media (max-width: 580px) {
-        height: 100vh;
-        height: -webkit-fill-available;
-        left: 0;
-        position: fixed;
-        right: 0;
-        top: 0;
-        width: auto;
-    }
-}
-
-.chat-panel {
-    display: flex;
-    flex-direction: column;
-    // extract header + tabs height
-    height: calc(100% - 119px);
-}
-
-.chat-panel-no-tabs {
-    // extract header height
-    height: calc(100% - 70px);
-}
-
 #chat-conversation-container {
    // extract message input height
    height: calc(100% - 64px);
@@ -76,27 +44,6 @@
    }
 }

-
-.chat-header {
-    height: 70px;
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-    padding: 16px;
-    align-items: center;
-    box-sizing: border-box;
-    color: #fff;
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 32px;
-
-    .jitsi-icon {
-        cursor: pointer;
-    }
-}
-
 .chat-input-container {
    padding: 0 16px 24px;
 }
@@ -112,61 +59,6 @@
    margin-right: 8px;
 }

-.smiley-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 38px;
-    width: 38px;
-    margin: 2px;
-    border-radius: 3px;
-}
-
-#chat-input .smiley-button {
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            background-color: #484A4F;
-        }
-    }
-}
-
-.remoteuser {
-    color: #B8C7E0;
-}
-
-.usrmsg-form {
-    flex: 1;
-}
-
-#usermsg {
-    -ms-overflow-style: none;
-    border: 0px none;
-    border-radius:0;
-    box-shadow: none;
-    color: white;
-    font-size: 14px;
-    padding: 10px;
-    overflow-y: auto;
-    resize: none;
-    scrollbar-width: none;
-    width: 100%;
-    word-break: break-word;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-#usermsg:hover {
-    border: 0px none;
-    box-shadow: none;
-}
-#usermsg:focus,
-#usermsg:active {
-    border-bottom: 1px solid white;
-    padding-bottom: 8px;
- }
-
 #nickname {
    text-align: center;
    color: #9d9d9d;
@@ -174,11 +66,6 @@
    margin: auto 0;
    padding: 0 16px;

-    #nickname-title {
-        margin-bottom: 5px;
-        display: block;
-    }
-
    label[for="nickinput"] {
        > div > span {
            color: #B8C7E0;
@@ -191,24 +78,6 @@
    label {
        line-height: 24px;
    }
-
-    .enter-chat {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 16px;
-        height: 40px;
-        background: #1B67EC;
-        border-radius: 3px;
-        color: #fff;
-        cursor: pointer;
-
-        &.disabled {
-            color: #AFB6BC;
-            background: #11336E;
-            pointer-events: none;
-        }
-    }
 }

 .mobile-browser {
@@ -216,14 +85,6 @@
        input {
            height: 48px;
        }
-
-        .enter-chat {
-            height: 48px;
-        }
-    }
-
-    #usermsg {
-        font-size: 16px;
    }

    .chatmessage .usermessage {
@@ -231,32 +92,7 @@
    }
 }

-.sideToolbarContainer {
-    * {
-        -webkit-user-select: text;
-        user-select: text;
-    }
-}
-
-.sr-only {
-    border: 0 !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    clip-path: inset(50%) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    position: absolute !important;
-    width: 1px !important;
-    white-space: nowrap !important;
-}
-
 .chatmessage {
-    &.localuser {
-        background-color: #484A4F;
-        border-radius: 6px 0px 6px 6px;
-    }
-
    &.error {
        border-radius: 0px;

@@ -288,13 +124,6 @@
    padding: 2px;
 }

-#smileysarea {
-    display: flex;
-    max-height: 150px;
-    min-height: 35px;
-    overflow: hidden;
-}
-
 .smiley-input {
    display: flex;
    position: absolute;
@@ -345,10 +174,6 @@
    cursor: pointer;
 }

-#usermsg::-webkit-scrollbar-track-piece {
-    background: #3a3a3a;
-}
-
 .chat-message-group {
    &.local {
        align-items: flex-end;
--- a/css/_polls.scss
+++ b/css/_polls.scss
@@ -1,3 +0,0 @@
-.polls-panel {
-    height: calc(100% - 119px);
-}
--- a/css/main.scss
+++ b/css/main.scss
@@ -77,6 +77,5 @@ $flagsImagePath: "../images/";
@import 'participants-pane';
@import 'reactions-menu';
@import 'plan-limit';
-@import 'polls';

 /* Modules END */
--- a/react/features/chat/components/web/Chat.tsx
+++ b/react/features/chat/components/web/Chat.tsx
@@ -1,14 +1,15 @@
-import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';

 import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { getLocalParticipant } from '../../../base/participants/functions';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Tabs from '../../../base/ui/components/web/Tabs';
 import PollsPane from '../../../polls/components/web/PollsPane';
 import { sendMessage, setIsPollsTabFocused, toggleChat } from '../../actions.web';
-import { CHAT_TABS, SMALL_WIDTH_THRESHOLD } from '../../constants';
+import { CHAT_SIZE, CHAT_TABS, SMALL_WIDTH_THRESHOLD } from '../../constants';
 import { IChatProps as AbstractProps } from '../../types';

 import ChatHeader from './ChatHeader';
@@ -77,6 +78,70 @@ interface IProps extends AbstractProps {
    _showNamePrompt: boolean;
 }

+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            backgroundColor: theme.palette.ui01,
+            flexShrink: 0,
+            overflow: 'hidden',
+            position: 'relative',
+            transition: 'width .16s ease-in-out',
+            width: `${CHAT_SIZE}px`,
+            zIndex: 300,
+
+            '@media (max-width: 580px)': {
+                height: '100vh',
+                position: 'fixed',
+                left: 0,
+                right: 0,
+                top: 0,
+                width: 'auto'
+            },
+
+            '*': {
+                userSelect: 'text',
+                '-webkit-user-select': 'text'
+            }
+        },
+
+        chatHeader: {
+            height: '60px',
+            position: 'relative',
+            width: '100%',
+            zIndex: 1,
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: `${theme.spacing(3)} ${theme.spacing(4)}`,
+            alignItems: 'center',
+            boxSizing: 'border-box',
+            color: theme.palette.text01,
+            ...withPixelLineHeight(theme.typography.heading6),
+
+            '.jitsi-icon': {
+                cursor: 'pointer'
+            }
+        },
+
+        chatPanel: {
+            display: 'flex',
+            flexDirection: 'column',
+
+            // extract header + tabs height
+            height: 'calc(100% - 110px)'
+        },
+
+        chatPanelNoTabs: {
+            // extract header height
+            height: 'calc(100% - 60px)'
+        },
+
+        pollsPanel: {
+            // extract header + tabs height
+            height: 'calc(100% - 110px)'
+        }
+    };
+});
+
 const Chat = ({
    _isModal,
    _isOpen,
@@ -93,6 +158,8 @@ const Chat = ({
    dispatch,
    t
 }: IProps) => {
+    const { classes, cx } = useStyles();
+
    /**
    * Sends a text message.
    *
@@ -120,7 +187,7 @@ const Chat = ({
     * @param {KeyboardEvent} event - Esc key click to close the popup.
     * @returns {void}
     */
-    const _onEscClick = useCallback((event: React.KeyboardEvent) => {
+    const onEscClick = useCallback((event: React.KeyboardEvent) => {
        if (event.key === 'Escape' && _isOpen) {
            event.preventDefault();
            event.stopPropagation();
@@ -134,7 +201,7 @@ const Chat = ({
     * @param {string} id - Id of the clicked tab.
     * @returns {void}
     */
-    const _onChangeTab = useCallback((id: string) => {
+    const onChangeTab = useCallback((id: string) => {
        dispatch(setIsPollsTabFocused(id !== CHAT_TABS.CHAT));
    }, []);

@@ -145,15 +212,15 @@ const Chat = ({
     * @private
     * @returns {ReactElement}
     */
-    function _renderChat() {
+    function renderChat() {
        return (
            <>
-                {_isPollsEnabled && _renderTabs()}
+                {_isPollsEnabled && renderTabs()}
                <div
                    aria-labelledby = { CHAT_TABS.CHAT }
-                    className = { clsx(
-                        'chat-panel',
-                        !_isPollsEnabled && 'chat-panel-no-tabs',
+                    className = { cx(
+                        classes.chatPanel,
+                        !_isPollsEnabled && classes.chatPanelNoTabs,
                        _isPollsTabFocused && 'hide'
                    ) }
                    id = { `${CHAT_TABS.CHAT}-panel` }
@@ -169,7 +236,7 @@ const Chat = ({
                    <>
                        <div
                            aria-labelledby = { CHAT_TABS.POLLS }
-                            className = { clsx('polls-panel', !_isPollsTabFocused && 'hide') }
+                            className = { cx(classes.pollsPanel, !_isPollsTabFocused && 'hide') }
                            id = { `${CHAT_TABS.POLLS}-panel` }
                            role = 'tabpanel'
                            tabIndex = { 0 }>
@@ -188,11 +255,11 @@ const Chat = ({
     * @private
     * @returns {ReactElement}
     */
-    function _renderTabs() {
+    function renderTabs() {
        return (
            <Tabs
                accessibilityLabel = { t(_isPollsEnabled ? 'chat.titleWithPolls' : 'chat.title') }
-                onChange = { _onChangeTab }
+                onChange = { onChangeTab }
                selected = { _isPollsTabFocused ? CHAT_TABS.POLLS : CHAT_TABS.CHAT }
                tabs = { [ {
                    accessibilityLabel: t('chat.tabs.chat'),
@@ -213,16 +280,16 @@ const Chat = ({

    return (
        _isOpen ? <div
-            className = 'sideToolbarContainer'
+            className = { classes.container }
            id = 'sideToolbarContainer'
-            onKeyDown = { _onEscClick } >
+            onKeyDown = { onEscClick } >
            <ChatHeader
-                className = 'chat-header'
+                className = { cx('chat-header', classes.chatHeader) }
                isPollsEnabled = { _isPollsEnabled }
                onCancel = { onToggleChat } />
            {_showNamePrompt
                ? <DisplayNameForm isPollsEnabled = { _isPollsEnabled } />
-                : _renderChat()}
+                : renderChat()}
        </div> : null
    );
 };
--- a/react/features/chat/constants.ts
+++ b/react/features/chat/constants.ts
@@ -1,5 +1,5 @@
 /**
- * The size of the chat.
+ * The size of the chat. Equal to $sidebarWidth SCSS variable.
 */
 export const CHAT_SIZE = 315;