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

fix(fe/panes): refine styles of panes

Browse source
This commit is contained in:
hexxa 2021-12-25 20:04:47 +08:00 • committed by Hexxa
parent a66046bd01
commit 4fd9bd9c33
5 changed files with 397 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -494,3 +494,7 @@
.full-width {
width: 100%;
}
.bold {
font-weight: bold;
}

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

@ -182,6 +182,7 @@
font-size: 1.4rem;
line-height: 2rem;
display: block;
overflow-wrap: break-word;
}
.theme-default #item-rows .hr {
@ -370,7 +371,7 @@
.theme-default .pane-title {
color: black;
line-height: 4rem;
font-size: 1.6rem;
}
.theme-default #pane-settings {
@ -382,9 +383,14 @@
}
.theme-default .user-form {
border: dashed 2px #ccc;
padding: 1rem;
font-size: 1.4rem;
padding: 1rem 0;
margin-top: 1rem;
border-bottom: dashed 1px #000;
}
.theme-default .more {
border: dashed 1px #ccc;
}
.theme-default .role-list-item {

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

@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
const defaultIconProps: IconProps = {
name: "RiFolder2Fill",
size: "1.6rem",
color: `${colorClass("1")}-font`,
color: `${colorClass("cyan1")}-font`,
};
export interface Props {

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

@ -2,6 +2,8 @@ import * as React from "react";
import { List, Map, Set } from "immutable";
import FileSize from "filesize";
import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
import { alertMsg, confirmMsg } from "../common/env";
import { ICoreState, MsgProps, UIProps } from "./core_state";
import { User, Quota } from "../client";
@ -39,6 +41,7 @@ export interface UserFormState {
newPwd2: string;
role: string;
quota: Quota;
folded: boolean;
}
export class UserForm extends React.Component<
@ -59,6 +62,7 @@ export class UserForm extends React.Component<
uploadSpeedLimit: p.quota.uploadSpeedLimit,
downloadSpeedLimit: p.quota.downloadSpeedLimit,
},
folded: true,
};
}
@ -150,25 +154,40 @@ export class UserForm extends React.Component<
});
};
toggle = () => {
this.setState({ folded: !this.state.folded });
};
render() {
const foldedClass = this.state.folded ? "hidden" : "";
const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
return (
<div className="user-form">
<Flexbox
children={List([
<div>
<div className="key-value">
{`${this.props.msg.pkg.get("user.name")}: `}
<span className="value">{this.props.name}</span>
</div>
<div className="key-value">
{`${this.props.msg.pkg.get("user.id")}: `}
<span className="value">{this.props.id}</span>
</div>
<span className="bold">{`${this.props.msg.pkg.get(
"user.name"
)}: `}</span>
<span className="margin-r-m">{this.props.name}</span>
<span className="bold">{`${this.props.msg.pkg.get(
"user.id"
)}: `}</span>
<span>{this.props.id}</span>
</div>,
<button onClick={this.delUser}>
{this.props.msg.pkg.get("delete")}
</button>,
<span>
<RiMore2Fill
size="1.2rem"
className={`margin-r-m ${foldIconColor}`}
onClick={this.toggle}
/>
<button onClick={this.delUser}>
{this.props.msg.pkg.get("delete")}
</button>
</span>,
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
@ -178,130 +197,134 @@ export class UserForm extends React.Component<
])}
/>
<div className="hr"></div>
<div className={foldedClass}>
<div className="hr"></div>
<Flexbox
children={List([
<div>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("user.role")}
</div>
<input
name={`${this.props.id}-role`}
type="text"
onChange={this.changeRole}
value={this.state.role}
placeholder={this.state.role}
/>
</span>
<Flexbox
className="margin-t-m"
children={List([
<div>
<span className="float-input">
<div className="label">
{this.props.msg.pkg.get("user.role")}
</div>
<input
name={`${this.props.id}-role`}
type="text"
onChange={this.changeRole}
value={this.state.role}
placeholder={this.state.role}
/>
</span>
<span className="float-input">
<div className="label">
{`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
parseInt(this.state.quota.spaceLimit, 10),
{ round: 0 }
)})`}
</div>
<input
name={`${this.props.id}-spaceLimit`}
type="number"
onChange={this.changeSpaceLimit}
value={this.state.quota.spaceLimit}
placeholder={`${this.state.quota.spaceLimit}`}
/>
</span>
<span className="float-input">
<div className="label">
{`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
parseInt(this.state.quota.spaceLimit, 10),
{ round: 0 }
)})`}
</div>
<input
name={`${this.props.id}-spaceLimit`}
type="number"
onChange={this.changeSpaceLimit}
value={this.state.quota.spaceLimit}
placeholder={`${this.state.quota.spaceLimit}`}
/>
</span>
<span className="float-input">
<div className="label">
{`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
this.state.quota.uploadSpeedLimit,
{ round: 0 }
)})`}
</div>
<input
name={`${this.props.id}-uploadSpeedLimit`}
type="number"
onChange={this.changeUploadSpeedLimit}
value={this.state.quota.uploadSpeedLimit}
placeholder={`${this.state.quota.uploadSpeedLimit}`}
/>
</span>
<span className="float-input">
<div className="label">
{`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
this.state.quota.uploadSpeedLimit,
{ round: 0 }
)})`}
</div>
<input
name={`${this.props.id}-uploadSpeedLimit`}
type="number"
onChange={this.changeUploadSpeedLimit}
value={this.state.quota.uploadSpeedLimit}
placeholder={`${this.state.quota.uploadSpeedLimit}`}
/>
</span>
<span className="float-input">
<div className="label">
{`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
this.state.quota.downloadSpeedLimit,
{ round: 0 }
)})`}
</div>
<input
name={`${this.props.id}-downloadSpeedLimit`}
type="number"
onChange={this.changeDownloadSpeedLimit}
value={this.state.quota.downloadSpeedLimit}
placeholder={`${this.state.quota.downloadSpeedLimit}`}
/>
</span>
</div>,
<span className="float-input">
<div className="label">
{`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
this.state.quota.downloadSpeedLimit,
{ round: 0 }
)})`}
</div>
<input
name={`${this.props.id}-downloadSpeedLimit`}
type="number"
onChange={this.changeDownloadSpeedLimit}
value={this.state.quota.downloadSpeedLimit}
placeholder={`${this.state.quota.downloadSpeedLimit}`}
/>
</span>
</div>,
<button onClick={this.setUser}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
flexBasis: "30%",
},
])}
/>
<button onClick={this.setUser}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
flexBasis: "30%",
},
])}
/>
<div className="hr"></div>
<div className="hr"></div>
<Flexbox
children={List([
<div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
<Flexbox
className="margin-t-m"
children={List([
<div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
<input
name={`${this.props.id}-pwd1`}
type="password"
onChange={this.changePwd1}
value={this.state.newPwd1}
placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/>
</div>
<input
name={`${this.props.id}-pwd1`}
type="password"
onChange={this.changePwd1}
value={this.state.newPwd1}
placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/>
</div>
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
<div className="float-input">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
<input
name={`${this.props.id}-pwd2`}
type="password"
onChange={this.changePwd2}
value={this.state.newPwd2}
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</div>
<input
name={`${this.props.id}-pwd2`}
type="password"
onChange={this.changePwd2}
value={this.state.newPwd2}
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</div>
</div>,
</div>,
<button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
},
])}
/>
<button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")}
</button>,
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
},
])}
/>
</div>
</div>
);
}
@ -343,19 +366,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
};
addRole = async () => {
return updater()
.addRole(this.state.newRole)
.then((status: string) => {
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
} else {
alertMsg(this.props.msg.pkg.get("add.ok"));
}
return updater().listRoles();
})
.then(() => {
this.props.update(updater().updateAdmin);
});
const status = await updater().addRole(this.state.newRole);
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
} else {
alertMsg(this.props.msg.pkg.get("add.ok"));
await updater().listRoles();
this.props.update(updater().updateAdmin);
}
};
delRole = async (role: string) => {
@ -363,19 +381,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
return;
}
return updater()
.delRole(role)
.then((status: string) => {
if (status !== "") {
this.props.msg.pkg.get("delete.fail");
} else {
this.props.msg.pkg.get("delete.ok");
}
return updater().listRoles();
})
.then(() => {
this.props.update(updater().updateAdmin);
});
const status = await updater().delRole(role);
if (status !== "") {
this.props.msg.pkg.get("delete.fail");
} else {
this.props.msg.pkg.get("delete.ok");
await updater().listRoles();
this.props.update(updater().updateAdmin);
}
};
addUser = async () => {
@ -384,33 +397,29 @@ export class AdminPane extends React.Component<Props, State, {}> {
return;
}
return updater()
.addUser({
id: "", // backend will fill it
name: this.state.newUserName,
pwd: this.state.newUserPwd1,
role: this.state.newUserRole,
quota: undefined,
usedSpace: "0",
preferences: undefined,
})
.then((status: string) => {
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
} else {
alertMsg(this.props.msg.pkg.get("add.ok"));
}
this.setState({
newUserName: "",
newUserPwd1: "",
newUserPwd2: "",
newUserRole: "",
});
return updater().listUsers();
})
.then(() => {
this.props.update(updater().updateAdmin);
const status = await updater().addUser({
id: "", // backend will fill it
name: this.state.newUserName,
pwd: this.state.newUserPwd1,
role: this.state.newUserRole,
quota: undefined,
usedSpace: "0",
preferences: undefined,
});
if (status !== "") {
alertMsg(this.props.msg.pkg.get("add.fail"));
} else {
alertMsg(this.props.msg.pkg.get("add.ok"));
this.setState({
newUserName: "",
newUserPwd1: "",
newUserPwd2: "",
newUserRole: "",
});
await updater().listUsers();
this.props.update(updater().updateAdmin);
}
};
render() {
@ -464,7 +473,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>,
<h5 className="pane-title">
{this.props.msg.pkg.get("user.add")}
</h5>,
<button onClick={this.addUser}>
{this.props.msg.pkg.get("add")}
</button>,
@ -472,6 +483,8 @@ export class AdminPane extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="hr"></div>
<span className="float-input">
<div className="label">{this.props.msg.pkg.get("user.name")}</div>
<input
@ -520,12 +533,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="title">
<h5 className="pane-title">
{this.props.msg.pkg.get("admin.users")}
</h5>,
<span></span>,
])}
/>
<div className="hr"></div>
{userList}
</Container>
@ -533,11 +549,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
<div>
<Flexbox
children={List([
<h5 className="title">{this.props.msg.pkg.get("role.add")}</h5>,
<h5 className="pane-title">
{this.props.msg.pkg.get("role.add")}
</h5>,
<span></span>,
])}
/>
<div className="hr"></div>
<Flexbox
children={List([
<input
@ -553,17 +573,20 @@ export class AdminPane extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
</Container>
<div className="hr"></div>
<Container>
<Flexbox
children={List([
<h5 className="title">
<h5 className="pane-title">
{this.props.msg.pkg.get("admin.roles")}
</h5>,
<span></span>,
])}
/>
<div className="hr"></div>
{roleList}
</Container>
</div>
@ -698,7 +721,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div>
<Flexbox
children={List([
<h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<span>
<button onClick={this.resetClientCfg} className="margin-r-m">
@ -712,6 +735,8 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="hr"></div>
<div>
<div className="float-input">
<div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>

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

@ -177,196 +177,200 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/>
</div>
</div>
</Container>
<Container>
<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" }])}
/>
<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>
<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="pane-title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div>
<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 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>
</Container>
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="pane-title">
{this.props.msg.pkg.get("settings.customLan")}
</h5>,
<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>
</div>
</Container>
<span>
<button onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
<Container>
<Flexbox
children={List([
<h5 className="pane-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="hr"></div>
<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>
</Container>
<Container>
<Flexbox
children={List([
<h5 className="pane-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 className="hr"></div>
<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("settings.lanPackURL")}
{this.props.msg.pkg.get("cfg.bg.repeat")}
</div>
<input
name="bg_repeat"
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")}
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>
</Container>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="pane-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 className="hr"></div>
<div>
<Flexbox
children={List([
@ -400,7 +404,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
])}
/>
</div> */}
</Container>
</div>
);
}