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

379
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 <div>
style={{ <span className="bold">
flexDirection: "column",
}}
className="bold item-name"
>
<div>
{this.props.msg.pkg.get("user.id")} {this.props.id}
</div>
<div>
{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,55 +248,61 @@ 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
name={`${this.props.id}-pwd2`} name={`${this.props.id}-pwd2`}
type="password" type="password"
onChange={this.changePwd2} onChange={this.changePwd2}
value={this.state.newPwd2} value={this.state.newPwd2}
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,114 +457,112 @@ 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={{ <input
flexDirection: "column", type="text"
alignItems: "flex-start", onChange={this.onChangeUserName}
}} value={this.state.newUserName}
> className="black0-font margin-r-m margin-b-m"
<input placeholder={this.props.msg.pkg.get("user.name")}
type="text" />
onChange={this.onChangeUserName} <input
value={this.state.newUserName} type="text"
className="black0-font margin-b-m" onChange={this.onChangeUserRole}
placeholder={this.props.msg.pkg.get("user.name")} value={this.state.newUserRole}
/> className="black0-font margin-r-m margin-b-m"
<input placeholder={this.props.msg.pkg.get("user.role")}
type="text" />
onChange={this.onChangeUserRole} <input
value={this.state.newUserRole} type="password"
className="black0-font margin-b-m" onChange={this.onChangeUserPwd1}
placeholder={this.props.msg.pkg.get("user.role")} value={this.state.newUserPwd1}
/> className="black0-font margin-r-m margin-b-m"
<input placeholder={this.props.msg.pkg.get("user.password")}
type="password" />
onChange={this.onChangeUserPwd1} <input
value={this.state.newUserPwd1} type="password"
className="black0-font margin-b-m" onChange={this.onChangeUserPwd2}
placeholder={this.props.msg.pkg.get("user.password")} value={this.state.newUserPwd2}
/> className="black0-font margin-r-m margin-b-m"
<input placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
type="password" />
onChange={this.onChangeUserPwd2} </span>,
value={this.state.newUserPwd2}
className="black0-font margin-b-m" <button onClick={this.addUser} className="margin-r-m">
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</div>
<div className="flex-list-item-r">
<button
onClick={this.addUser}
className="margin-r-m"
>
{this.props.msg.pkg.get("add")} {this.props.msg.pkg.get("add")}
</button> </button>,
</div> ])}
</div> childrenStyles={List([
</div> {
alignItems: "flex-start",
<div className="container"> },
<div className="padding-l"> { justifyContent: "flex-end" },
<div className="flex-list-container bold"> ])}
<span className="flex-list-item-l"> className="margin-t-m"
<span>{this.props.msg.pkg.get("admin.users")}</span> />
</span>
<span className="flex-list-item-r padding-r-m"></span>
</div>
{userList}
</div>
</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> ])}
</div> className="title-m bold margin-b-m"
/>
<div className="flex-list-container"> {userList}
<div className="flex-list-item-l">
<span className="inline-block margin-t-m margin-b-m">
<input
type="text"
onChange={this.onChangeRole}
value={this.state.newRole}
className="black0-font margin-r-m"
placeholder={this.props.msg.pkg.get("role.name")}
/>
</span>
</div>
<div className="flex-list-item-r">
<button
onClick={this.addRole}
className="margin-r-m"
>
{this.props.msg.pkg.get("add")}
</button>
</div>
</div>
</div> </div>
<div className="container"> <div className="container padding-l">
<div className="padding-l"> <div>
<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("role.add")}</span>,
</span> <span></span>,
<span className="flex-list-item-r padding-r-m"></span> ])}
</div> className="title-m bold margin-b-m"
{roleList} />
<Flexbox
children={List([
<span className="inline-block margin-t-m margin-b-m">
<input
type="text"
onChange={this.onChangeRole}
value={this.state.newRole}
className="black0-font margin-r-m"
placeholder={this.props.msg.pkg.get("role.name")}
/>
</span>,
<button onClick={this.addRole} className="margin-r-m">
{this.props.msg.pkg.get("add")}
</button>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div>
<Flexbox
children={List([
<span>{this.props.msg.pkg.get("admin.roles")}</span>,
<span></span>,
])}
className="title-m bold margin-b-m"
/>
{roleList}
</div> </div>
</div> </div>
); );