fix(fe/panel_files): add banner if the folder is empty

This commit is contained in:
hexxa 2022-04-05 16:50:07 +08:00 committed by Hexxa
parent 26a2c7ea46
commit fc3101d33f
4 changed files with 17 additions and 8 deletions

View file

@ -34,6 +34,7 @@ import {
import { HotkeyHandler } from "../common/hotkeys"; import { HotkeyHandler } from "../common/hotkeys";
import { CronTable } from "../common/cron"; import { CronTable } from "../common/cron";
import { Title } from "./visual/title"; import { Title } from "./visual/title";
import { NotFoundBanner } from "./visual/banner_notfound";
export interface Item { export interface Item {
name: string; name: string;
@ -772,10 +773,16 @@ export class FilesPanel extends React.Component<Props, State, {}> {
/> />
); );
const viewType = this.props.ui.control.controls.get(filesViewCtrl); const viewType = this.props.ui.control.controls.get(filesViewCtrl);
const view = ( const view =
this.props.filesInfo.items.size > 0 ? (
<div>
{orderByButtons}
<div className="margin-t-l"> <div className="margin-t-l">
{this.prepareColumns(this.props.filesInfo.items, showOp)} {this.prepareColumns(this.props.filesInfo.items, showOp)}
</div> </div>
</div>
) : (
<NotFoundBanner title={this.props.msg.pkg.get("terms.nothingHere")} />
); // TODO: support better views in the future ); // TODO: support better views in the future
const usedSpace = FileSize( const usedSpace = FileSize(
@ -925,7 +932,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
/> />
<div className="hr grey0-bg"></div> <div className="hr grey0-bg"></div>
{orderByButtons}
{view} {view}
</Container> </Container>
</div> </div>

View file

@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import { List } from "immutable"; import { List } from "immutable";
import { RiQuestionnaireFill } from "@react-icons/all-files/ri/RiQuestionnaireFill"; import { RiFileList2Fill } from "@react-icons/all-files/ri/RiFileList2Fill";
import { Flexbox } from "../layout/flexbox"; import { Flexbox } from "../layout/flexbox";
@ -13,7 +13,7 @@ export const NotFoundBanner = (props: Props) => {
return ( return (
<Flexbox <Flexbox
children={List([ children={List([
<RiQuestionnaireFill size="4rem" className="margin-r-m red0-font" />, <RiFileList2Fill size="4rem" className="margin-r-m normal-font" />,
<span> <span>
<h3 className="title-l">{props.title}</h3> <h3 className="title-l">{props.title}</h3>
</span>, </span>,

View file

@ -1,6 +1,7 @@
import { Map } from "immutable"; import { Map } from "immutable";
export const msgs: Map<string, string> = Map({ export const msgs: Map<string, string> = Map({
"terms.nothingHere": "There is nothing here",
"stateMgr.cap.fail": "failed to get captcha id", "stateMgr.cap.fail": "failed to get captcha id",
"browser.upload.del.fail": "Failed to delete uploading item", "browser.upload.del.fail": "Failed to delete uploading item",
"browser.folder.add.fail": "Folder name can not be empty", "browser.folder.add.fail": "Folder name can not be empty",

View file

@ -2,6 +2,7 @@ import { Map } from "immutable";
export const msgs: Map<string, string> = Map({ export const msgs: Map<string, string> = Map({
"stateMgr.cap.fail": "获取captcha id失败", "stateMgr.cap.fail": "获取captcha id失败",
"terms.nothingHere": "这里空空如也",
"browser.upload.del.fail": "删除上传失败", "browser.upload.del.fail": "删除上传失败",
"browser.folder.add.fail": "文件夹名不可为空", "browser.folder.add.fail": "文件夹名不可为空",
"browser.del.fail": "至少选择一个文件或文件夹", "browser.del.fail": "至少选择一个文件或文件夹",