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 {
|
||||
margin: auto 1rem auto auto;
|
||||
margin: auto auto auto auto;
|
||||
}
|
||||
|
||||
.theme-default .float-input .label {
|
||||
|
|
@ -95,6 +95,37 @@
|
|||
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 {
|
||||
color: #34495e;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,64 +138,52 @@ 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">
|
||||
<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 className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.name")}: `}
|
||||
<span className="value">{`${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 className="key-value">
|
||||
{`${this.props.msg.pkg.get("user.role")}: `}
|
||||
<span className="value">{`${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>
|
||||
{" "}
|
||||
<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="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.upLimit")}:`}{" "}
|
||||
</span>
|
||||
<span>
|
||||
{" "}
|
||||
<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="font-size-s margin-t-s">
|
||||
<span className="grey0-font">
|
||||
{`${this.props.msg.pkg.get("user.downLimit")}:`}{" "}
|
||||
</span>
|
||||
<span>
|
||||
{" "}
|
||||
<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 white0-bg margin-t-m margin-b-m"></div>
|
||||
|
||||
<div className="hr"></div>
|
||||
|
||||
<div>
|
||||
<Flexbox
|
||||
children={List([
|
||||
<h5 className="black-font">
|
||||
<h5 className="pane-title">
|
||||
{this.props.msg.pkg.get("settings.pwd.update")}
|
||||
</h5>,
|
||||
<button onClick={this.setPwd}>
|
||||
|
|
@ -206,8 +193,8 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
|
||||
/>
|
||||
|
||||
<span className="inline-block margin-r-m margin-b-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
<span className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("settings.pwd.old")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -215,13 +202,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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">
|
||||
<span className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("settings.pwd.new1")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -229,13 +215,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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">
|
||||
<span className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("settings.pwd.new2")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -243,25 +228,26 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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">
|
||||
<div className="hr"></div>
|
||||
|
||||
<div>
|
||||
<Flexbox
|
||||
children={List([
|
||||
<h5 className="black-font">
|
||||
<h5 className="title">
|
||||
{this.props.msg.pkg.get("settings.chooseLan")}
|
||||
</h5>,
|
||||
|
||||
<span>
|
||||
<button
|
||||
onClick={() => {
|
||||
this.setLan("en_US");
|
||||
}}
|
||||
className="margin-r-m"
|
||||
className="float-input"
|
||||
>
|
||||
{this.props.msg.pkg.get("enUS")}
|
||||
</button>
|
||||
|
|
@ -269,6 +255,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
onClick={() => {
|
||||
this.setLan("zh_CN");
|
||||
}}
|
||||
className="float-input"
|
||||
>
|
||||
{this.props.msg.pkg.get("zhCN")}
|
||||
</button>
|
||||
|
|
@ -278,13 +265,14 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
/>
|
||||
</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">
|
||||
<h5 className="title">
|
||||
{this.props.msg.pkg.get("settings.customLan")}
|
||||
</span>,
|
||||
</h5>,
|
||||
|
||||
<span>
|
||||
<button onClick={this.syncPreferences}>
|
||||
|
|
@ -294,10 +282,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
])}
|
||||
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">
|
||||
|
||||
<div className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("settings.lanPackURL")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -308,31 +295,26 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
style={{ width: "20rem" }}
|
||||
placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
|
||||
/>
|
||||
</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>,
|
||||
<h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
|
||||
|
||||
<span>
|
||||
<button onClick={this.syncPreferences}>
|
||||
{this.props.msg.pkg.get("update")}
|
||||
</button>
|
||||
</span>,
|
||||
</button>,
|
||||
])}
|
||||
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">
|
||||
|
||||
<div>
|
||||
<div className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("cfg.bg.url")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -340,14 +322,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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>
|
||||
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
<div className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("cfg.bg.repeat")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -355,13 +335,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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>
|
||||
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
<div className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("cfg.bg.pos")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -369,13 +348,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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>
|
||||
|
||||
<div className="padding-t-m padding-b-m padding-r-m">
|
||||
<div className="font-size-s grey1-font">
|
||||
<div className="float-input">
|
||||
<div className="label">
|
||||
{this.props.msg.pkg.get("cfg.bg.align")}
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -383,15 +361,13 @@ export class PaneSettings extends React.Component<Props, State, {}> {
|
|||
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>
|
||||
</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