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

feat(ui/browser): cleanups

Browse source
This commit is contained in:
hexxa 2021-08-28 22:50:53 +08:00 • committed by Hexxa
parent e7d6cb5975
commit b16f6e54d5
4 changed files with 79 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
import { RiShareForwardBoxFill } from "@react-icons/all-files/ri/RiShareForwardBoxFill";
import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
import { alertMsg, comfirmMsg } from "../common/env";
import { updater } from "./state_updater";
@ -341,17 +342,12 @@ export class Browser extends React.Component<Props, State, {}> {
className="black0-font margin-r-m"
placeholder={this.props.msg.pkg.get("browser.folder.name")}
/>
<button
onClick={this.onMkDir}
className="margin-r-m"
>
<button onClick={this.onMkDir} className="margin-r-m">
{this.props.msg.pkg.get("browser.folder.add")}
</button>
</span>
<span className="inline-block margin-t-m margin-b-m">
<button
onClick={this.onClickUpload}
>
<button onClick={this.onClickUpload}>
{this.props.msg.pkg.get("browser.upload")}
</button>
<input
@ -610,7 +606,29 @@ export class Browser extends React.Component<Props, State, {}> {
const uploadingListPane =
this.props.browser.tab === "uploading" ? (
this.props.browser.uploadings.size === 0 ? (
<div>No uploading found</div>
<div className="container">
<Flexbox
children={List([
<RiEmotionSadLine
size="4rem"
className="margin-r-m red0-font"
/>,
<span>
<h3 className="title-l">
{this.props.msg.pkg.get("upload.404.title")}
</h3>
<span className="desc-l grey0-font">
{this.props.msg.pkg.get("upload.404.desc")}
</span>
</span>,
])}
childrenStyles={List([
{ flex: "auto", justifyContent: "flex-end" },
{ flex: "auto" },
])}
className="padding-l"
/>
</div>
) : (
<div className="container">
<Flexbox
@ -624,11 +642,11 @@ export class Browser extends React.Component<Props, State, {}> {
/>,
<span>
<span className="title-l">
<span className="title-m bold">
{this.props.msg.pkg.get("browser.upload.title")}
</span>
<span className="desc-l grey0-font">
All files in uploading
<span className="desc-m grey0-font">
{this.props.msg.pkg.get("browser.upload.desc")}
</span>
</span>,
])}
@ -685,10 +703,32 @@ export class Browser extends React.Component<Props, State, {}> {
);
});
const sharingingListPane =
const sharingListPane =
this.props.browser.tab === "sharing" ? (
this.props.browser.sharings.size === 0 ? (
<div>No sharing found</div>
<div className="container">
<Flexbox
children={List([
<RiEmotionSadLine
size="4rem"
className="margin-r-m red0-font"
/>,
<span>
<h3 className="title-l">
{this.props.msg.pkg.get("share.404.title")}
</h3>
<span className="desc-l grey0-font">
{this.props.msg.pkg.get("share.404.desc")}
</span>
</span>,
])}
childrenStyles={List([
{ flex: "auto", justifyContent: "flex-end" },
{ flex: "auto" },
])}
className="padding-l"
/>
</div>
) : (
<div className="container">
<Flexbox
@ -702,11 +742,11 @@ export class Browser extends React.Component<Props, State, {}> {
/>,
<span>
<span className="title-l">
<span className="title-m bold">
{this.props.msg.pkg.get("browser.share.title")}
</span>
<span className="desc-l grey0-font">
Sharing Folders
<span className="desc-m grey0-font">
{this.props.msg.pkg.get("browser.share.desc")}
</span>
</span>,
])}
@ -784,7 +824,7 @@ export class Browser extends React.Component<Props, State, {}> {
</button>
</div>
</div>
{sharingingListPane}
{sharingListPane}
{uploadingListPane}
{itemListPane}
</div>

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

@ -43,5 +43,12 @@ export const Flexbox = (props: Props) => {
}
);
return <div style={{ ...containerStyle, ...props.style }}>{children}</div>;
return (
<div
style={{ ...containerStyle, ...props.style }}
className={props.className}
>
{children}
</div>
);
};

6
src/client/web/src/i18n/en_US.ts
View file

@ -11,7 +11,9 @@ export const msgs: Map<string, string> = Map({
"browser.share.del": "Stop sharing",
"browser.share.add": "Share it",
"browser.share.title": "Sharings",
"browser.share.desc": "All folders which are shared",
"browser.upload.title": "Uploadings",
"browser.upload.desc": "All files which are in uploading",
"browser.folder.name": "Folder name",
"browser.folder.add": "Add Folder",
"browser.upload": "Upload",
@ -67,4 +69,8 @@ export const msgs: Map<string, string> = Map({
zhCN: "Chinese (simplified)",
enUS: "English (USA)",
"move.fail": "Failed to move",
"share.404.title": "No folder is in sharing",
"share.404.desc": "You can share a folder in the items tab",
"upload.404.title": "No uploading is in the progress",
"upload.404.desc": "You can upload a file in the items tab",
});

10
src/client/web/src/i18n/zh_CN.ts
View file

@ -11,7 +11,9 @@ export const msgs: Map<string, string> = Map({
"browser.share.del": "停止共享",
"browser.share.add": "开始共享",
"browser.share.title": "共享列表",
"browser.share.desc": "所有正在共享的路径",
"browser.upload.title": "上传列表",
"browser.upload.desc": "正在上传的文件列表",
"browser.folder.name": "文件夹名",
"browser.folder.add": "添加文件夹",
"browser.upload": "上传",
@ -62,7 +64,11 @@ export const msgs: Map<string, string> = Map({
"role.add": "新增角色",
"role.name": "角色名字",
"admin.roles": "角色列表",
"zhCN": "中文简体",
"enUS": "英语美国",
zhCN: "中文简体",
enUS: "英语美国",
"move.fail": "移动失败",
"share.404.title": "没有找到正在共享的文件夹",
"share.404.desc": "在列表面板可以共享文件夹",
"upload.404.title": "没有正在上传的文件",
"upload.404.desc": "在列表面板可以上传文件",
});