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

fix(fe/layers): normalize styles and clean up

Browse source
This commit is contained in:
hexxa 2022-03-19 12:16:18 +08:00 • committed by Hexxa
parent e18f23b911
commit dc8dbd7355
9 changed files with 138 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -339,16 +339,6 @@ input:focus {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.theme-default .error-inline {
font-size: 1.4rem;
padding: 1rem;
color: #f1c40f;
margin: 1rem 0 0 0;
background-color: #2c3e50;
white-space: nowrap;
overflow: auto;
}
.theme-default #sharing-list .info { .theme-default #sharing-list .info {
float: left; float: left;
width: 70%; width: 70%;
@ -434,10 +424,6 @@ input:focus {
/* padding: 2rem; */ /* padding: 2rem; */
} }
.theme-default #pane-settings #profile .desc-m {
color: #95a5a6;
}
.theme-default .user-form { .theme-default .user-form {
font-size: 1.4rem; font-size: 1.4rem;
padding: 1rem 0; padding: 1rem 0;

35
public/static/css/white_compact.css
View file

@ -9,23 +9,17 @@
float: left; float: left;
} }
.theme-default #browser .info { .theme-default .info {
border: dashed 1px #95a5a6; border: dashed 1px #95a5a6;
font-size: 1.4rem; font-size: 1.4rem;
padding: 1rem; padding: 1rem;
color: #697384; color: #697384;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
background-color: #ecf0f1; background-color: #f6f6f6;
white-space: nowrap; white-space: nowrap;
overflow: auto; overflow: auto;
} }
.theme-default .pane-title {
color: black;
font-size: 1.6rem;
line-height: 1.6rem;
}
.theme-default #breadcrumb { .theme-default #breadcrumb {
width: 100%; width: 100%;
} }
@ -51,9 +45,8 @@
display: block; display: block;
} }
.theme-default .inline-blocks { .theme-default .inline-block {
display: inline-block; display: inline-block;
margin: auto 1rem auto auto;
} }
.theme-default .select-btn { .theme-default .select-btn {
@ -89,12 +82,12 @@
transition: width 300ms; transition: width 300ms;
} }
.theme-default #upload-list .info { .theme-default .l-col {
display: inline-block; display: inline-block;
width: 70%; width: 70%;
} }
.theme-default #upload-list .op { .theme-default .r-col {
display: inline-block; display: inline-block;
width: 30%; width: 30%;
text-align: right; text-align: right;
@ -115,5 +108,21 @@
.theme-default #item-rows .desc { .theme-default #item-rows .desc {
display: block; display: block;
word-break: break-all; word-break: break-all;
border-radius: 0.8rem; }
.theme-default .error-inline {
font-size: 1.4rem;
padding: 1rem;
color: #f1c40f;
margin: 1rem 0 0 0;
background-color: #2c3e50;
white-space: nowrap;
overflow: auto;
}
.theme-default .label {
font-size: 1.2rem;
line-height: 1.8rem;
color: #7f8c8d;
padding-left: 0.5rem;
} }

1
src/client/web/src/components/dialog_settings.tsx
View file

