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

fix(fe/settings): clean up styles

Browse source
This commit is contained in:
hexxa 2022-03-18 21:26:31 +08:00 • committed by Hexxa
parent ba965aa764
commit e18f23b911
7 changed files with 70 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -54,7 +54,7 @@ export class Tabs extends React.Component<Props, State, {}> {
const iconColor = displaying === option ? iconProps.color : "black0";
const icon = getIcon(iconProps.name, iconProps.size, iconColor);
const fontColor =
displaying === option ? `${colorClass(iconColor)}-font` : "";
displaying === option ? `${colorClass(iconColor)}-font` : "black0-font";
return (
<button
@ -62,7 +62,7 @@ export class Tabs extends React.Component<Props, State, {}> {
onClick={() => {
this.setTab(this.props.targetControl, option);
}}
className="float-l margin-r-m"
className="float-l margin-r-m normal-bg"
>
<Flexbox
children={List([

6
src/client/web/src/components/layers.tsx
View file

@ -30,7 +30,7 @@ export interface Props {
update?: (updater: (prevState: ICoreState) => ICoreState) => void;
}
export interface State { }
export interface State {}
export class Layers extends React.Component<Props, State, {}> {
private hotkeyHandler: HotkeyHandler;
constructor(p: Props) {
@ -60,7 +60,8 @@ export class Layers extends React.Component<Props, State, {}> {
};
render() {
const hideLogin = this.props.login.authed ||
const hideLogin =
this.props.login.authed ||
(this.props.ui.control.controls.get(sharingCtrl) === ctrlOn &&
this.props.filesInfo.isSharing);
const loginPaneClass = hideLogin ? "hidden" : "";
@ -99,6 +100,7 @@ export class Layers extends React.Component<Props, State, {}> {
children={List([
<h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>,
<button
className="button-default"
onClick={() => {
this.setControlOption(settingsDialogCtrl, ctrlOff);
}}

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

@ -2,7 +2,7 @@ import * as React from "react";
import { List, Map, Set } from "immutable";
import FileSize from "filesize";
import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
import { RiMenuUnfoldFill } from "@react-icons/all-files/ri/RiMenuUnfoldFill";
import { alertMsg, confirmMsg } from "../common/env";
import { ICoreState, MsgProps, UIProps } from "./core_state";
@ -11,6 +11,7 @@ import { updater } from "./state_updater";
import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
// import { getItemPath } from "./panel_files";
export interface AdminProps {
users: Map<string, User>;
@ -30,6 +31,7 @@ export interface UserFormProps {
name: string;
role: string;
quota: Quota;
usedSpace: string;
roles: Set<string>;
msg: MsgProps;
update?: (updater: (prevState: ICoreState) => ICoreState) => void;
@ -43,6 +45,7 @@ export interface UserFormState {
role: string;
quota: Quota;
folded: boolean;
usedSpace: string;
}
export class UserForm extends React.Component<
@ -64,6 +67,7 @@ export class UserForm extends React.Component<
downloadSpeedLimit: p.quota.downloadSpeedLimit,
},
folded: true,
usedSpace: p.usedSpace,
};
}
@ -118,7 +122,7 @@ export class UserForm extends React.Component<
if (status !== "") {
alertMsg(this.props.msg.pkg.get("resetUsedSpace"));
}
}
};
setPwd = async () => {
if (this.state.newPwd1 !== this.state.newPwd2) {
@ -203,7 +207,7 @@ export class UserForm extends React.Component<
const foldIconColor = this.state.folded ? "black-font" : "cyan1-font";
const resetUsedSpace = () => {
this.resetUsedSpace(this.props.id);
}
};
return (
<div className="user-form">
@ -221,13 +225,13 @@ export class UserForm extends React.Component<
</div>,
<span>
<RiMore2Fill
<RiMenuUnfoldFill
size="1.2rem"
className={`margin-r-m ${foldIconColor}`}
onClick={this.toggle}
/>
<button onClick={this.delUser}>
<button className="button-default" onClick={this.delUser}>
{this.props.msg.pkg.get("delete")}
</button>
</span>,
@ -243,6 +247,25 @@ export class UserForm extends React.Component<
<div className={foldedClass}>
<div className="hr"></div>
<div>
<Flexbox
children={List([
<span>
{`${this.props.msg.pkg.get("usedSpace")}: ${FileSize(
parseInt(this.state.usedSpace, 10),
{ round: 0 }
)}`}
</span>,
<button className="button-default" onClick={resetUsedSpace}>
{this.props.msg.pkg.get("resetUsedSpace")}
</button>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
<div className="hr"></div>
<Flexbox
className="margin-t-m"
children={List([
@ -310,13 +333,9 @@ export class UserForm extends React.Component<
</div>,
<div>
<button onClick={this.setUser}>
<button className="button-default" onClick={this.setUser}>
{this.props.msg.pkg.get("update")}
</button>
<br />
<button onClick={resetUsedSpace}>
{this.props.msg.pkg.get("resetUsedSpace")}
</button>
</div>,
])}
childrenStyles={List([
@ -362,7 +381,7 @@ export class UserForm extends React.Component<
</div>
</div>,
<button onClick={this.setPwd}>
<button className="button-default" onClick={this.setPwd}>
{this.props.msg.pkg.get("update")}
</button>,
])}
@ -520,6 +539,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
name={user.name}
role={user.role}
quota={user.quota}
usedSpace={user.usedSpace}
roles={this.props.admin.roles}
msg={this.props.msg}
update={this.props.update}
@ -538,6 +558,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
onClick={() => {
this.delRole(role);
}}
className="button-default"
>
{this.props.msg.pkg.get("delete")}
</button>,
@ -564,7 +585,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<h5 className="pane-title">
{this.props.msg.pkg.get("user.add")}
</h5>,
<button onClick={this.addUser}>
<button onClick={this.addUser} className="button-default">
{this.props.msg.pkg.get("add")}
</button>,
])}
@ -654,7 +675,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
value={this.state.newRole}
placeholder={this.props.msg.pkg.get("role.name")}
/>,
<button onClick={this.addRole}>
<button className="button-default" onClick={this.addRole}>
{this.props.msg.pkg.get("add")}
</button>,
])}
@ -688,7 +709,7 @@ interface BgProps {
update?: (updater: (prevState: ICoreState) => ICoreState) => void;
}
interface BgState { }
interface BgState {}
export class BgCfg extends React.Component<BgProps, BgState, {}> {
changeSiteName = (ev: React.ChangeEvent<HTMLInputElement>) => {
updater().setClientCfg({ ...this.props.ui, siteName: ev.target.value });
@ -821,10 +842,13 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<span>
<button onClick={this.resetClientCfg} className="margin-r-m">
<button
onClick={this.resetClientCfg}
className="margin-r-m button-default"
>
{this.props.msg.pkg.get("reset")}
</button>
<button onClick={this.setClientCfg}>
<button className="button-default" onClick={this.setClientCfg}>
{this.props.msg.pkg.get("update")}
</button>
</span>,

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

@ -199,10 +199,16 @@ export class PaneSettings extends React.Component<Props, State, {}> {
</h5>,
<span>
<button className="margin-r-m" onClick={this.reportErrors}>
<button
className="button-default margin-r-m"
onClick={this.reportErrors}
>
{this.props.msg.pkg.get("op.submit")}
</button>
<button onClick={this.truncateErrors}>
<button
className="button-default"
onClick={this.truncateErrors}
>
{this.props.msg.pkg.get("op.truncate")}
</button>
</span>,
@ -267,7 +273,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<h5 className="pane-title">
{this.props.msg.pkg.get("settings.pwd.update")}
</h5>,
<button onClick={this.setPwd}>
<button className="button-default" onClick={this.setPwd}>
{this.props.msg.pkg.get("update")}
</button>,
])}
@ -333,7 +339,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => {
this.setLan("en_US");
}}
className="float-input"
className="button-default float-input"
>
{this.props.msg.pkg.get("enUS")}
</button>
@ -341,7 +347,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => {
this.setLan("zh_CN");
}}
className="float-input"
className="button-default float-input"
>
{this.props.msg.pkg.get("zhCN")}
</button>
@ -356,7 +362,10 @@ export class PaneSettings extends React.Component<Props, State, {}> {
</h5>,
<span>
<button onClick={this.syncPreferences}>
<button
className="button-default"
onClick={this.syncPreferences}
>
{this.props.msg.pkg.get("update")}
</button>
</span>,
@ -388,7 +397,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
{this.props.msg.pkg.get("cfg.bg")}
</h5>,
<button onClick={this.syncPreferences}>
<button className="button-default" onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>,
])}
@ -463,7 +472,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
</span>,
<span>
<button onClick={this.syncPreferences}>
<button className="button-default" onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
</button>
</span>,

7
src/client/web/src/components/topbar.tsx
View file

@ -77,12 +77,15 @@ export class TopBar extends React.Component<Props, State, {}> {
children={List([
<button
onClick={this.openSettings}
className={`margin-r-m ${settingsPanelClass}`}
className={`button-default margin-r-m ${settingsPanelClass}`}
>
{this.props.msg.pkg.get("settings")}
</button>,
<button onClick={this.logout} className={`${loginPanelClass}`}>
<button
onClick={this.logout}
className={`button-default ${loginPanelClass}`}
>
{this.props.msg.pkg.get("login.logout")}
</button>,
])}

1
src/client/web/src/i18n/en_US.ts
View file

@ -138,6 +138,7 @@ export const msgs: Map<string, string> = Map({
"endpoints.home": "Home",
"state.stopped": "Stopped",
"state.error": "Error",
"usedSpace": "Used Space",
"resetUsedSpace": "Reset Used Space",
"confirm.resetUsedSpace": "The operation may take some time, do you confirm?"
});

1
src/client/web/src/i18n/zh_CN.ts
View file

@ -135,6 +135,7 @@ export const msgs: Map<string, string> = Map({
"endpoints.home": "家",
"state.stopped": "已停止",
"state.error": "错误",
"usedSpace": "已用空间",
"resetUsedSpace": "重置已用空间",
"confirm.resetUsedSpace": "此操作可能会需要一些时间, 确认吗?"
});