Projekte/web-base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tooltips

Browse Source
This commit is contained in:
Kulaf 2021-03-29 23:06:12 +02:00
parent 518045e238
commit a4a7e523bf
4 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
fileControlPanel/package-lock.json generated
View File

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

3
fileControlPanel/package.json
View File

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

6
fileControlPanel/src/elements/file-browser.css
View File

@ -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;

45
fileControlPanel/src/elements/token-list.js
View File

@ -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))}
disabled={revoked}/>
onClick={() => (revoked ? null : onRevokeToken(token.token))} disabled={revoked}
{...tooltipPropsRevoke} />
<Icon icon={"save"} className={"clickable text-" + (revoked ? "secondary" : "info")}
onClick={() => (revoked ? null : onCopyToken(token.token))}
disabled={revoked}/>
onClick={() => (revoked ? null : onCopyToken(i))} 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);
}
}