tooltips

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",

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",

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;

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(
                 <tr key={"token-" + token.uid} className={revoked ? "token-revoked" : ""}>
@@ -54,12 +79,14 @@ export function TokenList(props) {
                     <td>{token.type}</td>
                     <td>{timeStr}</td>
                     <td>
+                        { revoked ? <></> : <ReactTooltip id={"tooltip-token-" + token.uid}
+                           getContent={(x) => { if (x === "Revoke") return x; return (!!token.tooltip ? "Coped successfully!" : "Copy to Clipboard"); }} /> }
                         <Icon icon={"times"} className={"clickable text-" + (revoked ? "secondary" : "danger")}
-                              onClick={() => (revoked ? null : onRevokeToken(token.token))}
+                              onClick={() => (revoked ? null : onRevokeToken(token.token))} disabled={revoked}
-                              disabled={revoked}/>
+                              {...tooltipPropsRevoke} />
                         <Icon icon={"save"} className={"clickable text-" + (revoked ? "secondary" : "info")}
-                              onClick={() => (revoked ? null : onCopyToken(token.token))}
+                              onClick={() => (revoked ? null : onCopyToken(i))} disabled={revoked}
-                              disabled={revoked}/>
+                              {...tooltipPropsCopy} />
                     </td>
                 </tr>
             );
@@ -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);
     }
 }