From 0788de3d877033271cb1d6875b03ddbb0c02ba51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:29:31 +0200 Subject: [PATCH] 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 --- newIDE/app/src/AssetStore/AssetsHome.js | 2 +- newIDE/app/src/AssetStore/AssetsList.js | 2 +- .../HomePage/BuildSection/index.js | 4 +- .../GetStartedSection/RecommendationList.js | 4 +- .../HomePage/InAppTutorials/FlingGame.js | 2 +- .../HomePage/LearnSection/MainPage.js | 4 +- .../LearnSection/TutorialsCategoryPage.js | 2 +- .../Preferences/PreferencesContext.js | 7 +- .../ProjectCreation/NewProjectSetupDialog.js | 73 ++++++++++--------- .../src/ResourcesList/NewResourceDialog.js | 28 +++---- newIDE/app/src/UI/Theme/CreateTheme.js | 4 - .../UI/ImageTile/ImageTileGrid.stories.js | 2 +- .../UI/ImageTile/ImageTileRow.stories.js | 2 +- 13 files changed, 66 insertions(+), 70 deletions(-) diff --git a/newIDE/app/src/AssetStore/AssetsHome.js b/newIDE/app/src/AssetStore/AssetsHome.js index f8467908afc8..092650f42eab 100644 --- 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 index 667223554d0c..d224bde6afb1 100644 --- 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 index f5ead751e995..1271424199c1 100644 --- 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 ? ( Create ) : ( - Create a project + Create from scratch ) } onClick={onOpenNewProjectSetupDialog} diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/RecommendationList.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/RecommendationList.js index 602018a49e5b..abc37144f0b5 100644 --- 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 index 47d0ec000b23..c14f59bff9a9 100644 --- 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 index e0485c359350..818cf443a476 100644 --- 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 index 1363221f0899..bbb13c579476 100644 --- 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 index 7c1da96aca2e..9973e7eb35c4 100644 --- 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<{ Project package names should not begin with com.example ), }, - { - key: 'new-generate-project-from-prompt', - label: New project generation from prompt warning, - }, ]; /** diff --git a/newIDE/app/src/ProjectCreation/NewProjectSetupDialog.js b/newIDE/app/src/ProjectCreation/NewProjectSetupDialog.js index 329e15b8445d..efc043e6fa82 100644 --- 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( - // 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 && ( - - NEW! Generate a pre-made AI scene with assets. - )} - - Advanced File options - - Optimize for Pixel Art} - onCheck={(e, checked) => { - setOptimizeForPixelArt(checked); - }} - disabled={isLoading} - /> - Allow players to authenticate in-game} - onCheck={(e, checked) => { - setAllowPlayersToLogIn(checked); - }} - disabled={isLoading || !isOnline} - tooltipOrHelperText={ - - } - /> + + + + Advanced options + + + + + Optimize for Pixel Art} + onCheck={(e, checked) => { + setOptimizeForPixelArt(checked); + }} + disabled={isLoading} + /> + Allow players to authenticate in-game + } + onCheck={(e, checked) => { + setAllowPlayersToLogIn(checked); + }} + disabled={isLoading || !isOnline} + tooltipOrHelperText={ + + } + /> + + + )} {limits && hasTooManyCloudProjects ? ( diff --git a/newIDE/app/src/ResourcesList/NewResourceDialog.js b/newIDE/app/src/ResourcesList/NewResourceDialog.js index 7a7dd8f2bb3c..c712a5782cba 100644 --- a/newIDE/app/src/ResourcesList/NewResourceDialog.js +++ b/newIDE/app/src/ResourcesList/NewResourceDialog.js @@ -166,19 +166,21 @@ export const NewResourceDialog = ({ ]} onRequestClose={onClose} fixedContent={ - ({ - label: i18n._(displayName), - value: 'standalone-' + name, - })), - { label: Choose a file, value: 'import' }, - ]} - // Enforce scroll on very small screens, because the tabs have long names. - variant={isMobile ? 'scrollable' : undefined} - /> + standaloneTabResourceSources.length ? ( + ({ + label: i18n._(displayName), + value: 'standalone-' + name, + })), + { label: Choose a file, 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 index 6255370193c8..6ad459e38c60 100644 --- 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 index 4cb11f8b2d66..9803afde71cf 100644 --- 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 index bd998d84c225..4418ee513160 100644 --- 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':