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

fix(ui/admin): improve admin pane layout

Browse source
This commit is contained in:
hexxa 2021-08-29 18:13:19 +08:00 • committed by Hexxa
parent 969cdc8032
commit 008181a9aa
1 changed files with 193 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,12 @@
import * as React from "react"; import * as React from "react";
import { Map, Set } from "immutable"; import { List, Map, Set } from "immutable";
import FileSize from "filesize";
import { alertMsg } from "../common/env"; import { alertMsg } from "../common/env";
import { ICoreState, MsgProps } from "./core_state"; import { ICoreState, MsgProps } 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";
export interface AdminProps { export interface AdminProps {
users: Map<string, User>; users: Map<string, User>;
@ -154,47 +156,39 @@ export class UserForm extends React.Component<
padding: "1rem", padding: "1rem",
}} }}
> >
<div className="flex-list-container"> <Flexbox
<div className="flex-list-item-l"> children={List([
<div
style={{
flexDirection: "column",
}}
className="bold item-name"
>
<div>
{this.props.msg.pkg.get("user.id")} {this.props.id}
</div>
<div> <div>
<span className="bold">
{this.props.msg.pkg.get("user.name")} {this.props.name} {this.props.msg.pkg.get("user.name")} {this.props.name}
</div> </span>
</div> &nbsp;/&nbsp;
</div> <span className="grey0-font">
{this.props.msg.pkg.get("user.id")} {this.props.id}
</span>
</div>,
<div <button onClick={this.delUser} className="margin-r-m">
className="flex-list-item-r"
style={{
flexDirection: "column",
flexBasis: "80%",
alignItems: "flex-end",
}}
>
<button
onClick={this.delUser}
className="margin-r-m"
>
{this.props.msg.pkg.get("delete")} {this.props.msg.pkg.get("delete")}
</button> </button>,
</div> ])}
</div> childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
},
])}
/>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr white0-bg margin-t-m margin-b-m"></div>
<div className="flex-list-container"> <Flexbox
<div className="flex-list-item-l" style={{ flex: "70%" }}> children={List([
<div> <div>
<div> <span className="inline-block">
<div className="margin-r-m font-size-s grey1-font">Role</div> <div className="margin-r-m font-size-s grey1-font">
{this.props.msg.pkg.get("user.role")}
</div>
<input <input
name={`${this.props.id}-role`} name={`${this.props.id}-role`}
type="text" type="text"
@ -203,11 +197,14 @@ export class UserForm extends React.Component<
className="black0-font margin-r-m" className="black0-font margin-r-m"
placeholder={this.state.role} placeholder={this.state.role}
/> />
</div> </span>
<div className="margin-t-m"> <span className="margin-t-m inline-block">
<div className="margin-r-m font-size-s grey1-font"> <div className="margin-r-m font-size-s grey1-font">
{this.props.msg.pkg.get("spaceLimit")} {`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
parseInt(this.state.quota.spaceLimit, 10),
{ round: 0 }
)})`}
</div> </div>
<input <input
name={`${this.props.id}-spaceLimit`} name={`${this.props.id}-spaceLimit`}
@ -217,11 +214,14 @@ export class UserForm extends React.Component<
className="black0-font margin-r-m" className="black0-font margin-r-m"
placeholder={`${this.state.quota.spaceLimit}`} placeholder={`${this.state.quota.spaceLimit}`}
/> />
</div> </span>
<div className="margin-t-m"> <span className="margin-t-m inline-block">
<div className="margin-r-m font-size-s grey1-font"> <div className="margin-r-m font-size-s grey1-font">
{this.props.msg.pkg.get("uploadLimit")} {`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
this.state.quota.uploadSpeedLimit,
{ round: 0 }
)})`}
</div> </div>
<input <input
name={`${this.props.id}-uploadSpeedLimit`} name={`${this.props.id}-uploadSpeedLimit`}
@ -231,11 +231,14 @@ export class UserForm extends React.Component<
className="black0-font margin-r-m" className="black0-font margin-r-m"
placeholder={`${this.state.quota.uploadSpeedLimit}`} placeholder={`${this.state.quota.uploadSpeedLimit}`}
/> />
</div> </span>
<div className="margin-t-m"> <span className="margin-t-m inline-block">
<div className="margin-r-m font-size-s grey1-font"> <div className="margin-r-m font-size-s grey1-font">
{this.props.msg.pkg.get("downloadLimit")} {`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
this.state.quota.downloadSpeedLimit,
{ round: 0 }
)})`}
</div> </div>
<input <input
name={`${this.props.id}-downloadSpeedLimit`} name={`${this.props.id}-downloadSpeedLimit`}
@ -245,34 +248,37 @@ export class UserForm extends React.Component<
className="black0-font margin-r-m" className="black0-font margin-r-m"
placeholder={`${this.state.quota.downloadSpeedLimit}`} placeholder={`${this.state.quota.downloadSpeedLimit}`}
/> />
</div> </span>
</div> </div>,
</div>
<div className="flex-list-item-r"> <button onClick={this.setUser} className="margin-r-m">
<button
onClick={this.setUser}
className="margin-r-m"
>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button> </button>,
</div> ])}
</div> childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
flexBasis: "30%",
},
])}
/>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr white0-bg margin-t-m margin-b-m"></div>
<div className="flex-list-container margin-t-m"> <Flexbox
<div children={List([
className="flex-list-item-l" <div>
style={{ flexDirection: "column", alignItems: "flex-start" }} <div className="font-size-s grey1-font">
> {this.props.msg.pkg.get("user.password")}
<div className="font-size-s grey1-font">Password</div> </div>
<input <input
name={`${this.props.id}-pwd1`} name={`${this.props.id}-pwd1`}
type="password" type="password"
onChange={this.changePwd1} onChange={this.changePwd1}
value={this.state.newPwd1} value={this.state.newPwd1}
className="black0-font margin-b-m" className="black0-font margin-b-m margin-r-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new1")} placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/> />
<input <input
@ -283,17 +289,20 @@ export class UserForm extends React.Component<
className="black0-font margin-b-m" className="black0-font margin-b-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new2")} placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/> />
</div> </div>,
<div className="flex-list-item-r"> <button onClick={this.setPwd} className="margin-r-m">
<button
onClick={this.setPwd}
className="margin-r-m"
>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button> </button>,
</div> ])}
</div> childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
},
])}
className="margin-t-m"
/>
</div> </div>
); );
} }
@ -429,7 +438,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
return ( return (
<div key={role} className="flex-list-container margin-b-m"> <div key={role} className="flex-list-container margin-b-m">
<div className="flex-list-item-l"> <div className="flex-list-item-l">
<span className="bold">{role}</span> <span>{role}</span>
</div> </div>
<div className="flex-list-item-r"> <div className="flex-list-item-r">
<button <button
@ -448,83 +457,85 @@ export class AdminPane extends React.Component<Props, State, {}> {
return ( return (
<div className="font-size-m"> <div className="font-size-m">
<div className="container padding-l"> <div className="container padding-l">
<div className="flex-list-container bold"> <Flexbox
<span className="flex-list-item-l"> children={List([
<span>{this.props.msg.pkg.get("user.add")}</span> <span>{this.props.msg.pkg.get("user.add")}</span>,
</span> <span></span>,
<span className="flex-list-item-r padding-r-m"></span> ])}
</div> className="title-m bold margin-b-m"
/>
<div className="flex-list-container margin-t-m"> <Flexbox
<div children={List([
className="flex-list-item-l" <span>
style={{
flexDirection: "column",
alignItems: "flex-start",
}}
>
<input <input
type="text" type="text"
onChange={this.onChangeUserName} onChange={this.onChangeUserName}
value={this.state.newUserName} value={this.state.newUserName}
className="black0-font margin-b-m" className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("user.name")} placeholder={this.props.msg.pkg.get("user.name")}
/> />
<input <input
type="text" type="text"
onChange={this.onChangeUserRole} onChange={this.onChangeUserRole}
value={this.state.newUserRole} value={this.state.newUserRole}
className="black0-font margin-b-m" className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("user.role")} placeholder={this.props.msg.pkg.get("user.role")}
/> />
<input <input
type="password" type="password"
onChange={this.onChangeUserPwd1} onChange={this.onChangeUserPwd1}
value={this.state.newUserPwd1} value={this.state.newUserPwd1}
className="black0-font margin-b-m" className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("user.password")} placeholder={this.props.msg.pkg.get("user.password")}
/> />
<input <input
type="password" type="password"
onChange={this.onChangeUserPwd2} onChange={this.onChangeUserPwd2}
value={this.state.newUserPwd2} value={this.state.newUserPwd2}
className="black0-font margin-b-m" className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new2")} placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/> />
</div> </span>,
<div className="flex-list-item-r">
<button
onClick={this.addUser}
className="margin-r-m"
>
{this.props.msg.pkg.get("add")}
</button>
</div>
</div>
</div>
<div className="container"> <button onClick={this.addUser} className="margin-r-m">
<div className="padding-l"> {this.props.msg.pkg.get("add")}
<div className="flex-list-container bold"> </button>,
<span className="flex-list-item-l"> ])}
<span>{this.props.msg.pkg.get("admin.users")}</span> childrenStyles={List([
</span> {
<span className="flex-list-item-r padding-r-m"></span> alignItems: "flex-start",
</div> },
{userList} { justifyContent: "flex-end" },
</div> ])}
className="margin-t-m"
/>
</div> </div>
<div className="container padding-l"> <div className="container padding-l">
<div className="flex-list-container bold"> <Flexbox
<span className="flex-list-item-l"> children={List([
<span>{this.props.msg.pkg.get("role.add")}</span> <span>{this.props.msg.pkg.get("admin.users")}</span>,
</span> <span></span>,
<span className="flex-list-item-r padding-r-m"></span> ])}
className="title-m bold margin-b-m"
/>
{userList}
</div> </div>
<div className="flex-list-container"> <div className="container padding-l">
<div className="flex-list-item-l"> <div>
<Flexbox
children={List([
<span>{this.props.msg.pkg.get("role.add")}</span>,
<span></span>,
])}
className="title-m bold margin-b-m"
/>
<Flexbox
children={List([
<span className="inline-block margin-t-m margin-b-m"> <span className="inline-block margin-t-m margin-b-m">
<input <input
type="text" type="text"
@ -533,31 +544,27 @@ export class AdminPane extends React.Component<Props, State, {}> {
className="black0-font margin-r-m" className="black0-font margin-r-m"
placeholder={this.props.msg.pkg.get("role.name")} placeholder={this.props.msg.pkg.get("role.name")}
/> />
</span> </span>,
</div> <button onClick={this.addRole} className="margin-r-m">
<div className="flex-list-item-r">
<button
onClick={this.addRole}
className="margin-r-m"
>
{this.props.msg.pkg.get("add")} {this.props.msg.pkg.get("add")}
</button> </button>,
</div> ])}
</div> childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div> </div>
<div className="container"> <div className="hr white0-bg margin-t-m margin-b-m"></div>
<div className="padding-l">
<div className="flex-list-container bold margin-b-m"> <Flexbox
<span className="flex-list-item-l"> children={List([
<span>{this.props.msg.pkg.get("admin.roles")}</span> <span>{this.props.msg.pkg.get("admin.roles")}</span>,
</span> <span></span>,
<span className="flex-list-item-r padding-r-m"></span> ])}
</div> className="title-m bold margin-b-m"
/>
{roleList} {roleList}
</div> </div>
</div> </div>
</div>
); );
} }
} }