[AMSA-33] add user-friendly tooltips to logs info icons

appodeal · Apr 17, 2019 · acafa90 · acafa90
1 parent e7bf585
commit acafa90
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -129,9 +129,11 @@
     "electron-builder": "^20.38.5",
     "file-loader": "^3.0.1",
     "generate-json-webpack-plugin": "^0.3.1",
+    "github": "~0.2.4",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.1.0",
     "mini-css-extract-plugin": "^0.5.0",
+    "moment": "^2.22.2",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "^2.1.3",
@@ -142,9 +144,7 @@
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.0",
-    "webpack-merge": "^4.2.1",
-    "github": "~0.2.4",
-    "moment": "^2.22.2"
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "@sentry/electron": "^0.16.0",
@@ -166,6 +166,7 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-tiny-accordion": "^2.0.4",
+    "react-tooltip-lite": "^1.9.1",
     "semver": "^6.0.0",
     "uuid": "^3.3.2",
     "winston": "^3.2.1",

diff --git a/src/ui/components/log-list/LogListComponent.tsx b/src/ui/components/log-list/LogListComponent.tsx
@@ -7,6 +7,7 @@ import {classNames, singleEvent} from 'lib/dom';
 import {sendToMain} from 'lib/messages';
 import React from 'react';
 import Accordion from 'react-tiny-accordion';
+import Tooltip from 'react-tooltip-lite';
 import {TextToClipboard} from 'ui/components/text-to-clipboard/TextToClipboardComponent';
 import style from './LogList.scss';
 
@@ -53,29 +54,28 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
 
     statusIcon (syncInfo: SyncInfo) {
         if (!syncInfo.endTs) {
-            return <img className={style.syncing}
-                        src={require('../../assets/images/tray/win-syncing/syncing-1.svg')}
-                        title={'Syncing...'}
-            />;
+            return <Tooltip content="Syncing...">
+                <img className={style.syncing} src={require('../../assets/images/tray/win-syncing/syncing-1.svg')}/>
+            </Tooltip>;
         }
 
         if (syncInfo.terminated) {
-            return <img src={require('../../assets/images/sync-status/times-round.svg')} title={'Sync was terminated'}/>;
+            return <Tooltip content="Sync was terminated"><img src={require('../../assets/images/sync-status/times-round.svg')}/></Tooltip>;
         }
 
         if (syncInfo.hasErrors) {
-            return <img src={require('../../assets/images/sync-status/warning-round.svg')} title={'Synced with errors'}/>;
+            return <Tooltip content="Synced with errors"><img src={require('../../assets/images/sync-status/warning-round.svg')}/></Tooltip>;
         }
 
-        return <img src={require('../../assets/images/sync-status/check-round.svg')}/>;
+        return <Tooltip content="Synced OK"><img src={require('../../assets/images/sync-status/check-round.svg')}/></Tooltip>;
     }
 
     runnerIcon (syncInfo: SyncInfo) {
         switch (syncInfo.runner) {
         case SyncRunner.SyncScheduler:
-            return <img src={require('../../assets/images/sync-status/clock.svg')} title={'Run by schedule'}/>;
+            return <Tooltip content="Run by schedule"><img src={require('../../assets/images/sync-status/clock.svg')}/></Tooltip>;
         case SyncRunner.User:
-            return <img src={require('../../assets/images/sync-status/user.svg')} title={'Run by user'}/>;
+            return <Tooltip content="Run by user"><img src={require('../../assets/images/sync-status/user.svg')}/></Tooltip>;
         default:
             return '';
         }
@@ -112,9 +112,14 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
                                 <div className={style.icon}>
                                     {this.runnerIcon(syncInfo)}
                                 </div>
-                                <div className={classNames(style.icon, style.count)} title={'Apps Affected'}>
-                                    {this.affectedAppsCount(syncInfo)}
-                                </div>
+                                {this.affectedAppsCount(syncInfo)
+                                    ? <Tooltip content={(<div>Affected apps count<br/> Click to see affected apps</div>)}>
+                                        <div className={classNames(style.icon, style.count)}>
+                                            {this.affectedAppsCount(syncInfo)}
+                                        </div>
+                                    </Tooltip>
+                                    : <div className={classNames(style.icon, style.count)}></div>
+                                }
                             </div>
                             <div className={style.time}>{LogListComponent.formatDate(syncInfo.startTs)}</div>
                             <div className={style.name}>{syncInfo.id}</div>

diff --git a/src/ui/style.scss b/src/ui/style.scss
@@ -212,5 +212,15 @@
 
   }
 
+  .react-tooltip-lite {
+    border-radius: 4px;
+    background: #000;
+    color: white;
+  }
+
+  .react-tooltip-lite-arrow {
+    border-color: #000;
+  }
+
 }