Ensure Home tab still shown when project opened on small screens

* Also smoothly scroll to the active tab
4ian · Dec 22, 2024 · a221990 · a221990
1 parent 85f6e74
commit a221990
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/newIDE/app/src/JsExtensionsLoader/BrowserJsExtensionsLoader.js b/newIDE/app/src/JsExtensionsLoader/BrowserJsExtensionsLoader.js
@@ -53,6 +53,12 @@ const jsExtensions = [
     extensionModule: require('GDJS-for-web-app-only/Runtime/Extensions/Physics2Behavior/JsExtension.js'),
     objectsRenderingServiceModules: {},
   },
+  {
+    name: 'Physics3D',
+    // $FlowExpectedError - this path is ignored for Flow.
+    extensionModule: require('GDJS-for-web-app-only/Runtime/Extensions/Physics3DBehavior/JsExtension.js'),
+    objectsRenderingServiceModules: {},
+  },
   {
     name: 'ExampleJsExtension',
     // $FlowExpectedError - this path is ignored for Flow.

diff --git a/newIDE/app/src/MainFrame/EditorTabs/DraggableEditorTabs.js b/newIDE/app/src/MainFrame/EditorTabs/DraggableEditorTabs.js
@@ -16,6 +16,7 @@ import {
   ClosableTab,
   type ClosableTabProps,
 } from '../../UI/ClosableTabs';
+import { useResponsiveWindowSize } from '../../UI/Responsive/ResponsiveWindowMeasurer';
 
 const DragSourceAndDropTarget = makeDragSourceAndDropTarget<EditorTab>(
   'draggable-closable-tab'
@@ -46,6 +47,7 @@ export function DraggableEditorTabs({
   onDropTab,
 }: DraggableEditorTabsProps) {
   let draggedTabIndex: ?number = null;
+  const { windowSize } = useResponsiveWindowSize();
 
   const currentTab = getCurrentTab(editorTabs);
 
@@ -54,10 +56,15 @@ export function DraggableEditorTabs({
       if (!currentTab) return;
       const tabElement = document.getElementById(getTabId(currentTab));
       if (tabElement) {
-        tabElement.scrollIntoView();
+        tabElement.scrollIntoView({
+          behavior: 'smooth',
+          // Use 'end' to keep "Home" tab visible on small screens
+          // when opening a new project.
+          inline: windowSize === 'small' ? 'end' : 'nearest',
+        });
       }
     },
-    [currentTab]
+    [currentTab, windowSize]
   );
 
   return (

diff --git a/newIDE/app/src/UI/ClosableTabs.js b/newIDE/app/src/UI/ClosableTabs.js
@@ -202,6 +202,11 @@ export function ClosableTab({
           position: 'relative',
           display: 'inline-block',
           marginRight: 2,
+          // Leave some space when scrolled into view to let the user understand
+          // that there are more tabs.
+          scrollMarginRight: 20,
+          scrollMarginLeft: 20,
+          // Style:
           borderTopRightRadius: 8,
           borderTopLeftRadius: 8,
           borderTop: '1px solid black',