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

fix(fe/panes): refine styles of panes

Browse source
This commit is contained in:
hexxa 2021-12-25 20:04:47 +08:00 • committed by Hexxa
parent a66046bd01
commit 4fd9bd9c33
5 changed files with 397 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/static/css/default.css
View file

@ -494,3 +494,7 @@
.full-width { .full-width {
width: 100%; width: 100%;
} }
.bold {
font-weight: bold;
}

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

@ -113,7 +113,7 @@
background-color: white; background-color: white;
border-radius: 0.8rem; border-radius: 0.8rem;
margin-bottom: 2rem; margin-bottom: 2rem;
box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%); box-shadow: 0 5px 30px 0 rgb(31 38 135 / 10%);
} }
.container-padding { .container-padding {
@ -182,6 +182,7 @@
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2rem; line-height: 2rem;
display: block; display: block;
overflow-wrap: break-word;
} }
.theme-default #item-rows .hr { .theme-default #item-rows .hr {
@ -370,7 +371,7 @@
.theme-default .pane-title { .theme-default .pane-title {
color: black; color: black;
line-height: 4rem; font-size: 1.6rem;
} }
.theme-default #pane-settings { .theme-default #pane-settings {
@ -382,9 +383,14 @@
} }
.theme-default .user-form { .theme-default .user-form {
border: dashed 2px #ccc; font-size: 1.4rem;
padding: 1rem; padding: 1rem 0;
margin-top: 1rem; margin-top: 1rem;
border-bottom: dashed 1px #000;
}
.theme-default .more {
border: dashed 1px #ccc;
} }
.theme-default .role-list-item { .theme-default .role-list-item {

2
src/client/web/src/components/control/tabs.tsx
View file

@ -14,7 +14,7 @@ import { colorClass } from "../visual/colors";
const defaultIconProps: IconProps = { const defaultIconProps: IconProps = {
name: "RiFolder2Fill", name: "RiFolder2Fill",
size: "1.6rem", size: "1.6rem",
color: `${colorClass("1")}-font`, color: `${colorClass("cyan1")}-font`,
}; };
export interface Props { export interface Props {

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

@ -2,6 +2,8 @@ import * as React from "react";
import { List, Map, Set } from "immutable"; import { List, Map, Set } from "immutable";
import FileSize from "filesize"; import FileSize from "filesize";
import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
import { alertMsg, confirmMsg } from "../common/env"; import { alertMsg, confirmMsg } from "../common/env";
import { ICoreState, MsgProps, UIProps } from "./core_state"; import { ICoreState, MsgProps, UIProps } from "./core_state";
import { User, Quota } from "../client"; import { User, Quota } from "../client";
@ -39,6 +41,7 @@ export interface UserFormState {
newPwd2: string; newPwd2: string;
role: string; role: string;
quota: Quota; quota: Quota;
folded: boolean;
} }
export class UserForm extends React.Component< export class UserForm extends React.Component<
@ -59,6 +62,7 @@ export class UserForm extends React.Component<
uploadSpeedLimit: p.quota.uploadSpeedLimit, uploadSpeedLimit: p.quota.uploadSpeedLimit,
downloadSpeedLimit: p.quota.downloadSpeedLimit, downloadSpeedLimit: p.quota.downloadSpeedLimit,
}, },
folded: true,
}; };
} }
@ -150,25 +154,40 @@ export class UserForm extends React.Component<
}); });
}; };
toggle = () => {
this.setState({ folded: !this.state.folded });
};
render() { render() {
const foldedClass = this.state.folded ? "hidden" : "";
const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
return ( return (
<div className="user-form"> <div className="user-form">
<Flexbox <Flexbox
children={List([ children={List([
<div> <div>
<div className="key-value"> <span className="bold">{`${this.props.msg.pkg.get(
{`${this.props.msg.pkg.get("user.name")}: `} "user.name"
<span className="value">{this.props.name}</span> )}: `}</span>
</div> <span className="margin-r-m">{this.props.name}</span>
<div className="key-value"> <span className="bold">{`${this.props.msg.pkg.get(
{`${this.props.msg.pkg.get("user.id")}: `} "user.id"
<span className="value">{this.props.id}</span> )}: `}</span>
</div> <span>{this.props.id}</span>
</div>, </div>,
<button onClick={this.delUser}> <span>
{this.props.msg.pkg.get("delete")} <RiMore2Fill
</button>, size="1.2rem"
className={`margin-r-m ${foldIconColor}`}
onClick={this.toggle}
/>
<button onClick={this.delUser}>
{this.props.msg.pkg.get("delete")}
</button>
</span>,
])} ])}
childrenStyles={List([ childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" }, { alignItems: "flex-start", flexBasis: "70%" },
@ -178,130 +197,134 @@ export class UserForm extends React.Component<
])} ])}
/> />
<div className="hr"></div> <div className={foldedClass}>
<div className="hr"></div>
<Flexbox <Flexbox
children={List([ className="margin-t-m"
<div> children={List([
<span className="float-input"> <div>
<div className="label"> <span className="float-input">
{this.props.msg.pkg.get("user.role")} <div className="label">
</div> {this.props.msg.pkg.get("user.role")}
<input </div>
name={`${this.props.id}-role`} <input
type="text" name={`${this.props.id}-role`}
onChange={this.changeRole} type="text"
value={this.state.role} onChange={this.changeRole}
placeholder={this.state.role} value={this.state.role}
/> placeholder={this.state.role}
</span> />
</span>
<span className="float-input"> <span className="float-input">
<div className="label"> <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 }
)})`} )})`}
</div> </div>
<input <input
name={`${this.props.id}-spaceLimit`} name={`${this.props.id}-spaceLimit`}
type="number" type="number"
onChange={this.changeSpaceLimit} onChange={this.changeSpaceLimit}
value={this.state.quota.spaceLimit} value={this.state.quota.spaceLimit}
placeholder={`${this.state.quota.spaceLimit}`} placeholder={`${this.state.quota.spaceLimit}`}
/> />
</span> </span>
<span className="float-input"> <span className="float-input">
<div className="label"> <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 }
)})`} )})`}
</div> </div>
<input <input
name={`${this.props.id}-uploadSpeedLimit`} name={`${this.props.id}-uploadSpeedLimit`}
type="number" type="number"
onChange={this.changeUploadSpeedLimit} onChange={this.changeUploadSpeedLimit}
value={this.state.quota.uploadSpeedLimit} value={this.state.quota.uploadSpeedLimit}
placeholder={`${this.state.quota.uploadSpeedLimit}`} placeholder={`${this.state.quota.uploadSpeedLimit}`}
/> />
</span> </span>
<span className="float-input"> <span className="float-input">
<div className="label"> <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 }
)})`} )})`}
</div> </div>
<input <input
name={`${this.props.id}-downloadSpeedLimit`} name={`${this.props.id}-downloadSpeedLimit`}
type="number" type="number"
onChange={this.changeDownloadSpeedLimit} onChange={this.changeDownloadSpeedLimit}
value={this.state.quota.downloadSpeedLimit} value={this.state.quota.downloadSpeedLimit}
placeholder={`${this.state.quota.downloadSpeedLimit}`} placeholder={`${this.state.quota.downloadSpeedLimit}`}
/> />
</span> </span>
</div>, </div>,
<button onClick={this.setUser}> <button onClick={this.setUser}>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button>, </button>,
])} ])}
childrenStyles={List([ childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" }, { alignItems: "flex-start", flexBasis: "70%" },
{ {
justifyContent: "flex-end", justifyContent: "flex-end",
flexBasis: "30%", flexBasis: "30%",
}, },
])} ])}
/> />
<div className="hr"></div> <div className="hr"></div>
<Flexbox <Flexbox
children={List([ className="margin-t-m"
<div> children={List([
<div className="float-input"> <div>
<div className="label"> <div className="float-input">
{this.props.msg.pkg.get("settings.pwd.new1")} <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
placeholder={this.props.msg.pkg.get("settings.pwd.new1")} name={`${this.props.id}-pwd2`}
/> type="password"
</div> onChange={this.changePwd2}
value={this.state.newPwd2}
<div className="float-input"> placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
<div className="label"> />
{this.props.msg.pkg.get("settings.pwd.new2")}
</div> </div>
<input </div>,
name={`${this.props.id}-pwd2`}
type="password"
onChange={this.changePwd2}
value={this.state.newPwd2}
placeholder={this.props.msg.pkg.get("settings.pwd.new2")}
/>
</div>
</div>,
<button onClick={this.setPwd}> <button onClick={this.setPwd}>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button>, </button>,
])} ])}
childrenStyles={List([ childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" }, { alignItems: "flex-start", flexBasis: "70%" },
{ {
justifyContent: "flex-end", justifyContent: "flex-end",
}, },
])} ])}
/> />
</div>
</div> </div>
); );
} }
@ -343,19 +366,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
}; };
addRole = async () => { addRole = async () => {
return updater() const status = await updater().addRole(this.state.newRole);
.addRole(this.state.newRole) if (status !== "") {
.then((status: string) => { alertMsg(this.props.msg.pkg.get("add.fail"));
if (status !== "") { } else {
alertMsg(this.props.msg.pkg.get("add.fail")); alertMsg(this.props.msg.pkg.get("add.ok"));
} else { await updater().listRoles();
alertMsg(this.props.msg.pkg.get("add.ok")); this.props.update(updater().updateAdmin);
} }
return updater().listRoles();
})
.then(() => {
this.props.update(updater().updateAdmin);
});
}; };
delRole = async (role: string) => { delRole = async (role: string) => {
@ -363,19 +381,14 @@ export class AdminPane extends React.Component<Props, State, {}> {
return; return;
} }
return updater() const status = await updater().delRole(role);
.delRole(role) if (status !== "") {
.then((status: string) => { this.props.msg.pkg.get("delete.fail");
if (status !== "") { } else {
this.props.msg.pkg.get("delete.fail"); this.props.msg.pkg.get("delete.ok");
} else { await updater().listRoles();
this.props.msg.pkg.get("delete.ok"); this.props.update(updater().updateAdmin);
} }
return updater().listRoles();
})
.then(() => {
this.props.update(updater().updateAdmin);
});
}; };
addUser = async () => { addUser = async () => {
@ -384,33 +397,29 @@ export class AdminPane extends React.Component<Props, State, {}> {
return; return;
} }
return updater() const status = await updater().addUser({
.addUser({ id: "", // backend will fill it
id: "", // backend will fill it name: this.state.newUserName,
name: this.state.newUserName, pwd: this.state.newUserPwd1,
pwd: this.state.newUserPwd1, role: this.state.newUserRole,
role: this.state.newUserRole, quota: undefined,
quota: undefined, usedSpace: "0",
usedSpace: "0", preferences: undefined,
preferences: undefined, });
})
.then((status: string) => { if (status !== "") {
if (status !== "") { alertMsg(this.props.msg.pkg.get("add.fail"));
alertMsg(this.props.msg.pkg.get("add.fail")); } else {
} else { alertMsg(this.props.msg.pkg.get("add.ok"));
alertMsg(this.props.msg.pkg.get("add.ok")); this.setState({
} newUserName: "",
this.setState({ newUserPwd1: "",
newUserName: "", newUserPwd2: "",
newUserPwd1: "", newUserRole: "",
newUserPwd2: "",
newUserRole: "",
});
return updater().listUsers();
})
.then(() => {
this.props.update(updater().updateAdmin);
}); });
await updater().listUsers();
this.props.update(updater().updateAdmin);
}
}; };
render() { render() {
@ -464,7 +473,9 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title">{this.props.msg.pkg.get("user.add")}</h5>, <h5 className="pane-title">
{this.props.msg.pkg.get("user.add")}
</h5>,
<button onClick={this.addUser}> <button onClick={this.addUser}>
{this.props.msg.pkg.get("add")} {this.props.msg.pkg.get("add")}
</button>, </button>,
@ -472,6 +483,8 @@ export class AdminPane extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
<div className="hr"></div>
<span className="float-input"> <span className="float-input">
<div className="label">{this.props.msg.pkg.get("user.name")}</div> <div className="label">{this.props.msg.pkg.get("user.name")}</div>
<input <input
@ -520,12 +533,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title"> <h5 className="pane-title">
{this.props.msg.pkg.get("admin.users")} {this.props.msg.pkg.get("admin.users")}
</h5>, </h5>,
<span></span>, <span></span>,
])} ])}
/> />
<div className="hr"></div>
{userList} {userList}
</Container> </Container>
@ -533,11 +549,15 @@ export class AdminPane extends React.Component<Props, State, {}> {
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title">{this.props.msg.pkg.get("role.add")}</h5>, <h5 className="pane-title">
{this.props.msg.pkg.get("role.add")}
</h5>,
<span></span>, <span></span>,
])} ])}
/> />
<div className="hr"></div>
<Flexbox <Flexbox
children={List([ children={List([
<input <input
@ -553,17 +573,20 @@ export class AdminPane extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
</div> </div>
</Container>
<div className="hr"></div> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title"> <h5 className="pane-title">
{this.props.msg.pkg.get("admin.roles")} {this.props.msg.pkg.get("admin.roles")}
</h5>, </h5>,
<span></span>, <span></span>,
])} ])}
/> />
<div className="hr"></div>
{roleList} {roleList}
</Container> </Container>
</div> </div>
@ -698,7 +721,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="title">{this.props.msg.pkg.get("cfg.bg")}</h5>, <h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<span> <span>
<button onClick={this.resetClientCfg} className="margin-r-m"> <button onClick={this.resetClientCfg} className="margin-r-m">
@ -712,6 +735,8 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
<div className="hr"></div>
<div> <div>
<div className="float-input"> <div className="float-input">
<div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div> <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>

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

