Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

修改资源管理器

Browse Source
pull/2/head
Zoe 7 years ago
parent 87d349c5ca
commit 9269753c9f
7 changed files with 310 additions and 133 deletions
Show Stats Download Patch File Download Diff File

2
src/UI/Components/Panel.tsx
Unescape View File

@ -4,7 +4,7 @@ import * as React from 'react';
import { DownPanelStore } from '../Store/DownPanelStore'; import { DownPanelStore } from '../Store/DownPanelStore';
import { Switch, Button, Collapse } from '@blueprintjs/core'; import { Switch, Button, Collapse } from '@blueprintjs/core';
import Login from './signComponent/login'; import Login from './signComponent/login';
import SoucePanel from './SoucePanel'; import SoucePanel from './SourceManage/SoucePanel';
const panelStyle: React.CSSProperties = { const panelStyle: React.CSSProperties = {
main: { main: {

131
src/UI/Components/SoucePanel.tsx
Unescape View File

@ -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>
);
}
}

67
src/UI/Components/SourceManage/FileItem.tsx
Unescape View File

@ -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>
)
}
}

46
src/UI/Components/SourceManage/FilePanel.tsx
Unescape View File

@ -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>
)
}
}

89
src/UI/Components/SourceManage/MaterialPanel.tsx
Unescape View File

@ -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>
)
}
}

100
src/UI/Components/SourceManage/SoucePanel.tsx
Unescape View File

@ -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>
);
}
}

8
src/UI/Css/style.less
Unescape View File

@ -366,6 +366,9 @@ input[type=radio] {
} }
/**********自定义通用样式*****************/ /**********自定义通用样式*****************/
ul,div{
box-sizing: border-box;
}
// 浮动 // 浮动
.pull-right{ .pull-right{
float: right;; float: right;;
@ -379,7 +382,7 @@ input[type=radio] {
} }
.ul-unstyle>li{ .ul-unstyle>li{
display: inline-block; display: inline-block;
margin: 0 12px; margin-right:12px;
} }
.half{ .half{
width: 50%; width: 50%;
@ -388,4 +391,7 @@ img{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.button-marign{
margin-right:10px;
}

Write Preview
Loading…
Cancel
Save