Improve LocalCreateDialog

newIDE/app/src/MainFrame/AboutDialog.js

@@ -12,6 +12,11 @@ const styles = {
 };
 
 export default class AboutDialog extends Component {
+  constructor() {
+    super();
+    this.versionFullString = gd ? gd.VersionWrapper.fullString() : 'Unknown';
+  }
+
   _onOpenWebsite() {
     shell.openExternal('http://compilgames.net');
   }
@@ -48,7 +53,7 @@ export default class AboutDialog extends Component {
           />
           <div style={styles.content}>
             <Line>
-              GDevelop IDE based on GDevelop {gd.VersionWrapper.fullString()}
+              GDevelop IDE based on GDevelop {this.versionFullString}
             </Line>
           </div>
         </Column>

newIDE/app/src/ProjectCreation/LocalCreateDialog.js

@@ -3,7 +3,7 @@ import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import Divider from 'material-ui/Divider';
 import LocalFolderPicker from '../UI/LocalFolderPicker';
-import { Column } from '../UI/Grid';
+import { Column, Line } from '../UI/Grid';
 import { findExamples } from './LocalExamplesFinder';
 import generateName from '../Utils/NewNameGenerator';
 import optionalRequire from '../Utils/OptionalRequire.js';
@@ -16,7 +16,7 @@ export default class LocalCreateDialog extends Component {
   constructor(props) {
     super(props);
 
-    const outputRootPath = path.join(app.getPath('home'), 'GDevelop projects');
+    const outputRootPath = path ? path.join(app.getPath('home'), 'GDevelop projects') : "";
     this.state = {
       outputPath: this._findEmptyPath(outputRootPath),
     };
@@ -24,6 +24,8 @@ export default class LocalCreateDialog extends Component {
   }
 
   _findEmptyPath = basePath => {
+    if (!path) return basePath;
+
     const folderName = generateName('My project', name => {
       try {
         fs.accessSync(path.join(basePath, name));
@@ -63,23 +65,32 @@ export default class LocalCreateDialog extends Component {
         open={open}
       >
         <Column>
+          <Line>
           Choose the game to use as a base:
-          <FlatButton
-            label="Platformer"
-            fullWidth
-            primary
-            onClick={() => this.createFromExample('platformer')}
-          />
-          <FlatButton label="Space Shooter" fullWidth primary disabled />
-          <FlatButton label="Empty game" fullWidth primary disabled />
+          </Line>
+          <Line>
+            <Column expand>
+            <FlatButton
+              label="Platformer"
+              fullWidth
+              primary
+              onClick={() => this.createFromExample('platformer')}
+            />
+            <FlatButton label="Space Shooter" fullWidth primary disabled />
+            <FlatButton label="Empty game" fullWidth primary disabled />
+            </Column>
+          </Line>
           <Divider />
+          <Line expand>
           <LocalFolderPicker
+          fullWidth
             value={this.state.outputPath}
             onChange={outputPath =>
               this.setState({
                 outputPath,
               })}
           />
+          </Line>
         </Column>
       </Dialog>
     );

newIDE/app/src/stories/index.js

@@ -7,6 +7,8 @@ import { linkTo } from '@storybook/addon-links';
 import Welcome from './Welcome';
 
 import StartPage from '../MainFrame/StartPage';
+import AboutDialog from '../MainFrame/AboutDialog';
+import LocalCreateDialog from '../ProjectCreation/LocalCreateDialog';
 import { Tabs, Tab } from '../UI/Tabs';
 import LocalFolderPicker from '../UI/LocalFolderPicker';
 import LocalExport from '../Export/LocalExport';
@@ -18,6 +20,15 @@ const fakeProject = {
   getLastCompilationDirectory: () => '/Fake/Directory'
 }
 
+const fakeGD = {
+  VersionWrapper: {
+    fullString: () => "Fake",
+    major: () => "Fake",
+    minor: () => "Fake",
+  },
+};
+window.gd = fakeGD;
+
 storiesOf('Welcome', module).add('to Storybook', () => (
   <Welcome showApp={linkTo('Button')} />
 ));
@@ -89,3 +100,12 @@ storiesOf('LocalFolderPicker', module)
 storiesOf('StartPage', module)
   .addDecorator(muiDecorator)
   .add('default', () => <StartPage />);
+
+storiesOf('AboutDialog', module)
+  .addDecorator(muiDecorator)
+  .add('default', () => <AboutDialog open />);
+
+
+storiesOf('LocalCreateDialog', module)
+  .addDecorator(muiDecorator)
+  .add('default', () => <LocalCreateDialog open />);