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