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

feat(fe/styles): add dark theme

Browse source
This commit is contained in:
hexxa 2022-03-19 16:31:39 +08:00 • committed by Hexxa
parent 4cdfddc090
commit 916520bed1
15 changed files with 430 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/client/web/build/template/index.template.dev.html
View file

@ -19,7 +19,7 @@
<link rel="stylesheet" href="/static/css/colors.css" />
<link rel="stylesheet" href="/static/css/default.css" />
<link rel="stylesheet" href="/static/css/white.css" />
<link rel="stylesheet" href="/static/css/black.css" />
<link rel="stylesheet" href="/static/css/dark.css" />
<!-- <link
rel="apple-touch-icon"
sizes="57x57"

2
src/client/web/build/template/index.template.html
View file

@ -19,7 +19,7 @@
<link rel="stylesheet" href="/static/css/colors.css" />
<link rel="stylesheet" href="/static/css/default.css" />
<link rel="stylesheet" href="/static/css/white.css" />
<link rel="stylesheet" href="/static/css/black.css" />
<link rel="stylesheet" href="/static/css/dark.css" />
<!-- <link
rel="apple-touch-icon"
sizes="57x57"

2
src/client/web/src/components/control/btn_list.tsx
View file

@ -16,7 +16,7 @@ export const BtnList = (props: Props) => {
props.titleIcon != null ? (
getIconWithProps(props.titleIcon, {
size: "3rem",
className: "black-font margin-r-m",
className: "major-font margin-r-m",
})
) : (
<span></span>

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

@ -43,7 +43,7 @@ export class Tabs extends React.Component<Props, State, {}> {
const titleIcon =
this.props.titleIcon != null
? getIcon(this.props.titleIcon, "2rem", "black")
? getIcon(this.props.titleIcon, "2rem", "major")
: null;
const options = this.props.ui.control.options.get(this.props.targetControl);
const tabs = options.map((option: string) => {
@ -51,10 +51,10 @@ export class Tabs extends React.Component<Props, State, {}> {
? this.props.tabIcons.get(option)
: defaultIconProps;
const iconColor = displaying === option ? iconProps.color : "black0";
const iconColor = displaying === option ? iconProps.color : "major";
const icon = getIcon(iconProps.name, iconProps.size, iconColor);
const fontColor =
displaying === option ? `${colorClass(iconColor)}-font` : "black0-font";
displaying === option ? `${colorClass(iconColor)}-font` : "major-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 normal-bg"
className="float-l margin-r-m minor-bg"
>
<Flexbox
children={List([

2
src/client/web/src/components/layout/card.tsx
View file

@ -8,7 +8,7 @@ export interface Props {
export const Card = (props: Props) => {
return (
<div className="padding-m float-l">
<div className="title-l black0-font">{props.value}</div>
<div className="title-l">{props.value}</div>
<div className="desc-m">{props.name}</div>
</div>
);

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

@ -205,7 +205,7 @@ export class UserForm extends React.Component<
render() {
const foldedClass = this.state.folded ? "hidden" : "";
const foldIconColor = this.state.folded ? "black-font" : "highlight-font";
const foldIconColor = this.state.folded ? "major-font" : "focus-font";
const resetUsedSpace = () => {
this.resetUsedSpace(this.props.id);
};

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

@ -384,7 +384,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
type="text"
onChange={this.changeLanPackURL}
value={this.props.login.preferences.lanPackURL}
className="dark-font"
className="minor-font"
style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("settings.lanPackURL")}
/>

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

@ -484,14 +484,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
? `${dirPath}${item.name}`
: `${dirPath}/${item.name}`;
const selectedIconColor = isSelected ? "highlight-font" : "dark-font";
const selectedIconColor = isSelected ? "focus-font" : "minor-font";
const descIconColor = this.state.showDetail.has(item.name)
? "highlight-font"
: "light-font";
? "focus-font"
: "major-font";
const icon = item.isDir ? (
<RiFolder2Fill size="2rem" className="yellow0-font margin-r-m" />
) : (
<RiFile2Fill size="2rem" className="highlight-font margin-r-m" />
<RiFile2Fill size="2rem" className="focus-font margin-r-m" />
);
const modTimeDate = new Date(item.modTime);
@ -504,14 +504,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<span className="clickable" onClick={() => this.gotoChild(item.name)}>
{item.name}
</span>
<span className="light-font">{` - ${modTimeFormatted}`}</span>
<span className="major-font">{` - ${modTimeFormatted}`}</span>
</span>
) : (
<span className="title-m-wrap">
<a className="clickable" href={downloadPath} target="_blank">
{item.name}
</a>
<span className="light-font">{` - ${modTimeFormatted}`}</span>
<span className="major-font">{` - ${modTimeFormatted}`}</span>
</span>
);
@ -552,21 +552,21 @@ export class FilesPanel extends React.Component<Props, State, {}> {
? "margin-t-m padding-m"
: "no-height";
const desc = (
<div className={`${descStateClass} desc light-font light-bg`}>
<div className={`${descStateClass} desc major-font minor-bg`}>
<div className="column">
<div className="card">
<span className="title-m dark-font">{pathTitle}</span>
<span className="title-m minor-font">{pathTitle}</span>
<span className="font-s work-break-all">{absDownloadURL}</span>
</div>
</div>
<div className="column">
<div className="card">
<span className="title-m dark-font">{modTimeTitle}</span>
<span className="title-m minor-font">{modTimeTitle}</span>
<span className="font-s work-break-all">{modTimeFormatted}</span>
</div>
<div className="card">
<span className="title-m dark-font">{sizeTitle}</span>
<span className="title-m minor-font">{sizeTitle}</span>
<span className="font-s work-break-all">{itemSize}</span>
</div>
</div>
@ -575,11 +575,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<div className="card">
<Flexbox
children={List([
<span className="title-m dark-font">SHA1</span>,
<span className="title-m minor-font">SHA1</span>,
<RiRestartFill
onClick={() => this.generateHash(itemPath)}
size={"2rem"}
className={`dark-font ${shareModeClass}`}
className={`minor-font ${shareModeClass}`}
/>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
@ -593,7 +593,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const cells = List<React.ReactNode>([
<div className="icon-s">{icon}</div>,
<div>{name}</div>,
<div className="title-m light-font padding-l-s">{itemSize}</div>,
<div className="title-m major-font padding-l-s">{itemSize}</div>,
<div className="txt-align-r">{op}</div>,
]);
@ -645,7 +645,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<Container>
<Title
title={this.props.msg.pkg.get("endpoints")}
iconColor="black"
iconColor="major"
iconName="RiGridFill"
/>
<div className="hr"></div>
@ -694,7 +694,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<div>
<button
onClick={this.mkDir}
className="inline-block highlight-bg white-font margin-r-m"
className="inline-block focus-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.folder.add")}
</button>
@ -710,7 +710,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<div>
<button
onClick={this.onClickUpload}
className="highlight-bg white-font"
className="focus-bg white-font"
>
{this.props.msg.pkg.get("browser.upload")}
</button>
@ -784,12 +784,12 @@ export class FilesPanel extends React.Component<Props, State, {}> {
const rowsViewColorClass =
this.props.ui.control.controls.get(filesViewCtrl) === "rows"
? "highlight-font"
: "black-font";
? "focus-font"
: "major-font";
const tableViewColorClass =
this.props.ui.control.controls.get(filesViewCtrl) === "table"
? "highlight-font"
: "black-font";
? "focus-font"
: "major-font";
const itemListPane = (
<div>
@ -820,7 +820,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<button
type="button"
onClick={this.addSharing}
className="highlight-bg white-font margin-r-m"
className="focus-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.share.add")}
</button>

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

@ -100,7 +100,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
const row1 = (
<div>
<div className="col-l">
<span className="title-m-wrap dark-font">{dirPath}</span>
<span className="title-m-wrap minor-font">{dirPath}</span>
</div>
<div className="col-r">
@ -133,7 +133,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
const elem = (
<div className="margin-t-m margin-b-m" key={dirPath}>
{row1}
<div className="desc">{sharingURL}</div>
<div className="desc minor-bg major-font">{sharingURL}</div>
<div className="hr"></div>
</div>
);
@ -166,7 +166,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
<Title
title={this.props.msg.pkg.get("browser.share.title")}
iconName="RiShareBoxLine"
iconColor="black"
iconColor="major"
/>
);

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

@ -193,7 +193,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
<Title
title={this.props.msg.pkg.get("browser.upload.title")}
iconName="RiUploadCloudFill"
iconColor="black"
iconColor="major"
/>
);

12
src/client/web/src/components/root_frame.tsx
View file

@ -52,8 +52,8 @@ export class RootFrame extends React.Component<Props, State, {}> {
render() {
const bgStyle = this.makeBgStyle();
const themeBlack = "theme-black";
const theme = themeBlack;
const themeDark = "theme-dark";
const theme = themeDark;
const fontSizeClass = "font-m";
const displaying = this.props.ui.control.controls.get(controlName);
@ -64,7 +64,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
return (
<div id="root-frame" className={`${theme} ${fontSizeClass}`}>
<div id="bg" style={bgStyle}>
<div id="bg" style={{}}>
<Layers
login={this.props.login}
admin={this.props.admin}
@ -88,17 +88,17 @@ export class RootFrame extends React.Component<Props, State, {}> {
filesPanel: {
name: "RiFolder2Fill",
size: "1.6rem",
color: "highlight",
color: "focus",
},
uploadingsPanel: {
name: "RiUploadCloudFill",
size: "1.6rem",
color: "highlight",
color: "focus",
},
sharingsPanel: {
name: "RiShareBoxLine",
size: "1.6rem",
color: "highlight",
color: "focus",
},
})}
ui={this.props.ui}

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

@ -55,7 +55,7 @@ export class TopBar extends React.Component<Props, State, {}> {
: "";
return (
<div id="top-bar" className="highlight-font light-bg">
<div id="top-bar" className="focus-font major-bg">
<Flexbox
children={List([
<a

5
src/client/web/src/components/visual/colors.ts
View file

@ -30,8 +30,11 @@ export const colors = Set<string>([
"black1",
"dark",
"light",
"major",
"minor",
"focus",
"normal",
"highlight",
"focus",
"error",
]);