[WIP] Add Behavior tab to newIDE ObjectEditorDialog

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/SpritesList.js

@@ -121,7 +121,7 @@ export default class SpritesList extends Component {
   render() {
     return (
       <div>
-        <MiniToolbar justifyContent="flex-end">
+        <MiniToolbar justifyContent="flex-end" smallest>
           <DirectionTools direction={this.props.direction} />
         </MiniToolbar>
         <SortableList

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/index.js

@@ -60,7 +60,7 @@ class Animation extends Component {
 
     return (
       <GridTile>
-        <MiniToolbar>
+        <MiniToolbar smallest>
           <DragHandle />
           <span style={styles.animationTitle}>
             Animation #

newIDE/app/src/ObjectEditor/ObjectEditorDialog.js

@@ -2,6 +2,14 @@ import React, { Component } from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import ObjectsEditorService from './ObjectsEditorService';
 import Dialog from '../UI/Dialog';
+import { Column, Line } from '../UI/Grid';
+import { Tabs, Tab } from 'material-ui/Tabs';
+
+const styles = {
+  titleContainer: {
+    padding: 0,
+  }
+}
 
 export default class ObjectEditorDialog extends Component {
   constructor(props) {
@@ -9,6 +17,7 @@ export default class ObjectEditorDialog extends Component {
 
     this.state = {
       editor: null,
+      currentTab: 'properties',
     };
   }
 
@@ -25,6 +34,12 @@ export default class ObjectEditorDialog extends Component {
     }
   }
 
+  _onChangeTab = value => {
+    this.setState({
+      currentTab: value,
+    });
+  };
+
   _onApply = () => {
     if (this.props.onApply) this.props.onApply();
   };
@@ -42,7 +57,6 @@ export default class ObjectEditorDialog extends Component {
     if (!editor) return null;
 
     const actions = [
-      <FlatButton label="Cancel" primary onTouchTap={this.props.onCancel} />,
       <FlatButton
         label="Apply"
         primary
@@ -52,23 +66,41 @@ export default class ObjectEditorDialog extends Component {
     ];
 
     const EditorComponent = editor.component;
-    const containerProps = editor.containerProps;
+    // const containerProps = editor.containerProps;
+    const { currentTab } = this.state;
 
     return (
       <Dialog
+        key={this.props.object && this.props.object.ptr}
         actions={actions}
         autoScrollBodyContent
-        {...containerProps}
+        noMargin
         modal
         onRequestClose={this.props.onCancel}
+        repositionOnUpdate={false}
         open={this.props.open}
+        title={
+          <div>
+            <Tabs value={currentTab} onChange={this._onChangeTab}>
+              <Tab label="Properties" value={'properties'} key={'properties'} />
+              <Tab label="Behaviors" value={'behaviors'} key={'behaviors'} />
+            </Tabs>
+          </div>
+        }
+        titleStyle={styles.titleContainer}
       >
-        {EditorComponent &&
+        {currentTab === 'properties' &&
+          EditorComponent &&
           <EditorComponent
             object={this.props.object}
             project={this.props.project}
             resourceSources={this.props.resourceSources}
           />}
+        {currentTab === 'behaviors' &&
+          <Column>
+            <Line>Behaviors are not available yet</Line>
+          </Column>}
+
       </Dialog>
     );
   }

newIDE/app/src/UI/MiniToolbar.js

@@ -5,16 +5,19 @@ const style = {
   display: 'flex',
   alignItems: 'center',
   height: 34,
+  paddingLeft: 5,
+  paddingRight: 5,
 };
 
 class ThemableMiniToolbar extends Component {
   render() {
-    const { muiTheme, justifyContent } = this.props;
+    const { muiTheme, justifyContent, smallest } = this.props;
 
     return (
       <div
         style={{
           ...style,
+          height: smallest ? 34 : 48,
           backgroundColor: muiTheme.toolbar.backgroundColor,
           justifyContent,
         }}