diff --git a/public/static/css/default.css b/public/static/css/default.css index 08c4f12..a5359d3 100644 --- a/public/static/css/default.css +++ b/public/static/css/default.css @@ -501,4 +501,4 @@ .fix { clear: both; -} \ No newline at end of file +} diff --git a/public/static/css/white.css b/public/static/css/white.css index cfc1e84..93416fd 100644 --- a/public/static/css/white.css +++ b/public/static/css/white.css @@ -22,6 +22,8 @@ color: #16a085; padding: 1rem 2rem 1rem 2rem; -webkit-backdrop-filter: blur(9.5px); + position: relative; + z-index: 2; } .theme-default #topbar-user-info { @@ -40,6 +42,8 @@ color: #16a085; padding: 0.5rem 1rem; -webkit-backdrop-filter: blur(9.5px); + position: relative; + z-index: 1; } .theme-default #top-menu button { @@ -217,6 +221,26 @@ padding: 1rem; background-color: #ecf0f1; display: inline-block; + background: rgba(255, 255, 255, 0.8); + box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%); + backdrop-filter: blur(9.5px); +} + +.theme-default .qrcode-container { + height: 3rem; +} + +.theme-default .qrcode-icon { + height: 3rem; +} + +.theme-default .qrcode-child-container { + position: relative; + z-index: 50; +} + +.theme-default .qrcode-child { + position: absolute; } .theme-default .item-cell { @@ -463,11 +487,11 @@ } .theme-default #login-layer { - z-index: 100; + z-index: 200; } .theme-default #settings-layer { - z-index: 1; + z-index: 100; } .theme-default .value { diff --git a/src/client/web/src/components/panel_files.tsx b/src/client/web/src/components/panel_files.tsx index 2c1d88f..2b1c03d 100644 --- a/src/client/web/src/components/panel_files.tsx +++ b/src/client/web/src/components/panel_files.tsx @@ -9,7 +9,7 @@ import { RiArchiveDrawerFill } from "@react-icons/all-files/ri/RiArchiveDrawerFi import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill"; import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill"; import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill"; -import { RiInformationFill } from "@react-icons/all-files/ri/RiInformationFill"; +import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill"; 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"; @@ -499,7 +499,7 @@ export class FilesPanel extends React.Component { onClick={() => this.toggleDetail(item.name)} className="float-l" > - {getIcon("RiInformationFill", "1.8rem", detailColor)} + {getIcon("RiMore2Fill", "1.8rem", detailColor)} this.select(item.name)} className="float-l"> @@ -605,7 +605,7 @@ export class FilesPanel extends React.Component { ) : (
- this.toggleDetail(item.name)} @@ -626,15 +626,22 @@ export class FilesPanel extends React.Component { const fileTypeTitle = this.props.msg.pkg.get("item.type"); const itemSize = FileSize(item.size, { round: 0 }); - const compact = item.isDir - ? `${pathTitle}: ${itemPath} | ${modTimeTitle}: ${item.modTime}` - : `${pathTitle}: ${itemPath} | ${modTimeTitle}: ${item.modTime} | ${sizeTitle}: ${itemSize} | sha1: ${item.sha1}`; + const compact = item.isDir ? ( + + {`${pathTitle}: `} + {`${absDownloadURL} | `} + {`${modTimeTitle}: `} + {item.modTime} + + ) : ( + `${pathTitle}: ${absDownloadURL} | ${modTimeTitle}: ${item.modTime} | ${sizeTitle}: ${itemSize} | sha1: ${item.sha1}` + ); const details = (
{pathTitle} - {itemPath} + {absDownloadURL}
{modTimeTitle} diff --git a/src/client/web/src/components/panel_sharings.tsx b/src/client/web/src/components/panel_sharings.tsx index 17c6526..c83e229 100644 --- a/src/client/web/src/components/panel_sharings.tsx +++ b/src/client/web/src/components/panel_sharings.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import { List } from "immutable"; +import QRCode from "react-qr-code"; import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine"; import { RiFolderSharedFill } from "@react-icons/all-files/ri/RiFolderSharedFill"; import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine"; +import { QRCodeIcon } from "./visual/qrcode"; import { getErrMsg } from "../common/utils"; import { alertMsg, confirmMsg } from "../common/env"; import { updater } from "./state_updater"; @@ -68,13 +70,26 @@ export class SharingsPanel extends React.Component {
{dirPath}
- + + + , + + , + ])} + childrenStyles={List([ + { flex: "0 0 auto" }, + { flex: "0 0 auto" }, + ])} + style={{ justifyContent: "flex-end" }} + />
); @@ -83,7 +98,7 @@ export class SharingsPanel extends React.Component {
{row1}
{sharingURL}
-
+
); diff --git a/src/client/web/src/components/topbar.tsx b/src/client/web/src/components/topbar.tsx index 3a1dc36..39147e9 100644 --- a/src/client/web/src/components/topbar.tsx +++ b/src/client/web/src/components/topbar.tsx @@ -13,6 +13,7 @@ import { LoginProps } from "./pane_login"; import { updater } from "./state_updater"; import { Flexbox } from "./layout/flexbox"; import { settingsDialogCtrl } from "./layers"; +import { QRCodeIcon } from "./visual/qrcode"; export interface State {} export interface Props { @@ -90,6 +91,7 @@ export class TopBar extends React.Component { > Quickshare , + , { />, ])} childrenStyles={List([ - {}, + { flex: "0 0 auto" }, + { flex: "0 0 auto" }, { justifyContent: "flex-end", alignItems: "center" }, ])} /> diff --git a/src/client/web/src/components/visual/icons.tsx b/src/client/web/src/components/visual/icons.tsx index 797a825..63229e1 100644 --- a/src/client/web/src/components/visual/icons.tsx +++ b/src/client/web/src/components/visual/icons.tsx @@ -17,6 +17,7 @@ import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill"; import { RiArrowUpDownFill } from "@react-icons/all-files/ri/RiArrowUpDownFill"; import { BiTable } from "@react-icons/all-files/bi/BiTable"; import { BiListUl } from "@react-icons/all-files/bi/BiListUl"; +import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill"; import { colorClass } from "./colors"; @@ -42,6 +43,7 @@ const icons = Map({ RiArrowUpDownFill: RiArrowUpDownFill, BiTable: BiTable, BiListUl: BiListUl, + RiMore2Fill: RiMore2Fill, }); export function getIconWithProps( diff --git a/src/client/web/src/components/visual/qrcode.tsx b/src/client/web/src/components/visual/qrcode.tsx new file mode 100644 index 0000000..0768bee --- /dev/null +++ b/src/client/web/src/components/visual/qrcode.tsx @@ -0,0 +1,62 @@ +import * as React from "react"; +import QRCode from "react-qr-code"; + +import { RiQrCodeFill } from "@react-icons/all-files/ri/RiQrCodeFill"; + +export interface Props { + value: string; + size: number; + pos: boolean; // true=left, right=false + className?: string; +} + +export interface State { + show: boolean; +} + +export class QRCodeIcon extends React.Component { + constructor(p: Props) { + super(p); + this.state = { + show: false, + }; + } + + toggle = () => { + this.setState({ show: !this.state.show }); + }; + + show = () => { + this.setState({ show: true }); + }; + hide = () => { + this.setState({ show: false }); + }; + + render() { + const widthInRem = `${Math.floor(this.props.size / 10)}rem`; + const posStyle = this.props.pos + ? { right: `-${widthInRem}rem` } + : { left: `-${widthInRem}rem` }; + const qrcode = this.state.show ? ( +
+
+ +
+
+ ) : null; + + return ( +
+ +
{qrcode}
+
+ ); + } +}