diff --git a/public/static/css/default.css b/public/static/css/default.css index e9deb48..08c4f12 100644 --- a/public/static/css/default.css +++ b/public/static/css/default.css @@ -497,4 +497,8 @@ .bold { font-weight: bold; +} + +.fix { + clear: both; } \ No newline at end of file diff --git a/public/static/css/white.css b/public/static/css/white.css index 46492ea..cfc1e84 100644 --- a/public/static/css/white.css +++ b/public/static/css/white.css @@ -196,6 +196,29 @@ text-align: left; } +.theme-default #item-rows .column { + width: 50%; + max-width: 100%; + float: left; +} + +.theme-default #browser .info { + border: dashed 1px #95a5a6; + font-size: 1.4rem; + padding: 1rem; + color: #697384; + margin: 1rem 0 0 0; + background-color: #ecf0f1; + white-space: nowrap; + overflow: auto; +} + +.theme-default .qrcode { + padding: 1rem; + background-color: #ecf0f1; + display: inline-block; +} + .theme-default .item-cell { height: 5rem; } diff --git a/src/client/web/package.json b/src/client/web/package.json index 6596c19..b29e86b 100644 --- a/src/client/web/package.json +++ b/src/client/web/package.json @@ -58,6 +58,7 @@ "react-copy-to-clipboard": "^5.0.1", "react-dom": "^16.8.6", "react-icons": "4.3.1", + "react-qr-code": "^2.0.3", "react-svg": "^8.0.6", "throttle-debounce": "^2.1.0", "webpack-bundle-analyzer": "^4.4.2", diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx index 2145a0f..2c1d88f 100644 --- a/src/client/web/src/components/panel_files.tsx +++ b/src/client/web/src/components/panel_files.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { List, Map, Set } from "immutable"; import FileSize from "filesize"; +import QRCode from "react-qr-code"; import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill"; import { RiArchiveDrawerFill } from "@react-icons/all-files/ri/RiArchiveDrawerFill"; @@ -11,6 +12,7 @@ import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill"; import { RiInformationFill } from "@react-icons/all-files/ri/RiInformationFill"; import { BiTable } from "@react-icons/all-files/bi/BiTable"; import { BiListUl } from "@react-icons/all-files/bi/BiListUl"; +import { RiRefreshLine } from "@react-icons/all-files/ri/RiRefreshLine"; import { ErrorLogger } from "../common/log_error"; import { alertMsg, confirmMsg } from "../common/env"; @@ -465,17 +467,17 @@ export class FilesPanel extends React.Component { > -
{`SHA1: `}
- - , - , +
{`SHA1: `}
, + this.generateHash(itemPath)} + size={"2rem"} + className="black-font" + />, ])} className="item-info" childrenStyles={List([{}, { justifyContent: "flex-end" }])} /> +
{item.sha1}
); @@ -582,16 +584,13 @@ export class FilesPanel extends React.Component { ? this.props.msg.pkg.get("item.type.folder") : this.props.msg.pkg.get("item.type.file"); + const downloadPath = `/v1/fs/files?fp=${itemPath}`; const name = item.isDir ? ( this.gotoChild(item.name)}> {item.name} ) : ( - + {item.name} ); @@ -620,7 +619,8 @@ export class FilesPanel extends React.Component { ); - const pathTitle = this.props.msg.pkg.get("item.path"); + const absDownloadURL = `${document.location.protocol}//${document.location.hostname}${downloadPath}`; + const pathTitle = this.props.msg.pkg.get("item.downloadURL"); const modTimeTitle = this.props.msg.pkg.get("item.modTime"); const sizeTitle = this.props.msg.pkg.get("item.size"); const fileTypeTitle = this.props.msg.pkg.get("item.type"); @@ -631,29 +631,45 @@ export class FilesPanel extends React.Component { : `${pathTitle}: ${itemPath} | ${modTimeTitle}: ${item.modTime} | ${sizeTitle}: ${itemSize} | sha1: ${item.sha1}`; const details = (
-
- {pathTitle} - {itemPath} +
+
+ {pathTitle} + {itemPath} +
+
+ {modTimeTitle} + {item.modTime} +
+
+ {sizeTitle} + {itemSize} +
-
- {modTimeTitle} - {item.modTime} + +
+
+ {pathTitle} +
+ +
+
-
- {sizeTitle} - {itemSize} -
-
- SHA1 - , - , - ])} - childrenStyles={List([{}, { justifyContent: "flex-end" }])} - /> + +
+
+ SHA1, + this.generateHash(itemPath)} + size={"2rem"} + className="black-font" + />, + ])} + childrenStyles={List([{}, { justifyContent: "flex-end" }])} + /> +
{item.sha1}
+
); diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts index d64b8c9..07bd7c0 100644 --- a/src/client/web/src/i18n/en_US.ts +++ b/src/client/web/src/i18n/en_US.ts @@ -126,6 +126,7 @@ export const msgs: Map = Map({ "item.modTime": "Mod Time", "item.size": "Size", "item.progress": "Progress", + "item.downloadURL": "Download URL", "error.report.title": "Error Report", "op.truncate": "Truncate", "op.submit": "Submit", diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts index 265cb89..301a36c 100644 --- a/src/client/web/src/i18n/zh_CN.ts +++ b/src/client/web/src/i18n/zh_CN.ts @@ -123,6 +123,7 @@ export const msgs: Map = Map({ "item.modTime": "修改时间", "item.size": "大小", "item.progress": "进度", + "item.downloadURL": "下载链接", "error.report.title": "报告错误", "op.truncate": "清空", "op.submit": "提交", diff --git a/yarn.lock b/yarn.lock index 3c5a17c..1edd8b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4047,6 +4047,11 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== +qr.js@0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f" + integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8= + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -4087,6 +4092,14 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-qr-code@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.3.tgz#cc80785e08f817d1ab066ca4035262f77d049648" + integrity sha512-6GDH0l53lksf2JgZwwcoS0D60a1OAal/GQRyNFkMBW19HjSqvtD5S20scmSQsKl+BgWM85Wd5DCcUYoHd+PZnQ== + dependencies: + prop-types "^15.7.2" + qr.js "0.0.0" + react-svg@*: version "14.0.13" resolved "https://registry.yarnpkg.com/react-svg/-/react-svg-14.0.13.tgz#fd458d52884efcd8c8a6fb2dc20cc7c603b64b45"