Add ShapePainterEditor and EmptyEditor in newIDE and rework Column margins

newIDE/app/src/Export/LocalExport.js

@@ -91,7 +91,7 @@ export default class LocalExport extends Component {
     if (!project) return null;
 
     return (
-      <Column>
+      <Column noMargin>
         <Line>
           This will export your game to a folder that you can then upload on a website
         </Line>

newIDE/app/src/Export/LocalS3Export.js

@@ -143,7 +143,7 @@ export default class LocalS3Export extends Component {
     } = this.state;
 
     return (
-      <Column>
+      <Column noMargin>
         <Line>
           This will export your game and upload it on GDevelop games hosting. The game
           will be free and available for a few days.

newIDE/app/src/MainFrame/AboutDialog.js

@@ -46,7 +46,7 @@ export default class AboutDialog extends Component {
           padding: 0,
         }}
       >
-        <Column>
+        <Column noMargin>
           <img
             src="res/GD-logo.png"
             alt="GDevelop logo"

newIDE/app/src/MainFrame/StartPage.js

@@ -40,7 +40,7 @@ export default class StartPage extends BaseEditor {
 
   render() {
     return (
-      <Column expand>
+      <Column expand noMargin>
         <Line expand>
           <div
             style={{

newIDE/app/src/ObjectEditor/Editors/EmptyEditor.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { Line, Column } from '../../UI/Grid';
+import EmptyMessage from '../../UI/EmptyMessage';
+
+export default class EmptyEditor extends Component {
+  render() {
+    return (
+      <Column>
+        <Line>
+          <EmptyMessage>
+            This object does not have any specific configuration. Add it on the scene and use events to interact with it.
+          </EmptyMessage>
+        </Line>
+      </Column>
+    );
+  }
+}

newIDE/app/src/ObjectEditor/Editors/ShapePainterEditor.js

@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import TextField from 'material-ui/TextField';
+import Checkbox from 'material-ui/Checkbox';
+import { Line, Column, Spacer } from '../../UI/Grid';
+import ColorField from '../../UI/ColorField';
+const gd = global.gd;
+
+export default class PanelSpriteEditor extends Component {
+  render() {
+    const { object } = this.props;
+    const shapePainterObject = gd.asShapePainterObject(object);
+
+    return (
+      <Column>
+        <Line>
+          <Checkbox
+            label="Draw the shapes relative to the object position on the scene"
+            checked={!shapePainterObject.areCoordinatesAbsolute()}
+            onCheck={(e, checked) => {
+              if (!checked) shapePainterObject.setCoordinatesAbsolute();
+              else shapePainterObject.setCoordinatesRelative();
+              this.forceUpdate();
+            }}
+          />
+        </Line>
+        <Line>
+          <ColorField
+            floatingLabelText="Outline color"
+            disableAlpha
+            fullWidth
+            color={{
+              r: shapePainterObject.getOutlineColorR(),
+              g: shapePainterObject.getOutlineColorG(),
+              b: shapePainterObject.getOutlineColorB(),
+              a: 255,
+            }}
+            onChangeComplete={color => {
+              shapePainterObject.setOutlineColor(
+                color.rgb.r,
+                color.rgb.g,
+                color.rgb.b
+              );
+              this.forceUpdate();
+            }}
+          />
+          <TextField
+            floatingLabelText="Outline opacity (0-255)"
+            fullWidth
+            type="number"
+            value={shapePainterObject.getOutlineOpacity()}
+            onChange={(e, value) => {
+              shapePainterObject.setOutlineOpacity(parseInt(value, 10));
+              this.forceUpdate();
+            }}
+          />
+          <TextField
+            floatingLabelText="Outline size (in pixels)"
+            fullWidth
+            type="number"
+            value={shapePainterObject.getOutlineSize()}
+            onChange={(e, value) => {
+              shapePainterObject.setOutlineSize(parseInt(value, 10));
+              this.forceUpdate();
+            }}
+          />
+        </Line>
+        <Line>
+          <ColorField
+            floatingLabelText="Fill color"
+            disableAlpha
+            fullWidth
+            color={{
+              r: shapePainterObject.getFillColorR(),
+              g: shapePainterObject.getFillColorG(),
+              b: shapePainterObject.getFillColorB(),
+              a: 255,
+            }}
+            onChangeComplete={color => {
+              shapePainterObject.setFillColor(
+                color.rgb.r,
+                color.rgb.g,
+                color.rgb.b
+              );
+              this.forceUpdate();
+            }}
+          />
+          <TextField
+            floatingLabelText="Fill opacity (0-255)"
+            fullWidth
+            type="number"
+            value={shapePainterObject.getFillOpacity()}
+            onChange={(e, value) => {
+              shapePainterObject.setFillOpacity(parseInt(value, 10));
+              this.forceUpdate();
+            }}
+          />
+          <Spacer expand/>
+        </Line>
+      </Column>
+    );
+  }
+}

newIDE/app/src/ObjectEditor/Editors/TextEditor.js

@@ -12,7 +12,7 @@ export default class TextEditor extends Component {
     const textObject = gd.asTextObject(object);
 
     return (
-      <Column>
+      <Column noMargin>
         <MiniToolbar>
           <p>Size:</p>
           <TextField
@@ -55,17 +55,21 @@ export default class TextEditor extends Component {
             style={{width: 'auto'}}
           />
         </MiniToolbar>
-        <Line>
-          <TextField
-            hintText="Enter the text to be displayed by the object"
-            fullWidth
-            multiLine={true}
-            value={textObject.getString()}
-            onChange={(e, value) => {
-              textObject.setString(value);
-              this.forceUpdate();
-            }}
-          />
+        <Line noMargin>
+          <Column expand>
+            <Line>
+              <TextField
+                hintText="Enter the text to be displayed by the object"
+                fullWidth
+                multiLine={true}
+                value={textObject.getString()}
+                onChange={(e, value) => {
+                  textObject.setString(value);
+                  this.forceUpdate();
+                }}
+              />
+            </Line>
+          </Column>
         </Line>
       </Column>
     );

newIDE/app/src/ObjectEditor/ObjectEditorDialog.js

@@ -2,14 +2,15 @@ import React, { Component } from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import ObjectsEditorService from './ObjectsEditorService';
 import Dialog from '../UI/Dialog';
+import EmptyMessage from '../UI/EmptyMessage';
 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) {
@@ -98,9 +99,12 @@ export default class ObjectEditorDialog extends Component {
           />}
         {currentTab === 'behaviors' &&
           <Column>
-            <Line>Behaviors are not available yet</Line>
+            <Line>
+              <EmptyMessage>
+                Behaviors are not available yet.
+              </EmptyMessage>
+            </Line>
           </Column>}
-
       </Dialog>
     );
   }

newIDE/app/src/ObjectEditor/ObjectsEditorService.js

@@ -2,6 +2,8 @@ import TextEditor from './Editors/TextEditor';
 import TiledSpriteEditor from './Editors/TiledSpriteEditor';
 import PanelSpriteEditor from './Editors/PanelSpriteEditor';
 import SpriteEditor from './Editors/SpriteEditor';
+import EmptyEditor from './Editors/EmptyEditor';
+import ShapePainterEditor from './Editors/ShapePainterEditor';
 
 /**
  * A service returning editor components for each object type.
@@ -11,15 +13,14 @@ export default {
     return this.editors[type];
   },
   editors: {
-    Sprite: { component: SpriteEditor, containerProps: { noMargin: true } },
+    Sprite: { component: SpriteEditor },
     'TiledSpriteObject::TiledSprite': { component: TiledSpriteEditor },
     'PanelSpriteObject::PanelSprite': { component: PanelSpriteEditor },
     'AdMobObject::AdMob': undefined,
     'TextObject::Text': {
       component: TextEditor,
-      containerProps: { noMargin: true },
     },
-    'PrimitiveDrawing::Drawer': undefined,
-    'TextEntryObject::TextEntry': undefined,
+    'PrimitiveDrawing::Drawer': {component: ShapePainterEditor},
+    'TextEntryObject::TextEntry': {component: EmptyEditor},
   },
 };

newIDE/app/src/ProjectCreation/LocalCreateDialog.js

@@ -65,7 +65,7 @@ export default class LocalCreateDialog extends Component {
         modal={true}
         open={open}
       >
-        <Column>
+        <Column noMargin>
           <Line>
           Choose the game to use as a base:
           </Line>

newIDE/app/src/UI/ColorField/index.js

@@ -9,7 +9,7 @@ const styles = {
   },
   picker: {
     position: 'absolute',
-    right: '0px',
+    right: '8px',
     bottom: '12px',
   },
 };

newIDE/app/src/UI/Grid.js

@@ -5,8 +5,8 @@ export const Line = props => (
   <div
     style={{
       display: 'flex',
-      marginTop: marginsSize,
-      marginBottom: marginsSize,
+      marginTop: props.noMargin ? 0 : marginsSize,
+      marginBottom: props.noMargin ? 0 : marginsSize,
       alignItems: props.alignItems,
       justifyContent: props.justifyContent,
       flex: props.expand ? 1 : undefined,
@@ -20,6 +20,8 @@ export const Column = props => (
   <div
     style={{
       display: 'flex',
+      marginLeft: props.noMargin ? 0 : marginsSize * 2,
+      marginRight: props.noMargin ? 0 : marginsSize * 2,
       flexDirection: 'column',
       alignItems: props.alignItems || 'stretch',
       flex: props.expand ? 1 : undefined,
@@ -32,9 +34,8 @@ export const Column = props => (
 export const Spacer = props => (
   <span
     style={{
-      width: marginsSize,
+      width: props.expand ? '100%' : marginsSize,
       height: marginsSize,
-      flex: props.expand ? 1 : undefined,
     }}
   />
 );

newIDE/app/src/UI/MiniToolbar.js

@@ -4,9 +4,8 @@ import muiThemeable from 'material-ui/styles/muiThemeable';
 const style = {
   display: 'flex',
   alignItems: 'center',
-  height: 34,
-  paddingLeft: 5,
-  paddingRight: 5,
+  paddingLeft: 16,
+  paddingRight: 16,
 };
 
 class ThemableMiniToolbar extends Component {

newIDE/app/src/stories/TestProject.js

@@ -84,4 +84,4 @@ testLayout.insertObject(spriteObject, 0);
 const globalTextObject = new gd.TextObject('GlobalTextObject');
 const globalTiledSpriteObject = new gd.TiledSpriteObject('GlobalTiledSpriteObject');
 project.insertObject(globalTextObject, 0);
-project.insertObject(globalTiledSpriteObject, 0);
+project.insertObject(globalTiledSpriteObject, 0);

newIDE/app/src/stories/index.js

@@ -19,12 +19,15 @@ import TextEditor from '../ObjectEditor/Editors/TextEditor';
 import TiledSpriteEditor from '../ObjectEditor/Editors/TiledSpriteEditor';
 import PanelSpriteEditor from '../ObjectEditor/Editors/PanelSpriteEditor';
 import SpriteEditor from '../ObjectEditor/Editors/SpriteEditor';
+import EmptyEditor from '../ObjectEditor/Editors/EmptyEditor';
+import ShapePainterEditor from '../ObjectEditor/Editors/ShapePainterEditor';
 import ObjectsList from '../ObjectsList';
 import SerializedObjectDisplay from './SerializedObjectDisplay';
 import muiDecorator from './MuiDecorator';
 import paperDecorator from './PaperDecorator';
 import {
   project,
+  shapePainterObject,
   tiledSpriteObject,
   panelSpriteObject,
   textObject,
@@ -164,6 +167,22 @@ storiesOf('SpriteEditor', module)
     </SerializedObjectDisplay>
   ));
 
+storiesOf('ShapePainterEditor', module)
+  .addDecorator(paperDecorator)
+  .addDecorator(muiDecorator)
+  .add('default', () => (
+    <SerializedObjectDisplay object={shapePainterObject}>
+      <ShapePainterEditor object={shapePainterObject} project={project} />
+    </SerializedObjectDisplay>
+  ));
+
+storiesOf('EmptyEditor', module)
+  .addDecorator(paperDecorator)
+  .addDecorator(muiDecorator)
+  .add('default', () => (
+    <EmptyEditor />
+  ));
+
 storiesOf('ObjectsList', module)
   .addDecorator(paperDecorator)
   .addDecorator(muiDecorator)