From a4a7e523bfa2735c71d9cb612d510137e8c68afe Mon Sep 17 00:00:00 2001 From: Kulaf Date: Mon, 29 Mar 2021 23:06:12 +0200 Subject: [PATCH] tooltips --- fileControlPanel/package-lock.json | 21 ++++++--- fileControlPanel/package.json | 3 +- .../src/elements/file-browser.css | 6 --- fileControlPanel/src/elements/token-list.js | 45 ++++++++++++++++--- 4 files changed, 56 insertions(+), 19 deletions(-) diff --git a/fileControlPanel/package-lock.json b/fileControlPanel/package-lock.json index 9369251..f92cd5c 100644 --- a/fileControlPanel/package-lock.json +++ b/fileControlPanel/package-lock.json @@ -7751,11 +7751,6 @@ "object.assign": "^4.1.0" } }, - "keymaster": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/keymaster/-/keymaster-1.6.2.tgz", - "integrity": "sha1-4a5U0OqUiPn2C2a2aPAumhlGxus=" - }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -11100,6 +11095,22 @@ } } }, + "react-tooltip": { + "version": "4.2.13", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.13.tgz", + "integrity": "sha512-iAZ02wSxChLWb7Vnu0zeQMyAo/jiGHrwFNILWaR3pCKaFVRjKcv/B6TBI4+Xd66xLXVzLngwJ91Tf5D+mqAqVA==", + "requires": { + "prop-types": "^15.7.2", + "uuid": "^7.0.3" + }, + "dependencies": { + "uuid": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz", + "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==" + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/fileControlPanel/package.json b/fileControlPanel/package.json index b5f2a3c..fcb2f65 100644 --- a/fileControlPanel/package.json +++ b/fileControlPanel/package.json @@ -10,7 +10,8 @@ "react-draft-wysiwyg": "^1.14.5", "react-dropzone": "^11.2.4", "react-router-dom": "^5.2.0", - "react-scripts": "^3.4.4" + "react-scripts": "^3.4.4", + "react-tooltip": "^4.2.13" }, "scripts": { "build": "webpack --mode production && mv dist/main.js ../js/files.min.js", diff --git a/fileControlPanel/src/elements/file-browser.css b/fileControlPanel/src/elements/file-browser.css index ed824cd..2d1d6ed 100644 --- a/fileControlPanel/src/elements/file-browser.css +++ b/fileControlPanel/src/elements/file-browser.css @@ -34,12 +34,6 @@ margin-bottom: 15px; } -.uploaded-file > img { - width: 50px; - height: 56px; - border: 1px solid black; -} - .uploaded-file > span { display: block; word-wrap: break-word; diff --git a/fileControlPanel/src/elements/token-list.js b/fileControlPanel/src/elements/token-list.js index 2f79507..fe4ee9d 100644 --- a/fileControlPanel/src/elements/token-list.js +++ b/fileControlPanel/src/elements/token-list.js @@ -3,7 +3,8 @@ import Icon from "./icon"; import moment from "moment"; import {Popup} from "./popup"; import Alert from "./alert"; -import {useState} from "react"; +import {useEffect, useState} from "react"; +import ReactTooltip from 'react-tooltip'; export function TokenList(props) { @@ -24,6 +25,20 @@ export function TokenList(props) { directory: 0 }); + useEffect(() => { + setTimeout(() => { + if (tokens) { + let hasChanged = false; + let newTokens = tokens.slice(); + for (let token of newTokens) { + if (token.tooltip) hasChanged = true; + token.tooltip = false; + } + if (hasChanged) setTokens(newTokens); + } + }, 1500); + }, [tokens]); + function fetchTokens() { api.listTokens().then((res) => { if (res) { @@ -39,7 +54,8 @@ export function TokenList(props) { if (tokens === null) { fetchTokens(); } else { - for (const token of tokens) { + for (let i = 0; i < tokens.length; i++) { + const token = tokens[i]; const validUntil = token.valid_until; const revoked = validUntil !== null && moment(validUntil).isSameOrBefore(new Date()); if (revoked && hideRevoked) { @@ -47,6 +63,15 @@ export function TokenList(props) { } const timeStr = (validUntil === null ? "Forever" : moment(validUntil).format("Do MMM YYYY, HH:mm")); + const tooltipPropsRevoke = (revoked ? {} : { + "data-tip": "Revoke", "data-place": "bottom", "data-type": "error", + "data-effect": "solid", "data-for": "tooltip-token-" + token.uid, + }); + + const tooltipPropsCopy = (revoked ? {} : { + "data-tip": "", "data-place": "bottom", "data-type": "info", + "data-effect": "solid", "data-for": "tooltip-token-" + token.uid, + }); rows.push( @@ -54,12 +79,14 @@ export function TokenList(props) { {token.type} {timeStr} + { revoked ? <> : { if (x === "Revoke") return x; return (!!token.tooltip ? "Coped successfully!" : "Copy to Clipboard"); }} /> } (revoked ? null : onRevokeToken(token.token))} - disabled={revoked}/> + onClick={() => (revoked ? null : onRevokeToken(token.token))} disabled={revoked} + {...tooltipPropsRevoke} /> (revoked ? null : onCopyToken(token.token))} - disabled={revoked}/> + onClick={() => (revoked ? null : onCopyToken(i))} disabled={revoked} + {...tooltipPropsCopy} /> ); @@ -244,10 +271,14 @@ export function TokenList(props) { onPopupClose(); } - function onCopyToken(token) { + function onCopyToken(index) { + let newTokens = tokens.slice(); + let token = newTokens[index].token; let url = window.location.href; if (!url.endsWith("/")) url += "/"; url += token; navigator.clipboard.writeText(url); + newTokens[index].tooltip = true; + setTokens(newTokens); } } \ No newline at end of file