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;
}
.grey2-font {
color: #ecf0f6;
}
.grey3-font {
color: #697384;
}
.black-font {
color: #000;
}
@ -178,6 +186,13 @@
.grey1-bg {
background-color: #7f8c8d;
}
.grey2-bg {
background-color: #ecf0f6;
}
.grey3-bg {
color: #697384;
}
.black-bg {
background-color: #000;

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

@ -1,3 +1,7 @@
body button {
font-size: 1.2rem;
}
#bg {
position: fixed;
top: 0;
@ -670,3 +674,45 @@ div.hr {
.user {
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"
},
"dependencies": {
"@react-icons/all-files": "^4.1.0",
"@types/axios": "^0.14.0",
"@types/immutable": "^3.8.7",
"@types/react": "^16.8.13",

138
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 { List, Map } from "immutable";
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 { updater } from "./state_updater";
@ -404,65 +407,91 @@ export class Browser extends React.Component<Props, State, {}> {
: `${dirPath}/${item.name}`;
return item.isDir ? (
<div key={item.name} className="flex-list-container">
<span className="flex-list-item-l">
<span className="vbar yellow2-bg"></span>
<Flexbox
key={item.name}
children={List([
<span className="padding-m">
<Flexbox
children={List([
<RiFolder2Fill size="3rem" className="yellow0-font margin-r-m" />,
<span className="">
<span className={nameCellClass}>
<span className="bold" onClick={() => this.gotoChild(item.name)}>
<span
className="title-m"
onClick={() => this.gotoChild(item.name)}
>
{item.name}
</span>
<div className="grey1-font">
<span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span>
<div className="desc-m grey0-font">
<span>
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</span>
</div>
</span>
</span>
<span className="flex-list-item-r padding-r-m">
<span className="item-op">
</span>,
])}
/>
</span>,
<span className="padding-m">
<button
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" }}
>
{isSelected
? this.props.msg.pkg.get("browser.deselect")
: this.props.msg.pkg.get("browser.select")}
</button>
</span>
</span>
</div>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
) : (
<div key={item.name} className="flex-list-container">
<span className="flex-list-item-l">
<span className="vbar green2-bg"></span>
<span className={nameCellClass}>
<Flexbox
key={item.name}
children={List([
<span className="padding-m">
<Flexbox
children={List([
<RiFile2Fill size="3rem" className="cyan0-font margin-r-m" />,
<span className={`${nameCellClass}`}>
<a
className="bold"
className="title-m"
href={`/v1/fs/files?fp=${itemPath}`}
target="_blank"
>
{item.name}
</a>
<div className="grey1-font">
<span>{FileSize(item.size, { round: 0 })}</span>&nbsp;/&nbsp;
<span>{item.modTime.slice(0, item.modTime.indexOf("T"))}</span>
<div className="desc-m grey0-font">
<span>
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</span>
&nbsp;/&nbsp;
<span>{FileSize(item.size, { round: 0 })}</span>
</div>
</span>
</span>
<span className="flex-list-item-r padding-r-m">
<span className="item-op">
</span>,
])}
/>
</span>,
<span className="item-op padding-m">
<button
type="button"
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" }}
>
{isSelected
? this.props.msg.pkg.get("browser.deselect")
: this.props.msg.pkg.get("browser.select")}
</button>
</span>
</span>
</div>
</span>,
])}
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")}
</span>
</span>,
<span></span>,
])}
/>
@ -575,24 +605,47 @@ export class Browser extends React.Component<Props, State, {}> {
{this.props.browser.sharings.size === 0 ? null : (
<div className="container">
<div className="flex-list-container bold">
<span className="flex-list-item-l">
<Flexbox
children={List([
<span>
<span className="dot black-bg"></span>
<span>{this.props.msg.pkg.get("browser.share.title")}</span>
<span className="bold">
{this.props.msg.pkg.get("browser.share.title")}
</span>
<span className="flex-list-item-r padding-r-m"></span>
</div>
</span>,
<span></span>,
])}
/>
{sharingList}
</div>
)}
<div className="container">
<div className="flex-list-container bold">
<span className="flex-list-item-l">
<span className="dot black-bg"></span>
<span>{this.props.msg.pkg.get("browser.item.title")}</span>
<Flexbox
children={List([
<span className="padding-m">
<Flexbox
children={List([
<RiFileList2Fill
size="4rem"
className="margin-r-m black-font"
/>,
<span>
<span className="title-l">
{this.props.msg.pkg.get("browser.item.title")}
</span>
<span className="flex-list-item-r padding-r-m">
<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`}
@ -600,8 +653,11 @@ export class Browser extends React.Component<Props, State, {}> {
>
{this.props.msg.pkg.get("browser.selectAll")}
</button>
</span>
</div>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
{itemList}
</div>
</div>

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

@ -10,17 +10,16 @@ export interface Props {
const containerStyle = {
display: "flex",
"flex-direction": "row",
"flex-wrap": "nowrap",
"align-items": "center",
"justify-content": "flex-start",
flex: "row nowrap",
alignItems: "center",
justifyContent: "flex-start",
};
const childrenStyle = {
flex: "50%",
display: "flex",
"align-items": "flex-start",
"justify-content": "flex-start",
alignItems: "flex-start",
justifyContent: "flex-start",
};
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"
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":
version "1.8.3"
resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"