refactor(flat-components): update raise hand button styles (netless-i…

…o#1824) * refactor(flat-components): update raise hand button styles * refactor: update users button active state
andot-fork · Feb 2, 2023 · 302737f · 302737f
1 parent 5fd0a79
commit 302737f
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 57 deletions.
diff --git a/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx b/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
@@ -28,15 +28,16 @@ export const RaiseHand: React.FC<RaiseHandProps> = ({
 
 export interface RaisingHandProps {
     count: number;
+    active?: boolean;
     onClick: () => void;
 }
 
-export const RaisingHand: React.FC<RaisingHandProps> = ({ count, onClick }) => {
+export const RaisingHand: React.FC<RaisingHandProps> = ({ count, active = false, onClick }) => {
     const t = useTranslate();
 
     const countLabel = useMemo(
         () =>
-            isInteger(count) ? (
+            isInteger(count) && count > 0 ? (
                 <span
                     className={classNames("raise-hand-red-dot", {
                         "is-large": count > 9,
@@ -48,10 +49,10 @@ export const RaisingHand: React.FC<RaisingHandProps> = ({ count, onClick }) => {
         [count],
     );
 
-    return count > 0 ? (
+    return (
         <button className="raise-hand-btn" title={t("raise-your-hand")} onClick={onClick}>
-            <SVGHandUp active />
+            <SVGHandUp active={active} />
             {countLabel}
         </button>
-    ) : null;
+    );
 };
diff --git a/packages/flat-components/src/components/UsersPanel/index.tsx b/packages/flat-components/src/components/UsersPanel/index.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react-lite";
 import { FlatI18nTFunction, useTranslate } from "@netless/flat-i18n";
 import { User } from "../../types/user";
 import { IconMic } from "../ClassroomPage/VideoAvatar/IconMic";
-import { SVGCamera, SVGCameraMute, SVGMicrophoneMute } from "../FlatIcons";
+import { SVGCamera, SVGCameraMute, SVGHandUp, SVGMicrophoneMute } from "../FlatIcons";
 
 export interface UsersPanelRoomInfo {
     ownerName?: string;
@@ -81,7 +81,7 @@ export const UsersPanel = /* @__PURE__ */ observer<UsersPanelProps>(function Use
                             <th>{t("camera")}</th>
                             <th>{t("microphone")}</th>
                             <th>
-                                {t("raise-hand")} ({users.filter(user => user.isRaiseHand).length})
+                                {t("raised-hand")} ({users.filter(user => user.isRaiseHand).length})
                             </th>
                         </tr>
                     </thead>
@@ -194,7 +194,7 @@ const Row = /* @__PURE__ */ observer(function Row({
                         {camera ? <SVGCamera active /> : <SVGCameraMute />}
                     </button>
                 ) : (
-                    <span className="users-panel-media-off">-/-</span>
+                    <span className="users-panel-media-off">--</span>
                 )}
             </td>
             <td>
@@ -209,40 +209,44 @@ const Row = /* @__PURE__ */ observer(function Row({
                         {mic ? <IconMic getVolumeLevel={getVolumeLevel} /> : <SVGMicrophoneMute />}
                     </button>
                 ) : (
-                    <span className="users-panel-media-off">-/-</span>
+                    <span className="users-panel-media-off">--</span>
                 )}
             </td>
             <td className="users-panel-btn-group">
                 {user.isRaiseHand ? (
-                    <>
-                        <Button
-                            className="users-panel-small-btn is-ok"
-                            disabled={!isCreator}
-                            size="small"
-                            type="link"
-                            onClick={() => isCreator && onStaging?.(user.userUUID, true)}
-                        >
-                            {t("agree")}
-                        </Button>
-                        <span
-                            className={classNames("users-panel-small-btn-splitter", {
-                                "is-disabled": !isCreator,
-                            })}
-                        >
-                            /
-                        </span>
-                        <Button
-                            className="users-panel-small-btn is-cancel"
-                            disabled={!isCreator}
-                            size="small"
-                            type="link"
-                            onClick={() => isCreator && onStaging?.(user.userUUID, false)}
-                        >
-                            {t("cancel")}
-                        </Button>
-                    </>
+                    isCreator ? (
+                        <>
+                            <Button
+                                className="users-panel-small-btn is-ok"
+                                disabled={!isCreator}
+                                size="small"
+                                type="link"
+                                onClick={() => isCreator && onStaging?.(user.userUUID, true)}
+                            >
+                                {t("agree")}
+                            </Button>
+                            <span
+                                className={classNames("users-panel-small-btn-splitter", {
+                                    "is-disabled": !isCreator,
+                                })}
+                            >
+                                /
+                            </span>
+                            <Button
+                                className="users-panel-small-btn is-cancel"
+                                disabled={!isCreator}
+                                size="small"
+                                type="link"
+                                onClick={() => isCreator && onStaging?.(user.userUUID, false)}
+                            >
+                                {t("cancel")}
+                            </Button>
+                        </>
+                    ) : (
+                        <SVGHandUp className="users-panel-small-btn is-hand" />
+                    )
                 ) : (
-                    <span className="users-panel-media-off">-/-</span>
+                    <span className="users-panel-media-off">--</span>
                 )}
             </td>
         </tr>

diff --git a/packages/flat-components/src/components/UsersPanel/style.less b/packages/flat-components/src/components/UsersPanel/style.less
@@ -119,9 +119,17 @@
 .users-panel-small-btn {
     padding: 0;
 
-    &.is-cancel {
+    &.is-cancel, &.is-hand {
         color: var(--text-weak);
     }
+
+    .flat-icon-fill-color {
+        fill: currentColor;
+    }
+
+    .flat-icon-stroke-color {
+        stroke: currentColor;
+    }
 }
 
 .users-panel-media-btn {
@@ -133,10 +141,11 @@
     overflow: hidden;
     font-size: 0;
     vertical-align: text-top;
-    color: var(--text-weak);
+    color: var(--danger);
     cursor: pointer;
 
     &:disabled {
+        color: var(--text-weak);
         cursor: not-allowed;
         opacity: 0.8;
     }

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -13,7 +13,7 @@
   "upload-exception": "Exception",
   "upload-fail": "Failed",
   "upload-success": "Successful",
-  "agree": "agree",
+  "agree": "Agree",
   "all-staff-are-under-ban": "All members are mute",
   "ban": "Mute All",
   "banned": "Muted",
@@ -24,10 +24,11 @@
   "messages": "Chat",
   "raise-your-hand": "Raise hand",
   "raise-hand": "Raise hand",
-  "raised-hand": "(Hand raised)",
+  "raised-hand": "Hand raised",
   "has-left": "(Has left)",
   "offline": "offline",
   "no-students": "No students",
+  "no-one-raising-hand": "No one is raising hand",
   "say-something": "Say something...",
   "send": "send",
   "teacher": "Teacher",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -24,10 +24,11 @@
   "teacher": "老师",
   "during-the-presentation": "(发言中)",
   "end": "结束",
-  "raised-hand": "(已举手)",
+  "raised-hand": "举手",
   "has-left": "（已离开）",
   "offline": "已离线",
   "no-students": "暂无学生",
+  "no-one-raising-hand": "暂无学生举手",
   "agree": "通过",
   "me": "(我)",
   "cancel-hand-raising": "取消举手",

diff --git a/packages/flat-pages/src/components/UsersButton.tsx b/packages/flat-pages/src/components/UsersButton.tsx
@@ -80,12 +80,10 @@ export const UsersButton = observer<UsersButtonProps>(function UsersButton({ cla
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [t, classroom.isRequestingMic, getDeviceState]);
 
-    const hasRaisingHand = !!classroom.classroomStorage?.state.raiseHandUsers.length;
-
     return (
         <>
             <TopBarRightBtn
-                icon={<SVGUserGroup active={classroom.isCreator && hasRaisingHand} />}
+                icon={<SVGUserGroup active={open} />}
                 title={t("users")}
                 onClick={() => setOpen(!open)}
             />

diff --git a/packages/flat-pages/src/components/Whiteboard.less b/packages/flat-pages/src/components/Whiteboard.less
@@ -103,6 +103,7 @@
     right: 64px;
     bottom: 48px;
     width: 200px;
+    min-height: 58px;
     max-height: 400px;
     border: 1px solid var(--grey-3);
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
@@ -115,6 +116,14 @@
 
     &.is-active {
         display: block;
+
+        &.is-empty {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--grey-5);
+            font-size: 14px;
+        }
     }
 }
 

diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -52,6 +52,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     const [showPage, setShowPage] = useState(false);
 
     const isReconnecting = phase === RoomPhase.Reconnecting;
+    const handRaisingCount = classRoomStore.users.handRaisingJoiners.length;
 
     useEffect(() => {
         return whiteboard.events.on("exportAnnotations", () => showSaveAnnotation(true));
@@ -190,15 +191,15 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                                 />
                             </div>
                         )}
-                    {whiteboardStore.isCreator &&
-                        classRoomStore.users.handRaisingJoiners.length > 0 && (
-                            <div className="raise-hand-container">
-                                <RaisingHand
-                                    count={classRoomStore.users.handRaisingJoiners.length}
-                                    onClick={classRoomStore.onToggleHandRaisingPanel}
-                                />
-                            </div>
-                        )}
+                    {whiteboardStore.isCreator && (
+                        <div className="raise-hand-container">
+                            <RaisingHand
+                                active={handRaisingCount > 0}
+                                count={handRaisingCount}
+                                onClick={classRoomStore.onToggleHandRaisingPanel}
+                            />
+                        </div>
+                    )}
                     <div
                         ref={bindWhiteboard}
                         className={classNames("whiteboard", {
@@ -216,9 +217,8 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                     </div>
                     <div
                         className={classNames("hand-raising-panel", {
-                            "is-active":
-                                classRoomStore.users.handRaisingJoiners.length > 0 &&
-                                classRoomStore.isHandRaisingPanelVisible,
+                            "is-active": classRoomStore.isHandRaisingPanelVisible,
+                            "is-empty": handRaisingCount === 0,
                         })}
                     >
                         {classRoomStore.users.handRaisingJoiners.map(user => (
@@ -241,6 +241,9 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                                 </button>
                             </div>
                         ))}
+                        {handRaisingCount === 0 && (
+                            <div className="hand-raising-empty">{t("no-one-raising-hand")}</div>
+                        )}
                     </div>
                 </div>
             )}