@ -177,196 +177,200 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</div> </div>
</div> </div>
</Container>
<Container>
<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" }])}
/>
<div className="hr"></div> <div className="hr"></div>
<div> <span className="float-input">
<Flexbox <div className="label">
children={List([ {this.props.msg.pkg.get("settings.pwd.old")}
<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="pane-title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div>
<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>
</div> </div>
</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>
</Container>
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="hr"></div> <div className="hr"></div>
<div> <div>
<Flexbox <button
children={List([ onClick={() => {
<h5 className="pane-title"> this.setLan("en_US");
{this.props.msg.pkg.get("settings.customLan")} }}
</h5>, 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>
</div>
</Container>
<span> <Container>
<button onClick={this.syncPreferences}> <Flexbox
{this.props.msg.pkg.get("update")} children={List([
</button> <h5 className="pane-title">
</span>, {this.props.msg.pkg.get("settings.customLan")}
])} </h5>,
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
<span>
<button onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
<div className="hr"></div>
<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>
</Container>
<Container>
<Flexbox
children={List([
<h5 className="pane-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"></div>
<div>
<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>
<div className="float-input"> <div className="float-input">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.lanPackURL")} {this.props.msg.pkg.get("cfg.bg.repeat")}
</div> </div>
<input <input
name="bg_repeat"
type="text" type="text"
onChange={this.changeLanPackURL} onChange={this.changeBgRepeat}
value={this.props.login.preferences.lanPackURL} value={this.props.login.preferences.bg.repeat}
className="black0-font" placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
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.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>
</Container>
<div className="hr"></div> {/* <div className="hr"></div>
<div>
<Flexbox
children={List([
<h5 className="pane-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>
<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>
<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"></div>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
@ -400,7 +404,6 @@ export class PaneSettings extends React.Component<Props, State, {}> {
])} ])}
/> />
</div> */} </div> */}
</Container>
</div> </div>
); );
} }