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

fix(fe): fix style issues

Browse source
This commit is contained in:
hexxa 2021-11-28 16:09:56 +08:00 • committed by Hexxa
parent dc6babcc17
commit da5794a955
14 changed files with 416 additions and 363 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/static/css/default.css
View file

@ -441,7 +441,7 @@
.title-l { .title-l {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: bold; font-weight: bold;
line-height: 2rem; line-height: 2.5rem;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

38
public/static/css/white.css
View file

@ -1,11 +1,19 @@
#root-frame { #root-frame {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
} }
.theme-default #bg { .theme-default #bg {
background: url("/static/img/textured_paper.png") repeat fixed center; background: url("/static/img/textured_paper.png") repeat fixed center;
width: 100%; position: fixed;
height: 100%; left: 0;
padding: 0 0 2rem 0; right: 0;
top: 0;
bottom: 0;
overflow: scroll;
} }
.theme-default #top-bar { .theme-default #top-bar {
@ -100,6 +108,10 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.container-padding {
padding: 1.5rem;
}
/* .theme-default #breadcrumb .item:last-child { /* .theme-default #breadcrumb .item:last-child {
margin-right: 0; margin-right: 0;
} */ } */
@ -147,11 +159,11 @@
} }
.theme-default .upload-item { .theme-default .upload-item {
padding: 1rem; padding: 0 0 1rem 0;
} }
.theme-default #share-list { .theme-default .share-item {
padding: 1rem; padding: 0 0 1rem 0;
} }
.theme-default #tabs { .theme-default #tabs {
@ -227,10 +239,8 @@
/* padding: 2rem; */ /* padding: 2rem; */
} }
.theme-default #pane-settings #profile { .theme-default #pane-settings #profile .desc-m {
color: #95a5a6; color: #95a5a6;
font-size: 1.2rem;
line-height: 1.8rem;
} }
.theme-default .user-form { .theme-default .user-form {
@ -248,10 +258,18 @@
} }
.theme-default .hr { .theme-default .hr {
height: 1px;
margin: 1rem 0; margin: 1rem 0;
background-color: #ecf0f1; background-color: #ecf0f1;
} }
.theme-default .card {
padding: 1rem;
/* background-color: #e8e8e8; */
text-align: center;
border-radius: 0.8rem;
}
.theme-default .key-value { .theme-default .key-value {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@ -290,7 +308,7 @@
color: #34495e; color: #34495e;
background-color: #ecf0f6; background-color: #ecf0f6;
border: solid 1px #95a5a6; border: solid 1px #95a5a6;
margin: 1rem 0; margin: 0.5rem 0 1rem 0;
} }
.captcha { .captcha {

7
src/client/web/src/components/control/tabs.tsx
View file

@ -51,7 +51,10 @@ export class Tabs extends React.Component<Props, State, {}> {
? this.props.tabIcons.get(option) ? this.props.tabIcons.get(option)
: defaultIconProps; : defaultIconProps;
const icon = getIcon(iconProps.name, iconProps.size, iconProps.color); const iconColor = displaying === option ? iconProps.color : "black0";
const icon = getIcon(iconProps.name, iconProps.size, iconColor);
const fontColor =
displaying === option ? `${colorClass(iconColor)}-font` : "";
return ( return (
<button <button
@ -64,7 +67,7 @@ export class Tabs extends React.Component<Props, State, {}> {
<Flexbox <Flexbox
children={List([ children={List([
<span className="margin-r-s">{icon}</span>, <span className="margin-r-s">{icon}</span>,
<span> <span className={fontColor}>
{this.props.msg.pkg.get( {this.props.msg.pkg.get(
`control.${this.props.targetControl}.${option}` `control.${this.props.targetControl}.${option}`
)} )}

4
src/client/web/src/components/core_state.ts
View file

@ -116,7 +116,7 @@ export function initState(): ICoreState {
[panelTabs]: "filesPanel", [panelTabs]: "filesPanel",
[loginDialogCtrl]: "on", [loginDialogCtrl]: "on",
[settingsDialogCtrl]: "off", [settingsDialogCtrl]: "off",
[settingsTabsCtrl]: "settingsPane", [settingsTabsCtrl]: "preferencePane",
}), }),
options: Map<string, Set<string>>({ options: Map<string, Set<string>>({
[panelTabs]: Set<string>([ [panelTabs]: Set<string>([
@ -126,7 +126,7 @@ export function initState(): ICoreState {
]), ]),
[loginDialogCtrl]: Set<string>(["on", "off"]), [loginDialogCtrl]: Set<string>(["on", "off"]),
[settingsDialogCtrl]: Set<string>(["on", "off"]), [settingsDialogCtrl]: Set<string>(["on", "off"]),
[settingsTabsCtrl]: Set<string>(["settingsPane", "managementPane"]), [settingsTabsCtrl]: Set<string>(["preferencePane", "managementPane"]),
}), }),
}, },
}, },

13
src/client/web/src/components/dialog_settings.tsx
View file

@ -2,17 +2,14 @@ import * as React from "react";
import { Map } from "immutable"; import { Map } from "immutable";
import { ICoreState, MsgProps, UIProps } from "./core_state"; import { ICoreState, MsgProps, UIProps } from "./core_state";
import { FilesPanel, FilesProps } from "./panel_files";
import { UploadingsPanel, UploadingsProps } from "./panel_uploadings";
import { SharingsPanel, SharingsProps } from "./panel_sharings";
import { IconProps } from "./visual/icons"; import { IconProps } from "./visual/icons";
import { PaneSettings } from "./pane_settings"; import { PaneSettings } from "./pane_settings";
import { AdminPane, AdminProps } from "./pane_admin"; import { AdminPane, AdminProps } from "./pane_admin";
import { Tabs } from "./control/tabs"; import { Tabs } from "./control/tabs";
import { Container } from "./layout/container";
import { LoginProps } from "./pane_login"; import { LoginProps } from "./pane_login";
import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
import { roleAdmin } from "../client"; import { roleAdmin } from "../client";
export const settingsTabsCtrl = "settingsTabs"; export const settingsTabsCtrl = "settingsTabs";
@ -33,7 +30,7 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
render() { render() {
const displaying = this.props.ui.control.controls.get(settingsTabsCtrl); const displaying = this.props.ui.control.controls.get(settingsTabsCtrl);
const showSettings = displaying === "settingsPane" ? "" : "hidden"; const showSettings = displaying === "preferencePane" ? "" : "hidden";
const showManagement = const showManagement =
this.props.login.userRole === roleAdmin && displaying === "managementPane" this.props.login.userRole === roleAdmin && displaying === "managementPane"
? "" ? ""
@ -41,11 +38,11 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
return ( return (
<div id="settings-dialog"> <div id="settings-dialog">
<div className="container"> <Container>
<Tabs <Tabs
targetControl={settingsTabsCtrl} targetControl={settingsTabsCtrl}
tabIcons={Map<string, IconProps>({ tabIcons={Map<string, IconProps>({
settingsPane: { preferencePane: {
name: "RiSettings3Fill", name: "RiSettings3Fill",
size: "1.6rem", size: "1.6rem",
color: "cyan0", color: "cyan0",
@ -62,7 +59,7 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
msg={this.props.msg} msg={this.props.msg}
update={this.props.update} update={this.props.update}
/> />
</div> </Container>
<div className={`${showSettings}`}> <div className={`${showSettings}`}>
<PaneSettings <PaneSettings

35
src/client/web/src/components/layers.tsx
View file

@ -9,6 +9,7 @@ import { SettingsDialog } from "./dialog_settings";
import { AuthPane, LoginProps } from "./pane_login"; import { AuthPane, LoginProps } from "./pane_login";
import { Flexbox } from "./layout/flexbox"; import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
export const loginDialogCtrl = "loginDialog"; export const loginDialogCtrl = "loginDialog";
export const settingsDialogCtrl = "settingsDialog"; export const settingsDialogCtrl = "settingsDialog";
@ -53,25 +54,21 @@ export class Layers extends React.Component<Props, State, {}> {
<div id="settings-layer" className={`layer ${showSettings}`}> <div id="settings-layer" className={`layer ${showSettings}`}>
<div id="root-container"> <div id="root-container">
<div className="container"> <Container>
<div className="padding-m"> <Flexbox
<Flexbox children={List([
children={List([ <h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
<h4 id="title"> <button
{this.props.msg.pkg.get("pane.settings")} onClick={() => {
</h4>, this.setControlOption("settingsDialog", "off");
<button }}
onClick={() => { >
this.setControlOption("settingsDialog", "off"); {this.props.msg.pkg.get("panes.close")}
}} </button>,
> ])}
{this.props.msg.pkg.get("panes.close")} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
</button>, />
])} </Container>
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
</div>
<SettingsDialog <SettingsDialog
admin={this.props.admin} admin={this.props.admin}

15
src/client/web/src/components/layout/card.tsx Normal file
View file

@ -0,0 +1,15 @@
import * as React from "react";
export interface Props {
name: string;
value: string;
}
export const Card = (props: Props) => {
return (
<div className="card float-l">
<div className="title-l black0-font">{props.value}</div>
<div className="desc-m">{props.name}</div>
</div>
);
};

13
src/client/web/src/components/layout/container.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
export interface Props {
children: React.ReactNode | undefined;
}
export const Container = (props: Props) => {
return (
<div className="container">
<div className="container-padding">{props.children}</div>
</div>
);
};

21
src/client/web/src/components/pane_admin.tsx
View file

@ -7,6 +7,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
import { User, Quota } from "../client"; import { User, Quota } from "../client";
import { updater } from "./state_updater"; import { updater } from "./state_updater";
import { Flexbox } from "./layout/flexbox"; import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
export interface AdminProps { export interface AdminProps {
users: Map<string, User>; users: Map<string, User>;
@ -452,15 +453,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
return ( return (
<div className="font-m"> <div className="font-m">
<div className="container"> <Container>
<BgCfg <BgCfg
ui={this.props.ui} ui={this.props.ui}
msg={this.props.msg} msg={this.props.msg}
update={this.props.update} update={this.props.update}
/> />
</div> </Container>
<div className="container"> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>, <h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>,
@ -514,9 +515,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
placeholder={this.props.msg.pkg.get("settings.pwd.new2")} placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/> />
</span> </span>
</div> </Container>
<div className="container"> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title"> <h5 className="title">
@ -526,9 +527,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
])} ])}
/> />
{userList} {userList}
</div> </Container>
<div className="container"> <Container>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
@ -564,7 +565,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
])} ])}
/> />
{roleList} {roleList}
</div> </Container>
</div> </div>
); );
} }
@ -697,9 +698,9 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<span className="title-m bold"> <h5 className="title">
{this.props.msg.pkg.get("cfg.bg")} {this.props.msg.pkg.get("cfg.bg")}
</span>, </h5>,
<span> <span>
<button onClick={this.resetClientCfg} className="margin-r-m"> <button onClick={this.resetClientCfg} className="margin-r-m">

423
src/client/web/src/components/pane_settings.tsx
View file

@ -7,6 +7,8 @@ import { LoginProps } from "./pane_login";
import { Flexbox } from "./layout/flexbox"; import { Flexbox } from "./layout/flexbox";
import { updater } from "./state_updater"; import { updater } from "./state_updater";
import { alertMsg } from "../common/env"; import { alertMsg } from "../common/env";
import { Container } from "./layout/container";
import { Card } from "./layout/card";
export interface Props { export interface Props {
login: LoginProps; login: LoginProps;
msg: MsgProps; msg: MsgProps;
@ -138,236 +140,236 @@ export class PaneSettings extends React.Component<Props, State, {}> {
render() { render() {
return ( return (
<div id="pane-settings" className="container"> <div id="pane-settings">
<div id="profile"> <Container>
<h5 className="pane-title"> <div id="profile">
{this.props.msg.pkg.get("user.profile")} <h5 className="title">
</h5> {this.props.msg.pkg.get("user.profile")}
</h5>
<div className="key-value"> <div>
{`${this.props.msg.pkg.get("user.name")}: `} <Card
<span className="value">{`${this.props.login.userName}`}</span> name={`${this.props.msg.pkg.get("user.name")}`}
</div> value={`${this.props.login.userName}`}
<div className="key-value"> />
{`${this.props.msg.pkg.get("user.role")}: `} <Card
<span className="value">{`${this.props.login.userRole}`}</span> name={`${this.props.msg.pkg.get("user.role")}`}
</div> value={`${this.props.login.userRole}`}
<div className="key-value"> />
{`${this.props.msg.pkg.get("user.spaceLimit")}: `} <Card
<span className="value"> name={`${this.props.msg.pkg.get("user.spaceLimit")}`}
{`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), { value={`${FileSize(
round: 0, parseInt(this.props.login.quota.spaceLimit, 10),
})}`} {
</span> round: 0,
</div> }
<div className="key-value"> )}`}
{`${this.props.msg.pkg.get("user.upLimit")}: `} />
<span className="value"> <Card
{`${FileSize(this.props.login.quota.uploadSpeedLimit, { name={`${this.props.msg.pkg.get("user.upLimit")}`}
round: 0, value={`${FileSize(this.props.login.quota.uploadSpeedLimit, {
})}`} round: 0,
</span> })}`}
</div> />
<div className="key-value"> <Card
{`${this.props.msg.pkg.get("user.downLimit")}: `} name={`${this.props.msg.pkg.get("user.downLimit")}`}
<span className="value"> value={`${FileSize(this.props.login.quota.downloadSpeedLimit, {
{`${FileSize(this.props.login.quota.downloadSpeedLimit, { round: 0,
round: 0, })}`}
})}`} />
</span>
</div>
</div>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="pane-title">
{this.props.msg.pkg.get("settings.pwd.update")}
</h5>,
<button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.old")}
</div> </div>
<input
name="old_pwd"
type="password"
onChange={this.changeOldPwd}
value={this.state.oldPwd}
placeholder={this.props.msg.pkg.get("settings.pwd.old")}
/>
</span>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
<input
name="new_pwd1"
type="password"
onChange={this.changeNewPwd1}
value={this.state.newPwd1}
placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/>
</span>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
<input
name="new_pwd2"
type="password"
onChange={this.changeNewPwd2}
value={this.state.newPwd2}
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</span>
</div>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
<span>
<button
onClick={() => {
this.setLan("en_US");
}}
className="float-input"
>
{this.props.msg.pkg.get("enUS")}
</button>
<button
onClick={() => {
this.setLan("zh_CN");
}}
className="float-input"
>
{this.props.msg.pkg.get("zhCN")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="title">
{this.props.msg.pkg.get("settings.customLan")}
</h5>,
<span>
<button onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.lanPackURL")}
</div>
<input
type="text"
onChange={this.changeLanPackURL}
value={this.props.login.preferences.lanPackURL}
className="black0-font"
style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
/>
</div> </div>
</div>
<div className="hr"></div> <div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<button onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div> <div>
<div className="float-input"> <Flexbox
children={List([
<h5 className="pane-title">
{this.props.msg.pkg.get("settings.pwd.update")}
</h5>,
<button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<span className="float-input">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.url")} {this.props.msg.pkg.get("settings.pwd.old")}
</div> </div>
<input <input
name="bg_url" name="old_pwd"
type="text" type="password"
onChange={this.changeBgUrl} onChange={this.changeOldPwd}
value={this.props.login.preferences.bg.url} value={this.state.oldPwd}
placeholder={this.props.msg.pkg.get("cfg.bg.url")} placeholder={this.props.msg.pkg.get("settings.pwd.old")}
/> />
</div> </span>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
<input
name="new_pwd1"
type="password"
onChange={this.changeNewPwd1}
value={this.state.newPwd1}
placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/>
</span>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
<input
name="new_pwd2"
type="password"
onChange={this.changeNewPwd2}
value={this.state.newPwd2}
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</span>
</div>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
<span>
<button
onClick={() => {
this.setLan("en_US");
}}
className="float-input"
>
{this.props.msg.pkg.get("enUS")}
</button>
<button
onClick={() => {
this.setLan("zh_CN");
}}
className="float-input"
>
{this.props.msg.pkg.get("zhCN")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="title">
{this.props.msg.pkg.get("settings.customLan")}
</h5>,
<span>
<button onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="float-input"> <div className="float-input">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")} {this.props.msg.pkg.get("settings.lanPackURL")}
</div> </div>
<input <input
name="bg_repeat"
type="text" type="text"
onChange={this.changeBgRepeat} onChange={this.changeLanPackURL}
value={this.props.login.preferences.bg.repeat} value={this.props.login.preferences.lanPackURL}
placeholder={this.props.msg.pkg.get("cfg.bg.repeat")} className="black0-font"
/> style={{ width: "20rem" }}
</div> placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.pos")}
</div>
<input
name="bg_pos"
type="text"
onChange={this.changeBgPos}
value={this.props.login.preferences.bg.position}
placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
/>
</div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.align")}
</div>
<input
name="bg_align"
type="text"
onChange={this.changeBgAlign}
value={this.props.login.preferences.bg.align}
placeholder={this.props.msg.pkg.get("cfg.bg.align")}
/> />
</div> </div>
</div> </div>
</div>
{/* <div className="hr"></div> <div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<button onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.url")}
</div>
<input
name="bg_url"
type="text"
onChange={this.changeBgUrl}
value={this.props.login.preferences.bg.url}
placeholder={this.props.msg.pkg.get("cfg.bg.url")}
/>
</div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")}
</div>
<input
name="bg_repeat"
type="text"
onChange={this.changeBgRepeat}
value={this.props.login.preferences.bg.repeat}
placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
/>
</div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.pos")}
</div>
<input
name="bg_pos"
type="text"
onChange={this.changeBgPos}
value={this.props.login.preferences.bg.position}
placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
/>
</div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.align")}
</div>
<input
name="bg_align"
type="text"
onChange={this.changeBgAlign}
value={this.props.login.preferences.bg.align}
placeholder={this.props.msg.pkg.get("cfg.bg.align")}
/>
</div>
</div>
</div>
{/* <div className="hr"></div>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
@ -401,6 +403,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
])} ])}
/> />
</div> */} </div> */}
</Container>
</div> </div>
); );
} }

69
src/client/web/src/components/panel_sharings.tsx
View file

@ -10,6 +10,7 @@ import { updater } from "./state_updater";
import { ICoreState, MsgProps, UIProps } from "./core_state"; import { ICoreState, MsgProps, UIProps } from "./core_state";
import { LoginProps } from "./pane_login"; import { LoginProps } from "./pane_login";
import { Flexbox } from "./layout/flexbox"; import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
export interface SharingsProps { export interface SharingsProps {
sharings: List<string>; sharings: List<string>;
@ -123,32 +124,31 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
} }
); );
return this.props.sharingsInfo.sharings.size === 0 ? ( const list =
<div id="sharing-list" className="container"> this.props.sharingsInfo.sharings.size === 0 ? (
<Flexbox <Container>
children={List([ <Flexbox
<RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />, children={List([
<span> <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
<h3 className="title-l"> <span>
{this.props.msg.pkg.get("share.404.title")} <h3 className="title-l">
</h3> {this.props.msg.pkg.get("share.404.title")}
<span className="desc-l grey0-font"> </h3>
{this.props.msg.pkg.get("share.404.desc")} <span className="desc-l grey0-font">
</span> {this.props.msg.pkg.get("share.404.desc")}
</span>, </span>
])} </span>,
childrenStyles={List([ ])}
{ flex: "auto", justifyContent: "flex-end" }, childrenStyles={List([
{ flex: "auto" }, { flex: "auto", justifyContent: "flex-end" },
])} { flex: "auto" },
className="padding-l" ])}
/> />
</div> </Container>
) : ( ) : (
<div className="container"> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<span className="padding-m">
<Flexbox <Flexbox
children={List([ children={List([
<RiShareBoxLine <RiShareBoxLine
@ -165,15 +165,16 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
</span> </span>
</span>, </span>,
])} ])}
/> />,
</span>,
<span></span>, <span></span>,
])} ])}
/> />
{sharingList} {sharingList}
</div> </Container>
); );
return <div id="sharing-list">{list}</div>;
} }
} }

135
src/client/web/src/components/panel_uploadings.tsx
View file

@ -12,6 +12,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
import { LoginProps } from "./pane_login"; import { LoginProps } from "./pane_login";
import { UploadEntry, UploadState } from "../worker/interface"; import { UploadEntry, UploadState } from "../worker/interface";
import { Flexbox } from "./layout/flexbox"; import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
export interface UploadingsProps { export interface UploadingsProps {
uploadings: List<UploadEntry>; uploadings: List<UploadEntry>;
@ -85,25 +86,23 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
<div key={uploading.filePath}> <div key={uploading.filePath}>
<Flexbox <Flexbox
children={List([ children={List([
<span className="padding-m"> <Flexbox
<Flexbox children={List([
children={List([ <RiUploadCloudLine
<RiUploadCloudLine size="3rem"
size="3rem" id="icon-upload"
id="icon-upload" className="margin-r-m blue0-font"
className="margin-r-m blue0-font" />,
/>,
<div className={`${nameWidthClass}`}> <div className={`${nameWidthClass}`}>
<span className="title-m">{fileName}</span> <span className="title-m">{fileName}</span>
<div className="desc-m grey0-font"> <div className="desc-m grey0-font">
{FileSize(uploading.uploaded, { round: 0 })} {FileSize(uploading.uploaded, { round: 0 })}
&nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })} &nbsp;/&nbsp;{FileSize(uploading.size, { round: 0 })}
</div> </div>
</div>, </div>,
])} ])}
/> />,
</span>,
<div className="item-op"> <div className="item-op">
<button <button
@ -130,57 +129,59 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
} }
); );
return this.props.uploadingsInfo.uploadings.size === 0 ? ( const list =
<div id="upload-list" className="container"> this.props.uploadingsInfo.uploadings.size === 0 ? (
<Flexbox <Container>
children={List([ <Flexbox
<RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />, children={List([
<span> <RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />,
<h3 className="title-l"> <span>
{this.props.msg.pkg.get("upload.404.title")} <h3 className="title-l">
</h3> {this.props.msg.pkg.get("upload.404.title")}
<span className="desc-l grey0-font"> </h3>
{this.props.msg.pkg.get("upload.404.desc")} <span className="desc-l grey0-font">
</span> {this.props.msg.pkg.get("upload.404.desc")}
</span>, </span>
])} </span>,
childrenStyles={List([ ])}
{ flex: "auto", justifyContent: "flex-end" }, childrenStyles={List([
{ flex: "auto" }, { flex: "auto", justifyContent: "flex-end" },
])} { flex: "auto" },
className="padding-l" ])}
/> />
</div> </Container>
) : ( ) : (
<div id="upload-list" className="container"> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<span className="upload-item"> <span className="upload-item">
<Flexbox <Flexbox
children={List([ children={List([
<RiUploadCloudFill <RiUploadCloudFill
size="3rem" size="3rem"
className="margin-r-m black-font" className="margin-r-m black-font"
/>, />,
<span> <span>
<span className="title-m bold"> <span className="title-m bold">
{this.props.msg.pkg.get("browser.upload.title")} {this.props.msg.pkg.get("browser.upload.title")}
</span> </span>
<span className="desc-m grey0-font"> <span className="desc-m grey0-font">
{this.props.msg.pkg.get("browser.upload.desc")} {this.props.msg.pkg.get("browser.upload.desc")}
</span> </span>
</span>, </span>,
])} ])}
/> />
</span>, </span>,
<span></span>, <span></span>,
])} ])}
/> />
{uploadingList} {uploadingList}
</div> </Container>
); );
return <div id="upload-list">{list}</div>;
} }
} }

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

@ -109,4 +109,6 @@ export const msgs: Map<string, string> = Map({
"control.panelTabs.filesPanel": "Files", "control.panelTabs.filesPanel": "Files",
"control.panelTabs.uploadingsPanel": "Uploadings", "control.panelTabs.uploadingsPanel": "Uploadings",
"control.panelTabs.sharingsPanel": "Sharings", "control.panelTabs.sharingsPanel": "Sharings",
"control.settingsTabs.managementPane": "Management",
"control.settingsTabs.preferencePane": "Preference",
}); });

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

@ -108,4 +108,6 @@ export const msgs: Map<string, string> = Map({
"control.panelTabs.filesPanel": "文件", "control.panelTabs.filesPanel": "文件",
"control.panelTabs.uploadingsPanel": "上传", "control.panelTabs.uploadingsPanel": "上传",
"control.panelTabs.sharingsPanel": "共享", "control.panelTabs.sharingsPanel": "共享",
"control.settingsTabs.managementPane": "管理",
"control.settingsTabs.preferencePane": "设置",
}); });