Rework Preferences dialog and show all hints to enable/disable

newIDE/app/src/MainFrame/Preferences/PreferencesContext.js

@@ -1,4 +1,5 @@
 // @flow
+import { Trans } from '@lingui/macro';
 import * as React from 'react';
 
 export type AlertMessageIdentifier =
@@ -18,6 +19,77 @@ export type AlertMessageIdentifier =
   | 'physics2-shape-collisions'
   | 'edit-instruction-explanation';
 
+export const allAlertMessages: Array<{
+  key: AlertMessageIdentifier,
+  label: React.Node,
+}> = [
+  {
+    key: 'use-non-smoothed-textures',
+    label: <Trans>Using non smoothed textures</Trans>,
+  },
+  {
+    key: 'use-nearest-scale-mode',
+    label: <Trans>Using Nearest Scale Mode</Trans>,
+  },
+  {
+    key: 'maximum-fps-too-low',
+    label: <Trans>Maximum Fps is too low</Trans>,
+  },
+  {
+    key: 'minimum-fps-too-low',
+    label: <Trans>Minimum Fps is too low</Trans>,
+  },
+  {
+    key: 'function-extractor-explanation',
+    label: <Trans>Using function extractor</Trans>,
+  },
+  {
+    key: 'events-based-behavior-explanation',
+    label: <Trans>Using events based behavior</Trans>,
+  },
+  {
+    key: 'empty-events-based-behavior-explanation',
+    label: <Trans>Using empty events based behavior</Trans>,
+  },
+  {
+    key: 'too-much-effects',
+    label: <Trans>Using too much effects</Trans>,
+  },
+  {
+    key: 'effects-usage',
+    label: <Trans>Using effects</Trans>,
+  },
+  {
+    key: 'resource-properties-panel-explanation',
+    label: <Trans>Using the resource properties panel</Trans>,
+  },
+  {
+    key: 'instance-drag-n-drop-explanation',
+    label: <Trans>Using instance drag'n'drop</Trans>,
+  },
+  {
+    key: 'objects-panel-explanation',
+    label: <Trans>Using the objects panel</Trans>,
+  },
+  {
+    key: 'instance-properties-panel-explanation',
+    label: <Trans>Using the instance properties panel</Trans>,
+  },
+  {
+    key: 'physics2-shape-collisions',
+    label: <Trans>Collisions handling with the Physics engine</Trans>,
+  },
+  {
+    key: 'edit-instruction-explanation',
+    label: <Trans>How to edit instructions</Trans>,
+  },
+];
+
+/**
+ * All the preferences of GDevelop. To add a new preference, add it into this
+ * type and add a setter into `Preferences` type. Then, update the
+ * preference dialog.
+ */
 export type PreferencesValues = {|
   language: string,
   autoDownloadUpdates: boolean,
@@ -33,6 +105,9 @@ export type PreferencesValues = {|
   eventsSheetUseAssignmentOperators: boolean,
 |};
 
+/**
+ * Type containing all the preferences of GDevelop and their setters.
+ */
 export type Preferences = {|
   values: PreferencesValues,
   setLanguage: (language: string) => void,

newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js

@@ -1,244 +1,217 @@
 // @flow
 import { Trans } from '@lingui/macro';
 
-import React, { Component } from 'react';
+import React from 'react';
 import SelectField from '../../UI/SelectField';
 import FlatButton from '../../UI/FlatButton';
 import SelectOption from '../../UI/SelectOption';
 import Toggle from '../../UI/Toggle';
 import Dialog from '../../UI/Dialog';
-import EmptyMessage from '../../UI/EmptyMessage';
 import { Column, Line } from '../../UI/Grid';
 import { themes } from '../../UI/Theme';
 import { getAllThemes } from '../../CodeEditor/Theme';
 import Window from '../../Utils/Window';
-import PreferencesContext, {
-  type AlertMessageIdentifier,
-} from './PreferencesContext';
+import PreferencesContext, { allAlertMessages } from './PreferencesContext';
 import Text from '../../UI/Text';
 import { ResponsiveLineStackLayout } from '../../UI/Layout';
+import { Tabs, Tab } from '../../UI/Tabs';
 
 type Props = {|
-  open: boolean,
   onClose: Function,
 |};
 
-type State = {||};
+const PreferencesDialog = ({ onClose }: Props) => {
+  const [currentTab, setCurrentTab] = React.useState('preferences');
+  const {
+    values,
+    setThemeName,
+    setCodeEditorThemeName,
+    setAutoDownloadUpdates,
+    showAlertMessage,
+    setAutoDisplayChangelog,
+    setEventsSheetShowObjectThumbnails,
+    setAutosaveOnPreview,
+    setUseNewInstructionEditorDialog,
+    setUseGDJSDevelopmentWatcher,
+    setEventsSheetUseAssignmentOperators,
+  } = React.useContext(PreferencesContext);
 
-const getDismissedAlertMessages = (identifiers: {
-  [AlertMessageIdentifier]: boolean,
-}): Array<AlertMessageIdentifier> => {
-  return Object.keys(identifiers)
-    .map(identifier => {
-      return identifiers[identifier] ? identifier : null;
-    })
-    .filter(Boolean);
+  return (
+    <Dialog
+      actions={[
+        <FlatButton
+          key="close"
+          label={<Trans>Close</Trans>}
+          primary={false}
+          onClick={onClose}
+        />,
+      ]}
+      onRequestClose={onClose}
+      open
+      title={<Trans>GDevelop Preferences</Trans>}
+      maxWidth="sm"
+      noMargin
+    >
+      <Tabs value={currentTab} onChange={setCurrentTab}>
+        <Tab label={<Trans>Preferences</Trans>} value="preferences" />
+        <Tab label={<Trans>Hints &amp; explanations</Trans>} value="hints" />
+      </Tabs>
+      {currentTab === 'preferences' && (
+        <Column>
+          <Text size="title">
+            <Trans>Appearance</Trans>
+          </Text>
+          <ResponsiveLineStackLayout noMargin>
+            <SelectField
+              floatingLabelText={<Trans>UI Theme</Trans>}
+              value={values.themeName}
+              onChange={(e, i, value: string) => setThemeName(value)}
+              fullWidth
+            >
+              {Object.keys(themes).map(themeName => (
+                <SelectOption
+                  value={themeName}
+                  primaryText={themeName}
+                  key={themeName}
+                />
+              ))}
+            </SelectField>
+            <SelectField
+              floatingLabelText={<Trans>Code editor Theme</Trans>}
+              value={values.codeEditorThemeName}
+              onChange={(e, i, value: string) => setCodeEditorThemeName(value)}
+              fullWidth
+            >
+              {getAllThemes().map(codeEditorTheme => (
+                <SelectOption
+                  value={codeEditorTheme.themeName}
+                  primaryText={codeEditorTheme.name}
+                  key={codeEditorTheme.themeName}
+                />
+              ))}
+            </SelectField>
+          </ResponsiveLineStackLayout>
+          <Line noMargin>
+            <Text>
+              <Trans>You can contribute and create your own themes: </Trans>
+            </Text>
+            <FlatButton
+              label={<Trans>Learn more</Trans>}
+              onClick={() => {
+                Window.openExternalURL(
+                  'https://github.com/4ian/GDevelop/tree/master/newIDE#theming'
+                );
+              }}
+            />
+          </Line>
+          <Text size="title">
+            <Trans>Updates</Trans>
+          </Text>
+          <Line>
+            <Toggle
+              onToggle={(e, check) => setAutoDownloadUpdates(check)}
+              toggled={values.autoDownloadUpdates}
+              labelPosition="right"
+              label={
+                <Trans>Auto download and install updates (recommended)</Trans>
+              }
+            />
+          </Line>
+          <Line>
+            <Toggle
+              onToggle={(e, check) => setAutoDisplayChangelog(check)}
+              toggled={values.autoDisplayChangelog}
+              labelPosition="right"
+              label={
+                <Trans>
+                  Display What's New when a new version is launched
+                  (recommended)
+                </Trans>
+              }
+            />
+          </Line>
+          <Text size="title">
+            <Trans>Events Sheet</Trans>
+          </Text>
+          <Line>
+            <Toggle
+              onToggle={(e, check) => setEventsSheetShowObjectThumbnails(check)}
+              toggled={values.eventsSheetShowObjectThumbnails}
+              labelPosition="right"
+              label={<Trans>Display object thumbnails in Events Sheets</Trans>}
+            />
+          </Line>
+          <Line>
+            <Toggle
+              onToggle={(e, check) =>
+                setEventsSheetUseAssignmentOperators(check)
+              }
+              toggled={values.eventsSheetUseAssignmentOperators}
+              labelPosition="right"
+              label={
+                <Trans>Display assignment operators in Events Sheets</Trans>
+              }
+            />
+          </Line>
+          <Line>
+            <Toggle
+              onToggle={(e, check) => setUseNewInstructionEditorDialog(check)}
+              toggled={values.useNewInstructionEditorDialog}
+              labelPosition="right"
+              label={<Trans>Use the new action/condition editor</Trans>}
+            />
+          </Line>
+          <Text size="title">
+            <Trans>Advanced</Trans>
+          </Text>
+          <Line>
+            <Toggle
+              onToggle={(e, check) => setAutosaveOnPreview(check)}
+              toggled={values.autosaveOnPreview}
+              labelPosition="right"
+              label={<Trans>Auto-save project on Preview</Trans>}
+            />
+          </Line>
+          {Window.isDev() && (
+            <Line>
+              <Toggle
+                onToggle={(e, check) => setUseGDJSDevelopmentWatcher(check)}
+                toggled={values.useGDJSDevelopmentWatcher}
+                labelPosition="right"
+                label={
+                  <Trans>
+                    Watch changes in game engine (GDJS) sources and auto import
+                    them (dev only)
+                  </Trans>
+                }
+              />
+            </Line>
+          )}
+        </Column>
+      )}
+      {currentTab === 'hints' && (
+        <Column>
+          <Line>
+            <Column noMargin>
+              <Text>
+                <Trans>Warn/show explanation about:</Trans>
+              </Text>
+              {allAlertMessages.map(({ key, label }) => (
+                <Line>
+                  <Toggle
+                    onToggle={(e, check) => showAlertMessage(key, check)}
+                    toggled={!values.hiddenAlertMessages[key]}
+                    labelPosition="right"
+                    label={label}
+                  />
+                </Line>
+              ))}
+            </Column>
+          </Line>
+        </Column>
+      )}
+    </Dialog>
+  );
 };
 
-export default class PreferencesDialog extends Component<Props, State> {
-  createTheme() {
-    Window.openExternalURL(
-      'https://github.com/4ian/GDevelop/tree/master/newIDE#theming'
-    );
-  }
-
-  render() {
-    const { open, onClose } = this.props;
-    const actions = [
-      <FlatButton
-        key="close"
-        label={<Trans>Close</Trans>}
-        primary={false}
-        onClick={onClose}
-      />,
-    ];
-
-    return (
-      <Dialog
-        actions={actions}
-        onRequestClose={onClose}
-        open={open}
-        title={<Trans>GDevelop preferences</Trans>}
-        maxWidth="sm"
-      >
-        <PreferencesContext.Consumer>
-          {({
-            values,
-            setThemeName,
-            setCodeEditorThemeName,
-            setAutoDownloadUpdates,
-            showAlertMessage,
-            setAutoDisplayChangelog,
-            setEventsSheetShowObjectThumbnails,
-            setAutosaveOnPreview,
-            setUseNewInstructionEditorDialog,
-            setUseGDJSDevelopmentWatcher,
-            setEventsSheetUseAssignmentOperators,
-          }) => {
-            const dismissedAlertMessages = getDismissedAlertMessages(
-              values.hiddenAlertMessages
-            );
-
-            return (
-              <Column noMargin>
-                <ResponsiveLineStackLayout noMargin>
-                  <SelectField
-                    floatingLabelText={<Trans>UI Theme</Trans>}
-                    value={values.themeName}
-                    onChange={(e, i, value: string) => setThemeName(value)}
-                  >
-                    {Object.keys(themes).map(themeName => (
-                      <SelectOption
-                        value={themeName}
-                        primaryText={themeName}
-                        key={themeName}
-                      />
-                    ))}
-                  </SelectField>
-                  <SelectField
-                    floatingLabelText={<Trans>Code editor Theme</Trans>}
-                    value={values.codeEditorThemeName}
-                    onChange={(e, i, value: string) =>
-                      setCodeEditorThemeName(value)
-                    }
-                  >
-                    {getAllThemes().map(codeEditorTheme => (
-                      <SelectOption
-                        value={codeEditorTheme.themeName}
-                        primaryText={codeEditorTheme.name}
-                        key={codeEditorTheme.themeName}
-                      />
-                    ))}
-                  </SelectField>
-                </ResponsiveLineStackLayout>
-                <Line noMargin>
-                  <Text>
-                    <Trans>
-                      You can contribute and create your own themes:{' '}
-                    </Trans>
-                  </Text>
-                  <FlatButton
-                    label={<Trans>Learn more</Trans>}
-                    onClick={this.createTheme}
-                  />
-                </Line>
-                <Line>
-                  <Toggle
-                    onToggle={(e, check) => setAutoDownloadUpdates(check)}
-                    toggled={values.autoDownloadUpdates}
-                    labelPosition="right"
-                    label={
-                      <Trans>
-                        Auto download and install updates (recommended)
-                      </Trans>
-                    }
-                  />
-                </Line>
-                <Line>
-                  <Toggle
-                    onToggle={(e, check) => setAutoDisplayChangelog(check)}
-                    toggled={values.autoDisplayChangelog}
-                    labelPosition="right"
-                    label={
-                      <Trans>
-                        Display What's New when a new version is launched
-                        (recommended)
-                      </Trans>
-                    }
-                  />
-                </Line>
-                <Line>
-                  <Toggle
-                    onToggle={(e, check) =>
-                      setEventsSheetShowObjectThumbnails(check)
-                    }
-                    toggled={values.eventsSheetShowObjectThumbnails}
-                    labelPosition="right"
-                    label={
-                      <Trans>Display object thumbnails in Events Sheets</Trans>
-                    }
-                  />
-                </Line>
-                <Line>
-                  <Toggle
-                    onToggle={(e, check) =>
-                      setEventsSheetUseAssignmentOperators(check)
-                    }
-                    toggled={values.eventsSheetUseAssignmentOperators}
-                    labelPosition="right"
-                    label={
-                      <Trans>
-                        Display assignment operators in Events Sheets
-                      </Trans>
-                    }
-                  />
-                </Line>
-                <Line>
-                  <Toggle
-                    onToggle={(e, check) => setAutosaveOnPreview(check)}
-                    toggled={values.autosaveOnPreview}
-                    labelPosition="right"
-                    label={<Trans>Auto-save project on Preview</Trans>}
-                  />
-                </Line>
-                <Line>
-                  <Toggle
-                    onToggle={(e, check) =>
-                      setUseNewInstructionEditorDialog(check)
-                    }
-                    toggled={values.useNewInstructionEditorDialog}
-                    labelPosition="right"
-                    label={<Trans>Use the new action/condition editor</Trans>}
-                  />
-                </Line>
-                {Window.isDev() && (
-                  <Line>
-                    <Toggle
-                      onToggle={(e, check) =>
-                        setUseGDJSDevelopmentWatcher(check)
-                      }
-                      toggled={values.useGDJSDevelopmentWatcher}
-                      labelPosition="right"
-                      label={
-                        <Trans>
-                          Watch changes in game engine (GDJS) sources and auto
-                          import them (dev only)
-                        </Trans>
-                      }
-                    />
-                  </Line>
-                )}
-                <Line>
-                  {dismissedAlertMessages.length ? (
-                    <Column noMargin>
-                      <Text>
-                        <Trans>
-                          You have dismissed some hints. Click to enable them
-                          again:
-                        </Trans>
-                      </Text>
-                      {dismissedAlertMessages.map(name => (
-                        <FlatButton
-                          key={name}
-                          label={name}
-                          onClick={() => showAlertMessage(name, true)}
-                        />
-                      ))}
-                    </Column>
-                  ) : (
-                    <EmptyMessage>
-                      <Trans>
-                        If you dismiss some hints, they will be shown here in
-                        case you want to enable them again.
-                      </Trans>
-                    </EmptyMessage>
-                  )}
-                </Line>
-              </Column>
-            );
-          }}
-        </PreferencesContext.Consumer>
-      </Dialog>
-    );
-  }
-}
+export default PreferencesDialog;

newIDE/app/src/MainFrame/index.js

@@ -1901,7 +1901,7 @@ class MainFrame extends React.Component<Props, State> {
           />
         )}
         {this.state.preferencesDialogOpen && (
-          <PreferencesDialog open onClose={() => this.openPreferences(false)} />
+          <PreferencesDialog onClose={() => this.openPreferences(false)} />
         )}
         {this.state.languageDialogOpen && (
           <LanguageDialog

newIDE/app/src/UI/Text.js

@@ -27,7 +27,7 @@ type Props = {|
 // consistency of text in the whole app.
 export default ({ children, style, size, align, noShrink }: Props) => (
   <Typography
-    variant={size === 'title' ? 'h5' : 'body1'}
+    variant={size === 'title' ? 'h6' : 'body1'}
     style={{
       ...style,
       flexShrink: noShrink ? 0 : undefined,