netless-io · syt-honey · May 9, 2023 · May 9, 2023
diff --git a/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx b/packages/flat-components/src/components/ClassroomPage/RaiseHand/index.tsx
@@ -1,6 +1,6 @@
 import "./style.less";
 
-import React, { useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { isInteger } from "lodash-es";
 import { useTranslate } from "@netless/flat-i18n";
@@ -18,10 +18,30 @@ export const RaiseHand: React.FC<RaiseHandProps> = ({
     onRaiseHandChange,
 }) => {
     const t = useTranslate();
+    const [active, setActive] = useState(false);
+
+    const onClick = useCallback(() => {
+        onRaiseHandChange();
+        setActive(true);
+    }, [onRaiseHandChange]);
+
+    useEffect(() => {
+        if (active) {
+            const timer = setTimeout(() => setActive(false), 3000);
+            return () => clearTimeout(timer);
+        }
+        return;
+    }, [active]);
 
     return disableHandRaising ? null : (
-        <button className="raise-hand-btn" title={t("raise-your-hand")} onClick={onRaiseHandChange}>
-            <SVGHandUp active={isRaiseHand} />
+        <button
+            className={classNames("raise-hand-btn", {
+                "is-active": isRaiseHand || active,
+            })}
+            title={t("raise-your-hand")}
+            onClick={onClick}
+        >
+            <SVGHandUp active={isRaiseHand || active} />
         </button>
     );
 };

diff --git a/packages/flat-components/src/components/ClassroomPage/RaiseHand/style.less b/packages/flat-components/src/components/ClassroomPage/RaiseHand/style.less
@@ -2,14 +2,75 @@
     width: 100%;
     height: 100%;
     cursor: pointer;
-    border-radius: 24px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 50%;
+    border: 1.5px solid rgba(0, 0, 0, 0.15);
+    padding: 0;
     background: rgba(255, 255, 255, 0.9);
     font-size: 0;
     outline: 0;
+    position: relative;
 
     &:hover {
-        border: 1px solid var(--grey-3);
+        border: 1.5px solid var(--grey-3);
+    }
+
+    &::after {
+        content: '';
+        width: 51px;
+        height: 51px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 50 50'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%233381FF' fill-rule='evenodd' d='M2 25c0 12.703 10.297 23 23 23v2C11.193 50 0 38.807 0 25h2Zm46 0C48 12.297 37.703 2 25 2V0c13.807 0 25 11.193 25 25h-2Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='60.873' height='60.873' x='-5.437' y='-5.437' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeGaussianBlur in='BackgroundImageFix' stdDeviation='2.718'/%3E%3CfeComposite in2='SourceAlpha' operator='in' result='effect1_backgroundBlur_4735_3980'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_backgroundBlur_4735_3980' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"); // cspell:disable-line
+        animation: loading 1.5s infinite linear;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+    }
+
+    &.is-active>svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transform-origin: 50% 75%;
+        animation: vibrate 0.5s infinite linear;
+    }
+
+    &.is-active::after {
+        opacity: 1;
+    }
+}
+
+@keyframes loading {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes vibrate {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    25% {
+        transform: translate(-50%, -50%) rotate(15deg);
+    }
+
+    50% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    75% {
+        transform: translate(-50%, -50%) rotate(-15deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(0deg);
     }
 }
 

diff --git a/packages/flat-components/src/components/FlatIcons/icons/SVGHandUp.tsx b/packages/flat-components/src/components/FlatIcons/icons/SVGHandUp.tsx
@@ -7,27 +7,27 @@ export const SVGHandUp: React.FC<FlatIconProps> = ({ active, className = "", ...
         <svg
             className={`${className} flat-icon ${active ? "is-active" : ""}`}
             fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
+            height="38"
+            viewBox="0 0 38 38"
+            width="38"
             xmlns="http://www.w3.org/2000/svg"
             {...restProps}
         >
             <path
                 className="flat-icon-stroke-color"
-                d="M15.869 12.624a3 3 0 0 0-2.121 3.674"
+                d="M24.8 19.936a4.5 4.5 0 0 0-3.181 5.512"
                 stroke="#5D6066"
                 strokeLinejoin="round"
-                strokeWidth="1.25"
-            ></path>
+                strokeWidth="1.5"
+            />
             <path
                 className="flat-icon-stroke-color"
                 clipRule="evenodd"
-                d="m17.4 17.617 2.554-7.549a.862.862 0 0 0-.385-1.023.815.815 0 0 0-1.05.202l-2.65 3.377-2.07-7.727a1 1 0 0 0-1.932.517l1.294 4.83-.966.259-1.812-6.762a1 1 0 1 0-1.932.518l1.812 6.761-.966.26-1.553-5.796A1 1 0 0 0 5.812 6l1.553 5.796-.966.259-1.035-3.864a1 1 0 1 0-1.932.518l2.588 9.659a4 4 0 0 0 4.9 2.828l3.727-.998a4 4 0 0 0 2.754-2.582Z"
+                d="m27.101 27.425 3.83-11.323a1.294 1.294 0 0 0-.578-1.535 1.223 1.223 0 0 0-1.574.304l-3.976 5.065-3.105-11.59a1.5 1.5 0 1 0-2.898.776l1.217 7.438-3.442-9.948a1.5 1.5 0 0 0-2.898.777l1.993 10.336-3.054-8.5a1.5 1.5 0 1 0-2.898.777l1.605 8.888-2.277-5.602a1.5 1.5 0 0 0-2.898.777l3.882 14.489a6 6 0 0 0 7.349 4.242l5.591-1.498a6 6 0 0 0 4.131-3.873Z"
                 stroke="#5D6066"
                 strokeLinejoin="round"
-                strokeWidth="1.25"
-            ></path>
+                strokeWidth="1.5"
+            />
         </svg>
     );
 };

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -26,6 +26,7 @@
   "raise-your-hand": "Raise hand",
   "raise-hand": "Raise hand",
   "raised-hand": "Hand raised",
+  "have-raised-hand": "You have raised hand",
   "has-left": "Has left",
   "offline": "offline",
   "no-students": "No students",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -19,6 +19,7 @@
   "ban": "全体禁言",
   "raise-your-hand": "举手",
   "raise-hand": "举手",
+  "have-raised-hand": "你已举手",
   "all-staff-are-under-ban": "全员禁言中",
   "send": "发送",
   "teacher": "老师",

diff --git a/packages/flat-pages/src/components/Whiteboard.less b/packages/flat-pages/src/components/Whiteboard.less
@@ -17,6 +17,7 @@
         }
 
         &.can-operate {
+
             .fastboard-left,
             .fastboard-bottom-left,
             .fastboard-bottom-right {
@@ -90,8 +91,8 @@
 
 .raise-hand-container {
     position: absolute;
-    width: 48px;
-    height: 48px;
+    width: 50px;
+    height: 50px;
     right: 8px;
     bottom: 48px;
     z-index: 3;

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -1036,6 +1036,8 @@ export class ClassroomStore {
                 { roomUUID: this.roomUUID, raiseHand: !this.users.currentUser.isRaiseHand },
                 this.ownerUUID,
             );
+
+            message.info(FlatI18n.t("have-raised-hand"));
         }
     };