Fix tooltip bugs

nCubed · Nov 23, 2020 · c6eafbb · c6eafbb
1 parent 6398a01
commit c6eafbb
Show file tree

Hide file tree

Showing 16 changed files with 338 additions and 234 deletions.
diff --git a/ACKNOWLEDGMENTS.md b/ACKNOWLEDGMENTS.md
@@ -2223,30 +2223,6 @@ Signal Desktop makes use of the following open source projects.
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-## react-tooltip-lite
-
-    MIT License
-
-    Copyright (c) 2019 Benny Sidelinger
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE.
-
 ## react-virtualized
 
     The MIT License (MIT)

diff --git a/package.json b/package.json
@@ -126,7 +126,6 @@
     "react-redux": "7.1.0",
     "react-router-dom": "5.0.1",
     "react-sortable-hoc": "1.9.1",
-    "react-tooltip-lite": "1.12.0",
     "react-virtualized": "9.21.0",
     "read-last-lines": "1.3.0",
     "redux": "4.0.1",

diff --git a/patches/react-tooltip-lite+1.12.0.patch b/patches/react-tooltip-lite+1.12.0.patch
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -2782,24 +2782,34 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
 }
 
-.module-in-contacts-icon__tooltip {
-  .react-tooltip-lite {
+span.module-in-contacts-icon__tooltip {
+  /* Written in this way to add more specificity and avoid !important */
+  .module-tooltip {
     color: $color-white;
     background-color: $ultramarine-ui-light;
-  }
 
-  .react-tooltip-lite-arrow {
-    border-color: $ultramarine-ui-light;
-  }
+    &[data-placement='top'] {
+      .module-tooltip-arrow::after {
+        border-top-color: $ultramarine-ui-light;
+      }
+    }
 
-  @include dark-theme {
-    .react-tooltip-lite {
-      color: $color-white;
-      background-color: $ultramarine-ui-light;
+    &[data-placement='right'] {
+      .module-tooltip-arrow::after {
+        border-right-color: $ultramarine-ui-light;
+      }
+    }
+
+    &[data-placement='bottom'] {
+      .module-tooltip-arrow::after {
+        border-bottom-color: $ultramarine-ui-light;
+      }
     }
 
-    .react-tooltip-lite-arrow {
-      border-color: $ultramarine-ui-light;
+    &[data-placement='left'] {
+      .module-tooltip-arrow::after {
+        border-left-color: $ultramarine-ui-light;
+      }
     }
   }
 }
@@ -6522,8 +6532,8 @@ button.module-image__border-overlay:focus {
   margin-top: 54px;
   overflow: scroll;
   padding: 14px;
-  padding-bottom: 0;
   width: 280px;
+  padding-bottom: 0;
 
   &__overlay {
     display: flex;
@@ -10183,10 +10193,13 @@ $contact-modal-padding: 18px;
   }
 }
 
-/* Third-party module: react-tooltip-lite */
-
-.react-tooltip-lite {
+.module-tooltip {
   border-radius: 8px;
+  display: inline-block;
+  padding: 8px 21px;
+  position: fixed;
+  text-align: center;
+  z-index: 999;
 
   @include light-theme {
     background-color: $color-gray-02;
@@ -10196,14 +10209,96 @@ $contact-modal-padding: 18px;
     background-color: $color-gray-65;
     color: $color-gray-05;
   }
-}
 
-.react-tooltip-lite-arrow {
-  @include light-theme {
-    border-color: $color-gray-02;
+  .module-tooltip-arrow {
+    position: absolute;
   }
-  @include dark-theme {
-    border-color: $color-gray-65;
+
+  .module-tooltip-arrow::after {
+    border: solid 6px transparent;
+    content: '';
+    display: block;
+    height: 0;
+    margin-left: -6px;
+    margin-top: -6px;
+    position: absolute;
+    width: 0;
+  }
+
+  &[data-placement='top'] {
+    margin-bottom: 12px;
+
+    .module-tooltip-arrow {
+      bottom: 0;
+    }
+
+    .module-tooltip-arrow::after {
+      bottom: -12px;
+
+      @include light-theme {
+        border-top-color: $color-gray-02;
+      }
+      @include dark-theme {
+        border-top-color: $color-gray-65;
+      }
+    }
+  }
+
+  &[data-placement='right'] {
+    margin-left: 12px;
+
+    .module-tooltip-arrow {
+      left: 0;
+    }
+
+    .module-tooltip-arrow::after {
+      left: -6px;
+
+      @include light-theme {
+        border-right-color: $color-gray-02;
+      }
+      @include dark-theme {
+        border-right-color: $color-gray-65;
+      }
+    }
+  }
+
+  &[data-placement='bottom'] {
+    margin-top: 12px;
+
+    .module-tooltip-arrow {
+      top: 0;
+    }
+
+    .module-tooltip-arrow::after {
+      top: -6px;
+
+      @include light-theme {
+        border-bottom-color: $color-gray-02;
+      }
+      @include dark-theme {
+        border-bottom-color: $color-gray-65;
+      }
+    }
+  }
+
+  &[data-placement='left'] {
+    margin-right: 12px;
+
+    .module-tooltip-arrow {
+      right: 0;
+    }
+
+    .module-tooltip-arrow::after {
+      right: -12px;
+
+      @include light-theme {
+        border-left-color: $color-gray-02;
+      }
+      @include dark-theme {
+        border-left-color: $color-gray-65;
+      }
+    }
   }
 }
 

diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx
@@ -253,21 +253,18 @@ export const CallScreen: React.FC<PropsType> = ({
             buttonType={videoButtonType}
             i18n={i18n}
             onClick={toggleVideo}
-            tooltipDistance={24}
           />
           <CallingButton
             buttonType={audioButtonType}
             i18n={i18n}
             onClick={toggleAudio}
-            tooltipDistance={24}
           />
           <CallingButton
             buttonType={CallingButtonType.HANG_UP}
             i18n={i18n}
             onClick={() => {
               hangUp({ conversationId: conversation.id });
             }}
-            tooltipDistance={24}
           />
         </div>
         <div

diff --git a/ts/components/CallingButton.stories.tsx b/ts/components/CallingButton.stories.tsx
@@ -3,15 +3,11 @@
 
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { number, select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import {
-  CallingButton,
-  CallingButtonType,
-  PropsType,
-  TooltipDirection,
-} from './CallingButton';
+import { CallingButton, CallingButtonType, PropsType } from './CallingButton';
+import { TooltipPlacement } from './Tooltip';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
 
@@ -27,12 +23,8 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   onClick: action('on-click'),
   tooltipDirection: select(
     'tooltipDirection',
-    TooltipDirection,
-    overrideProps.tooltipDirection || TooltipDirection.DOWN
-  ),
-  tooltipDistance: number(
-    'tooltipDistance',
-    overrideProps.tooltipDistance || 16
+    TooltipPlacement,
+    overrideProps.tooltipDirection || TooltipPlacement.Bottom
   ),
 });
 
@@ -87,7 +79,7 @@ story.add('Video Disabled', () => {
 
 story.add('Tooltip right', () => {
   const props = createProps({
-    tooltipDirection: TooltipDirection.RIGHT,
+    tooltipDirection: TooltipPlacement.Right,
   });
   return <CallingButton {...props} />;
 });