!1520 增强：显示文件大小按钮运用于材质和贴图中

src/UI/Components/SourceManage/FileList.tsx

@@ -23,6 +23,7 @@ export interface IFileListProps
     copy?: Function;
     paste?: Function;
     copyIds?: Set<string>;
+    isShowSize?: boolean;
 }
 
 
@@ -166,23 +167,15 @@ export class FileList extends React.Component<IFileListProps, {}> {
                         />
                     }
                     renderOtherElement={(data) =>
-                        this.isShowSize &&
+                        this.props.isShowSize &&
                         <Card style={{
                             position: "absolute",
-                            left: 5,
-                            bottom: 60,
+                            right: "5%",
+                            bottom: 65,
                             padding: 0,
                         }}>{getFileSize(parseFloat(data.size))}</Card>
                     }
                 />
-                {
-                    !this.props.showInfos && < Checkbox
-                        checked={this.isShowSize}
-                        label="显示文件大小"
-                        style={{ width: "max-content" }}
-                        onChange={() => this.isShowSize = !this.isShowSize}
-                    />
-                }
             </>
         );
     }

src/UI/Components/SourceManage/FilePanel.tsx

@@ -16,12 +16,17 @@ import { CommonPanel, IDirectoryProps } from './CommonPanel';
 import { FileList as CFileList } from './FileList';
 import { HandleDirComponent } from './HandleDirComponent';
 
+export interface Props
+{
+    isShowSize?: boolean;
+    store?: TopPanelStore;
+}
 /**
  * 我的文件列表
  */
 @inject("store")
 @observer
-export class FilePanel extends React.Component<{ store?: TopPanelStore; }, {}>
+export class FilePanel extends React.Component<Props, {}>
 {
     commonPanel: CommonPanel;
     private canCreateFile = observable.box(false);
@@ -284,6 +289,7 @@ export class FilePanel extends React.Component<{ store?: TopPanelStore; }, {}>
                 <CFileList
                     isRename={this.canCreateFile}
                     info={this.currentFileInfo}
+                    isShowSize={this.props.isShowSize}
                 />
                 {
                     this.canCreateFile.get() && <HandleDirComponent

src/UI/Components/SourceManage/ImgList.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { MaterialStore } from '../../Store/MaterialStore';
 import { observable } from 'mobx';
 import { DataList } from '../Common/Datalist';
+import { getFileSize } from '../../../Common/Utils';
 
 export interface IImgListProps
 {
@@ -13,6 +14,7 @@ export interface IImgListProps
     select?: (e, data) => void;
     selectIds?: Set<string>;
     showInfos?: boolean;
+    isShowSize?: boolean;
 }
 
 @inject('store')
@@ -91,6 +93,16 @@ export class ImgList extends React.Component<IImgListProps, {}> {
                             </>
                         }
                     </>}
+                    renderOtherElement={(data) =>
+                        this.props.isShowSize &&
+                        <Card style={{
+                            position: "absolute",
+                            right: "5%",
+                            bottom: "2.5%",
+                            padding: 0,
+                            backgroundColor: "#e4ccaf",
+                        }}>{getFileSize(parseFloat(data.size))}</Card>
+                    }
                 />
             </>
         );

src/UI/Components/SourceManage/MaterialList.tsx

@@ -1,14 +1,15 @@
-import { Button, Card, Checkbox, Classes, ContextMenu, MenuItem, Intent } from '@blueprintjs/core';
+import { Button, Card, Classes, ContextMenu, MenuItem, Intent } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { PostJson, RequestStatus } from '../../../Common/Request';
 import { appUi } from '../../Layout/ApplicationLayout';
 import { AppToaster } from '../Toaster';
 import { inflate, MaterialIn, MaterialInAndAppendAppData } from '../../../Common/SerializeMaterial';
-import { MaterialUrls, CURRENT_HOST, PublishMaterialUrl } from '../../../Common/HostUrl';
+import { MaterialUrls, PublishMaterialUrl } from '../../../Common/HostUrl';
 import { observable } from 'mobx';
 import { Menu } from '@blueprintjs/core';
 import { DataList } from '../Common/Datalist';
+import { getFileSize } from '../../../Common/Utils';
 
 export interface IImgListProps
 {
@@ -18,11 +19,11 @@ export interface IImgListProps
     getData?: () => void;
     selectIds?: Set<string>;
     showInfos?: boolean;
+    isShowSize?: boolean;
 }
 
 @observer
 export class MaterialList extends React.Component<IImgListProps, {}> {
-    @observable private isShowSize = false;
     private readyMtl: { material_id: string; };
     private handleGetMtlJson = async (mat: { material_id: string; }): Promise<string | undefined> =>
     {
@@ -108,6 +109,16 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
                         </>
                     }
                 </>}
