From 09a23e93f26dea4f514b511fc403b12d65dc5704 Mon Sep 17 00:00:00 2001 From: tengge1 <930372551@qq.com> Date: Mon, 5 Aug 2019 21:20:55 +0800 Subject: [PATCH] OptionsWindow --- .../src/editor2/menu/OptionsMenu.jsx | 37 ++++++---------- .../src/editor2/window/OptionsWindow.jsx | 35 +++++++++++++--- .../src/editor2/window/css/OptionsWindow.css | 11 +++++ .../editor2/window/options/FilterPanel.jsx | 18 ++++++++ .../editor2/window/options/HelperPanel.jsx | 18 ++++++++ .../editor2/window/options/RendererPanel.jsx | 42 +------------------ ShadowEditor.Web/src/ui/layout/TabLayout.jsx | 8 ++-- ShadowEditor.Web/src/ui/window/css/Window.css | 14 +++---- 8 files changed, 101 insertions(+), 82 deletions(-) create mode 100644 ShadowEditor.Web/src/editor2/window/css/OptionsWindow.css diff --git a/ShadowEditor.Web/src/editor2/menu/OptionsMenu.jsx b/ShadowEditor.Web/src/editor2/menu/OptionsMenu.jsx index 97c0c929..0f4c1615 100644 --- a/ShadowEditor.Web/src/editor2/menu/OptionsMenu.jsx +++ b/ShadowEditor.Web/src/editor2/menu/OptionsMenu.jsx @@ -1,4 +1,5 @@ import { classNames, PropTypes, MenuBar, MenuItem, MenuItemSeparator } from '../../third_party'; +import OptionsWindow from '../window/OptionsWindow.jsx'; /** * 选项菜单 @@ -34,40 +35,28 @@ class OptionsMenu extends React.Component { // ---------------------------------- 渲染器选项 ------------------------------------- handleRendererOptions() { - if (this.optionsWindow === undefined) { - this.optionsWindow = new OptionsWindow({ - app: app - }); - this.optionsWindow.render(); - } - this.optionsWindow.show(); - this.optionsWindow.changeTab(L_RENDERER); + let win = app.createElement(OptionsWindow, { + activeTab: 0, + }); + app.addElement(win); } // ------------------------------- 帮助器选项 ----------------------------------------- handleHelperOptions() { - if (this.optionsWindow === undefined) { - this.optionsWindow = new OptionsWindow({ - app: app - }); - this.optionsWindow.render(); - } - this.optionsWindow.show(); - this.optionsWindow.changeTab(L_HELPERS); + let win = app.createElement(OptionsWindow, { + activeTab: 1, + }); + app.addElement(win); } // ------------------------------ 滤镜选项 --------------------------------------------- handleFilterOptions() { - if (this.optionsWindow === undefined) { - this.optionsWindow = new OptionsWindow({ - app: app - }); - this.optionsWindow.render(); - } - this.optionsWindow.show(); - this.optionsWindow.changeTab(L_FILTER); + let win = app.createElement(OptionsWindow, { + activeTab: 2, + }); + app.addElement(win); } // ---------------------------- 语言选项 ------------------------------------------------- diff --git a/ShadowEditor.Web/src/editor2/window/OptionsWindow.jsx b/ShadowEditor.Web/src/editor2/window/OptionsWindow.jsx index 7fc9a4b0..e20fb296 100644 --- a/ShadowEditor.Web/src/editor2/window/OptionsWindow.jsx +++ b/ShadowEditor.Web/src/editor2/window/OptionsWindow.jsx @@ -1,5 +1,9 @@ -import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../../third_party'; -import Ajax from '../../../utils/Ajax'; +import './css/OptionsWindow.css'; +import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../third_party'; +import RendererPanel from './options/RendererPanel.jsx'; +import HelperPanel from './options/HelperPanel.jsx'; +import FilterPanel from './options/FilterPanel.jsx'; +import Ajax from '../../utils/Ajax'; /** * 选项窗口 @@ -17,18 +21,23 @@ class OptionsWindow extends React.Component { this.handleSave = this.handleSave.bind(this); this.handleClose = this.handleClose.bind(this); + this.handleActiveTabChange = this.handleActiveTabChange.bind(this); } render() { const { activeTab } = this.state; return - + + + + @@ -51,8 +60,22 @@ class OptionsWindow extends React.Component { } handleClose() { + app.removeElement(this); + } + + handleActiveTabChange() { } } +OptionsWindow.propTypes = { + activeTab: PropTypes.number, + onActiveTabChange: PropTypes.func, +}; + +OptionsWindow.defaultProps = { + activeTab: 0, + onActiveTabChange: null, +}; + export default OptionsWindow; \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor2/window/css/OptionsWindow.css b/ShadowEditor.Web/src/editor2/window/css/OptionsWindow.css new file mode 100644 index 00000000..4d5fbca5 --- /dev/null +++ b/ShadowEditor.Web/src/editor2/window/css/OptionsWindow.css @@ -0,0 +1,11 @@ +.Window.OptionsWindow>.wrap>.content { + left: 4px; + right: 4px; + top: 24px; + bottom: 32px; +} + +.Window.OptionsWindow>.wrap>.content>.tab { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor2/window/options/FilterPanel.jsx b/ShadowEditor.Web/src/editor2/window/options/FilterPanel.jsx index e69de29b..5ecfa053 100644 --- a/ShadowEditor.Web/src/editor2/window/options/FilterPanel.jsx +++ b/ShadowEditor.Web/src/editor2/window/options/FilterPanel.jsx @@ -0,0 +1,18 @@ +import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../../third_party'; +import Ajax from '../../../utils/Ajax'; + +/** + * 滤镜窗口 + * @author tengge / https://github.com/tengge1 + */ +class FilterPanel extends React.Component { + constructor(props) { + super(props); + } + + render() { + return
FilterPanel
; + } +} + +export default FilterPanel; \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor2/window/options/HelperPanel.jsx b/ShadowEditor.Web/src/editor2/window/options/HelperPanel.jsx index e69de29b..54955972 100644 --- a/ShadowEditor.Web/src/editor2/window/options/HelperPanel.jsx +++ b/ShadowEditor.Web/src/editor2/window/options/HelperPanel.jsx @@ -0,0 +1,18 @@ +import { classNames, PropTypes, Window, Content, TabLayout, Buttons, Button } from '../../../third_party'; +import Ajax from '../../../utils/Ajax'; + +/** + * 帮助器窗口 + * @author tengge / https://github.com/tengge1 + */ +class HelperPanel extends React.Component { + constructor(props) { + super(props); + } + + render() { + return
HelperPanel
; + } +} + +export default HelperPanel; \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor2/window/options/RendererPanel.jsx b/ShadowEditor.Web/src/editor2/window/options/RendererPanel.jsx index 69cd7ed9..4b836972 100644 --- a/ShadowEditor.Web/src/editor2/window/options/RendererPanel.jsx +++ b/ShadowEditor.Web/src/editor2/window/options/RendererPanel.jsx @@ -8,50 +8,10 @@ import Ajax from '../../../utils/Ajax'; class RendererPanel extends React.Component { constructor(props) { super(props); - - this.state = { - activeTab: 0, - }; - - this.updateUI = this.updateUI.bind(this); - - this.handleSave = this.handleSave.bind(this); - this.handleClose = this.handleClose.bind(this); } render() { - const { activeTab } = this.state; - - return - - - - - - - - - ; - } - - componentDidMount() { - this.updateUI(); - } - - updateUI() { - - } - - handleSave() { - - } - - handleClose() { - + return
RendererPanel
; } } diff --git a/ShadowEditor.Web/src/ui/layout/TabLayout.jsx b/ShadowEditor.Web/src/ui/layout/TabLayout.jsx index 730b947a..69b041ba 100644 --- a/ShadowEditor.Web/src/ui/layout/TabLayout.jsx +++ b/ShadowEditor.Web/src/ui/layout/TabLayout.jsx @@ -25,11 +25,11 @@ class TabLayout extends React.Component { } render() { - const { className, style, children, activeTab, ...others } = this.props; + const { className, style, children, activeTab } = this.props; return
-
- {children.map((n, i) => { +
+ {React.Children.map(children, (n, i) => { return
- {children.map((n, i) => { + {React.Children.map(children, (n, i) => { return
{n}
; })}
diff --git a/ShadowEditor.Web/src/ui/window/css/Window.css b/ShadowEditor.Web/src/ui/window/css/Window.css index 71909b7c..e55575ff 100644 --- a/ShadowEditor.Web/src/ui/window/css/Window.css +++ b/ShadowEditor.Web/src/ui/window/css/Window.css @@ -33,14 +33,14 @@ z-index: 200; } -.Window .wrap { +.Window>.wrap { position: relative; width: 100%; height: 100%; background: #fff; } -.Window .wrap .title { +.Window>.wrap .title { font-size: 14px; line-height: 24px; color: #fff; @@ -52,7 +52,7 @@ overflow: hidden; } -.Window .wrap .title .controls { +.Window>.wrap>.title>.controls { position: absolute; left: 0; top: 0; @@ -62,7 +62,7 @@ user-select: none; } -.Window .wrap .title .controls .icon { +.Window>.wrap>.title>.controls>.icon { width: 16px; height: 24px; margin-right: 4px; @@ -71,7 +71,7 @@ cursor: pointer; } -.Window .wrap .content { +.Window>.wrap>.content { position: absolute; left: 20px; right: 20px; @@ -81,7 +81,7 @@ overflow: hidden; } -.Window .wrap .buttons { +.Window>.wrap>.buttons { position: absolute; left: 0; right: 0; @@ -92,7 +92,7 @@ overflow: hidden; } -.Window .wrap .buttons .button-wrap { +.Window>.wrap>.buttons>.button-wrap { position: relative; height: 24px; margin: 4px;