tooltip. added missing tooltip

nethesis · Feb 27, 2024 · 8a0d8a3 · 8a0d8a3
1 parent e204e1a
commit 8a0d8a3
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -24,7 +24,9 @@
     "Start recording": "Start recording",
     "Switch call": "Switch call",
     "Call to transfer": "Call to transfer",
-    "Hangup and transfer": "Transfer"
+    "Hangup and transfer": "Transfer",
+    "Answer": "Answer",
+    "Settings": "Settings"
   },
   "DropdownContent": {
     "Microphones": "MICROPHONES",

diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -24,7 +24,9 @@
     "Start recording": "Inizia registrazione",
     "Switch call": "Scambia chiamata",
     "Call to transfer": "Chiamata da trasferire",
-    "Hangup and transfer": "Trasferisci"
+    "Hangup and transfer": "Trasferisci",
+    "Answer": "Rispondi",
+    "Settings": "Impostazioni"
   },
   "DropdownContent": {
     "Microphones": "MICROFONI",

diff --git a/src/components/CallView/index.tsx b/src/components/CallView/index.tsx
@@ -17,6 +17,7 @@ import Avatar from './Avatar'
 import Actions from './Actions'
 import Hangup from '../Hangup'
 import { useTranslation } from 'react-i18next'
+import { Tooltip } from 'react-tooltip'
 
 function isAnswerVisible(outgoing: boolean, accepted: boolean): boolean {
   return !outgoing && !accepted
@@ -203,7 +204,12 @@ const CallView: FC<CallViewProps> = () => {
               {/* )} */}
               {/* The button to answer the incoming call */}
               {isAnswerVisible(outgoing, accepted) && (
-                <Button onClick={answerIncomingCall} variant='green'>
+                <Button
+                  onClick={answerIncomingCall}
+                  variant='green'
+                  data-tooltip-id='tooltip-left'
+                  data-tooltip-content={t('Tooltip.Answer')}
+                >
                   <FontAwesomeIcon className='pi-w-6 pi-h-6' icon={faPhone} />
                 </Button>
               )}

diff --git a/src/components/Hangup.tsx b/src/components/Hangup.tsx
@@ -64,7 +64,7 @@ const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description })
             onClick={() => handleHangup()}
             variant='red'
             className='pi-gap-4 pi-font-medium pi-text-base pi-transition pi-min-w-12 pi-w-full'
-            data-tooltip-id='tooltip'
+            data-tooltip-id='tooltip-left'
             data-tooltip-content={
               description && transferring ? description : `${t('Tooltip.Hangup')}`
             }
@@ -93,6 +93,7 @@ const Hangup: FC<HangupProps> = ({ clickCallback, isDestination, description })
         </motion.div>
       </div>
       <Tooltip className='pi-z-20' id='tooltip' place='bottom' />
+      <Tooltip className='pi-z-20' id='tooltip-left' place='left' />
     </>
   )
 }

diff --git a/src/components/SwitchInputView/DropdownContent.tsx b/src/components/SwitchInputView/DropdownContent.tsx
@@ -10,6 +10,7 @@ import { Menu, Transition } from '@headlessui/react'
 import { t } from 'i18next'
 import { isWebRTC } from '../../lib/user/default_device'
 import { eventDispatch, getJSONItem, setJSONItem, useEventListener } from '../../utils'
+import { Tooltip } from 'react-tooltip/dist/react-tooltip.min.cjs'
 
 const DropdownContent: FC<DropdownContentProps> = ({ username, status }) => {
   const { sipcall }: any = useSelector((state: RootState) => state.webrtc)
@@ -104,7 +105,8 @@ const DropdownContent: FC<DropdownContentProps> = ({ username, status }) => {
   return (
     <>
       {isWebRTC() ? (
-        <Menu as='div' className='relative inline-block text-left' data-stop-propagation={true}>
+        <Menu as='div' className='relative inline-block text-left' data-stop-propagation={true} data-tooltip-id='tooltip-left'
+        data-tooltip-content={t('Tooltip.Settings')}>
           <Menu.Button
             className='pi-bg-transparent enabled:hover:pi-bg-gray-500 focus:pi-ring-gray-500 pi-flex pi-font-sans pi-font-light pi-content-center pi-items-center pi-justify-center pi-tracking-wide pi-duration-200 pi-transform pi-outline-none focus:pi-ring-2 focus:pi-z-20 focus:pi-ring-offset-2 disabled:pi-opacity-75 pi-text-white pi-border pi-border-transparent focus:pi-ring-offset-black pi-rounded-full pi-text-sm pi-leading-4 pi-h-12 pi-w-12 pi-col-start-auto pi-transition-color pi-shrink-0'
             data-stop-propagation={true}
@@ -284,6 +286,7 @@ const DropdownContent: FC<DropdownContentProps> = ({ username, status }) => {
       ) : (
         <div></div>
       )}
+      <Tooltip className='pi-z-20' id='tooltip-left' place='left' />
     </>
   )
 }