!84 资源管理器对话框UI优化

Merge pull request !84 from 肖诗雅/SourceManageDialog

src/UI/Components/SourceManage/FileItem.tsx

@@ -34,6 +34,8 @@ export class FileItem extends React.Component<FileItemProps, FileItemState>{
         const inputStyle: React.CSSProperties = {
             outline: "none",
             border: "none",
+            backgroundColor: '#30404d',
+            color: '#ffffff',
             fontSize: "17px",
             fontWeight: "bold"
         }
@@ -46,7 +48,7 @@ export class FileItem extends React.Component<FileItemProps, FileItemState>{
                 className="bp3-card bp3-elevation-0"
                 style={{
                     display: "flex",
-                    width: "100%",
+                    // width: "100%",
                     padding: "10px"
                 }}
             >

src/UI/Components/SourceManage/FilePanel.tsx

@@ -12,7 +12,7 @@ import { FileItem } from './FileItem';
 
 interface FileProps
 {
-    isShow: boolean,
+    // isShow: boolean,
     callback?: Function
 
 }
@@ -190,8 +190,10 @@ export class FilePanel extends React.Component<FileProps, FileState>
                 className="bp3-card bp3-elevation-0"
                 style={
                     {
-                        display: this.props.isShow ? "block" : "none",
-                        width: "80%",
+                        display: "flex",
+                        // width: "100%",
+                        height: "100%",
+                        flexDirection: "column",
                     }
                 }>
                 <nav className="bp3-navbar bp3-card bp3-elevation-0 .modifier">
@@ -231,13 +233,18 @@ export class FilePanel extends React.Component<FileProps, FileState>
                             value={this.seachString}
                         />
                     </div>
+
                 </nav>
                 <ul className="ul-unstyle"
                     ref={this.filesRef}
                     style={
                         {
                             overflow: "auto",
-                            height: 580
+                            height: 580,
+                            border: "1px solid #0e2535",
+                            borderRadius: "3px",
+                            flexBasis: 0,
+                            flexGrow: 1
                         }
                     }
                 >

src/UI/Components/SourceManage/MaterialPanel.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 interface MaterialProps
 {
-    isShow: boolean;
+    // isShow: boolean;
 }
 /**
  * 材质管理器面板
@@ -27,8 +27,8 @@ export class MaterialPanel extends React.Component<MaterialProps, {}>
                 className="bp3-card bp3-elevation-0"
                 style={
                     {
-                        display: this.props.isShow ? "block" : "none",
-                        width: "80%",
+                        // display: this.props.isShow ? "block" : "none",
+                        display: "block",
                         overflow: "auto"
                     }
                 }>

src/UI/Components/SourceManage/SoucePanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tab, Tabs, TabId } from '@blueprintjs/core';
 import * as React from 'react';
 
 import { FilePanel } from './FilePanel';
@@ -14,6 +14,19 @@ export interface SoucePanelState
 {
     showIndex: number;
 }
+
+const TexturePanel: React.SFC<{}> = () => (
+    //todo
+    <h5>我的贴图</h5>
+
+);
+
+const ModelPanel: React.SFC<{}> = () => (
+    //todo
+    <h5>我的模型</h5>
+
+);
+
 /**
  * 资源管理器面板
  * TODO:贴图，模型面板组件，和材质组件类似
@@ -22,13 +35,16 @@ export interface SoucePanelState
  * @class SoucePanel
  * @extends {React.Component<SoucePanelProps, SoucePanelState>}
  */
+
 export default class SoucePanel extends React.Component<SoucePanelProps, SoucePanelState> {
+    ref: React.RefObject<HTMLDivElement>;
     constructor(props: SoucePanelProps)
     {
         super(props);
         this.state = {
             showIndex: 0
         }
+        this.ref = React.createRef();
     }
     handleClick = (i: number) =>
     {
@@ -36,14 +52,22 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
             showIndex: i
         })
     }
+    componentDidMount()
+    {
+
+    }
+    componentDidUpdate()
+    {
+    }
+
+
     render()
     {
         const DialogStyle: React.CSSProperties = {
             position: "absolute",
             top: 0,
-            width: "80%",
-            height: window.innerHeight - 150,
-            minWidth: 755
+            width: "48%",
+            minWidth: 725
         }
         return (
             <Dialog
@@ -52,47 +76,35 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
                 onClose={() => this.props.handleClose()}
                 title="资源管理器"
                 style={DialogStyle}
+                onOpening={() =>
+                {
+                    this.ref.current.parentElement.className = "bp3-dark bp3-dialog"
+                }}
+
             >
                 <div
-                    className="bp3-dialog-body"
+                    ref={this.ref}
+                    className="souce-panel bp3-dialog-body"
                     style={{
                         display: "flex",
                         justifyContent: "space-between"
                     }}>
-                    <div style={
-                        {
-                            width: "20%"
-                        }
-                    }>
-                        <div
-                            className="bp3-card bp3-elevation-0 bp3-interactive"
-                            onClick={() => this.handleClick(0)}
-                        >
-                            <h5>我的文件</h5>
-                        </div>
-                        <div
-                            className="bp3-card bp3-elevation-0 bp3-interactive"
-                            onClick={() => this.handleClick(1)}
-                        >
-                            <h5>我的材质</h5>
-                        </div>
-                        <div
-                            className="bp3-card bp3-elevation-0 bp3-interactive"
-                            onClick={() => this.handleClick(2)}
-                        >
-                            <h5>我的贴图</h5>
-                        </div>
-                        <div
-                            className="bp3-card bp3-elevation-0 bp3-interactive"
-                            onClick={() => this.handleClick(3)}
+
+                    <Tabs
+                        id="Tabs"
+                        vertical={true}
                     >
-                            <h5>我的模型</h5>
-                        </div>
-                    </div>
-                    {/* TODO:相应数据传入 */}
+                        <Tab id="fl" title="我的文件" panel={<FilePanel callback={this.props.handleClose} />} />
+                        <Tab id="mt" title="我的材质" panel={<MaterialPanel />} />
+                        <Tab id="tt" title="我的贴图" panel={<TexturePanel />} />
+                        <Tab id="md" title="我的模型" panel={<ModelPanel />} />
+                    </Tabs>
+                    {/* TODO:相应数据传入
                     <FilePanel isShow={this.state.showIndex === 0} callback={this.props.handleClose} />
-                    <MaterialPanel isShow={this.state.showIndex === 1} />
+                    <MaterialPanel isShow={this.state.showIndex === 1} /> */}
                 </div>
+
+
                 <div className="bp3-dialog-footer">
                     <div className="bp3-dialog-footer-actions">
                         <Button
@@ -102,7 +114,7 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
                         />
                     </div>
                 </div>
-            </Dialog>
+            </Dialog >
         );
     }
 }

src/UI/Css/style.less

@@ -441,3 +441,16 @@ img {
 .button-marign {
     margin-right: 10px;
 }
+
+/****************修改蓝图源码*********************/
+.souce-panel{
+    .bp3-tabs,.bp3-tab-panel{
+        width:  100%;
+    }
+}
+
+.bp3-dialog-container
+{
+    align-content: stretch;
+    align-items: stretch;
+}