diff --git a/package-lock.json b/package-lock.json index 7760103..b9ee745 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4383,6 +4383,12 @@ } } }, + "electron-tooltip": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/electron-tooltip/-/electron-tooltip-1.1.5.tgz", + "integrity": "sha512-H3vxGOkwxVrJdhJHiJ0i01EOny0FSz2+e68rNK21LA4quZcThFIUUXSSIEMCKLwe3Iyd87+AWdpTg1b9teruQg==", + "dev": true + }, "elliptic": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz", @@ -11144,11 +11150,28 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==" }, + "react-minimalist-portal": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/react-minimalist-portal/-/react-minimalist-portal-2.3.1.tgz", + "integrity": "sha1-SFPj9Ip0oywbh2dgGIfN95Qe66M=", + "requires": { + "prop-types": "^15.6.1" + } + }, "react-tiny-accordion": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-tiny-accordion/-/react-tiny-accordion-2.0.4.tgz", "integrity": "sha512-yp9bnxVuwssh1TbnFl0IpZoq2TnmTtuVazfH3FJpk60Ex4VitRzUE+NU0fuMnnil4g3Y0gjyhE/0H1/xqdzWWQ==" }, + "react-tooltip-lite": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/react-tooltip-lite/-/react-tooltip-lite-1.9.1.tgz", + "integrity": "sha512-JH5T6kPZn7X90TnnNhuJ+wOb1eikT2xtpbOkndvqAHZlOyZOAZeAyVgk/3pGz0xi4h+bqXXisfwGtriliTYhDQ==", + "requires": { + "prop-types": "^15.5.8", + "react-minimalist-portal": "^2.2.0" + } + }, "read-chunk": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz", diff --git a/package.json b/package.json index 62d941a..ac880c5 100644 --- 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 index 0e3f4d0..c0c9062 100644 --- 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 { statusIcon (syncInfo: SyncInfo) { if (!syncInfo.endTs) { - return ; + return + + ; } if (syncInfo.terminated) { - return ; + return ; } if (syncInfo.hasErrors) { - return ; + return ; } - return ; + return ; } runnerIcon (syncInfo: SyncInfo) { switch (syncInfo.runner) { case SyncRunner.SyncScheduler: - return ; + return ; case SyncRunner.User: - return ; + return ; default: return ''; } @@ -112,9 +112,14 @@ export class LogListComponent extends React.Component {
{this.runnerIcon(syncInfo)}
-
- {this.affectedAppsCount(syncInfo)} -
+ {this.affectedAppsCount(syncInfo) + ? Affected apps count
Click to see affected apps)}> +
+ {this.affectedAppsCount(syncInfo)} +
+
+ :
+ }
{LogListComponent.formatDate(syncInfo.startTs)}
{syncInfo.id}
diff --git a/src/ui/style.scss b/src/ui/style.scss index 4c2ebaa..fa76d5e 100644 --- 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; + } + }