mirror of https://gitee.com/cf-fz/WebCAD.git
parent
87d349c5ca
commit
9269753c9f
@ -1,131 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Dialog, Button } from '@blueprintjs/core';
|
||||
|
||||
export interface SoucePanelProps
|
||||
{
|
||||
toggleDialog: Function,
|
||||
isOpen: boolean
|
||||
}
|
||||
|
||||
export interface SoucePanelState
|
||||
{
|
||||
text: any[]
|
||||
}
|
||||
|
||||
export default class SoucePanel extends React.Component<SoucePanelProps, SoucePanelState> {
|
||||
constructor(props: SoucePanelProps)
|
||||
{
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
text: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
}
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const DialogStyle: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
width: "80%",
|
||||
height: window.innerHeight - 150
|
||||
}
|
||||
return (
|
||||
<Dialog
|
||||
iconName="inbox"
|
||||
isOpen={this.props.isOpen}
|
||||
onClose={() => this.props.toggleDialog()}
|
||||
title="资源管理器"
|
||||
style={DialogStyle}
|
||||
>
|
||||
<div
|
||||
className="pt-dialog-body"
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
}}>
|
||||
<div style={
|
||||
{
|
||||
width: "20%"
|
||||
}
|
||||
}>
|
||||
<div className="pt-card pt-elevation-0 pt-interactive">
|
||||
<h5>我的文件</h5>
|
||||
</div>
|
||||
<div className="pt-card pt-elevation-0 pt-interactive">
|
||||
<h5>我的材质</h5>
|
||||
</div>
|
||||
<div className="pt-card pt-elevation-0 pt-interactive">
|
||||
<h5>我的贴图</h5>
|
||||
</div>
|
||||
<div className="pt-card pt-elevation-0 pt-interactive">
|
||||
<h5>我的模型</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pt-card pt-elevation-0"
|
||||
style={
|
||||
{
|
||||
width: "80%",
|
||||
overflow: "auto"
|
||||
}
|
||||
}>
|
||||
<ul className="ul-unstyle">
|
||||
{
|
||||
this.state.text.map((v, i) =>
|
||||
{
|
||||
return (
|
||||
<li
|
||||
className="pt-card pt-elevation-0"
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100 %",
|
||||
padding: 0
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<div
|
||||
className="pt-card pt-elevation-0 pt-interactive"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100
|
||||
}}
|
||||
>
|
||||
<img src="../textures/017.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{
|
||||
margin: 20
|
||||
}}>
|
||||
<span>文件名</span>
|
||||
</div>
|
||||
<div style={{
|
||||
margin: "0 20px"
|
||||
}}>
|
||||
<Button
|
||||
text="打开"
|
||||
className="pt-intent-danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-dialog-footer">
|
||||
<div className="pt-dialog-footer-actions">
|
||||
<Button
|
||||
text="关闭"
|
||||
className="pt-intent-danger"
|
||||
onClick={() => this.props.toggleDialog()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
@ -0,0 +1,67 @@
|
||||
import * as React from "react";
|
||||
import { Button } from "@blueprintjs/core";
|
||||
|
||||
interface FileItemProps
|
||||
{
|
||||
title: string
|
||||
}
|
||||
export class FileItem extends React.Component<FileItemProps, {}>{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
|
||||
}
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<li
|
||||
className="pt-card pt-elevation-0"
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100 %",
|
||||
padding: 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="pt-card pt-elevation-0 pt-interactive"
|
||||
style={{
|
||||
width: 120,
|
||||
height: 120
|
||||
}}
|
||||
>
|
||||
<img src="../textures/017.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{
|
||||
padding: 13
|
||||
}}>
|
||||
<h5>{this.props.title}</h5>
|
||||
<ul className="ul-unstyle">
|
||||
<li>杭州 未知小区</li>
|
||||
<li>共有0张渲染图</li>
|
||||
<li>最后修改时间: 2018-01-15 16:25:07</li>
|
||||
</ul>
|
||||
<ul className="ul-unstyle">
|
||||
<li>
|
||||
<Button
|
||||
text="打开"
|
||||
className="pt-intent-success"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
text="修改"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
text="下载"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,46 @@
|
||||
import * as React from "react";
|
||||
import { FileItem } from "./FileItem";
|
||||
|
||||
interface FileProps
|
||||
{
|
||||
isShow: boolean;
|
||||
}
|
||||
export class FilePanel extends React.Component<FileProps, {}>
|
||||
{
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<div
|
||||
className="pt-card pt-elevation-0"
|
||||
style={
|
||||
{
|
||||
display: this.props.isShow ? "block" : "none",
|
||||
width: "80%",
|
||||
overflow: "auto"
|
||||
}
|
||||
}>
|
||||
<nav className="pt-navbar pt-card pt-elevation-0 .modifier">
|
||||
<div className="pt-navbar-group pt-align-left">
|
||||
<button className="pt-button pt-minimal pt-icon-document">
|
||||
我的设计
|
||||
</button>
|
||||
<span className="pt-navbar-divider"></span>
|
||||
<button className="pt-button pt-minimal pt-icon-trash ">
|
||||
回收站
|
||||
</button>
|
||||
</div>
|
||||
<div className="pt-navbar-group pt-align-right">
|
||||
<input
|
||||
className="pt-input" placeholder="Search files..." type="text"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
<ul className="ul-unstyle">
|
||||
<FileItem
|
||||
title="文件名"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,89 @@
|
||||
import * as React from "react";
|
||||
|
||||
interface MaterialProps
|
||||
{
|
||||
isShow: boolean;
|
||||
}
|
||||
export class MaterialPanel extends React.Component<MaterialProps, {}>
|
||||
{
|
||||
MaterialList = [];
|
||||
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
/****测试用****/
|
||||
for (let i = 0; i < 100; i++)
|
||||
{
|
||||
this.MaterialList.push(i)
|
||||
}
|
||||
}
|
||||
render()
|
||||
{
|
||||
return (
|
||||
<div
|
||||
className="pt-card pt-elevation-0"
|
||||
style={
|
||||
{
|
||||
display: this.props.isShow ? "block" : "none",
|
||||
width: "80%",
|
||||
overflow: "auto"
|
||||
}
|
||||
}>
|
||||
<nav className="pt-navbar pt-card pt-elevation-0 .modifier">
|
||||
<div className="pt-navbar-group pt-align-left">
|
||||
<button className="pt-button pt-minimal pt-icon-document">
|
||||
我的材质
|
||||
</button>
|
||||
<span className="pt-navbar-divider"></span>
|
||||
<button className="pt-button pt-minimal pt-icon-trash ">
|
||||
回收站
|
||||
</button>
|
||||
</div>
|
||||
<div className="pt-navbar-group pt-align-right">
|
||||
<input
|
||||
className="pt-input" placeholder="Search Materials..." type="text"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
className="pt-card pt-elevation-0"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
{
|
||||
this.MaterialList.map((v, i) =>
|
||||
{
|
||||
return (
|
||||
<div
|
||||
className="pt-card pt-elevation-0"
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
textAlign: "center",
|
||||
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<img src="../textures/017.jpg" alt="" />
|
||||
<div
|
||||
style={{
|
||||
marginTop: 7
|
||||
}}
|
||||
>
|
||||
材质名
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,100 @@
|
||||
import * as React from 'react';
|
||||
import { Dialog, Button } from '@blueprintjs/core';
|
||||
import { FilePanel } from './FilePanel';
|
||||
import { MaterialPanel } from './MaterialPanel';
|
||||
|
||||
export interface SoucePanelProps
|
||||
{
|
||||
toggleDialog: Function,
|
||||
isOpen: boolean
|
||||
}
|
||||
|
||||
export interface SoucePanelState
|
||||
{
|
||||
showIndex: number;
|
||||
}
|
||||
|
||||
export default class SoucePanel extends React.Component<SoucePanelProps, SoucePanelState> {
|
||||
constructor(props: SoucePanelProps)
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
showIndex: 0
|
||||
}
|
||||
|
||||
}
|
||||
handleClick = (i: number) =>
|
||||
{
|
||||
this.setState({
|
||||
showIndex: i
|
||||
})
|
||||
}
|
||||
render()
|
||||
{
|
||||
const DialogStyle: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
width: "80%",
|
||||
height: window.innerHeight - 150
|
||||
}
|
||||
return (
|
||||
<Dialog
|
||||
iconName="inbox"
|
||||
isOpen={this.props.isOpen}
|
||||
onClose={() => this.props.toggleDialog()}
|
||||
title="资源管理器"
|
||||
style={DialogStyle}
|
||||
>
|
||||
<div
|
||||
className="pt-dialog-body"
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
}}>
|
||||
<div style={
|
||||
{
|
||||
width: "20%"
|
||||
}
|
||||
}>
|
||||
<div
|
||||
className="pt-card pt-elevation-0 pt-interactive"
|
||||
onClick={() => this.handleClick(0)}
|
||||
>
|
||||
<h5>我的文件</h5>
|
||||
</div>
|
||||
<div
|
||||
className="pt-card pt-elevation-0 pt-interactive"
|
||||
onClick={() => this.handleClick(1)}
|
||||
>
|
||||
<h5>我的材质</h5>
|
||||
</div>
|
||||
<div
|
||||
className="pt-card pt-elevation-0 pt-interactive"
|
||||
onClick={() => this.handleClick(2)}
|
||||
>
|
||||
<h5>我的贴图</h5>
|
||||
</div>
|
||||
<div
|
||||
className="pt-card pt-elevation-0 pt-interactive"
|
||||
onClick={() => this.handleClick(3)}
|
||||
>
|
||||
<h5>我的模型</h5>
|
||||
</div>
|
||||
</div>
|
||||
<FilePanel isShow={this.state.showIndex === 0} />
|
||||
<MaterialPanel isShow={this.state.showIndex === 1} />
|
||||
</div>
|
||||
<div className="pt-dialog-footer">
|
||||
<div className="pt-dialog-footer-actions">
|
||||
<Button
|
||||
text="关闭"
|
||||
className="pt-intent-danger"
|
||||
onClick={() => this.props.toggleDialog()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in new issue