[update] resolves #80

ApryseSDK · Dec 11, 2018 · e8685b7 · e8685b7
1 parent 6dd2d5c
commit e8685b7
Show file tree

Hide file tree

Showing 20 changed files with 328 additions and 188 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -14,18 +14,52 @@
     "react",
     "import"
   ],
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
   "rules": {
-    "quotes": [2, "single", {"allowTemplateLiterals": true}],
+    "quotes": [
+      2,
+      "single",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
     "curly": 2,
-    "strict": [2, "never"],
-    "semi": [2, "always"],
-    "no-redeclare": [2, { "builtinGlobals": true }],
+    "strict": [
+      2,
+      "never"
+    ],
+    "semi": [
+      2,
+      "always"
+    ],
+    "no-redeclare": [
+      2,
+      {
+        "builtinGlobals": true
+      }
+    ],
     "brace-style": 2,
     "no-alert": 0,
-    "no-console": [2, { "allow": ["warn", "error"] }],
-    "object-shorthand": [2, "always"],
-    "arrow-parens": [2, "as-needed"],
+    "no-console": [
+      2,
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "object-shorthand": [
+      2,
+      "always"
+    ],
+    "arrow-parens": [
+      2,
+      "as-needed"
+    ],
     "eqeqeq": 2,
     "jsx-quotes": 2,
     "react/jsx-closing-bracket-location": 2,
@@ -36,6 +70,7 @@
     "import/no-unresolved": 0,
     "import/extensions": 0,
     "import/no-extraneous-dependencies": 0,
-    "import/no-dynamic-require": 0
+    "import/no-dynamic-require": 0,
+    "react/no-find-dom-node": 0
   }
 }
diff --git a/src/components/ActionButton/ActionButton.js b/src/components/ActionButton/ActionButton.js
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 
 import Button from 'components/Button';
+import { withToolTip } from 'components/ToolTip';
 
 import selectors from 'selectors';
 
@@ -16,4 +17,4 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   }
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Button);
+export default connect(mapStateToProps, mapDispatchToProps)(withToolTip(Button));
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -22,7 +22,6 @@ import PrintModal from 'components/PrintModal';
 import LoadingModal from 'components/LoadingModal';
 import ErrorModal from 'components/ErrorModal';
 import PasswordModal from 'components/PasswordModal';
-import ToolTip from 'components/ToolTip';
 import FilePickerHandler from 'components/FilePickerHandler';
 import CopyTextHandler from 'components/CopyTextHandler';
 import PrintHandler from 'components/PrintHandler';
@@ -101,8 +100,6 @@ class App extends React.PureComponent {
           <LoadingModal />
           <ErrorModal />
           <PasswordModal />
-
-          <ToolTip />
         </div>
 
         <PrintHandler />

diff --git a/src/components/ColorPaletteHeader/ColorPaletteHeader.js b/src/components/ColorPaletteHeader/ColorPaletteHeader.js
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
 
+import ToolTip from 'components/ToolTip';
+
 import getBrightness from 'helpers/getBrightness';
 
 import './ColorPaletteHeader.scss';
@@ -37,14 +39,15 @@ class ColorPaletteHeader extends React.PureComponent {
     }
 
     return (
-      <div
-        className={colorPalette === 'text' ? 'text selected' : 'text'}
-        style={{ color: TextColor.toHexString() }}
-        onClick={() => onHeaderChange('text')}
-        data-tip={t('option.annotationColor.text')}
-      >
-        Aa
-      </div>
+      <ToolTip content="option.annotationColor.text">
+        <div
+          className={colorPalette === 'text' ? 'text selected' : 'text'}
+          style={{ color: TextColor.toHexString() }}
+          onClick={() => onHeaderChange('text')}
+        >
+          Aa
+        </div>
+      </ToolTip>
     );
   }
 
@@ -73,18 +76,19 @@ class ColorPaletteHeader extends React.PureComponent {
     };
 
     return (
-      <div
-        className={colorPalette === 'border' ? 'border selected' : 'border'}
-        onClick={() => onHeaderChange('border')}
-        data-tip={t('option.annotationColor.border')}
-      >
+      <ToolTip content="option.annotationColor.border">
         <div
-          className={`border-icon ${getBrightness(StrokeColor)}}`}
-          style={{ backgroundColor: StrokeColor.toHexString() }}
+          className={colorPalette === 'border' ? 'border selected' : 'border'}
+          onClick={() => onHeaderChange('border')}
         >
-          {renderInnerCircle()}
+          <div
+            className={`border-icon ${getBrightness(StrokeColor)}}`}
+            style={{ backgroundColor: StrokeColor.toHexString() }}
+          >
+            {renderInnerCircle()}
+          </div>
         </div>
-      </div>
+      </ToolTip>
     );
   }
 
