doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): introduce react-icons

Browse source
This commit is contained in:
hexxa 2021-08-28 19:51:29 +08:00 • committed by Hexxa
parent a3d68cd77d
commit edf2edfb78
6 changed files with 191 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

15
public/static/css/color.css
View file

@ -78,6 +78,14 @@
color: #7f8c8d; color: #7f8c8d;
} }
.grey2-font {
color: #ecf0f6;
}
.grey3-font {
color: #697384;
}
.black-font { .black-font {
color: #000; color: #000;
} }
@ -178,6 +186,13 @@
.grey1-bg { .grey1-bg {
background-color: #7f8c8d; background-color: #7f8c8d;
} }
.grey2-bg {
background-color: #ecf0f6;
}
.grey3-bg {
color: #697384;
}
.black-bg { .black-bg {
background-color: #000; background-color: #000;

46
public/static/css/style.css
View file

@ -1,3 +1,7 @@
body button {
font-size: 1.2rem;
}
#bg { #bg {
position: fixed; position: fixed;
top: 0; top: 0;
@ -670,3 +674,45 @@ div.hr {
.user { .user {
font-weight: bold; font-weight: bold;
} }
.title-m {
font-size: 1.4rem;
/* font-weight: bold; */
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.desc-m {
font-size: 1.2rem;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.title-l {
font-size: 1.8rem;
font-weight: bold;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.desc-l {
font-size: 1.2rem;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}

1
src/client/web/package.json
View file

@ -49,6 +49,7 @@
"worker-loader": "^3.0.7" "worker-loader": "^3.0.7"
}, },
"dependencies": { "dependencies": {
"@react-icons/all-files": "^4.1.0",
"@types/axios": "^0.14.0", "@types/axios": "^0.14.0",
"@types/immutable": "^3.8.7", "@types/immutable": "^3.8.7",
"@types/react": "^16.8.13", "@types/react": "^16.8.13",

182
src/client/web/src/components/browser.tsx
View file

@ -2,6 +2,9 @@ import * as React from "react";
import * as ReactDOM from "react-dom"; import * as ReactDOM from "react-dom";
import { List, Map } from "immutable"; import { List, Map } from "immutable";
import FileSize from "filesize"; import FileSize from "filesize";
import { RiFolder2Fill } from "@react-icons/all-files/ri/RiFolder2Fill";
import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
import { RiFile2Fill } from "@react-icons/all-files/ri/RiFile2Fill";
import { alertMsg, comfirmMsg } from "../common/env"; import { alertMsg, comfirmMsg } from "../common/env";
import { updater } from "./state_updater"; import { updater } from "./state_updater";
@ -404,65 +407,91 @@ export class Browser extends React.Component<Props, State, {}> {
: `${dirPath}/${item.name}`; : `${dirPath}/${item.name}`;
return item.isDir ? ( return item.isDir ? (
<div key={item.name} className="flex-list-container"> <Flexbox
<span className="flex-list-item-l"> key={item.name}
<span className="vbar yellow2-bg"></span> children={List([
<span className={nameCellClass}> <span className="padding-m">
<span className="bold" onClick={() => this.gotoChild(item.name)}> <Flexbox
{item.name} children={List([
</span> <RiFolder2Fill size="3rem" className="yellow0-font margin-r-m" />,
<div className="grey1-font">
<span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span> <span className="">
</div> <span className={nameCellClass}>
</span> <span
</span> className="title-m"
<span className="flex-list-item-r padding-r-m"> onClick={() => this.gotoChild(item.name)}
<span className="item-op"> >
{item.name}
</span>
<div className="desc-m grey0-font">
<span>
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</span>
</div>
</span>
</span>,
])}
/>
</span>,
<span className="padding-m">
<button <button
onClick={() => this.select(item.name)} onClick={() => this.select(item.name)}
className={`white-font ${isSelected ? "blue0-bg" : "grey1-bg"}`} className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"}`}
style={{ width: "8rem", display: "inline-block" }} style={{ width: "8rem", display: "inline-block" }}
> >
{isSelected {isSelected
? this.props.msg.pkg.get("browser.deselect") ? this.props.msg.pkg.get("browser.deselect")
: this.props.msg.pkg.get("browser.select")} : this.props.msg.pkg.get("browser.select")}
</button> </button>
</span> </span>,
</span> ])}
</div> childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
) : ( ) : (
<div key={item.name} className="flex-list-container"> <Flexbox
<span className="flex-list-item-l"> key={item.name}
<span className="vbar green2-bg"></span> children={List([
<span className={nameCellClass}> <span className="padding-m">
<a <Flexbox
className="bold" children={List([
href={`/v1/fs/files?fp=${itemPath}`} <RiFile2Fill size="3rem" className="cyan0-font margin-r-m" />,
target="_blank"
> <span className={`${nameCellClass}`}>
{item.name} <a
</a> className="title-m"
<div className="grey1-font"> href={`/v1/fs/files?fp=${itemPath}`}
<span>{FileSize(item.size, { round: 0 })}</span>&nbsp;/&nbsp; target="_blank"
<span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span> >
</div> {item.name}
</span> </a>
</span> <div className="desc-m grey0-font">
<span className="flex-list-item-r padding-r-m"> <span>
<span className="item-op"> {item.modTime.slice(0, item.modTime.indexOf("T"))}
</span>
&nbsp;/&nbsp;
<span>{FileSize(item.size, { round: 0 })}</span>
</div>
</span>,
])}
/>
</span>,
<span className="item-op padding-m">
<button <button
type="button" type="button"
onClick={() => this.select(item.name)} onClick={() => this.select(item.name)}
className={`white-font ${isSelected ? "blue0-bg" : "grey1-bg"}`} className={`${isSelected ? "blue0-bg white-font" : "grey2-bg grey3-font"}`}
style={{ width: "8rem", display: "inline-block" }} style={{ width: "8rem", display: "inline-block" }}
> >
{isSelected {isSelected
? this.props.msg.pkg.get("browser.deselect") ? this.props.msg.pkg.get("browser.deselect")
: this.props.msg.pkg.get("browser.select")} : this.props.msg.pkg.get("browser.select")}
</button> </button>
</span> </span>,
</span> ])}
</div> childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
); );
}); });
@ -565,6 +594,7 @@ export class Browser extends React.Component<Props, State, {}> {
{this.props.msg.pkg.get("browser.upload.title")} {this.props.msg.pkg.get("browser.upload.title")}
</span> </span>
</span>, </span>,
<span></span>, <span></span>,
])} ])}
/> />
@ -575,33 +605,59 @@ export class Browser extends React.Component<Props, State, {}> {
{this.props.browser.sharings.size === 0 ? null : ( {this.props.browser.sharings.size === 0 ? null : (
<div className="container"> <div className="container">
<div className="flex-list-container bold"> <Flexbox
<span className="flex-list-item-l"> children={List([
<span className="dot black-bg"></span> <span>
<span>{this.props.msg.pkg.get("browser.share.title")}</span> <span className="dot black-bg"></span>
</span> <span className="bold">
<span className="flex-list-item-r padding-r-m"></span> {this.props.msg.pkg.get("browser.share.title")}
</div> </span>
</span>,
<span></span>,
])}
/>
{sharingList} {sharingList}
</div> </div>
)} )}
<div className="container"> <div className="container">
<div className="flex-list-container bold"> <Flexbox
<span className="flex-list-item-l"> children={List([
<span className="dot black-bg"></span> <span className="padding-m">
<span>{this.props.msg.pkg.get("browser.item.title")}</span> <Flexbox
</span> children={List([
<span className="flex-list-item-r padding-r-m"> <RiFileList2Fill
<button size="4rem"
onClick={() => this.selectAll()} className="margin-r-m black-font"
className={`grey1-bg white-font`} />,
style={{ width: "8rem", display: "inline-block" }}
> <span>
{this.props.msg.pkg.get("browser.selectAll")} <span className="title-l">
</button> {this.props.msg.pkg.get("browser.item.title")}
</span> </span>
</div> <span className="desc-l grey0-font">
Files and folders in current path
</span>
</span>,
])}
/>
</span>,
<span className="padding-m">
<button
onClick={() => this.selectAll()}
className={`grey1-bg white-font`}
style={{ width: "8rem", display: "inline-block" }}
>
{this.props.msg.pkg.get("browser.selectAll")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
{itemList} {itemList}
</div> </div>
</div> </div>

11
src/client/web/src/components/layout/flexbox.tsx
View file

@ -10,17 +10,16 @@ export interface Props {
const containerStyle = { const containerStyle = {
display: "flex", display: "flex",
"flex-direction": "row", flex: "row nowrap",
"flex-wrap": "nowrap", alignItems: "center",
"align-items": "center", justifyContent: "flex-start",
"justify-content": "flex-start",
}; };
const childrenStyle = { const childrenStyle = {
flex: "50%", flex: "50%",
display: "flex", display: "flex",
"align-items": "flex-start", alignItems: "flex-start",
"justify-content": "flex-start", justifyContent: "flex-start",
}; };
export const Flexbox = (props: Props) => { export const Flexbox = (props: Props) => {

5
yarn.lock
View file

@ -1165,6 +1165,11 @@
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.17.tgz#25fdbdfd282c2f86ddf3fcefbd98be99cd2627e2" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.17.tgz#25fdbdfd282c2f86ddf3fcefbd98be99cd2627e2"
integrity sha512-0p1rCgM3LLbAdwBnc7gqgnvjHg9KpbhcSphergHShlkWz8EdPawoMJ3/VbezI0mGC5eKCDzMaPgF9Yca6cKvrg== integrity sha512-0p1rCgM3LLbAdwBnc7gqgnvjHg9KpbhcSphergHShlkWz8EdPawoMJ3/VbezI0mGC5eKCDzMaPgF9Yca6cKvrg==
"@react-icons/all-files@^4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@react-icons/all-files/-/all-files-4.1.0.tgz#477284873a0821928224b6fc84c62d2534d6650b"
integrity sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==
"@sinonjs/commons@^1.7.0": "@sinonjs/commons@^1.7.0":
version "1.8.3" version "1.8.3"
resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"