Merge pull request #14453 from ramonlsouza/raise-hand-tooltip

Add tooltip to raise hand notification

bigbluebutton-html5/imports/ui/components/status-notifier/component.jsx

@@ -6,12 +6,17 @@ import Icon from '/imports/ui/components/common/icon/component';
 import { ENTER } from '/imports/utils/keyCodes';
 import Styled from './styles';
 import {Meteor} from "meteor/meteor";
+import TooltipContainer from '/imports/ui/components/common/tooltip/container';
 
 const messages = defineMessages({
   lowerHandsLabel: {
     id: 'app.statusNotifier.lowerHands',
     description: 'text displayed to clear all raised hands',
   },
+  lowerHandDescOneUser: {
+    id: 'app.statusNotifier.lowerHandDescOneUser',
+    description: 'text displayed to clear a single user raised hands',
+  },
   raisedHandsTitle: {
     id: 'app.statusNotifier.raisedHandsTitle',
     description: 'heading for raised hands toast',
@@ -75,7 +80,7 @@ class StatusNotifier extends Component {
             autoClose: false,
             closeOnClick: false,
             closeButton: false,
-            className: "actionToast",
+            className: "raiseHandToast",
           });
         }
         break;
@@ -118,22 +123,25 @@ class StatusNotifier extends Component {
   }
 
   raisedHandAvatars() {
-    const { emojiUsers, clearUserStatus } = this.props;
+    const { emojiUsers, clearUserStatus, intl } = this.props;
     let users = emojiUsers;
     if (emojiUsers.length > MAX_AVATAR_COUNT) users = users.slice(0, MAX_AVATAR_COUNT);
 
     const avatars = users.map(u => (
-      <Styled.Avatar
-        role="button"
-        tabIndex={0}
-        style={{ backgroundColor: `${u.color}` }}
-        onClick={() => clearUserStatus(u.userId)}
-        onKeyDown={e => (e.keyCode === ENTER ? clearUserStatus(u.userId) : null)}
+      <TooltipContainer
         key={`statusToastAvatar-${u.userId}`}
-        data-test="avatarsWrapperAvatar"
-      >
-        {u.name.slice(0, 2)}
-      </Styled.Avatar>
+        title={intl.formatMessage(messages.lowerHandDescOneUser, { 0: u.name })}>
+        <Styled.Avatar
+          role="button"
+          tabIndex={0}
+          style={{ backgroundColor: `${u.color}` }}
+          onClick={() => clearUserStatus(u.userId)}
+          onKeyDown={e => (e.keyCode === ENTER ? clearUserStatus(u.userId) : null)}
+          data-test="avatarsWrapperAvatar"
+        >
+          {u.name.slice(0, 2)}
+        </Styled.Avatar>
+      </TooltipContainer>
     ));
 
     if (emojiUsers.length > MAX_AVATAR_COUNT) {

bigbluebutton-html5/imports/ui/stylesheets/styled-components/globalStyles.js

@@ -148,6 +148,15 @@ const GlobalStyle = createGlobalStyle`
       left: none !important;
     }
   }
+
+  .raiseHandToast {
+    background-color: ${colorWhite};
+    padding: 1rem;
+
+    i.close {
+      left: none !important;
+    }
+  }
 `;
 
 export default GlobalStyle;

bigbluebutton-html5/public/locales/en.json

@@ -414,6 +414,7 @@
     "app.settings.dataSavingTab.description": "To save your bandwidth adjust what's currently being displayed.",
     "app.settings.save-notification.label": "Settings have been saved",
     "app.statusNotifier.lowerHands": "Lower Hands",
+    "app.statusNotifier.lowerHandDescOneUser": "Lower {0}'s hand",
     "app.statusNotifier.raisedHandsTitle": "Raised Hands",
     "app.statusNotifier.raisedHandDesc": "{0} raised their hands",
     "app.statusNotifier.raisedHandDescOneUser": "{0} raised hand",