fix(panes_settings): unify styles
This commit is contained in:
hexxa
Hexxa
parent
e80608823e
commit
551120e83b
2 changed files with 251 additions and 246 deletions
|
|
@ -5,7 +5,6 @@ import { List } from "immutable";
|
|||
import { ICoreState, UIProps, MsgProps } from "./core_state";
|
||||
import { LoginProps } from "./pane_login";
|
||||
import { Flexbox } from "./layout/flexbox";
|
||||
import { Flowgrid } from "./layout/flowgrid";
|
||||
import { updater } from "./state_updater";
|
||||
import { alertMsg } from "../common/env";
|
||||
export interface Props {
|
||||
|
|
@ -139,259 +138,236 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="padding-l">
|
||||
<div className="grey3-font">
|
||||
<h5 className="black-font">
|
||||
{this.props.msg.pkg.get("user.profile")}
|
||||
</h5>
|
||||
<div id="pane-settings" className="container">
|
||||
<div id="profile">
|
||||
<h5 className="pane-title">
|
||||
{this.props.msg.pkg.get("user.profile")}
|
||||
</h5>
|
||||
|
||||
<div className="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.name")}:`}{" "}
|
||||
</span>
|
||||
<span>{`${this.props.login.userName}`}</span>
|
||||
</div>
|
||||
<div className="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.role")}:`}{" "}
|
||||
</span>
|
||||
<span>{`${this.props.login.userRole}`}</span>
|
||||
</div>
|
||||
<div className="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.spaceLimit")}:`}{" "}
|
||||
</span>
|
||||
<span>
|
||||
{" "}
|
||||
{`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
|
||||
round: 0,
|
||||
})}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.upLimit")}:`}{" "}
|
||||
</span>
|
||||
<span>
|
||||
{" "}
|
||||
{`${FileSize(this.props.login.quota.uploadSpeedLimit, {
|
||||
round: 0,
|
||||
})}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.downLimit")}:`}{" "}
|
||||
</span>
|
||||
<span>
|
||||
{" "}
|
||||
{`${FileSize(this.props.login.quota.downloadSpeedLimit, {
|
||||
round: 0,
|
||||
})}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.name")}: `}
|
||||
<span className="value">{`${this.props.login.userName}`}</span>
|
||||
</div>
|
||||
<div className="hr white0-bg margin-t-m margin-b-m"></div>
|
||||
<div>
|
||||
<Flexbox
|
||||
children={List([
|
||||
<h5 className="black-font">
|
||||
{this.props.msg.pkg.get("settings.pwd.update")}
|
||||
</h5>,
|
||||
<button onClick={this.setPwd}>
|
||||
<div className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.role")}: `}
|
||||
<span className="value">{`${this.props.login.userRole}`}</span>
|
||||
</div>
|
||||
<div className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.spaceLimit")}: `}
|
||||
<span className="value">
|
||||
{`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
|
||||
round: 0,
|
||||
})}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.upLimit")}: `}
|
||||
<span className="value">
|
||||
{`${FileSize(this.props.login.quota.uploadSpeedLimit, {
|
||||
round: 0,
|
||||
})}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.downLimit")}: `}
|
||||
<span className="value">
|
||||
{`${FileSize(this.props.login.quota.downloadSpeedLimit, {
|
||||
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>
|
||||
<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>,
|
||||
])}
|
||||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
||||
/>
|
||||
</button>
|
||||
</span>,
|
||||
])}
|
||||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
||||
/>
|
||||
|
||||
<span className="inline-block margin-r-m margin-b-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{this.props.msg.pkg.get("settings.pwd.old")}
|
||||
</div>
|
||||
<input
|
||||
name="old_pwd"
|
||||
type="password"
|
||||
onChange={this.changeOldPwd}
|
||||
value={this.state.oldPwd}
|
||||
className="black0-font"
|
||||
placeholder={this.props.msg.pkg.get("settings.pwd.old")}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="inline-block margin-r-m margin-b-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{this.props.msg.pkg.get("settings.pwd.new1")}
|
||||
</div>
|
||||
<input
|
||||
name="new_pwd1"
|
||||
type="password"
|
||||
onChange={this.changeNewPwd1}
|
||||
value={this.state.newPwd1}
|
||||
className="black0-font"
|
||||
placeholder={this.props.msg.pkg.get("settings.pwd.new1")}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="inline-block margin-r-m margin-b-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{this.props.msg.pkg.get("settings.pwd.new2")}
|
||||
</div>
|
||||
<input
|
||||
name="new_pwd2"
|
||||
type="password"
|
||||
onChange={this.changeNewPwd2}
|
||||
value={this.state.newPwd2}
|
||||
className="black0-font"
|
||||
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="hr white0-bg margin-t-m margin-b-m"></div>
|
||||
<div className="margin-b-m">
|
||||
<Flexbox
|
||||
children={List([
|
||||
<h5 className="black-font">
|
||||
{this.props.msg.pkg.get("settings.chooseLan")}
|
||||
</h5>,
|
||||
<span>
|
||||
<button
|
||||
onClick={() => {
|
||||
this.setLan("en_US");
|
||||
}}
|
||||
className="margin-r-m"
|
||||
>
|
||||
{this.props.msg.pkg.get("enUS")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
this.setLan("zh_CN");
|
||||
}}
|
||||
>
|
||||
{this.props.msg.pkg.get("zhCN")}
|
||||
</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 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 className="hr white0-bg margin-t-m margin-b-m"></div>
|
||||
<div>
|
||||
<Flexbox
|
||||
children={List([
|
||||
<span className="title-m bold">
|
||||
{this.props.msg.pkg.get("settings.customLan")}
|
||||
</span>,
|
||||
<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>
|
||||
|
||||
<span>
|
||||
<button onClick={this.syncPreferences}>
|
||||
{this.props.msg.pkg.get("update")}
|
||||
</button>
|
||||
</span>,
|
||||
])}
|
||||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
||||
/>
|
||||
<Flowgrid
|
||||
grids={List([
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{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 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 white0-bg margin-t-m margin-b-m"></div>
|
||||
<div>
|
||||
<Flexbox
|
||||
children={List([
|
||||
<span className="title-m bold">
|
||||
{this.props.msg.pkg.get("cfg.bg")}
|
||||
</span>,
|
||||
|
||||
<span>
|
||||
<button onClick={this.syncPreferences}>
|
||||
{this.props.msg.pkg.get("update")}
|
||||
</button>
|
||||
</span>,
|
||||
])}
|
||||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
||||
/>
|
||||
<Flowgrid
|
||||
grids={List([
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{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}
|
||||
className="black0-font"
|
||||
style={{ width: "20rem" }}
|
||||
placeholder={this.props.msg.pkg.get("cfg.bg.url")}
|
||||
/>
|
||||
</div>,
|
||||
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{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}
|
||||
className="black0-font"
|
||||
placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
|
||||
/>
|
||||
</div>,
|
||||
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{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}
|
||||
className="black0-font"
|
||||
placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
|
||||
/>
|
||||
</div>,
|
||||
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
{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}
|
||||
className="black0-font"
|
||||
placeholder={this.props.msg.pkg.get("cfg.bg.align")}
|
||||
/>
|
||||
</div>,
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="hr white0-bg margin-t-m margin-b-m"></div>
|
||||
{/* <div className="hr"></div>
|
||||
<div>
|
||||
<Flexbox
|
||||
children={List([
|
||||
|
|
@ -425,8 +401,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
])}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue