mirror of https://gitee.com/cf-fz/WebCAD.git
parent
1bcc1731e7
commit
66e0d7fff3
@ -0,0 +1,37 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export interface SettingPanelProps
|
||||||
|
{
|
||||||
|
handleClose: Function,
|
||||||
|
isOpen: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SettingPanelState
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SettingPanel extends React.Component<SettingPanelProps, SettingPanelState> {
|
||||||
|
constructor(props: SettingPanelProps)
|
||||||
|
{
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
let mainStyle: React.CSSProperties = {
|
||||||
|
width: 100,
|
||||||
|
height: 480,
|
||||||
|
position: "fixed",
|
||||||
|
right: 0,
|
||||||
|
top: 70
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div style={Object.assign({}, mainStyle, { display: this.props.isOpen ? "block" : "none" })}>
|
||||||
|
//TODO:需要设置的内容,界面主题颜色
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,62 @@
|
|||||||
|
import { autorun } from 'mobx';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { DownPanelStore } from '../../Store/DownPanelStore';
|
||||||
|
|
||||||
|
export interface ToolBarProps
|
||||||
|
{
|
||||||
|
execFun: Function,
|
||||||
|
cmdList: string[],
|
||||||
|
iconIndexList: number[],
|
||||||
|
iconUrl: string,
|
||||||
|
}
|
||||||
|
export interface ToolBarState
|
||||||
|
{
|
||||||
|
isShow: boolean
|
||||||
|
}
|
||||||
|
export class ToolBar extends React.Component<ToolBarProps, ToolBarState> {
|
||||||
|
constructor(props: ToolBarProps)
|
||||||
|
{
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
isShow: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
componentDidMount()
|
||||||
|
{
|
||||||
|
autorun(() =>
|
||||||
|
{
|
||||||
|
this.setState({ isShow: DownPanelStore.Store().showToolBar });
|
||||||
|
})
|
||||||
|
}
|
||||||
|
render()
|
||||||
|
{
|
||||||
|
let bgImgStyle: React.CSSProperties = {
|
||||||
|
backgroundImage: `url(${this.props.iconUrl})`,
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
width: 22,
|
||||||
|
height: 22
|
||||||
|
}
|
||||||
|
let iconIndexList = this.props.iconIndexList;
|
||||||
|
let cmdList = this.props.cmdList;
|
||||||
|
return (
|
||||||
|
<ul className="ul-unstyle" style={{ display: this.state.isShow ? "block" : 'none', background: "#394b59" }}>
|
||||||
|
{
|
||||||
|
cmdList.map((cmd, index) =>
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<li key={index} title={cmd}>
|
||||||
|
<button
|
||||||
|
style={Object.assign({}, bgImgStyle,
|
||||||
|
{ bgImgStyle, backgroundPosition: `-3px ${-22 * iconIndexList[index]}px` }
|
||||||
|
)}
|
||||||
|
onClick={() => this.props.execFun(cmd)}
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</li>)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 6.6 KiB |
Loading…
Reference in new issue