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
|
|
@ -81,7 +81,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-default .float-input:last-child {
|
.theme-default .float-input:last-child {
|
||||||
margin: auto 1rem auto auto;
|
margin: auto auto auto auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-default .float-input .label {
|
.theme-default .float-input .label {
|
||||||
|
|
@ -95,6 +95,37 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme-default .pane-title {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-default #pane-settings {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-default #pane-settings #profile {
|
||||||
|
color: #95a5a6;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-default .wide-input {
|
||||||
|
width: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-default .hr {
|
||||||
|
margin: 1rem 0;
|
||||||
|
background-color: #ecf0f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-default .key-value {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-default .value {
|
||||||
|
color: #697384;
|
||||||
|
}
|
||||||
|
|
||||||
.theme-default #tail {
|
.theme-default #tail {
|
||||||
color: #34495e;
|
color: #34495e;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ import { List } from "immutable";
|
||||||
import { ICoreState, UIProps, MsgProps } from "./core_state";
|
import { ICoreState, UIProps, MsgProps } from "./core_state";
|
||||||
import { LoginProps } from "./pane_login";
|
import { LoginProps } from "./pane_login";
|
||||||
import { Flexbox } from "./layout/flexbox";
|
import { Flexbox } from "./layout/flexbox";
|
||||||
import { Flowgrid } from "./layout/flowgrid";
|
|
||||||
import { updater } from "./state_updater";
|
import { updater } from "./state_updater";
|
||||||
import { alertMsg } from "../common/env";
|
import { alertMsg } from "../common/env";
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
|
@ -139,259 +138,236 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div id="pane-settings" className="container">
|
||||||
<div className="padding-l">
|
<div id="profile">
|
||||||
<div className="grey3-font">
|
<h5 className="pane-title">
|
||||||
<h5 className="black-font">
|
{this.props.msg.pkg.get("user.profile")}
|
||||||
{this.props.msg.pkg.get("user.profile")}
|
</h5>
|
||||||
</h5>
|
|
||||||
|
|
||||||
<div className="font-size-s margin-t-s">
|
<div className="key-value">
|
||||||
<span className="grey0-font">
|
{`${this.props.msg.pkg.get("user.name")}: `}
|
||||||
{`${this.props.msg.pkg.get("user.name")}:`}{" "}
|
<span className="value">{`${this.props.login.userName}`}</span>
|
||||||
</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>
|
</div>
|
||||||
<div className="hr white0-bg margin-t-m margin-b-m"></div>
|
<div className="key-value">
|
||||||
<div>
|
{`${this.props.msg.pkg.get("user.role")}: `}
|
||||||
<Flexbox
|
<span className="value">{`${this.props.login.userRole}`}</span>
|
||||||
children={List([
|
</div>
|
||||||
<h5 className="black-font">
|
<div className="key-value">
|
||||||
{this.props.msg.pkg.get("settings.pwd.update")}
|
{`${this.props.msg.pkg.get("user.spaceLimit")}: `}
|
||||||
</h5>,
|
<span className="value">
|
||||||
<button onClick={this.setPwd}>
|
{`${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")}
|
{this.props.msg.pkg.get("update")}
|
||||||
</button>,
|
</button>
|
||||||
])}
|
</span>,
|
||||||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
])}
|
||||||
/>
|
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
||||||
|
/>
|
||||||
|
|
||||||
<span className="inline-block margin-r-m margin-b-m">
|
<div className="float-input">
|
||||||
<div className="font-size-s grey1-font">
|
<div className="label">
|
||||||
{this.props.msg.pkg.get("settings.pwd.old")}
|
{this.props.msg.pkg.get("settings.lanPackURL")}
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
name="old_pwd"
|
type="text"
|
||||||
type="password"
|
onChange={this.changeLanPackURL}
|
||||||
onChange={this.changeOldPwd}
|
value={this.props.login.preferences.lanPackURL}
|
||||||
value={this.state.oldPwd}
|
className="black0-font"
|
||||||
className="black0-font"
|
style={{ width: "20rem" }}
|
||||||
placeholder={this.props.msg.pkg.get("settings.pwd.old")}
|
placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
|
||||||
/>
|
|
||||||
</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>
|
</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>
|
<div>
|
||||||
<Flexbox
|
<div className="float-input">
|
||||||
children={List([
|
<div className="label">
|
||||||
<span className="title-m bold">
|
{this.props.msg.pkg.get("cfg.bg.url")}
|
||||||
{this.props.msg.pkg.get("settings.customLan")}
|
</div>
|
||||||
</span>,
|
<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>
|
<div className="float-input">
|
||||||
<button onClick={this.syncPreferences}>
|
<div className="label">
|
||||||
{this.props.msg.pkg.get("update")}
|
{this.props.msg.pkg.get("cfg.bg.repeat")}
|
||||||
</button>
|
</div>
|
||||||
</span>,
|
<input
|
||||||
])}
|
name="bg_repeat"
|
||||||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
type="text"
|
||||||
/>
|
onChange={this.changeBgRepeat}
|
||||||
<Flowgrid
|
value={this.props.login.preferences.bg.repeat}
|
||||||
grids={List([
|
placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
|
||||||
<div className="padding-t-m padding-b-m padding-r-m">
|
/>
|
||||||
<div className="font-size-s grey1-font">
|
</div>
|
||||||
{this.props.msg.pkg.get("settings.lanPackURL")}
|
|
||||||
</div>
|
<div className="float-input">
|
||||||
<input
|
<div className="label">
|
||||||
type="text"
|
{this.props.msg.pkg.get("cfg.bg.pos")}
|
||||||
onChange={this.changeLanPackURL}
|
</div>
|
||||||
value={this.props.login.preferences.lanPackURL}
|
<input
|
||||||
className="black0-font"
|
name="bg_pos"
|
||||||
style={{ width: "20rem" }}
|
type="text"
|
||||||
placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
|
onChange={this.changeBgPos}
|
||||||
/>
|
value={this.props.login.preferences.bg.position}
|
||||||
</div>,
|
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>
|
||||||
|
|
||||||
<div className="hr white0-bg margin-t-m margin-b-m"></div>
|
{/* <div className="hr"></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>
|
<div>
|
||||||
<Flexbox
|
<Flexbox
|
||||||
children={List([
|
children={List([
|
||||||
|
|
@ -425,8 +401,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
||||||
])}
|
])}
|
||||||
/>
|
/>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue