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;
}
.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 {
float: left;
width: 70%;
@ -434,10 +424,6 @@ input:focus {
/* padding: 2rem; */
}
.theme-default #pane-settings #profile .desc-m {
color: #95a5a6;
}
.theme-default .user-form {
font-size: 1.4rem;
padding: 1rem 0;

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

@ -9,23 +9,17 @@
float: left;
}
.theme-default #browser .info {
.theme-default .info {
border: dashed 1px #95a5a6;
font-size: 1.4rem;
padding: 1rem;
color: #697384;
margin: 1rem 0 0 0;
background-color: #ecf0f1;
background-color: #f6f6f6;
white-space: nowrap;
overflow: auto;
}
.theme-default .pane-title {
color: black;
font-size: 1.6rem;
line-height: 1.6rem;
}
.theme-default #breadcrumb {
width: 100%;
}
@ -51,9 +45,8 @@
display: block;
}
.theme-default .inline-blocks {
.theme-default .inline-block {
display: inline-block;
margin: auto 1rem auto auto;
}
.theme-default .select-btn {
@ -89,12 +82,12 @@
transition: width 300ms;
}
.theme-default #upload-list .info {
.theme-default .l-col {
display: inline-block;
width: 70%;
}
.theme-default #upload-list .op {
.theme-default .r-col {
display: inline-block;
width: 30%;
text-align: right;
@ -115,5 +108,21 @@
.theme-default #item-rows .desc {
display: block;
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 { roleAdmin } from "../client";
import { settingsTabsCtrl } from "../common/controls";
import { Title } from "./visual/title";
export interface Props {
admin: AdminProps;

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

@ -19,6 +19,7 @@ import {
ctrlHidden,
} from "../common/controls";
import { LoadingIcon } from "./visual/loading";
import { Title } from "./visual/title";
import { HotkeyHandler } from "../common/hotkeys";
export interface Props {
@ -98,7 +99,11 @@ export class Layers extends React.Component<Props, State, {}> {
<Container>
<Flexbox
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
className="button-default"
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 { Container } from "./layout/container";
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 {
users: Map<string, User>;
@ -204,49 +205,49 @@ export class UserForm extends React.Component<
render() {
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 = () => {
this.resetUsedSpace(this.props.id);
};
return (
<div className="user-form">
<Flexbox
children={List([
<div>
<span className="bold">{`${this.props.msg.pkg.get(
"user.name"
)}: `}</span>
<span className="margin-r-m">{this.props.name}</span>
<span className="bold">{`${this.props.msg.pkg.get(
"user.id"
)}: `}</span>
<span>{this.props.id}</span>
</div>,
<Columns
rows={List([
List([
<div className="title-m-wrap">
<span className="bold">{`${this.props.msg.pkg.get(
"user.name"
)}: `}</span>
<span className="margin-r-m">{this.props.name}</span>
<span className="bold">{`${this.props.msg.pkg.get(
"user.id"
)}: `}</span>
<span>{this.props.id}</span>
</div>,
<span>
<RiMenuUnfoldFill
size="1.2rem"
className={`margin-r-m ${foldIconColor}`}
onClick={this.toggle}
/>
<div className="txt-align-r">
<div className="icon-s inline-block">
<RiMenuUnfoldFill
size={iconSize("s")}
className={`margin-r-m ${foldIconColor}`}
onClick={this.toggle}
/>
</div>
</div>,
<button className="button-default" onClick={this.delUser}>
{this.props.msg.pkg.get("delete")}
</button>
</span>,
])}
childrenStyles={List([
{ alignItems: "flex-start", flexBasis: "70%" },
{
justifyContent: "flex-end",
},
</button>,
]),
])}
widths={List(["calc(100% - 10rem)", "3rem", "7rem"])}
childrenClassNames={List(["", "txt-align-r", "txt-align-r"])}
/>
<div className={foldedClass}>
<div className="hr"></div>
<div></div>
<div className={`info ${foldedClass}`}>
<div>
<Flexbox
children={List([
@ -270,7 +271,7 @@ export class UserForm extends React.Component<
className="margin-t-m"
children={List([
<div>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("user.role")}
</div>
@ -283,7 +284,7 @@ export class UserForm extends React.Component<
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{`${this.props.msg.pkg.get("spaceLimit")} (${FileSize(
parseInt(this.state.quota.spaceLimit, 10),
@ -299,7 +300,7 @@ export class UserForm extends React.Component<
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{`${this.props.msg.pkg.get("uploadLimit")} (${FileSize(
this.state.quota.uploadSpeedLimit,
@ -315,7 +316,7 @@ export class UserForm extends React.Component<
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{`${this.props.msg.pkg.get("downloadLimit")} (${FileSize(
this.state.quota.downloadSpeedLimit,
@ -353,7 +354,7 @@ export class UserForm extends React.Component<
className="margin-t-m"
children={List([
<div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
@ -367,7 +368,7 @@ export class UserForm extends React.Component<
/>
</div>
<div className="float-input">
<div className="inline-block">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
@ -582,9 +583,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
{this.props.msg.pkg.get("user.add")}
</h5>,
<h5 className="title-m">{this.props.msg.pkg.get("user.add")}</h5>,
<button onClick={this.addUser} className="button-default">
{this.props.msg.pkg.get("add")}
</button>,
@ -594,7 +593,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<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>
<input
type="text"
@ -604,7 +603,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">{this.props.msg.pkg.get("user.role")}</div>
<input
type="text"
@ -614,7 +613,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
@ -626,7 +625,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
@ -642,7 +641,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("admin.users")}
</h5>,
<span></span>,
@ -658,7 +657,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<div>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("role.add")}
</h5>,
<span></span>,
@ -687,7 +686,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("admin.roles")}
</h5>,
<span></span>,
@ -839,16 +838,19 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div>
<Flexbox
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>
<button
onClick={this.resetClientCfg}
className="margin-r-m button-default"
className="inline-block margin-r-m button-default"
>
{this.props.msg.pkg.get("reset")}
</button>
<button className="button-default" onClick={this.setClientCfg}>
<button
className="inline-block button-default"
onClick={this.setClientCfg}
>
{this.props.msg.pkg.get("update")}
</button>
</span>,
@ -859,7 +861,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
<div className="hr"></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>
<input
name="bg_url"
@ -871,7 +873,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/>
</div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")}
</div>
@ -884,7 +886,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/>
</div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">{this.props.msg.pkg.get("cfg.bg.pos")}</div>
<input
name="bg_pos"
@ -895,7 +897,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/>
</div>
<div className="float-input">
<div className="inline-block">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.align")}
</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 { Container } from "./layout/container";
import { Card } from "./layout/card";
import { Rows, Row } from "./layout/rows";
import { Rows } from "./layout/rows";
import { ClientErrorV001, ErrorLogger } from "../common/log_error";
import { loadingCtrl, ctrlOn, ctrlOff } from "../common/controls";
export interface Props {
@ -194,7 +194,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("error.report.title")}
</h5>,
@ -226,7 +226,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div id="pane-settings">
<Container>
<div id="profile">
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("user.profile")}
</h5>
@ -270,7 +270,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("settings.pwd.update")}
</h5>,
<button className="button-default" onClick={this.setPwd}>
@ -282,7 +282,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="hr"></div>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.old")}
</div>
@ -295,7 +295,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new1")}
</div>
@ -308,7 +308,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/>
</span>
<span className="float-input">
<span className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.pwd.new2")}
</div>
@ -325,7 +325,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
])}
@ -339,7 +339,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => {
this.setLan("en_US");
}}
className="button-default float-input"
className="button-default inline-block margin-r-m"
>
{this.props.msg.pkg.get("enUS")}
</button>
@ -347,17 +347,18 @@ export class PaneSettings extends React.Component<Props, State, {}> {
onClick={() => {
this.setLan("zh_CN");
}}
className="button-default float-input"
className="button-default inline-block margin-r-m"
>
{this.props.msg.pkg.get("zhCN")}
</button>
</div>
</Container>
<Container>
{/* disabled */}
{/* <Container>
<Flexbox
children={List([
<h5 className="pane-title">
<h5 className="title-m">
{this.props.msg.pkg.get("settings.customLan")}
</h5>,
@ -375,7 +376,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="hr"></div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("settings.lanPackURL")}
</div>
@ -383,19 +384,17 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text"
onChange={this.changeLanPackURL}
value={this.props.login.preferences.lanPackURL}
className="black0-font"
className="dark-font"
style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
/>
</div>
</Container>
</Container> */}
<Container>
<Flexbox
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>,
<button className="button-default" onClick={this.syncPreferences}>
{this.props.msg.pkg.get("update")}
@ -407,7 +406,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div className="hr"></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>
@ -420,7 +419,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/>
</div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")}
</div>
@ -433,7 +432,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/>
</div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.pos")}
</div>
@ -446,7 +445,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
/>
</div>
<div className="float-input">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.align")}
</div>

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

@ -33,6 +33,7 @@ import {
} from "../common/controls";
import { HotkeyHandler } from "../common/hotkeys";
import { CronTable } from "../common/cron";
import { Title } from "./visual/title";
export interface Item {
name: string;
@ -599,7 +600,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const tableCols = (
<Columns
rows={List([cells])}
widths={List(["3rem", "calc(100% - 16rem)", "8rem", "5rem"])}
widths={List(["3rem", "calc(100% - 18rem)", "8rem", "7rem"])}
childrenClassNames={List(["", "", "", ""])}
/>
);
@ -642,9 +643,12 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const endPoints = (
<div className={showEndpoints}>
<Container>
<h5 className="pane-title margin-r-m">
{this.props.msg.pkg.get("endpoints")}
</h5>
<h5 className="title-m"></h5>
<Title
title={this.props.msg.pkg.get("endpoints")}
iconColor="black"
iconName="RiGridFill"
/>
<div className="hr"></div>
<button onClick={gotoRoot} className="button-default margin-r-m">
@ -691,7 +695,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<div>
<button
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")}
</button>
@ -700,7 +704,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
onChange={this.onNewFolderNameChange}
value={this.state.newFolderName}
placeholder={this.props.msg.pkg.get("browser.folder.name")}
className="inline-blocks"
className="inline-block"
/>
</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 ? (
<button
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")}
</button>
@ -129,7 +129,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
{stopButton}
<button
onClick={() => this.deleteUpload(uploading.filePath)}
className="inline-block"
className="inline-block button-default"
>
{this.props.msg.pkg.get("browser.delete")}
</button>
@ -152,7 +152,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
const elem = (
<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="desc grey0-font">
{FileSize(uploading.uploaded, { round: 0 })}
@ -165,7 +165,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
</span>
</div>
<div className="op">{operations}</div>
<div className="r-col">{operations}</div>
{progressBar}
{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 { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
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";
@ -48,6 +51,9 @@ const icons = Map<string, IconType>({
RiMore2Fill: RiMore2Fill,
RiCheckboxBlankLine: RiCheckboxBlankLine,
BiSortUp: BiSortUp,
RiListSettingsFill: RiListSettingsFill,
RiHardDriveFill: RiHardDriveFill,
RiGridFill: RiGridFill,
});
export function getIconWithProps(
@ -78,3 +84,16 @@ export function getIcon(
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`);
}
}