diff --git a/src/UI/Components/SourceManage/FileItem.tsx b/src/UI/Components/SourceManage/FileItem.tsx index 5566b926c..e9928aa85 100644 --- a/src/UI/Components/SourceManage/FileItem.tsx +++ b/src/UI/Components/SourceManage/FileItem.tsx @@ -34,6 +34,8 @@ export class FileItem extends React.Component{ 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{ className="bp3-card bp3-elevation-0" style={{ display: "flex", - width: "100%", + // width: "100%", padding: "10px" }} > diff --git a/src/UI/Components/SourceManage/FilePanel.tsx b/src/UI/Components/SourceManage/FilePanel.tsx index 74cc3fe1e..855fa71c9 100644 --- a/src/UI/Components/SourceManage/FilePanel.tsx +++ b/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 className="bp3-card bp3-elevation-0" style={ { - display: this.props.isShow ? "block" : "none", - width: "80%", + display: "flex", + // width: "100%", + height: "100%", + flexDirection: "column", } }>
    diff --git a/src/UI/Components/SourceManage/MaterialPanel.tsx b/src/UI/Components/SourceManage/MaterialPanel.tsx index 6345a2e81..5705cd25d 100644 --- a/src/UI/Components/SourceManage/MaterialPanel.tsx +++ b/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 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" } }> diff --git a/src/UI/Components/SourceManage/SoucePanel.tsx b/src/UI/Components/SourceManage/SoucePanel.tsx index 0c60fa99c..48b144763 100644 --- a/src/UI/Components/SourceManage/SoucePanel.tsx +++ b/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 +
    我的贴图
    + +); + +const ModelPanel: React.SFC<{}> = () => ( + //todo +
    我的模型
    + +); + /** * 资源管理器面板 * TODO:贴图,模型面板组件,和材质组件类似 @@ -22,13 +35,16 @@ export interface SoucePanelState * @class SoucePanel * @extends {React.Component} */ + export default class SoucePanel extends React.Component { + ref: React.RefObject; 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 this.props.handleClose()} title="资源管理器" style={DialogStyle} + onOpening={() => + { + this.ref.current.parentElement.className = "bp3-dark bp3-dialog" + }} + >
    -
    -
    this.handleClick(0)} - > -
    我的文件
    -
    -
    this.handleClick(1)} - > -
    我的材质
    -
    -
    this.handleClick(2)} - > -
    我的贴图
    -
    -
    this.handleClick(3)} - > -
    我的模型
    -
    -
    - {/* TODO:相应数据传入 */} + + + } /> + } /> + } /> + } /> + + {/* TODO:相应数据传入 - + */}
    + +
    - + ); } } diff --git a/src/UI/Css/style.less b/src/UI/Css/style.less index 33936b44b..5ba9463f2 100644 --- a/src/UI/Css/style.less +++ b/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; +}