UX Improvements across the app (#7099)

* Make New project dialog simpler * Prevent icons from being always at the end on RTL languages * Improve number of items displayed on mobile across the app * Hide tabs in Resources if only 1 is available
4ian · Oct 22, 2024 · 0788de3 · 0788de3
1 parent 6b7bc36
commit 0788de3
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 70 deletions.
diff --git a/newIDE/app/src/AssetStore/AssetsHome.js b/newIDE/app/src/AssetStore/AssetsHome.js
@@ -56,7 +56,7 @@ const getShopItemsColumns = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 3 : 1;
+      return isLandscape ? 3 : 2;
     case 'medium':
       return 2;
     case 'large':

diff --git a/newIDE/app/src/AssetStore/AssetsList.js b/newIDE/app/src/AssetStore/AssetsList.js
@@ -75,7 +75,7 @@ const getShopItemsColumns = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 3 : 1;
+      return isLandscape ? 3 : 2;
     case 'medium':
       return 2;
     case 'large':

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
@@ -72,7 +72,7 @@ const cellSpacing = 2;
 const getItemsColumns = (windowSize: WindowSizeType, isLandscape: boolean) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 4 : 1;
+      return isLandscape ? 4 : 2;
     case 'medium':
       return 3;
     case 'large':
@@ -523,7 +523,7 @@ const BuildSection = ({
                   isMobile ? (
                     <Trans>Create</Trans>
                   ) : (
-                    <Trans>Create a project</Trans>
+                    <Trans>Create from scratch</Trans>
                   )
                 }
                 onClick={onOpenNewProjectSetupDialog}

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/RecommendationList.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/RecommendationList.js
@@ -66,7 +66,7 @@ const getTextTutorialsColumnsFromWidth = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 4 : 1;
+      return isLandscape ? 4 : 2;
     case 'medium':
       return 2;
     case 'large':
@@ -83,7 +83,7 @@ const getVideoTutorialsColumnsFromWidth = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 5 : 1;
+      return isLandscape ? 5 : 2;
     case 'medium':
       return 3;
     case 'large':

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/InAppTutorials/FlingGame.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/InAppTutorials/FlingGame.js
@@ -26,7 +26,7 @@ const getColumnsFromWindowSize = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 3 : 1;
+      return isLandscape ? 3 : 2;
     case 'medium':
     case 'large':
     case 'xlarge':

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js
@@ -47,7 +47,7 @@ const getHelpItemsColumnsFromWidth = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 4 : 1;
+      return isLandscape ? 4 : 2;
     case 'medium':
       return 3;
     case 'large':
@@ -65,7 +65,7 @@ const getTutorialsColumnsFromWidth = (
 ) => {
   switch (windowSize) {
     case 'small':
-      return isLandscape ? 5 : 1;
+      return isLandscape ? 5 : 2;
     case 'medium':
       return 3;
     case 'large':

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/TutorialsCategoryPage.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/TutorialsCategoryPage.js
@@ -115,7 +115,7 @@ export const EducationCurriculum = ({
 const getColumnsFromWindowSize = (windowSize: WindowSizeType) => {
   switch (windowSize) {
     case 'small':
-      return 1;
+      return 2;
     case 'medium':
       return 3;
     case 'large':

diff --git a/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js b/newIDE/app/src/MainFrame/Preferences/PreferencesContext.js
@@ -43,8 +43,7 @@ export type AlertMessageIdentifier =
   | 'command-palette-shortcut'
   | 'asset-installed-explanation'
   | 'extension-installed-explanation'
-  | 'project-should-have-unique-package-name'
-  | 'new-generate-project-from-prompt';
+  | 'project-should-have-unique-package-name';
 
 export type EditorMosaicName =
   | 'scene-editor'
@@ -169,10 +168,6 @@ export const allAlertMessages: Array<{
       <Trans>Project package names should not begin with com.example</Trans>
     ),
   },
-  {
-    key: 'new-generate-project-from-prompt',
-    label: <Trans>New project generation from prompt warning</Trans>,
-  },
 ];
 
 /**

diff --git a/newIDE/app/src/ProjectCreation/NewProjectSetupDialog.js b/newIDE/app/src/ProjectCreation/NewProjectSetupDialog.js
@@ -41,7 +41,6 @@ import ResolutionOptions, {
   defaultCustomHeight,
 } from './ResolutionOptions';
 import Text from '../UI/Text';
-import DismissableAlertMessage from '../UI/DismissableAlertMessage';
 import generatePrompt from '../Utils/ProjectPromptGenerator';
 import ProjectGeneratingDialog from './ProjectGeneratingDialog';
 import useAlertDialog from '../UI/Alert/useAlertDialog';
@@ -53,6 +52,7 @@ import GetSubscriptionCard from '../Profile/Subscription/GetSubscriptionCard';
 import { type PrivateGameTemplateListingData } from '../Utils/GDevelopServices/Shop';
 import { extractGDevelopApiErrorStatusAndCode } from '../Utils/GDevelopServices/Errors';
 import { CLOUD_PROJECT_NAME_MAX_LENGTH } from '../Utils/GDevelopServices/Project';
+import { Accordion, AccordionBody, AccordionHeader } from '../UI/Accordion';
 
 const electron = optionalRequire('electron');
 const remote = optionalRequire('@electron/remote');
@@ -157,8 +157,7 @@ const NewProjectSetupDialog = ({
     false
   );
   const [allowPlayersToLogIn, setAllowPlayersToLogIn] = React.useState<boolean>(
-    // Enable player login by default for new games, unless a tutorial is running or offline.
-    !!currentlyRunningInAppTutorial || !isOnline ? false : true
+    false
   );
   const newProjectsDefaultFolder = app
     ? findEmptyPathInWorkspaceFolder(app, values.newProjectsDefaultFolder || '')
@@ -534,12 +533,6 @@ const NewProjectSetupDialog = ({
               })}
             {isStartingProjectFromScratch && (
               <ColumnStackLayout noMargin expand>
-                <DismissableAlertMessage
-                  kind="info"
-                  identifier="new-generate-project-from-prompt"
-                >
-                  <Trans>NEW! Generate a pre-made AI scene with assets.</Trans>
-                </DismissableAlertMessage>
                 <LineStackLayout
                   expand
                   noMargin
@@ -564,8 +557,8 @@ const NewProjectSetupDialog = ({
                     floatingLabelFixed
                     translatableHintText={
                       !authenticatedUser.authenticated || !isOnline
-                        ? t`Log in to generate a project from a prompt`
-                        : t`Type a prompt yourself or generate a random one`
+                        ? t`Log in to enter a prompt`
+                        : t`Type a prompt or generate one`
                     }
                     endAdornment={
                       <IconButton
@@ -599,30 +592,40 @@ const NewProjectSetupDialog = ({
                       </Line>
                     </GetSubscriptionCard>
                   )}
-                <Text size="sub-title">
-                  <Trans>Advanced File options</Trans>
-                </Text>
-                <Checkbox
-                  checked={optimizeForPixelArt}
-                  label={<Trans>Optimize for Pixel Art</Trans>}
-                  onCheck={(e, checked) => {
-                    setOptimizeForPixelArt(checked);
-                  }}
-                  disabled={isLoading}
-                />
-                <Checkbox
-                  checked={allowPlayersToLogIn}
-                  label={<Trans>Allow players to authenticate in-game</Trans>}
-                  onCheck={(e, checked) => {
-                    setAllowPlayersToLogIn(checked);
-                  }}
-                  disabled={isLoading || !isOnline}
-                  tooltipOrHelperText={
-                    <MarkdownText
-                      translatableSource={t`Learn more about [player authentication](https://wiki.gdevelop.io/gdevelop5/all-features/player-authentication).`}
-                    />
-                  }
-                />
+                <Accordion defaultExpanded={false} noMargin>
+                  <AccordionHeader noMargin>
+                    <Text size="sub-title">
+                      <Trans>Advanced options</Trans>
+                    </Text>
+                  </AccordionHeader>
+                  <AccordionBody disableGutters>
+                    <Column expand noMargin>
+                      <Checkbox
+                        checked={optimizeForPixelArt}
+                        label={<Trans>Optimize for Pixel Art</Trans>}
+                        onCheck={(e, checked) => {
+                          setOptimizeForPixelArt(checked);
+                        }}
+                        disabled={isLoading}
+                      />
+                      <Checkbox
+                        checked={allowPlayersToLogIn}
+                        label={
+                          <Trans>Allow players to authenticate in-game</Trans>
+                        }
+                        onCheck={(e, checked) => {
+                          setAllowPlayersToLogIn(checked);
+                        }}
+                        disabled={isLoading || !isOnline}
+                        tooltipOrHelperText={
+                          <MarkdownText
+                            translatableSource={t`Learn more about [player authentication](https://wiki.gdevelop.io/gdevelop5/all-features/player-authentication).`}
+                          />
+                        }
+                      />
+                    </Column>
+                  </AccordionBody>
+                </Accordion>
               </ColumnStackLayout>
             )}
             {limits && hasTooManyCloudProjects ? (

diff --git a/newIDE/app/src/ResourcesList/NewResourceDialog.js b/newIDE/app/src/ResourcesList/NewResourceDialog.js
@@ -166,19 +166,21 @@ export const NewResourceDialog = ({
       ]}
       onRequestClose={onClose}
       fixedContent={
-        <Tabs
-          value={currentTab}
-          onChange={setCurrentTab}
-          options={[
-            ...standaloneTabResourceSources.map(({ name, displayName }) => ({
-              label: i18n._(displayName),
-              value: 'standalone-' + name,
-            })),
-            { label: <Trans>Choose a file</Trans>, value: 'import' },
-          ]}
-          // Enforce scroll on very small screens, because the tabs have long names.
-          variant={isMobile ? 'scrollable' : undefined}
-        />
+        standaloneTabResourceSources.length ? (
+          <Tabs
+            value={currentTab}
+            onChange={setCurrentTab}
+            options={[
+              ...standaloneTabResourceSources.map(({ name, displayName }) => ({
+                label: i18n._(displayName),
+                value: 'standalone-' + name,
+              })),
+              { label: <Trans>Choose a file</Trans>, value: 'import' },
+            ]}
+            // Enforce scroll on very small screens, because the tabs have long names.
+            variant={isMobile ? 'scrollable' : undefined}
+          />
+        ) : null
       }
     >
       {standaloneTabResourceSources.map(source => {

diff --git a/newIDE/app/src/UI/Theme/CreateTheme.js b/newIDE/app/src/UI/Theme/CreateTheme.js
@@ -356,7 +356,6 @@ export const smallScreenMuiOverrides = {
 };
 
 const rtlDirection = { direction: 'rtl' };
-const rtlOrder = { order: 100 };
 
 export const rtlMuiOverrides = {
   MuiTypography: {
@@ -371,9 +370,6 @@ export const rtlMuiOverrides = {
   MuiButton: {
     label: rtlDirection,
   },
-  MuiSvgIcon: {
-    root: rtlOrder,
-  },
   MuiFormControlLabel: {
     root: rtlDirection,
   },

diff --git a/newIDE/app/src/stories/componentStories/UI/ImageTile/ImageTileGrid.stories.js b/newIDE/app/src/stories/componentStories/UI/ImageTile/ImageTileGrid.stories.js
@@ -21,7 +21,7 @@ export default {
 const getColumnsFromWindowSize = (windowSize: WindowSizeType) => {
   switch (windowSize) {
     case 'small':
-      return 1;
+      return 2;
     case 'medium':
       return 3;
     case 'large':

diff --git a/newIDE/app/src/stories/componentStories/UI/ImageTile/ImageTileRow.stories.js b/newIDE/app/src/stories/componentStories/UI/ImageTile/ImageTileRow.stories.js
@@ -22,7 +22,7 @@ export default {
 const getColumnsFromWindowSize = (windowSize: WindowSizeType) => {
   switch (windowSize) {
     case 'small':
-      return 1;
+      return 2;
     case 'medium':
       return 3;
     case 'large':