@ -12,6 +12,7 @@ import { Container } from "./layout/container";
import { LoginProps } from "./pane_login"; import { LoginProps } from "./pane_login";
import { roleAdmin } from "../client"; import { roleAdmin } from "../client";
import { settingsTabsCtrl } from "../common/controls"; import { settingsTabsCtrl } from "../common/controls";
import { Title } from "./visual/title";
export interface Props { export interface Props {
admin: AdminProps; admin: AdminProps;

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

@ -19,6 +19,7 @@ import {
ctrlHidden, ctrlHidden,
} from "../common/controls"; } from "../common/controls";
import { LoadingIcon } from "./visual/loading"; import { LoadingIcon } from "./visual/loading";
import { Title } from "./visual/title";
import { HotkeyHandler } from "../common/hotkeys"; import { HotkeyHandler } from "../common/hotkeys";
export interface Props { export interface Props {
@ -98,7 +99,11 @@ export class Layers extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h4 id="title">{this.props.msg.pkg.get("pane.settings")}</h4>, <Title
title={this.props.msg.pkg.get("pane.settings")}
iconColor="black"
iconName="RiListSettingsFill"
/>,
<button <button
className="button-default" className="button-default"
onClick={() => { onClick={() => {

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

@ -11,7 +11,8 @@ import { updater } from "./state_updater";
import { Flexbox } from "./layout/flexbox"; import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container"; import { Container } from "./layout/container";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls"; import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
// import { getItemPath } from "./panel_files"; import { iconSize } from "./visual/icons";
import { Columns } from "./layout/columns";
export interface AdminProps { export interface AdminProps {
users: Map<string, User>; users: Map<string, User>;
@ -204,49 +205,49 @@ export class UserForm extends React.Component<
render() { render() {
const foldedClass = this.state.folded ? "hidden" : ""; const foldedClass = this.state.folded ? "hidden" : "";
const foldIconColor = this.state.folded ? "black-font" : "cyan1-font"; const foldIconColor = this.state.folded ? "black-font" : "highlight-font";
const resetUsedSpace = () => { const resetUsedSpace = () => {
this.resetUsedSpace(this.props.id); this.resetUsedSpace(this.props.id);
}; };
return ( return (
<div className="user-form"> <div className="user-form">
<Flexbox <Columns
children={List([ rows={List([
<div> List([
<span className="bold">{`${this.props.msg.pkg.get( <div className="title-m-wrap">
"user.name" <span className="bold">{`${this.props.msg.pkg.get(
)}: `}</span> "user.name"
<span className="margin-r-m">{this.props.name}</span> )}: `}</span>
<span className="bold">{`${this.props.msg.pkg.get( <span className="margin-r-m">{this.props.name}</span>
"user.id" <span className="bold">{`${this.props.msg.pkg.get(
)}: `}</span> "user.id"
<span>{this.props.id}</span> )}: `}</span>
</div>, <span>{this.props.id}</span>
</div>,
<span> <div className="txt-align-r">
<RiMenuUnfoldFill <div className="icon-s inline-block">
size="1.2rem" <RiMenuUnfoldFill
className={`margin-r-m ${foldIconColor}`} size={iconSize("s")}
onClick={this.toggle} className={`margin-r-m ${foldIconColor}`}
/> onClick={this.toggle}
/>
</div>
</div>,
<button className="button-default" onClick={this.delUser}> <button className="button-default" onClick={this.delUser}>
{this.props.msg.pkg.get("delete")} {this.props.msg.pkg.get("delete")}
</button> </button>,
</span>, ]),
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
},
])} ])}
widths={List(["calc(100% - 10rem)", "3rem", "7rem"])}
childrenClassNames={List(["", "txt-align-r", "txt-align-r"])}
/> />
<div className={foldedClass}> <div></div>
<div className="hr"></div>
<div className={`info ${foldedClass}`}>
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
@ -270,7 +271,7 @@ export class UserForm extends React.Component<
className="margin-t-m" className="margin-t-m"
children={List([ children={List([
<div> <div>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("user.role")} {this.props.msg.pkg.get("user.role")}
</div> </div>
@ -283,7 +284,7 @@ export class UserForm extends React.Component<
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<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),
@ -299,7 +300,7 @@ export class UserForm extends React.Component<
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<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,
@ -315,7 +316,7 @@ export class UserForm extends React.Component<
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<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,
@ -353,7 +354,7 @@ export class UserForm extends React.Component<
className="margin-t-m" className="margin-t-m"
children={List([ children={List([
<div> <div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")} {this.props.msg.pkg.get("settings.pwd.new1")}
</div> </div>
@ -367,7 +368,7 @@ export class UserForm extends React.Component<
/> />
</div> </div>
<div className="float-input"> <div className="inline-block">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")} {this.props.msg.pkg.get("settings.pwd.new2")}
</div> </div>
@ -582,9 +583,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">{this.props.msg.pkg.get("user.add")}</h5>,
{this.props.msg.pkg.get("user.add")}
</h5>,
<button onClick={this.addUser} className="button-default"> <button onClick={this.addUser} className="button-default">
{this.props.msg.pkg.get("add")} {this.props.msg.pkg.get("add")}
</button>, </button>,
@ -594,7 +593,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<div className="hr"></div> <div className="hr"></div>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label">{this.props.msg.pkg.get("user.name")}</div> <div className="label">{this.props.msg.pkg.get("user.name")}</div>
<input <input
type="text" type="text"
@ -604,7 +603,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label">{this.props.msg.pkg.get("user.role")}</div> <div className="label">{this.props.msg.pkg.get("user.role")}</div>
<input <input
type="text" type="text"
@ -614,7 +613,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")} {this.props.msg.pkg.get("settings.pwd.new1")}
</div> </div>
@ -626,7 +625,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")} {this.props.msg.pkg.get("settings.pwd.new2")}
</div> </div>
@ -642,7 +641,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("admin.users")} {this.props.msg.pkg.get("admin.users")}
</h5>, </h5>,
<span></span>, <span></span>,
@ -658,7 +657,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("role.add")} {this.props.msg.pkg.get("role.add")}
</h5>, </h5>,
<span></span>, <span></span>,
@ -687,7 +686,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("admin.roles")} {this.props.msg.pkg.get("admin.roles")}
</h5>, </h5>,
<span></span>, <span></span>,
@ -839,16 +838,19 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div> <div>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title">{this.props.msg.pkg.get("cfg.bg")}</h5>, <h5 className="title-m">{this.props.msg.pkg.get("cfg.bg")}</h5>,
<span> <span>
<button <button
onClick={this.resetClientCfg} onClick={this.resetClientCfg}
className="margin-r-m button-default" className="inline-block margin-r-m button-default"
> >
{this.props.msg.pkg.get("reset")} {this.props.msg.pkg.get("reset")}
</button> </button>
<button className="button-default" onClick={this.setClientCfg}> <button
className="inline-block button-default"
onClick={this.setClientCfg}
>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
</button> </button>
</span>, </span>,
@ -859,7 +861,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div className="hr"></div> <div className="hr"></div>
<div> <div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div> <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>
<input <input
name="bg_url" name="bg_url"
@ -871,7 +873,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/> />
</div> </div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")} {this.props.msg.pkg.get("cfg.bg.repeat")}
</div> </div>
@ -884,7 +886,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/> />
</div> </div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label">{this.props.msg.pkg.get("cfg.bg.pos")}</div> <div className="label">{this.props.msg.pkg.get("cfg.bg.pos")}</div>
<input <input
name="bg_pos" name="bg_pos"
@ -895,7 +897,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/> />
</div> </div>
<div className="float-input"> <div className="inline-block">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.align")} {this.props.msg.pkg.get("cfg.bg.align")}
</div> </div>

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

@ -9,7 +9,7 @@ import { updater } from "./state_updater";
import { alertMsg, confirmMsg } from "../common/env"; import { alertMsg, confirmMsg } from "../common/env";
import { Container } from "./layout/container"; import { Container } from "./layout/container";
import { Card } from "./layout/card"; import { Card } from "./layout/card";
import { Rows, Row } from "./layout/rows"; import { Rows } from "./layout/rows";
import { ClientErrorV001, ErrorLogger } from "../common/log_error"; import { ClientErrorV001, ErrorLogger } from "../common/log_error";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls"; import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
export interface Props { export interface Props {
@ -194,7 +194,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("error.report.title")} {this.props.msg.pkg.get("error.report.title")}
</h5>, </h5>,
@ -226,7 +226,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div id="pane-settings"> <div id="pane-settings">
<Container> <Container>
<div id="profile"> <div id="profile">
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("user.profile")} {this.props.msg.pkg.get("user.profile")}
</h5> </h5>
@ -270,7 +270,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("settings.pwd.update")} {this.props.msg.pkg.get("settings.pwd.update")}
</h5>, </h5>,
<button className="button-default" onClick={this.setPwd}> <button className="button-default" onClick={this.setPwd}>
@ -282,7 +282,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="hr"></div> <div className="hr"></div>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.old")} {this.props.msg.pkg.get("settings.pwd.old")}
</div> </div>
@ -295,7 +295,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")} {this.props.msg.pkg.get("settings.pwd.new1")}
</div> </div>
@ -308,7 +308,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</span> </span>
<span className="float-input"> <span className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")} {this.props.msg.pkg.get("settings.pwd.new2")}
</div> </div>
@ -325,7 +325,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("settings.chooseLan")} {this.props.msg.pkg.get("settings.chooseLan")}
</h5>, </h5>,
])} ])}
@ -339,7 +339,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => { onClick={() => {
this.setLan("en_US"); this.setLan("en_US");
}} }}
className="button-default float-input" className="button-default inline-block margin-r-m"
> >
{this.props.msg.pkg.get("enUS")} {this.props.msg.pkg.get("enUS")}
</button> </button>
@ -347,17 +347,18 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => { onClick={() => {
this.setLan("zh_CN"); this.setLan("zh_CN");
}} }}
className="button-default float-input" className="button-default inline-block margin-r-m"
> >
{this.props.msg.pkg.get("zhCN")} {this.props.msg.pkg.get("zhCN")}
</button> </button>
</div> </div>
</Container> </Container>
<Container> {/* disabled */}
{/* <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">
{this.props.msg.pkg.get("settings.customLan")} {this.props.msg.pkg.get("settings.customLan")}
</h5>, </h5>,
@ -375,7 +376,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="hr"></div> <div className="hr"></div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("settings.lanPackURL")} {this.props.msg.pkg.get("settings.lanPackURL")}
</div> </div>
@ -383,19 +384,17 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text" type="text"
onChange={this.changeLanPackURL} onChange={this.changeLanPackURL}
value={this.props.login.preferences.lanPackURL} value={this.props.login.preferences.lanPackURL}
className="black0-font" className="dark-font"
style={{ width: "20rem" }} style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("settings.lanPackURL")} placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
/> />
</div> </div>
</Container> </Container> */}
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<h5 className="pane-title"> <h5 className="title-m">{this.props.msg.pkg.get("cfg.bg")}</h5>,
{this.props.msg.pkg.get("cfg.bg")}
</h5>,
<button className="button-default" onClick={this.syncPreferences}> <button className="button-default" onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")} {this.props.msg.pkg.get("update")}
@ -407,7 +406,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="hr"></div> <div className="hr"></div>
<div> <div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.url")} {this.props.msg.pkg.get("cfg.bg.url")}
</div> </div>
@ -420,7 +419,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")} {this.props.msg.pkg.get("cfg.bg.repeat")}
</div> </div>
@ -433,7 +432,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.pos")} {this.props.msg.pkg.get("cfg.bg.pos")}
</div> </div>
@ -446,7 +445,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/> />
</div> </div>
<div className="float-input"> <div className="inline-block margin-r-m">
<div className="label"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.align")} {this.props.msg.pkg.get("cfg.bg.align")}
</div> </div>

16
src/client/web/src/components/panel_files.tsx
View file

@ -33,6 +33,7 @@ import {
} from "../common/controls"; } from "../common/controls";
import { HotkeyHandler } from "../common/hotkeys"; import { HotkeyHandler } from "../common/hotkeys";
import { CronTable } from "../common/cron"; import { CronTable } from "../common/cron";
import { Title } from "./visual/title";
export interface Item { export interface Item {
name: string; name: string;
@ -599,7 +600,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const tableCols = ( const tableCols = (
<Columns <Columns
rows={List([cells])} rows={List([cells])}
widths={List(["3rem", "calc(100% - 16rem)", "8rem", "5rem"])} widths={List(["3rem", "calc(100% - 18rem)", "8rem", "7rem"])}
childrenClassNames={List(["", "", "", ""])} childrenClassNames={List(["", "", "", ""])}
/> />
); );
@ -642,9 +643,12 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const endPoints = ( const endPoints = (
<div className={showEndpoints}> <div className={showEndpoints}>
<Container> <Container>
<h5 className="pane-title margin-r-m"> <h5 className="title-m"></h5>
{this.props.msg.pkg.get("endpoints")} <Title
</h5> title={this.props.msg.pkg.get("endpoints")}
iconColor="black"
iconName="RiGridFill"
/>
<div className="hr"></div> <div className="hr"></div>
<button onClick={gotoRoot} className="button-default margin-r-m"> <button onClick={gotoRoot} className="button-default margin-r-m">
@ -691,7 +695,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<div> <div>
<button <button
onClick={this.mkDir} onClick={this.mkDir}
className="inline-blocks cyan1-bg white-font" className="inline-block cyan1-bg white-font margin-r-m"
> >
{this.props.msg.pkg.get("browser.folder.add")} {this.props.msg.pkg.get("browser.folder.add")}
</button> </button>
@ -700,7 +704,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
onChange={this.onNewFolderNameChange} onChange={this.onNewFolderNameChange}
value={this.state.newFolderName} value={this.state.newFolderName}
placeholder={this.props.msg.pkg.get("browser.folder.name")} placeholder={this.props.msg.pkg.get("browser.folder.name")}
className="inline-blocks" className="inline-block"
/> />
</div>, </div>,

8
src/client/web/src/components/panel_uploadings.tsx
View file

@ -117,7 +117,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
uploading.state !== UploadState.Stopped ? ( uploading.state !== UploadState.Stopped ? (
<button <button
onClick={() => this.stopUploading(uploading.filePath)} onClick={() => this.stopUploading(uploading.filePath)}
className="inline-block margin-r-m margin-b-m" className="inline-block button-default margin-r-m margin-b-m"
> >
{this.props.msg.pkg.get("browser.stop")} {this.props.msg.pkg.get("browser.stop")}
</button> </button>
@ -129,7 +129,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
{stopButton} {stopButton}
<button <button
onClick={() => this.deleteUpload(uploading.filePath)} onClick={() => this.deleteUpload(uploading.filePath)}
className="inline-block" className="inline-block button-default"
> >
{this.props.msg.pkg.get("browser.delete")} {this.props.msg.pkg.get("browser.delete")}
</button> </button>
@ -152,7 +152,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
const elem = ( const elem = (
<div key={uploading.filePath} className="upload-item"> <div key={uploading.filePath} className="upload-item">
<div className={`font-s info`}> <div className={`font-s l-col`}>
<span className="title">{fileName}&nbsp;</span> <span className="title">{fileName}&nbsp;</span>
<span className="desc grey0-font"> <span className="desc grey0-font">
{FileSize(uploading.uploaded, { round: 0 })} {FileSize(uploading.uploaded, { round: 0 })}
@ -165,7 +165,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
</span> </span>
</div> </div>
<div className="op">{operations}</div> <div className="r-col">{operations}</div>
{progressBar} {progressBar}
{errorInfo} {errorInfo}

19
src/client/web/src/components/visual/icons.tsx
View file

@ -20,6 +20,9 @@ import { BiListUl } from "@react-icons/all-files/bi/BiListUl";
import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill"; import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine"; import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp"; import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp";
import { RiListSettingsFill } from "@react-icons/all-files/ri/RiListSettingsFill";
import { RiHardDriveFill } from "@react-icons/all-files/ri/RiHardDriveFill";
import { RiGridFill } from "@react-icons/all-files/ri/RiGridFill";
import { colorClass } from "./colors"; import { colorClass } from "./colors";
@ -48,6 +51,9 @@ const icons = Map<string, IconType>({
RiMore2Fill: RiMore2Fill, RiMore2Fill: RiMore2Fill,
RiCheckboxBlankLine: RiCheckboxBlankLine, RiCheckboxBlankLine: RiCheckboxBlankLine,
BiSortUp: BiSortUp, BiSortUp: BiSortUp,
RiListSettingsFill: RiListSettingsFill,
RiHardDriveFill: RiHardDriveFill,
RiGridFill: RiGridFill,
}); });
export function getIconWithProps( export function getIconWithProps(
@ -78,3 +84,16 @@ export function getIcon(
null null
); );
} }
export function iconSize(size: string): string {
switch (size) {
case "s":
return "2rem";
case "m":
return "2.4rem";
case "l":
return "3.2rem";
default:
throw Error(`icons size(${size}) not found`);
}
}