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

fix(fe): clean up and fix small issues

Browse source
This commit is contained in:
hexxa 2021-11-28 17:08:18 +08:00 • committed by Hexxa
parent da5794a955
commit 7dbda74fcc
5 changed files with 108 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -84,7 +84,7 @@
}
.theme-default #breadcrumb {
padding: 1rem;
padding: 1rem 0;
width: 100%;
}
@ -119,14 +119,13 @@
.theme-default .select-btn {
width: 8rem;
display: inline-block;
margin: 0 1rem 0 0;
}
.theme-default #op-bar {
}
.theme-default #browser-op {
padding: 1rem;
margin-bottom: 1rem;
}
.theme-default #browser-op button {
@ -144,10 +143,16 @@
.theme-default #browser .item-op {
line-height: 4rem;
padding: 1rem;
padding: 1rem 0;
text-align: right;
}
.theme-default #browser .item-info {
padding: 1rem;
font-size: 1.2rem;
border: dashed 1px #7f8c8d;
}
.theme-default #browser .error {
line-height: 4rem;
border: dashed 1px #e74c3c;
@ -171,7 +176,7 @@
}
.theme-default #upload-op {
padding: 1rem;
padding: 0;
}
.theme-default .red-btn {
@ -365,10 +370,10 @@
background-color: #ecf0f6;
}
#item-list .item-name-vertical {
.item-name-vertical {
width: 14rem;
}
#item-list .item-name-horizontal {
.item-name-horizontal {
width: 48rem;
}

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

@ -143,9 +143,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<div id="pane-settings">
<Container>
<div id="profile">
<h5 className="title">
{this.props.msg.pkg.get("user.profile")}
</h5>
<h5 className="title">{this.props.msg.pkg.get("user.profile")}</h5>
<div>
<Card
@ -243,28 +241,27 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<h5 className="title">
{this.props.msg.pkg.get("settings.chooseLan")}
</h5>,
<span>
<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>
</span>,
])}
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 className="hr"></div>

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

