Implement missing tooltips (#644)

mattermost · Feb 29, 2024 · 0d7e31c · 0d7e31c
1 parent 6b610aa
commit 0d7e31c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
@@ -40,6 +40,7 @@
   "AYHboe": "This is a paid feature, available with a free 30-day trial",
   "BzWJNo": "You don't have permission to stop the recording. Please ask the call host to stop the recording.",
   "Cbb/An": "Lower hand",
+  "D3idYv": "Settings",
   "DKskNw": "You don't have permission to end the call. Please ask the call owner to end call.",
   "DLokwF": "You need to be using an HTTPS connection to make calls. Visit the documentation for more information.",
   "DuV+hE": "No screen sharing permissions",
@@ -102,6 +103,7 @@
   "aC/wxa": "a few seconds ago",
   "aVENjO": "By selecting <b>Try free for 30 days</b>, I agree to the <linkEvaluation>Mattermost Software Evaluation Agreement</linkEvaluation>, <linkPrivacy>Privacy Policy</linkPrivacy>, and receiving product emails.",
   "axn5zT": "Here's the call recording. Transcription is processing and will be posted when ready.",
+  "b2Wfwm": "Open in new window",
   "bBIj2W": "Recording has stopped. Processing…",
   "bRM2eb": "Something went wrong with calls",
   "bvd1gK": "Try channel calls with a free trial",
@@ -155,6 +157,7 @@
   "o1mCbV": "Stop presenting",
   "oCnRcJ": "Raise hand",
   "oHffQz": "There was an error with the connection to the call. Try to <joinLink>re-join</joinLink> the call.",
+  "oNH4AW": "Close window",
   "ogJ7x+": "Upgrade to Cloud Professional or Cloud Enterprise to enable group calls with more than {count, plural, =1 {# participant} other {# participants}}.",
   "p7D2e3": "In this channel",
   "paBpxN": "Ignore",

diff --git a/webapp/src/components/call_widget/component.tsx b/webapp/src/components/call_widget/component.tsx
@@ -1973,6 +1973,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                         <WidgetButton
                             id='calls-widget-expand-button'
                             onToggle={this.onExpandClick}
+                            tooltipText={formatMessage({defaultMessage: 'Open in new window'})}
                             bgColor=''
                             icon={
                                 <ShowIcon
@@ -2052,6 +2053,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                         <WidgetButton
                             id='calls-widget-toggle-menu-button'
                             onToggle={this.onMenuClick}
+                            tooltipText={formatMessage({defaultMessage: 'Settings'})}
                             icon={
                                 <MenuIcon
                                     style={{

diff --git a/webapp/src/components/expanded_view/component.tsx b/webapp/src/components/expanded_view/component.tsx
@@ -17,6 +17,7 @@ import {Client4} from 'mattermost-redux/client';
 import {Theme} from 'mattermost-redux/selectors/entities/preferences';
 import {MediaControlBar, MediaController, MediaFullscreenButton} from 'media-chrome/dist/react';
 import React, {CSSProperties} from 'react';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {IntlShape} from 'react-intl';
 import {RouteComponentProps} from 'react-router-dom';
 import {compareSemVer} from 'semver-parser';
@@ -1066,19 +1067,29 @@ export default class ExpandedView extends React.PureComponent<Props, State> {
 
                         <div style={this.style.headerSpreader}/>
                         <ExpandedCallContainer/>
-                        <button
-                            className='button-close'
-                            style={this.style.closeViewButton}
-                            onClick={this.onCloseViewClick}
+                        <OverlayTrigger
+                            placement='bottom'
+                            key={'close-window'}
+                            overlay={
+                                <Tooltip id='tooltip-close-window'>
+                                    {formatMessage({defaultMessage: 'Close window'})}
+                                </Tooltip>
+                            }
                         >
-                            <CollapseIcon
-                                style={{
-                                    width: '24px',
-                                    height: '24px',
-                                    fill: 'white',
-                                }}
-                            />
-                        </button>
+                            <button
+                                className='button-close'
+                                style={this.style.closeViewButton}
+                                onClick={this.onCloseViewClick}
+                            >
+                                <CollapseIcon
+                                    style={{
+                                        width: '24px',
+                                        height: '24px',
+                                        fill: 'white',
+                                    }}
+                                />
+                            </button>
+                        </OverlayTrigger>
                     </div>
 
                     {!this.props.screenSharingSession &&