@@ -98,22 +102,23 @@ class ColorPaletteHeader extends React.PureComponent {
     const isTransparency = FillColor.toHexString() === null;
 
     return (
-      <div
-        className={colorPalette === 'fill' ? 'fill selected' : 'fill'}
-        onClick={() => onHeaderChange('fill')}
-        data-tip={t('option.annotationColor.fill')}
-      >
+      <ToolTip content="option.annotationColor.fill">
         <div
-          className={`fill-icon ${getBrightness(FillColor)} ${isTransparency ? 'transparency' : ''}`}
-          style={{ backgroundColor: FillColor.toHexString() }}
+          className={colorPalette === 'fill' ? 'fill selected' : 'fill'}
+          onClick={() => onHeaderChange('fill')}
         >
-          {isTransparency &&
-            <svg width="100%" height="100%">
-              <line x1="0%" y1="100%" x2="100%" y2="0%" strokeWidth="1" stroke="#e44234" strokeLinecap="square" />
-            </svg>
-          }
+          <div
+            className={`fill-icon ${getBrightness(FillColor)} ${isTransparency ? 'transparency' : ''}`}
+            style={{ backgroundColor: FillColor.toHexString() }}
+          >
+            {isTransparency &&
+              <svg width="100%" height="100%">
+                <line x1="0%" y1="100%" x2="100%" y2="0%" strokeWidth="1" stroke="#e44234" strokeLinecap="square" />
+              </svg>
+            }
+          </div>
         </div>
-      </div>
+      </ToolTip>
     );
   }
 

diff --git a/src/components/LeftPanelTabs/LeftPanelTabs.js b/src/components/LeftPanelTabs/LeftPanelTabs.js
@@ -46,43 +46,39 @@ class LeftPanelTabs extends React.Component {
 
     return (
       <Element className="LeftPanelTabs" dataElement="leftPanelTabs">
-        <ToolTip content="component.thumbnailsPanel">
+        <ToolTip content="component.thumbnailsPanel" isDisabled={isThumbnailsPanelButtonDisabled}>
           <Button
             isActive={this.isActive('thumbnailsPanel')}
-            isDisabled={isThumbnailsPanelButtonDisabled}
             dataElement="thumbnailsPanelButton"
             img="ic_thumbnails_black_24px"
             onClick={() => setActiveLeftPanel('thumbnailsPanel')}
           />
         </ToolTip>
-        <ToolTip content="component.outlinesPanel">
+        <ToolTip content="component.outlinesPanel" isDisabled={isOutlinesPanelButtonDisabled}>
           <Button
             isActive={this.isActive('outlinesPanel')}
-            isDisabled={isOutlinesPanelButtonDisabled}
             dataElement="outlinesPanelButton"
             img="ic_outline_black_24px"
             onClick={() => setActiveLeftPanel('outlinesPanel')}
           />
         </ToolTip>
-        <ToolTip content="component.thumbnailsPanel">
+        <ToolTip content="component.notesPanel" isDisabled={isNotesPanelButtonDisabled}>
           <Button
             isActive={this.isActive('notesPanel')}
-            isDisabled={isNotesPanelButtonDisabled}
             dataElement="notesPanelButton"
             img="ic_annotations_black_24px"
             onClick={() => setActiveLeftPanel('notesPanel')}
           />
         </ToolTip>
         {customPanels.map(({ panel, tab }, index) => (
-          <Button
-            key={tab.dataElement || index}
-            isActive={this.isActive(panel.dataElement)}
-            isDisabled={disabledCustomPanelTabs.includes(tab.dataElement)}
-            dataElement={tab.dataElement}
-            img={tab.img}
-            title={tab.title}
-            onClick={() => setActiveLeftPanel(panel.dataElement)}
-          />
+          <ToolTip key={tab.dataElement || index} content={tab.title} isDisabled={disabledCustomPanelTabs.includes(tab.dataElement)}>
+            <Button
+              isActive={this.isActive(panel.dataElement)}
+              dataElement={tab.dataElement}
+              img={tab.img}
+              onClick={() => setActiveLeftPanel(panel.dataElement)}
+            />
+          </ToolTip>
         ))}
       </Element>
     );

diff --git a/src/components/LeftPanelTabs/LeftPanelTabs.scss b/src/components/LeftPanelTabs/LeftPanelTabs.scss
@@ -8,16 +8,8 @@
   border: 1px solid $gray12;
   border: 1px solid var(--border-color);
 
-  .tooltip-wrapper {
-    flex-grow: 1;
-
-    &:nth-child(n+2) {
-      border-left: 1px solid $gray12;
-      border-left: 1px solid var(--border-color);
-    }
-  }
-
   .Button {
+    flex-grow: 1;
     background: $white;
     background: var(--primary-color);
     height: 100%;
@@ -28,6 +20,10 @@
       height: 19px;
     }
 
+    &:nth-child(n+2) {
+      border-left: 1px solid $gray12;
+      border-left: 1px solid var(--border-color);
+    }
 
     &.active {
       background: rgba(0, 0, 0, 0.078);

diff --git a/src/components/MenuOverlay/MenuOverlay.js b/src/components/MenuOverlay/MenuOverlay.js
@@ -43,7 +43,7 @@ class MenuOverlay extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     if (!prevProps.isOpen && this.props.isOpen) {
-      this.props.closeElements([ 'toolsOverlay', 'viewControlsOverlay', 'searchOverlay', 'toolStylePopup' ]);
+      this.props.closeElements(['toolsOverlay', 'viewControlsOverlay', 'searchOverlay', 'toolStylePopup']);
       this.setState(getOverlayPositionBasedOn('menuButton', this.overlay));
     }
   }
@@ -63,7 +63,7 @@ class MenuOverlay extends React.PureComponent {
   render() {
     const { left, right } = this.state;
     const { isDisabled, isDownloadable, isFullScreen, t } = this.props;
-    
+
     if (isDisabled) {
       return null;
     }