fix(fe/themes): normalize white theme

This commit is contained in:
hexxa 2022-03-19 14:55:26 +08:00 committed by Hexxa
parent aabde4c3d7
commit 4cdfddc090
15 changed files with 527 additions and 1047 deletions

View file

@ -7,18 +7,19 @@
name="viewport"
content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
/>
<link rel="icon" href="static/img/favicon.svg">
<link rel="icon" href="static/img/favicon.svg" />
<link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085">
<link rel="apple-touch-icon" href="static/img/favicon.png">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" href="static/img/favicon.png" />
<meta name="theme-color" content="#ffffff" />
<script src="/static/js/react.development.js?v=16.8.6"></script>
<script src="/static/js/react-dom.development.js?v=16.8.6"></script>
<script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/default.css">
<link rel="stylesheet" href="/static/css/white.css">
<link rel="stylesheet" href="/static/css/white_compact.css">
<link rel="stylesheet" href="/static/css/reset.css" />
<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="apple-touch-icon"
sizes="57x57"

View file

@ -7,18 +7,19 @@
name="viewport"
content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes"
/>
<link rel="icon" href="static/img/favicon.svg">
<link rel="icon" href="static/img/favicon.svg" />
<link rel=”mask-icon” href=”static/img/favicon.svg” color=”#16a085">
<link rel="apple-touch-icon" href="static/img/favicon.png">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" href="static/img/favicon.png" />
<meta name="theme-color" content="#ffffff" />
<script src="/static/js/react.production.min.js?v=16.8.6"></script>
<script src="/static/js/react-dom.production.min.js?v=16.8.6"></script>
<script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/default.css">
<link rel="stylesheet" href="/static/css/white.css">
<link rel="stylesheet" href="/static/css/white_compact.css">
<link rel="stylesheet" href="/static/css/reset.css" />
<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="apple-touch-icon"
sizes="57x57"

View file

@ -25,7 +25,7 @@ export const BtnList = (props: Props) => {
const btns = props.btnNames.map((btnName: string, i: number) => {
const cb = props.btnCallbacks.get(i);
return (
<button key={`rows-${i}`} className="float button-default" onClick={cb}>
<button key={`rows-${i}`} className="inline-block margin-r-m button-default" onClick={cb}>
{btnName}
</button>
);

View file

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

View file

@ -211,7 +211,7 @@ export class UserForm extends React.Component<
};
return (
<div className="user-form">
<div className="padding-t-m padding-b-m">
<Columns
rows={List([
List([
@ -394,6 +394,8 @@ export class UserForm extends React.Component<
])}
/>
</div>
<div className="hr"></div>
</div>
);
}
@ -551,7 +553,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
const roleList = this.props.admin.roles.valueSeq().map((role: string) => {
return (
<div key={role} className="role-list-item">
<div key={role} className="margin-b-m">
<Flexbox
children={List([
<span>{role}</span>,

View file

@ -561,11 +561,11 @@ export class FilesPanel extends React.Component<Props, State, {}> {
</div>
<div className="column">
<div className="card margin-l-m">
<div className="card">
<span className="title-m dark-font">{modTimeTitle}</span>
<span className="font-s work-break-all">{modTimeFormatted}</span>
</div>
<div className="card margin-l-m">
<div className="card">
<span className="title-m dark-font">{sizeTitle}</span>
<span className="font-s work-break-all">{itemSize}</span>
</div>
@ -756,7 +756,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
);
const viewType = this.props.ui.control.controls.get(filesViewCtrl);
const view = (
<div id="item-rows">
<div className="margin-t-l">
{this.prepareColumns(this.props.filesInfo.items, showOp)}
</div>
); // TODO: support better views in the future
@ -800,7 +800,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
</div>
<Container>
<div id="browser-op" className={`${showOp}`}>
<div className={`${showOp} margin-b-m`}>
<Flexbox
children={List([
<span>
@ -812,7 +812,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
this.props.filesInfo.dirPath.join("/")
);
}}
className="red-btn margin-r-m"
className="red0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.share.del")}
</button>
@ -833,7 +833,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<button
type="button"
onClick={() => this.delete()}
className="red-btn margin-r-m"
className="red0-bg white-font margin-r-m"
>
{this.props.msg.pkg.get("browser.delete")}
</button>
@ -869,7 +869,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
<span className={`${showOp}`}>
<button
onClick={() => this.selectAll()}
className="select-btn button-default"
className="inline-block button-default"
>
{this.props.msg.pkg.get("browser.selectAll")}
</button>

View file

@ -131,7 +131,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
);
const elem = (
<div className="sharing-item" key={dirPath}>
<div className="margin-t-m margin-b-m" key={dirPath}>
{row1}
<div className="desc">{sharingURL}</div>
<div className="hr"></div>

View file

@ -151,10 +151,10 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
);
const elem = (
<div key={uploading.filePath} className="upload-item">
<div className={`font-s l-col`}>
<span className="title">{fileName}&nbsp;</span>
<span className="desc grey0-font">
<div key={uploading.filePath} className="margin-t-m margin-b-m">
<div className={`font-s col-l`}>
<span className="font-s work-break-all">{`${fileName} - `}</span>
<span className="font-s work-break-all grey0-font">
{FileSize(uploading.uploaded, { round: 0 })}
&nbsp;/&nbsp;
{FileSize(uploading.size, {
@ -165,8 +165,8 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
</span>
</div>
<div className="r-col">{operations}</div>
<div className="col-r">{operations}</div>
<div className="fix"></div>
{progressBar}
{errorInfo}
</div>

View file

@ -52,7 +52,8 @@ export class RootFrame extends React.Component<Props, State, {}> {
render() {
const bgStyle = this.makeBgStyle();
const theme = "theme-default";
const themeBlack = "theme-black";
const theme = themeBlack;
const fontSizeClass = "font-m";
const displaying = this.props.ui.control.controls.get(controlName);