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

fix(panes_settings): unify styles

Browse source
This commit is contained in:
hexxa 2021-11-20 21:06:39 +08:00 • committed by Hexxa
parent e80608823e
commit 551120e83b
2 changed files with 251 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
} }

152
src/client/web/src/components/pane_settings.tsx
View file

@ -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,64 +138,52 @@ 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>
<div className="font-size-s margin-t-s"> <div className="key-value">
<span className="grey0-font"> {`${this.props.msg.pkg.get("user.role")}: `}
{`${this.props.msg.pkg.get("user.role")}:`}{" "} <span className="value">{`${this.props.login.userRole}`}</span>
</span>
<span>{`${this.props.login.userRole}`}</span>
</div> </div>
<div className="font-size-s margin-t-s"> <div className="key-value">
<span className="grey0-font"> {`${this.props.msg.pkg.get("user.spaceLimit")}: `}
{`${this.props.msg.pkg.get("user.spaceLimit")}:`}{" "} <span className="value">
</span>
<span>
{" "}
{`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), { {`${FileSize(parseInt(this.props.login.quota.spaceLimit, 10), {
round: 0, round: 0,
})}`} })}`}
</span> </span>
</div> </div>
<div className="font-size-s margin-t-s"> <div className="key-value">
<span className="grey0-font"> {`${this.props.msg.pkg.get("user.upLimit")}: `}
{`${this.props.msg.pkg.get("user.upLimit")}:`}{" "} <span className="value">
</span>
<span>
{" "}
{`${FileSize(this.props.login.quota.uploadSpeedLimit, { {`${FileSize(this.props.login.quota.uploadSpeedLimit, {
round: 0, round: 0,
})}`} })}`}
</span> </span>
</div> </div>
<div className="font-size-s margin-t-s"> <div className="key-value">
<span className="grey0-font"> {`${this.props.msg.pkg.get("user.downLimit")}: `}
{`${this.props.msg.pkg.get("user.downLimit")}:`}{" "} <span className="value">
</span>
<span>
{" "}
{`${FileSize(this.props.login.quota.downloadSpeedLimit, { {`${FileSize(this.props.login.quota.downloadSpeedLimit, {
round: 0, round: 0,
})}`} })}`}
</span> </span>
</div> </div>
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div>
<div className="hr"></div>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="black-font"> <h5 className="pane-title">
{this.props.msg.pkg.get("settings.pwd.update")} {this.props.msg.pkg.get("settings.pwd.update")}
</h5>, </h5>,
<button onClick={this.setPwd}> <button onClick={this.setPwd}>
@ -206,8 +193,8 @@ export class PaneSettings extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])} 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("settings.pwd.old")} {this.props.msg.pkg.get("settings.pwd.old")}
</div> </div>
<input <input
@ -215,13 +202,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="password" type="password"
onChange={this.changeOldPwd} onChange={this.changeOldPwd}
value={this.state.oldPwd} value={this.state.oldPwd}
className="black0-font"
placeholder={this.props.msg.pkg.get("settings.pwd.old")} placeholder={this.props.msg.pkg.get("settings.pwd.old")}
/> />
</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
@ -229,13 +215,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="password" type="password"
onChange={this.changeNewPwd1} onChange={this.changeNewPwd1}
value={this.state.newPwd1} value={this.state.newPwd1}
className="black0-font"
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
@ -243,25 +228,26 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="password" type="password"
onChange={this.changeNewPwd2} onChange={this.changeNewPwd2}
value={this.state.newPwd2} value={this.state.newPwd2}
className="black0-font"
placeholder={this.props.msg.pkg.get("settings.pwd.new2")} placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/> />
</span> </span>
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr"></div>
<div className="margin-b-m">
<div>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="black-font"> <h5 className="title">
{this.props.msg.pkg.get("settings.chooseLan")} {this.props.msg.pkg.get("settings.chooseLan")}
</h5>, </h5>,
<span> <span>
<button <button
onClick={() => { onClick={() => {
this.setLan("en_US"); this.setLan("en_US");
}} }}
className="margin-r-m" className="float-input"
> >
{this.props.msg.pkg.get("enUS")} {this.props.msg.pkg.get("enUS")}
</button> </button>
@ -269,6 +255,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => { onClick={() => {
this.setLan("zh_CN"); this.setLan("zh_CN");
}} }}
className="float-input"
> >
{this.props.msg.pkg.get("zhCN")} {this.props.msg.pkg.get("zhCN")}
</button> </button>
@ -278,13 +265,14 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr"></div>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<span className="title-m bold"> <h5 className="title">
{this.props.msg.pkg.get("settings.customLan")} {this.props.msg.pkg.get("settings.customLan")}
</span>, </h5>,
<span> <span>
<button onClick={this.syncPreferences}> <button onClick={this.syncPreferences}>
@ -294,10 +282,9 @@ export class PaneSettings extends React.Component<Props, State, {}> {
])} ])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
<Flowgrid
grids={List([ <div className="float-input">
<div className="padding-t-m padding-b-m padding-r-m"> <div className="label">
<div className="font-size-s grey1-font">
{this.props.msg.pkg.get("settings.lanPackURL")} {this.props.msg.pkg.get("settings.lanPackURL")}
</div> </div>
<input <input
@ -308,31 +295,26 @@ export class PaneSettings extends React.Component<Props, State, {}> {
style={{ width: "20rem" }} style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("settings.lanPackURL")} placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
/> />
</div>, </div>
])}
/>
</div> </div>
<div className="hr white0-bg margin-t-m margin-b-m"></div> <div className="hr"></div>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<span className="title-m bold"> <h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
{this.props.msg.pkg.get("cfg.bg")}
</span>,
<span>
<button onClick={this.syncPreferences}> <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" }])}
/> />
<Flowgrid
grids={List([ <div>
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.url")} {this.props.msg.pkg.get("cfg.bg.url")}
</div> </div>
<input <input
@ -340,14 +322,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text" type="text"
onChange={this.changeBgUrl} onChange={this.changeBgUrl}
value={this.props.login.preferences.bg.url} value={this.props.login.preferences.bg.url}
className="black0-font"
style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("cfg.bg.url")} placeholder={this.props.msg.pkg.get("cfg.bg.url")}
/> />
</div>, </div>
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")} {this.props.msg.pkg.get("cfg.bg.repeat")}
</div> </div>
<input <input
@ -355,13 +335,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text" type="text"
onChange={this.changeBgRepeat} onChange={this.changeBgRepeat}
value={this.props.login.preferences.bg.repeat} value={this.props.login.preferences.bg.repeat}
className="black0-font"
placeholder={this.props.msg.pkg.get("cfg.bg.repeat")} placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
/> />
</div>, </div>
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.pos")} {this.props.msg.pkg.get("cfg.bg.pos")}
</div> </div>
<input <input
@ -369,13 +348,12 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text" type="text"
onChange={this.changeBgPos} onChange={this.changeBgPos}
value={this.props.login.preferences.bg.position} value={this.props.login.preferences.bg.position}
className="black0-font"
placeholder={this.props.msg.pkg.get("cfg.bg.pos")} placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
/> />
</div>, </div>
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.align")} {this.props.msg.pkg.get("cfg.bg.align")}
</div> </div>
<input <input
@ -383,15 +361,13 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text" type="text"
onChange={this.changeBgAlign} onChange={this.changeBgAlign}
value={this.props.login.preferences.bg.align} value={this.props.login.preferences.bg.align}
className="black0-font"
placeholder={this.props.msg.pkg.get("cfg.bg.align")} placeholder={this.props.msg.pkg.get("cfg.bg.align")}
/> />
</div>, </div>
])} </div>
/>
</div> </div>
{/* <div className="hr white0-bg margin-t-m margin-b-m"></div> {/* <div className="hr"></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>
); );
} }