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

fix(pane-admin): unify styles

Browse source
This commit is contained in:
hexxa 2021-11-20 21:52:55 +08:00 • committed by Hexxa
parent 551120e83b
commit c75b640b7a
2 changed files with 105 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -43,11 +43,8 @@
border-radius: 0.6rem; border-radius: 0.6rem;
} }
.theme-default #panes #title-container {
padding: 2rem;
}
.theme-default #panes .container { .theme-default #panes .container {
padding: 2rem;
background-color: white; background-color: white;
margin: 3rem auto 1rem auto; margin: 3rem auto 1rem auto;
border-radius: 0.6rem; border-radius: 0.6rem;
@ -109,6 +106,16 @@
line-height: 1.8rem; line-height: 1.8rem;
} }
.theme-default .user-form {
border: dashed 2px #ccc;
padding: 1rem;
margin-top: 1rem;
}
.theme-default .role-list-item {
margin: 0 auto 1rem 0;
}
.theme-default .wide-input { .theme-default .wide-input {
width: 20rem; width: 20rem;
} }

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

@ -152,25 +152,21 @@ export class UserForm extends React.Component<
render() { render() {
return ( return (
<div <div className="user-form">
style={{
border: "dashed 2px #ccc",
padding: "1rem",
}}
>
<Flexbox <Flexbox
children={List([ children={List([
<div> <div>
<span className="bold"> <div className="key-value">
{this.props.msg.pkg.get("user.name")} {this.props.name} {`${this.props.msg.pkg.get("user.name")}: `}
</span> <span className="value">{this.props.name}</span>
&nbsp;/&nbsp; </div>
<span className="grey0-font"> <div className="key-value">
{this.props.msg.pkg.get("user.id")} {this.props.id} {`${this.props.msg.pkg.get("user.id")}: `}
</span> <span className="value">{this.props.id}</span>
</div>
</div>, </div>,
<button onClick={this.delUser} className="margin-r-m"> <button onClick={this.delUser}>
{this.props.msg.pkg.get("delete")} {this.props.msg.pkg.get("delete")}
</button>, </button>,
])} ])}
@ -182,13 +178,13 @@ export class UserForm extends React.Component<
])} ])}
/> />
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr"></div>
<Flexbox <Flexbox
children={List([ children={List([
<div> <div>
<span className="inline-block"> <span className="float-input">
<div className="margin-r-m font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("user.role")} {this.props.msg.pkg.get("user.role")}
</div> </div>
<input <input
@ -196,13 +192,12 @@ export class UserForm extends React.Component<
type="text" type="text"
onChange={this.changeRole} onChange={this.changeRole}
value={this.state.role} value={this.state.role}
className="black0-font margin-r-m"
placeholder={this.state.role} placeholder={this.state.role}
/> />
</span> </span>
<span className="margin-t-m inline-block"> <span className="float-input">
<div className="margin-r-m font-size-s grey1-font"> <div className="label">
{`${this.props.msg.pkg.get("spaceLimit")} (${FileSize( {`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
parseInt(this.state.quota.spaceLimit, 10), parseInt(this.state.quota.spaceLimit, 10),
{ round: 0 } { round: 0 }
@ -213,13 +208,12 @@ export class UserForm extends React.Component<
type="number" type="number"
onChange={this.changeSpaceLimit} onChange={this.changeSpaceLimit}
value={this.state.quota.spaceLimit} value={this.state.quota.spaceLimit}
className="black0-font margin-r-m"
placeholder={`${this.state.quota.spaceLimit}`} placeholder={`${this.state.quota.spaceLimit}`}
/> />
</span> </span>
<span className="margin-t-m inline-block"> <span className="float-input">
<div className="margin-r-m font-size-s grey1-font"> <div className="label">
{`${this.props.msg.pkg.get("uploadLimit")} (${FileSize( {`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
this.state.quota.uploadSpeedLimit, this.state.quota.uploadSpeedLimit,
{ round: 0 } { round: 0 }
@ -230,13 +224,12 @@ export class UserForm extends React.Component<
type="number" type="number"
onChange={this.changeUploadSpeedLimit} onChange={this.changeUploadSpeedLimit}
value={this.state.quota.uploadSpeedLimit} value={this.state.quota.uploadSpeedLimit}
className="black0-font margin-r-m"
placeholder={`${this.state.quota.uploadSpeedLimit}`} placeholder={`${this.state.quota.uploadSpeedLimit}`}
/> />
</span> </span>
<span className="margin-t-m inline-block"> <span className="float-input">
<div className="margin-r-m font-size-s grey1-font"> <div className="label">
{`${this.props.msg.pkg.get("downloadLimit")} (${FileSize( {`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
this.state.quota.downloadSpeedLimit, this.state.quota.downloadSpeedLimit,
{ round: 0 } { round: 0 }
@ -247,13 +240,12 @@ export class UserForm extends React.Component<
type="number" type="number"
onChange={this.changeDownloadSpeedLimit} onChange={this.changeDownloadSpeedLimit}
value={this.state.quota.downloadSpeedLimit} value={this.state.quota.downloadSpeedLimit}
className="black0-font margin-r-m"
placeholder={`${this.state.quota.downloadSpeedLimit}`} placeholder={`${this.state.quota.downloadSpeedLimit}`}
/> />
</span> </span>
</div>, </div>,
<button onClick={this.setUser} className="margin-r-m"> <button onClick={this.setUser}>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button>, </button>,
])} ])}
@ -266,34 +258,40 @@ export class UserForm extends React.Component<
])} ])}
/> />
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr"></div>
<Flexbox <Flexbox
children={List([ children={List([
<div> <div>
<div className="font-size-s grey1-font"> <div className="float-input">
{this.props.msg.pkg.get("user.password")} <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> </div>
<input <div className="float-input">
name={`${this.props.id}-pwd1`} <div className="label">
type="password" {this.props.msg.pkg.get("settings.pwd.new2")}
onChange={this.changePwd1} </div>
value={this.state.newPwd1} <input
className="black0-font margin-b-m margin-r-m" name={`${this.props.id}-pwd2`}
placeholder={this.props.msg.pkg.get("settings.pwd.new1")} type="password"
/> onChange={this.changePwd2}
<input value={this.state.newPwd2}
name={`${this.props.id}-pwd2`} placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
type="password" />
onChange={this.changePwd2} </div>
value={this.state.newPwd2}
className="black0-font margin-b-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</div>, </div>,
<button onClick={this.setPwd} className="margin-r-m"> <button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button>, </button>,
])} ])}
@ -303,7 +301,6 @@ export class UserForm extends React.Component<
justifyContent: "flex-end", justifyContent: "flex-end",
}, },
])} ])}
className="margin-t-m"
/> />
</div> </div>
); );
@ -362,12 +359,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
}; };
delRole = async (role: string) => { delRole = async (role: string) => {
if ( if (!confirmMsg(this.props.msg.pkg.get("role.delete.warning"))) {
!confirmMsg(
// "After deleting this role, some of users may not be able to login."
this.props.msg.pkg.get("role.delete.warning")
)
) {
return; return;
} }
@ -424,7 +416,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
render() { render() {
const userList = this.props.admin.users.valueSeq().map((user: User) => { const userList = this.props.admin.users.valueSeq().map((user: User) => {
return ( return (
<div key={user.id} className="margin-t-m"> <div key={user.id}>
<UserForm <UserForm
key={user.id} key={user.id}
id={user.id} id={user.id}
@ -441,27 +433,27 @@ export class AdminPane extends React.Component<Props, State, {}> {
const roleList = this.props.admin.roles.valueSeq().map((role: string) => { const roleList = this.props.admin.roles.valueSeq().map((role: string) => {
return ( return (
<div key={role} className="flex-list-container margin-b-m"> <div className="role-list-item">
<div className="flex-list-item-l"> <Flexbox
<span>{role}</span> children={List([
</div> <span>{role}</span>,
<div className="flex-list-item-r"> <button
<button onClick={() => {
onClick={() => { this.delRole(role);
this.delRole(role); }}
}} >
className="margin-r-m" {this.props.msg.pkg.get("delete")}
> </button>,
{this.props.msg.pkg.get("delete")} ])}
</button> childrenStyles={List([{}, { justifyContent: "flex-end" }])}
</div> />
</div> </div>
); );
}); });
return ( return (
<div className="font-size-m"> <div className="font-size-m">
<div className="container padding-l"> <div className="container">
<BgCfg <BgCfg
ui={this.props.ui} ui={this.props.ui}
msg={this.props.msg} msg={this.props.msg}
@ -469,107 +461,92 @@ export class AdminPane extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="container padding-l"> <div className="container">
<Flexbox <Flexbox
children={List([ children={List([
<span>{this.props.msg.pkg.get("user.add")}</span>, <h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>,
<span></span>, <button onClick={this.addUser}>
{this.props.msg.pkg.get("add")}
</button>,
])} ])}
className="title-m bold margin-b-m" childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
<span className="inline-block margin-r-m margin-b-m"> <span className="float-input">
<div className="font-size-s grey1-font"> <div className="label">{this.props.msg.pkg.get("user.name")}</div>
{this.props.msg.pkg.get("user.name")}
</div>
<input <input
type="text" type="text"
onChange={this.onChangeUserName} onChange={this.onChangeUserName}
value={this.state.newUserName} value={this.state.newUserName}
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")}
/> />
</span> </span>
<span className="inline-block margin-r-m margin-b-m"> <span className="float-input">
<div className="font-size-s grey1-font"> <div className="label">{this.props.msg.pkg.get("user.role")}</div>
{this.props.msg.pkg.get("user.role")}
</div>
<input <input
type="text" type="text"
onChange={this.onChangeUserRole} onChange={this.onChangeUserRole}
value={this.state.newUserRole} value={this.state.newUserRole}
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")}
/> />
</span> </span>
<span className="inline-block margin-r-m margin-b-m"> <span className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")} {this.props.msg.pkg.get("settings.pwd.new1")}
</div> </div>
<input <input
type="password" type="password"
onChange={this.onChangeUserPwd1} onChange={this.onChangeUserPwd1}
value={this.state.newUserPwd1} value={this.state.newUserPwd1}
className="black0-font margin-r-m margin-b-m"
placeholder={this.props.msg.pkg.get("settings.pwd.new1")} placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
/> />
</span> </span>
<span className="inline-block margin-r-m margin-b-m"> <span className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")} {this.props.msg.pkg.get("settings.pwd.new2")}
</div> </div>
<input <input
type="password" type="password"
onChange={this.onChangeUserPwd2} onChange={this.onChangeUserPwd2}
value={this.state.newUserPwd2} value={this.state.newUserPwd2}
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")}
/> />
</span> </span>
<span className="inline-block margin-r-m margin-b-m">
<button onClick={this.addUser} className="margin-r-m">
{this.props.msg.pkg.get("add")}
</button>
</span>
</div> </div>
<div className="container padding-l"> <div className="container">
<Flexbox <Flexbox
children={List([ children={List([
<span>{this.props.msg.pkg.get("admin.users")}</span>, <h5 className="title">
{this.props.msg.pkg.get("admin.users")}
</h5>,
<span></span>, <span></span>,
])} ])}
className="title-m bold margin-b-m"
/> />
{userList} {userList}
</div> </div>
<div className="container padding-l"> <div className="container">
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<span>{this.props.msg.pkg.get("role.add")}</span>, <h5 className="title">{this.props.msg.pkg.get("role.add")}</h5>,
<span></span>, <span></span>,
])} ])}
className="title-m bold margin-b-m"
/> />
<Flexbox <Flexbox
children={List([ children={List([
<span className="inline-block margin-t-m margin-b-m"> <input
<input type="text"
type="text" onChange={this.onChangeRole}
onChange={this.onChangeRole} value={this.state.newRole}
value={this.state.newRole} placeholder={this.props.msg.pkg.get("role.name")}
className="black0-font margin-r-m" />,
placeholder={this.props.msg.pkg.get("role.name")} <button onClick={this.addRole}>
/>
</span>,
<button onClick={this.addRole} className="margin-r-m">
{this.props.msg.pkg.get("add")} {this.props.msg.pkg.get("add")}
</button>, </button>,
])} ])}
@ -577,14 +554,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr"></div>
<Flexbox <Flexbox
children={List([ children={List([
<span>{this.props.msg.pkg.get("admin.roles")}</span>, <h5 className="title">
{this.props.msg.pkg.get("admin.roles")}
</h5>,
<span></span>, <span></span>,
])} ])}
className="title-m bold margin-b-m"
/> />
{roleList} {roleList}
</div> </div>