+                renderOtherElement={(data) =>
+                    this.props.isShowSize &&
+                    <Card style={{
+                        position: "absolute",
+                        right: "5%",
+                        bottom: "20%",
+                        padding: 0,
+                        backgroundColor: "#e4ccaf",
+                    }}>{getFileSize(parseFloat(data.size))}</Card>
+                }
             />
         );
     }

src/UI/Components/SourceManage/MaterialPanel.tsx

@@ -13,17 +13,15 @@ import './TexturePanel.less';
 
 interface IMaterialProps
 {
-}
-interface IMaterialState
-{
+    isShowSize?: boolean;
 }
 
 /**
  * 材质管理器面板
- * 
+ *
  */
 @observer
-export class MaterialPanel extends React.Component<IMaterialProps, IMaterialState>
+export class MaterialPanel extends React.Component<IMaterialProps, {}>
 {
     private startCreateMat = observable.box(false);
     constructor(props)
@@ -73,7 +71,7 @@ export class MaterialPanel extends React.Component<IMaterialProps, IMaterialStat
                 getUrl={MaterialUrls.get}
                 deleteUrl={MaterialUrls.delete}
             >
-                <MaterialList />
+                <MaterialList isShowSize={this.props.isShowSize} />
                 {
                     this.startCreateMat.get() &&
                     <MaterialContainer

src/UI/Components/SourceManage/SoucePanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Classes, Dialog, Tab, Tabs } from '@blueprintjs/core';
+import { Button, Checkbox, Classes, Dialog, Tab, Tabs } from '@blueprintjs/core';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { end } from 'xaop';
@@ -8,6 +8,7 @@ import { FilePanel } from './FilePanel';
 import { MaterialPanel } from './MaterialPanel';
 import { TexturePanel } from './TexturePanel';
 import { SpaceInfoBar } from './SpaceInfoBar';
+import { observable } from 'mobx';
 
 export interface SoucePanelState
 {
@@ -26,6 +27,7 @@ const ModelPanel = () => <h5>我的模型</h5>;
 export default class SoucePanel extends React.Component<{ store?: TopPanelStore; }, {}> {
     ref: React.RefObject<HTMLDivElement>;
     removeReg: Function;
+    @observable isShowSize = false;
     constructor(p)
     {
         super(p);
@@ -91,9 +93,9 @@ export default class SoucePanel extends React.Component<{ store?: TopPanelStore;
                         vertical={true}
                         renderActiveTabPanelOnly
                     >
-                        <Tab id="f1" title="我的文件" panel={<FilePanel />} />
-                        <Tab id="mt" title="我的材质" panel={<MaterialPanel />} />
-                        <Tab id="tt" title="我的贴图" panel={<TexturePanel />} />
+                        <Tab id="f1" title="我的文件" panel={<FilePanel isShowSize={this.isShowSize} />} />
+                        <Tab id="mt" title="我的材质" panel={<MaterialPanel isShowSize={this.isShowSize} />} />
+                        <Tab id="tt" title="我的贴图" panel={<TexturePanel isShowSize={this.isShowSize} />} />
                         {/* <Tab id="md" title="我的模型" panel={<ModelPanel />} /> */}
                     </Tabs>
                     {/* TODO:相应数据传入
@@ -104,6 +106,14 @@ export default class SoucePanel extends React.Component<{ store?: TopPanelStore;
                 <div className="bp3-dialog-footer" style={{ padding: "10px 0" }}>
                     <div className="bp3-dialog-footer-actions flex-between">
                         <SpaceInfoBar />
+                        {
+                            < Checkbox
+                                checked={this.isShowSize}
+                                label="显示文件大小"
+                                style={{ width: "max-content", margin: "auto", left: "-18%" }}
+                                onChange={() => this.isShowSize = !this.isShowSize}
+                            />
+                        }
                         <Button
                             text="关闭"
                             className="bp3-intent-danger"

src/UI/Components/SourceManage/TexturePanel.tsx

@@ -14,6 +14,7 @@ interface ITexturePanelState
 }
 interface ITexturePanelProps
 {
+    isShowSize?: boolean;
     store?: MaterialStore;
 }
 /**
@@ -65,7 +66,7 @@ export class TexturePanel extends React.Component<ITexturePanelProps, ITexturePa
                 deleteUrl={ImgsUrl.delete}
                 canOrder={false}
             >
-                <ImgList />
+                <ImgList isShowSize={this.props.isShowSize} />
                 <UploadComponent
                     isOpen={this.startUpload}
                 />

src/UI/Css/dataList.less

@@ -52,6 +52,10 @@
             position: absolute;
             left    : 0;
         }
+
+        p{
+            margin-bottom: 15px;
+        }
     }
 }