@ -13,8 +13,10 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
import { LoginProps } from "./pane_login";
import { MetadataResp, roleVisitor, roleAdmin } from "../client";
import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
import { Up } from "../worker/upload_mgr";
import { UploadEntry, UploadState } from "../worker/interface";
import { getIcon } from "./visual/icons";
export interface Item {
name: string;
@ -391,47 +393,38 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<Flexbox
key={item.name}
children={List([
<span className="padding-m">
<Flexbox
children={List([
<RiFolder2Fill
size="3rem"
className="yellow0-font margin-r-m"
/>,
<Flexbox
children={List([
<RiFolder2Fill
size="3rem"
className="yellow0-font margin-r-m"
/>,
<span className={`${nameWidthClass}`}>
<span
className="title-m"
onClick={() => this.gotoChild(item.name)}
>
{item.name}
<span className={`${nameWidthClass}`}>
<span
className="title-m"
onClick={() => this.gotoChild(item.name)}
>
{item.name}
</span>
<div className="desc-m grey0-font">
<span>
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</span>
<div className="desc-m grey0-font">
<span>
{item.modTime.slice(0, item.modTime.indexOf("T"))}
</span>
</div>
</span>,
])}
childrenStyles={List([
{ flex: "0 0 auto" },
{ flex: "0 0 auto" },
])}
/>
</span>,
<span className={`item-op padding-m ${showOp}`}>
<button
onClick={() => this.select(item.name)}
className={`${
isSelected ? "cyan0-bg white-font" : "grey2-bg grey3-font"
}`}
style={{ width: "8rem", display: "inline-block" }}
>
</div>
</span>,
])}
childrenStyles={List([
{ flex: "0 0 auto" },
{ flex: "0 0 auto" },
])}
/>,
<span className={`item-op ${showOp}`}>
<span onClick={() => this.select(item.name)} className="float-l">
{isSelected
? this.props.msg.pkg.get("browser.deselect")
: this.props.msg.pkg.get("browser.select")}
</button>
? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
: getIcon("RiCheckboxBlankFill", "1.8rem", "grey1")}
</span>
</span>,
])}
childrenStyles={List([
@ -446,10 +439,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
children={List([
<Flexbox
children={List([
<RiFile2Fill
size="3rem"
className="cyan0-font margin-l-m margin-r-m"
/>,
<RiFile2Fill size="3rem" className="cyan0-font margin-r-m" />,
<span className={`${nameWidthClass}`}>
<a
@ -474,27 +464,22 @@ export class FilesPanel extends React.Component<Props, State, {}> {
])}
/>,
<span className={`item-op padding-m ${showOp}`}>
<button
<span className={`item-op ${showOp}`}>
<span
onClick={() => this.toggleDetail(item.name)}
style={{ width: "8rem" }}
className="float-input"
className="float-l"
>
{this.props.msg.pkg.get("detail")}
</button>
{getIcon("RiInformationFill", "1.8rem", "grey1")}
</span>
<button
type="button"
<span
onClick={() => this.select(item.name)}
className={`float-input ${
isSelected ? "cyan0-bg white-font " : "grey2-bg grey3-font "
}`}
style={{ width: "8rem" }}
className="float-l"
>
{isSelected
? this.props.msg.pkg.get("browser.deselect")
: this.props.msg.pkg.get("browser.select")}
</button>
? getIcon("RiCheckboxFill", "1.8rem", "cyan0")
: getIcon("RiCheckboxBlankFill", "1.8rem", "grey1")}
</span>
</span>,
])}
childrenStyles={List([
@ -511,8 +496,8 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<Flexbox
children={List([
<span>
<b>SHA1:</b>
{` ${item.sha1}`}
<b>{`SHA1: `}</b>
<input type="text" readOnly={true} value={`${item.sha1}`} />
</span>,
<button
onClick={() => this.generateHash(itemPath)}
@ -522,7 +507,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
{this.props.msg.pkg.get("refresh")}
</button>,
])}
className={`grey2-bg grey3-font detail margin-r-m`}
className={`item-info`}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
</div>
@ -542,9 +527,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const itemListPane = (
<div id="item-list">
<div className={`container ${showOp}`}>{ops}</div>
<div className={showOp}>
<Container>{ops}</Container>
</div>
<div className="container">
<Container>
<div id="browser-op" className={`${showOp}`}>
<Flexbox
children={List([
@ -632,7 +619,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
/>
{itemList}
</div>
</Container>
</div>
);

27
src/client/web/src/components/panel_sharings.tsx
View file

@ -11,6 +11,7 @@ import { ICoreState, MsgProps, UIProps } from "./core_state";
import { LoginProps } from "./pane_login";
import { Flexbox } from "./layout/flexbox";
import { Container } from "./layout/container";
import { getIcon } from "./visual/icons";
export interface SharingsProps {
sharings: List<string>;
@ -94,30 +95,34 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
size="3rem"
className="purple0-font margin-r-m"
/>,
<span>{dirPath}</span>,
<span className={nameWidthClass}>{dirPath}</span>,
])}
/>,
<span
onClick={() => {
this.deleteSharing(dirPath);
}}
className="margin-r-m"
>
{getIcon("RiDeleteBin2Fill", "1.8rem", "red0")}
</span>,
<span>
<input
type="text"
readOnly
className="float-input"
value={`${
document.location.href.split("?")[0]
}?dir=${encodeURIComponent(dirPath)}`}
/>
<button
onClick={() => {
this.deleteSharing(dirPath);
}}
className="float-input"
>
{this.props.msg.pkg.get("browser.share.del")}
</button>
</span>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
childrenStyles={List([
{ alignItems: "center" },
{ alignItems: "center", justifyContent: "flex-end" },
{ alignItems: "center", justifyContent: "flex-end" },
])}
/>
</div>
);

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

@ -7,6 +7,12 @@ import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
import { RiSettings3Fill } from "@react-icons/all-files/ri/RiSettings3Fill";
import { RiWindowFill } from "@react-icons/all-files/ri/RiWindowFill";
import { RiCheckboxBlankFill } from "@react-icons/all-files/ri/RiCheckboxBlankFill";
import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill";
import { RiMenuFill } from "@react-icons/all-files/ri/RiMenuFill";
import { RiInformationFill } from "@react-icons/all-files/ri/RiInformationFill";
import { RiDeleteBin2Fill } from "@react-icons/all-files/ri/RiDeleteBin2Fill";
import { colorClass } from "./colors";
@ -22,6 +28,11 @@ const icons = Map<string, IconType>({
RiUploadCloudFill: RiUploadCloudFill,
RiSettings3Fill: RiSettings3Fill,
RiWindowFill: RiWindowFill,
RiCheckboxBlankFill: RiCheckboxBlankFill,
RiCheckboxFill: RiCheckboxFill,
RiMenuFill: RiMenuFill,
RiInformationFill: RiInformationFill,
RiDeleteBin2Fill: RiDeleteBin2Fill,
});
export function getIconWithProps(