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

fix(fe): update icons

Browse source
This commit is contained in:
hexxa 2022-01-16 11:12:41 +08:00 • committed by Hexxa
parent 2f5c4b3ddb
commit 71477a61bc
6 changed files with 49 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -194,7 +194,7 @@
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2rem; line-height: 2rem;
display: block; display: block;
overflow-wrap: break-word; word-break: break-all;
} }
.theme-default #item-rows .hr { .theme-default #item-rows .hr {

7
src/client/web/src/components/layout/rows.tsx
View file

@ -1,7 +1,8 @@
import * as React from "react"; import * as React from "react";
import { List, Map, Set } from "immutable"; import { List } from "immutable";
import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp";
import { RiArrowUpDownFill } from "@react-icons/all-files/ri/RiArrowUpDownFill";
import { Flexbox } from "./flexbox"; import { Flexbox } from "./flexbox";
@ -103,7 +104,7 @@ export class Rows extends React.Component<Props, State, {}> {
<div className="margin-b-l"> <div className="margin-b-l">
<Flexbox <Flexbox
children={List([ children={List([
<RiArrowUpDownFill <BiSortUp
size="3rem" size="3rem"
className="black-font margin-r-m" className="black-font margin-r-m"
/>, />,

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

@ -12,7 +12,8 @@ import { RiCheckboxFill } from "@react-icons/all-files/ri/RiCheckboxFill";
import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill"; import { RiMore2Fill } from "@react-icons/all-files/ri/RiMore2Fill";
import { BiTable } from "@react-icons/all-files/bi/BiTable"; import { BiTable } from "@react-icons/all-files/bi/BiTable";
import { BiListUl } from "@react-icons/all-files/bi/BiListUl"; import { BiListUl } from "@react-icons/all-files/bi/BiListUl";
import { RiRefreshLine } from "@react-icons/all-files/ri/RiRefreshLine"; import { RiRestartFill } from "@react-icons/all-files/ri/RiRestartFill";
import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
import { ErrorLogger } from "../common/log_error"; import { ErrorLogger } from "../common/log_error";
import { alertMsg, confirmMsg } from "../common/env"; import { alertMsg, confirmMsg } from "../common/env";
@ -468,10 +469,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<Flexbox <Flexbox
children={List([ children={List([
<div className="label">{`SHA1: `}</div>, <div className="label">{`SHA1: `}</div>,
<RiRefreshLine <RiRestartFill
onClick={() => this.generateHash(itemPath)} onClick={() => this.generateHash(itemPath)}
size={"2rem"} size={"2rem"}
className="black-font" className="grey3-font"
/>, />,
])} ])}
className="item-info" className="item-info"
@ -490,7 +491,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<span onClick={() => this.select(item.name)} className="float-l"> <span onClick={() => this.select(item.name)} className="float-l">
{isSelected {isSelected
? getIcon("RiCheckboxFill", "1.8rem", "cyan1") ? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
: getIcon("RiCheckboxBlankFill", "1.8rem", "black1")} : getIcon("RiCheckboxBlankLine", "1.8rem", "black1")}
</span> </span>
</div> </div>
) : ( ) : (
@ -505,7 +506,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<span onClick={() => this.select(item.name)} className="float-l"> <span onClick={() => this.select(item.name)} className="float-l">
{isSelected {isSelected
? getIcon("RiCheckboxFill", "1.8rem", "cyan1") ? getIcon("RiCheckboxFill", "1.8rem", "cyan1")
: getIcon("RiCheckboxBlankFill", "1.8rem", "black1")} : getIcon("RiCheckboxBlankLine", "1.8rem", "black1")}
</span> </span>
</div> </div>
); );
@ -577,6 +578,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
: `${dirPath}/${item.name}`; : `${dirPath}/${item.name}`;
const selectedIconColor = isSelected ? "cyan1-font" : "grey0-font"; const selectedIconColor = isSelected ? "cyan1-font" : "grey0-font";
const descIconColor = this.state.showDetail.has(item.name) const descIconColor = this.state.showDetail.has(item.name)
? "cyan1-font" ? "cyan1-font"
: "grey0-font"; : "grey0-font";
@ -600,14 +602,22 @@ export class FilesPanel extends React.Component<Props, State, {}> {
</a> </a>
); );
const op = item.isDir ? ( const checkIcon = isSelected ? (
<div className={`v-mid item-op ${showOp}`}>
<RiCheckboxFill <RiCheckboxFill
size="1.8rem" size="1.8rem"
className={`${selectedIconColor} ${shareModeClass}`} className={`${selectedIconColor} ${shareModeClass}`}
onClick={() => this.select(item.name)} onClick={() => this.select(item.name)}
/> />
</div> ) : (
<RiCheckboxBlankLine
size="1.8rem"
className={`${selectedIconColor} ${shareModeClass}`}
onClick={() => this.select(item.name)}
/>
);
const op = item.isDir ? (
<div className={`v-mid item-op ${showOp}`}>{checkIcon}</div>
) : ( ) : (
<div className={`v-mid item-op ${showOp}`}> <div className={`v-mid item-op ${showOp}`}>
<RiMore2Fill <RiMore2Fill
@ -616,11 +626,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
onClick={() => this.toggleDetail(item.name)} onClick={() => this.toggleDetail(item.name)}
/> />
<RiCheckboxFill {checkIcon}
size="1.8rem"
className={`${selectedIconColor} ${shareModeClass}`}
onClick={() => this.select(item.name)}
/>
</div> </div>
); );
@ -633,13 +639,20 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const compact = item.isDir ? ( const compact = item.isDir ? (
<span> <span>
<span className="grey3-font">{`${pathTitle}: `}</span>
<span>{`${absDownloadURL} | `}</span>
<span className="grey3-font">{`${modTimeTitle}: `}</span> <span className="grey3-font">{`${modTimeTitle}: `}</span>
<span>{item.modTime}</span> <span>{item.modTime}</span>
</span> </span>
) : ( ) : (
`${pathTitle}: ${absDownloadURL} | ${modTimeTitle}: ${item.modTime} | ${sizeTitle}: ${itemSize} | sha1: ${item.sha1}` <span>
<span className="grey3-font">{`${pathTitle}: `}</span>
<span>{`${absDownloadURL} | `}</span>
<span className="grey3-font">{`${modTimeTitle}: `}</span>
<span>{`${item.modTime} | `}</span>
<span className="grey3-font">{`${sizeTitle}: `}</span>
<span>{`${itemSize} | `}</span>
<span className="grey3-font">{`SHA1: `}</span>
<span>{item.sha1}</span>
</span>
); );
const details = ( const details = (
<div> <div>
@ -648,6 +661,9 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<span className="title-m black-font">{pathTitle}</span> <span className="title-m black-font">{pathTitle}</span>
<span>{absDownloadURL}</span> <span>{absDownloadURL}</span>
</div> </div>
</div>
<div className="column">
<div className="card"> <div className="card">
<span className="title-m black-font">{modTimeTitle}</span> <span className="title-m black-font">{modTimeTitle}</span>
<span>{item.modTime}</span> <span>{item.modTime}</span>
@ -658,24 +674,15 @@ export class FilesPanel extends React.Component<Props, State, {}> {
</div> </div>
</div> </div>
<div className="column">
<div className="card">
<span className="title-m black-font">{pathTitle}</span>
<div className="qrcode-flat">
<QRCode value={absDownloadURL} size={128} />
</div>
</div>
</div>
<div className="fix"> <div className="fix">
<div className="card"> <div className="card">
<Flexbox <Flexbox
children={List([ children={List([
<span className="title-m black-font">SHA1</span>, <span className="title-m black-font">SHA1</span>,
<RiRefreshLine <RiRestartFill
onClick={() => this.generateHash(itemPath)} onClick={() => this.generateHash(itemPath)}
size={"2rem"} size={"2rem"}
className={`black-font ${shareModeClass}`} className={`grey3-font ${shareModeClass}`}
/>, />,
])} ])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}

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

@ -3,8 +3,7 @@ import { List, Map } from "immutable";
import QRCode from "react-qr-code"; import QRCode from "react-qr-code";
import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine"; import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
import { RiFolderSharedFill } from "@react-icons/all-files/ri/RiFolderSharedFill"; import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine";
import { QRCodeIcon } from "./visual/qrcode"; import { QRCodeIcon } from "./visual/qrcode";
import { getErrMsg } from "../common/utils"; import { getErrMsg } from "../common/utils";
@ -137,7 +136,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />, <RiCloudOffFill size="4rem" className="margin-r-m red0-font" />,
<span> <span>
<h3 className="title-l"> <h3 className="title-l">
{this.props.msg.pkg.get("share.404.title")} {this.props.msg.pkg.get("share.404.title")}

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

@ -4,7 +4,7 @@ import FileSize from "filesize";
import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill"; import { RiUploadCloudFill } from "@react-icons/all-files/ri/RiUploadCloudFill";
import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine"; import { RiUploadCloudLine } from "@react-icons/all-files/ri/RiUploadCloudLine";
import { RiEmotionSadLine } from "@react-icons/all-files/ri/RiEmotionSadLine"; import { RiCloudOffFill } from "@react-icons/all-files/ri/RiCloudOffFill";
import { alertMsg } from "../common/env"; import { alertMsg } from "../common/env";
import { getErrMsg } from "../common/utils"; import { getErrMsg } from "../common/utils";
@ -165,7 +165,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
<Container> <Container>
<Flexbox <Flexbox
children={List([ children={List([
<RiEmotionSadLine size="4rem" className="margin-r-m red0-font" />, <RiCloudOffFill size="4rem" className="margin-r-m red0-font" />,
<span> <span>
<h3 className="title-l"> <h3 className="title-l">
{this.props.msg.pkg.get("upload.404.title")} {this.props.msg.pkg.get("upload.404.title")}

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

@ -18,6 +18,7 @@ import { RiArrowUpDownFill } from "@react-icons/all-files/ri/RiArrowUpDownFill";
import { BiTable } from "@react-icons/all-files/bi/BiTable"; import { BiTable } from "@react-icons/all-files/bi/BiTable";
import { BiListUl } from "@react-icons/all-files/bi/BiListUl"; 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 { colorClass } from "./colors"; import { colorClass } from "./colors";
@ -44,6 +45,7 @@ const icons = Map<string, IconType>({
BiTable: BiTable, BiTable: BiTable,
BiListUl: BiListUl, BiListUl: BiListUl,
RiMore2Fill: RiMore2Fill, RiMore2Fill: RiMore2Fill,
RiCheckboxBlankLine: RiCheckboxBlankLine,
}); });
export function getIconWithProps( export function getIconWithProps(