tooltips
This commit is contained in:
parent
518045e238
commit
a4a7e523bf
21
fileControlPanel/package-lock.json
generated
21
fileControlPanel/package-lock.json
generated
@ -7751,11 +7751,6 @@
|
|||||||
"object.assign": "^4.1.0"
|
"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": {
|
"killable": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
|
"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": {
|
"read-pkg": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||||
|
@ -10,7 +10,8 @@
|
|||||||
"react-draft-wysiwyg": "^1.14.5",
|
"react-draft-wysiwyg": "^1.14.5",
|
||||||
"react-dropzone": "^11.2.4",
|
"react-dropzone": "^11.2.4",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "^3.4.4"
|
"react-scripts": "^3.4.4",
|
||||||
|
"react-tooltip": "^4.2.13"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "webpack --mode production && mv dist/main.js ../js/files.min.js",
|
"build": "webpack --mode production && mv dist/main.js ../js/files.min.js",
|
||||||
|
@ -34,12 +34,6 @@
|
|||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uploaded-file > img {
|
|
||||||
width: 50px;
|
|
||||||
height: 56px;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploaded-file > span {
|
.uploaded-file > span {
|
||||||
display: block;
|
display: block;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
@ -3,7 +3,8 @@ import Icon from "./icon";
|
|||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import {Popup} from "./popup";
|
import {Popup} from "./popup";
|
||||||
import Alert from "./alert";
|
import Alert from "./alert";
|
||||||
import {useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
|
import ReactTooltip from 'react-tooltip';
|
||||||
|
|
||||||
export function TokenList(props) {
|
export function TokenList(props) {
|
||||||
|
|
||||||
@ -24,6 +25,20 @@ export function TokenList(props) {
|
|||||||
directory: 0
|
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() {
|
function fetchTokens() {
|
||||||
api.listTokens().then((res) => {
|
api.listTokens().then((res) => {
|
||||||
if (res) {
|
if (res) {
|
||||||
@ -39,7 +54,8 @@ export function TokenList(props) {
|
|||||||
if (tokens === null) {
|
if (tokens === null) {
|
||||||
fetchTokens();
|
fetchTokens();
|
||||||
} else {
|
} else {
|
||||||
for (const token of tokens) {
|
for (let i = 0; i < tokens.length; i++) {
|
||||||
|
const token = tokens[i];
|
||||||
const validUntil = token.valid_until;
|
const validUntil = token.valid_until;
|
||||||
const revoked = validUntil !== null && moment(validUntil).isSameOrBefore(new Date());
|
const revoked = validUntil !== null && moment(validUntil).isSameOrBefore(new Date());
|
||||||
if (revoked && hideRevoked) {
|
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 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(
|
rows.push(
|
||||||
<tr key={"token-" + token.uid} className={revoked ? "token-revoked" : ""}>
|
<tr key={"token-" + token.uid} className={revoked ? "token-revoked" : ""}>
|
||||||
@ -54,12 +79,14 @@ export function TokenList(props) {
|
|||||||
<td>{token.type}</td>
|
<td>{token.type}</td>
|
||||||
<td>{timeStr}</td>
|
<td>{timeStr}</td>
|
||||||
<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")}
|
<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")}
|
<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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
@ -244,10 +271,14 @@ export function TokenList(props) {
|
|||||||
onPopupClose();
|
onPopupClose();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCopyToken(token) {
|
function onCopyToken(index) {
|
||||||
|
let newTokens = tokens.slice();
|
||||||
|
let token = newTokens[index].token;
|
||||||
let url = window.location.href;
|
let url = window.location.href;
|
||||||
if (!url.endsWith("/")) url += "/";
|
if (!url.endsWith("/")) url += "/";
|
||||||
url += token;
|
url += token;
|
||||||
navigator.clipboard.writeText(url);
|
navigator.clipboard.writeText(url);
|
||||||
|
newTokens[index].tooltip = true;
|
||||||
|
setTokens(newTokens);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user