Merge project manager & app burger menu buttons (#7289)

* The goal of this change is to simplify the top left corner of the app, by merging the App burger menu and the Project manager button into one. Having 2 buttons was causing confusion in the flow of using the app, by mistakenly pressing the wrong button. * The app menu buttons that are useful are now displayed at the top of the project manager drawer, on the relevant platforms: Web, Windows & mobile, because other platforms have a built-in OS menu.
4ian · Jan 13, 2025 · 8b36908 · 8b36908
1 parent c0722dc
commit 8b36908
Show file tree

Hide file tree

Showing 20 changed files with 1,166 additions and 799 deletions.
diff --git a/newIDE/app/src/MainFrame/EditorContainers/BaseEditor.js b/newIDE/app/src/MainFrame/EditorContainers/BaseEditor.js
@@ -103,6 +103,7 @@ export type RenderEditorContainerProps = {|
   onSelectExampleShortHeader: ExampleShortHeader => void,
   onSelectPrivateGameTemplateListingData: PrivateGameTemplateListingData => void,
   onOpenLanguageDialog: () => void,
+  onOpenVersionHistory: () => void,
   selectInAppTutorial: (tutorialId: string) => void,
   onOpenProfile: () => void,
   onOpenPreferences: () => void,

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js
@@ -7,7 +7,6 @@ import FlatButton from '../../../UI/FlatButton';
 import { Column, Line } from '../../../UI/Grid';
 import { LineStackLayout } from '../../../UI/Layout';
 import UserChip from '../../../UI/User/UserChip';
-import ProjectManagerIcon from '../../../UI/CustomSvgIcons/ProjectManager';
 import Window from '../../../Utils/Window';
 import optionalRequire from '../../../Utils/OptionalRequire';
 import TextButton from '../../../UI/TextButton';
@@ -18,12 +17,13 @@ import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindow
 import SaveProjectIcon from '../../SaveProjectIcon';
 import Mobile from '../../../UI/CustomSvgIcons/Mobile';
 import Desktop from '../../../UI/CustomSvgIcons/Desktop';
+import HistoryIcon from '../../../UI/CustomSvgIcons/History';
 import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext';
 const electron = optionalRequire('electron');
 
 type Props = {|
   hasProject: boolean,
-  onOpenProjectManager: () => void,
+  onOpenVersionHistory: () => void,
   onOpenProfile: () => void,
   onOpenLanguageDialog: () => void,
   onSave: () => Promise<void>,
@@ -32,7 +32,7 @@ type Props = {|
 
 export const HomePageHeader = ({
   hasProject,
-  onOpenProjectManager,
+  onOpenVersionHistory,
   onOpenProfile,
   onOpenLanguageDialog,
   onSave,
@@ -52,22 +52,23 @@ export const HomePageHeader = ({
         >
           <Column noMargin>
             <Line noMargin>
-              <IconButton
-                size="small"
-                id="main-toolbar-project-manager-button"
-                onClick={onOpenProjectManager}
-                tooltip={t`Project Manager`}
-                color="default"
-                disabled={!hasProject}
-              >
-                <ProjectManagerIcon />
-              </IconButton>
               {!!hasProject && (
-                <SaveProjectIcon
-                  id="main-toolbar-save-button"
-                  onSave={onSave}
-                  canSave={canSave}
-                />
+                <>
+                  <IconButton
+                    size="small"
+                    id="main-toolbar-history-button"
+                    onClick={onOpenVersionHistory}
+                    tooltip={t`Open version history`}
+                    color="default"
+                  >
+                    <HistoryIcon />
+                  </IconButton>
+                  <SaveProjectIcon
+                    id="main-toolbar-save-button"
+                    onSave={onSave}
+                    canSave={canSave}
+                  />
+                </>
               )}
             </Line>
           </Column>

diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js
@@ -123,7 +123,7 @@ type Props = {|
   onOpenPrivateGameTemplateListingData: (
     privateGameTemplateListingData: PrivateGameTemplateListingData
   ) => void,
-  onOpenProjectManager: () => void,
+  onOpenVersionHistory: () => void,
   askToCloseProject: () => Promise<boolean>,
   closeProject: () => Promise<void>,
 
@@ -177,7 +177,7 @@ export const HomePage = React.memo<Props>(
         onSelectExampleShortHeader,
         onSelectPrivateGameTemplateListingData,
         onOpenPrivateGameTemplateListingData,
-        onOpenProjectManager,
+        onOpenVersionHistory,
         onOpenLanguageDialog,
         onOpenProfile,
         onCreateProjectFromExample,
@@ -399,7 +399,7 @@ export const HomePage = React.memo<Props>(
                 hasProject={!!project}
                 onOpenLanguageDialog={onOpenLanguageDialog}
                 onOpenProfile={onOpenProfile}
-                onOpenProjectManager={onOpenProjectManager}
+                onOpenVersionHistory={onOpenVersionHistory}
                 onSave={onSave}
                 canSave={canSave}
               />
@@ -410,7 +410,7 @@ export const HomePage = React.memo<Props>(
           setToolbar,
           onOpenLanguageDialog,
           onOpenProfile,
-          onOpenProjectManager,
+          onOpenVersionHistory,
           project,
           onSave,
           canSave,
@@ -615,7 +615,7 @@ export const renderHomePageContainer = (
       props.onOpenPrivateGameTemplateListingData
     }
     onOpenNewProjectSetupDialog={props.onOpenNewProjectSetupDialog}
-    onOpenProjectManager={props.onOpenProjectManager}
+    onOpenVersionHistory={props.onOpenVersionHistory}
     onOpenTemplateFromTutorial={props.onOpenTemplateFromTutorial}
     onOpenTemplateFromCourseChapter={props.onOpenTemplateFromCourseChapter}
     onOpenLanguageDialog={props.onOpenLanguageDialog}

diff --git a/newIDE/app/src/MainFrame/MainFrameCommands.js b/newIDE/app/src/MainFrame/MainFrameCommands.js
@@ -70,11 +70,11 @@ const useMainFrameCommands = (handlers: CommandHandlers) => {
     handler: handlers.onCloseApp,
   });
 
-  useCommand('OPEN_PROFILE', !!handlers.project, {
+  useCommand('OPEN_PROFILE', true, {
     handler: handlers.onOpenProfile,
   });
 
-  useCommand('OPEN_PROJECT_MANAGER', !!handlers.project, {
+  useCommand('OPEN_PROJECT_MANAGER', true, {
     handler: handlers.onOpenProjectManager,
   });
 

diff --git a/newIDE/app/src/MainFrame/MainMenu.js b/newIDE/app/src/MainFrame/MainMenu.js
@@ -179,36 +179,6 @@ export const buildMainMenuDeclarativeTemplate = ({
         onClickSendEvent: 'main-menu-close',
         enabled: !!project,
       },
-      ...(!isMacLike() || !isApplicationTopLevelMenu
-        ? [
-            { type: 'separator' },
-            {
-              label: i18n._(t`My Profile`),
-              onClickSendEvent: 'main-menu-open-profile',
-            },
-            {
-              label: i18n._(t`Preferences`),
-              onClickSendEvent: 'main-menu-open-preferences',
-            },
-            {
-              label: i18n._(t`Language`),
-              onClickSendEvent: 'main-menu-open-language',
-            },
-            // Leaving the app can only be done on the desktop app.
-            ...(!!electron
-              ? [
-                  { type: 'separator' },
-                  {
-                    label: i18n._(t`Exit GDevelop`),
-                    accelerator: getElectronAccelerator(
-                      shortcutMap['QUIT_APP']
-                    ),
-                    onClickSendEvent: 'main-menu-close-app',
-                  },
-                ]
-              : []),
-          ]
-        : []),
     ],
   };
 
@@ -360,9 +330,9 @@ export const buildMainMenuDeclarativeTemplate = ({
   // on the web-app, because they would not work and make sense at all.
   const template: Array<MenuDeclarativeItemTemplate> = [
     fileTemplate,
-    ...(!!electron ? [editTemplate] : []),
-    viewTemplate,
-    ...(!!electron ? [windowTemplate] : []),
+    ...(!!electron && isApplicationTopLevelMenu ? [editTemplate] : []),
+    ...(!!electron && isApplicationTopLevelMenu ? [viewTemplate] : []),
+    ...(!!electron && isApplicationTopLevelMenu ? [windowTemplate] : []),
     helpTemplate,
   ];
 

diff --git a/newIDE/app/src/MainFrame/TabsTitlebar.js b/newIDE/app/src/MainFrame/TabsTitlebar.js
@@ -2,18 +2,16 @@
 import * as React from 'react';
 import MenuIcon from '../UI/CustomSvgIcons/Menu';
 import IconButton from '../UI/IconButton';
-import ElementWithMenu from '../UI/Menu/ElementWithMenu';
 import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
 import optionalRequire from '../Utils/OptionalRequire';
 import { isMacLike } from '../Utils/Platform';
 import Window, { useWindowControlsOverlayWatcher } from '../Utils/Window';
-import { type MenuItemTemplate } from '../UI/Menu/Menu.flow';
 import useForceUpdate from '../Utils/UseForceUpdate';
 const electron = optionalRequire('electron');
 
 type Props = {|
-  onBuildMenuTemplate: () => Array<MenuItemTemplate>,
   children: React.Node,
+  toggleProjectManager: () => void,
 |};
 
 const DRAGGABLE_PART_CLASS_NAME = 'title-bar-draggable-part';
@@ -28,7 +26,10 @@ const styles = {
 /**
  * The titlebar containing a menu, the tabs and giving space for window controls.
  */
-export default function TabsTitlebar({ children, onBuildMenuTemplate }: Props) {
+export default function TabsTitlebar({
+  children,
+  toggleProjectManager,
+}: Props) {
   const forceUpdate = useForceUpdate();
   const gdevelopTheme = React.useContext(GDevelopThemeContext);
   const backgroundColor = gdevelopTheme.titlebar.backgroundColor;
@@ -74,19 +75,16 @@ export default function TabsTitlebar({ children, onBuildMenuTemplate }: Props) {
         }}
         className={DRAGGABLE_PART_CLASS_NAME}
       />
-      <ElementWithMenu
-        element={
-          <IconButton
-            size="small"
-            id="gdevelop-main-menu"
-            style={styles.menuIcon}
-            color="default"
-          >
-            <MenuIcon />
-          </IconButton>
-        }
-        buildMenuTemplate={onBuildMenuTemplate}
-      />
+      <IconButton
+        size="small"
+        // Even if not in the toolbar, keep this ID for backward compatibility for tutorials.
+        id="main-toolbar-project-manager-button"
+        style={styles.menuIcon}
+        color="default"
+        onClick={toggleProjectManager}
+      >
+        <MenuIcon />
+      </IconButton>
       {children}
       <div
         style={{

diff --git a/newIDE/app/src/MainFrame/Toolbar/index.js b/newIDE/app/src/MainFrame/Toolbar/index.js
@@ -5,7 +5,6 @@ import { Toolbar, ToolbarGroup } from '../../UI/Toolbar';
 import PreviewAndShareButtons, {
   type PreviewAndShareButtonsProps,
 } from './PreviewAndShareButtons';
-import ProjectManagerIcon from '../../UI/CustomSvgIcons/ProjectManager';
 import IconButton from '../../UI/IconButton';
 import { Spacer } from '../../UI/Grid';
 import HistoryIcon from '../../UI/CustomSvgIcons/History';
@@ -17,7 +16,6 @@ import SaveProjectIcon from '../SaveProjectIcon';
 
 export type MainFrameToolbarProps = {|
   showProjectButtons: boolean,
-  toggleProjectManager: () => void,
   openShareDialog: () => void,
   onSave: () => Promise<void>,
   canSave: boolean,
@@ -34,7 +32,6 @@ export type ToolbarInterface = {|
 |};
 
 type LeftButtonsToolbarGroupProps = {|
-  toggleProjectManager: () => void,
   onSave: () => Promise<void>,
   onOpenVersionHistory: () => void,
   checkedOutVersionStatus?: ?OpenedVersionStatus,
@@ -47,22 +44,12 @@ const LeftButtonsToolbarGroup = React.memo<LeftButtonsToolbarGroupProps>(
   function LeftButtonsToolbarGroup(props) {
     return (
       <ToolbarGroup firstChild>
-        <IconButton
-          size="small"
-          id="main-toolbar-project-manager-button"
-          onClick={props.toggleProjectManager}
-          tooltip={t`Project Manager`}
-          color="default"
-        >
-          <ProjectManagerIcon />
-        </IconButton>
         <IconButton
           size="small"
           id="toolbar-history-button"
           onClick={props.onOpenVersionHistory}
           tooltip={t`Open version history`}
           color="default"
-          disabled={false}
         >
           <HistoryIcon />
         </IconButton>
@@ -116,7 +103,6 @@ export default React.forwardRef<MainFrameToolbarProps, ToolbarInterface>(
         {props.showProjectButtons ? (
           <>
             <LeftButtonsToolbarGroup
-              toggleProjectManager={props.toggleProjectManager}
               onSave={props.onSave}
               canSave={props.canSave}
               onOpenVersionHistory={props.onOpenVersionHistory}