Fix broken editor panels drag'n'drop (#6444)

4ian · Mar 11, 2024 · 4845251 · 4845251
1 parent 31ef3fe
commit 4845251
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 42 deletions.
diff --git a/newIDE/app/src/MainFrame/MainFrame.css b/newIDE/app/src/MainFrame/MainFrame.css
@@ -54,6 +54,13 @@ html {
   padding-left: env(safe-area-inset-left);
 }
 
+/* Helper for avoiding the soft keyboard. See also `getAvoidSoftKeyboardStyle`. */
+.avoid-soft-keyboard {
+  transform: translateY(calc(-1 * var(--softKeyboardBottomOffset)));
+  transition: transform 0.2s linear;
+  will-change: transform;
+}
+
 /* Disable selections and web-ish cursors */
 :not(input):not(textarea):not(canvas):not(code),
 :not(input):not(textarea):not(canvas):not(code)::after,

diff --git a/newIDE/app/src/UI/EditorMosaic/index.js b/newIDE/app/src/UI/EditorMosaic/index.js
@@ -9,15 +9,12 @@ import {
 import CloseButton from './CloseButton';
 import GDevelopThemeContext from '../Theme/GDevelopThemeContext';
 import { type MessageDescriptor } from '../../Utils/i18n/MessageDescriptor.flow';
-import {
-  getAvoidSoftKeyboardStyle,
-  useSoftKeyboardBottomOffset,
-} from '../../UI/MobileSoftKeyboard';
 import { useDebounce } from '../../Utils/UseDebounce';
 
 // EditorMosaic default styling:
 import 'react-mosaic-component/react-mosaic-component.css';
 import './style.css';
+import classNames from 'classnames';
 
 export type Editor = {|
   type: 'primary' | 'secondary',
@@ -403,15 +400,18 @@ const EditorMosaic = React.forwardRef<Props, EditorMosaicInterface>(
     );
 
     const gdevelopTheme = React.useContext(GDevelopThemeContext);
-    const softKeyboardBottomOffset = useSoftKeyboardBottomOffset();
 
     return (
       <I18n>
         {({ i18n }) => (
           <MosaicWithoutDragDropContext
-            className={`${
-              gdevelopTheme.mosaicRootClassName
-            } mosaic-blueprint-theme mosaic-gd-theme`}
+            className={classNames({
+              [gdevelopTheme.mosaicRootClassName]: true,
+              'mosaic-gd-theme': true,
+              'mosaic-blueprint-theme': true,
+              // Move the entire mosaic up when the soft keyboard is open:
+              'avoid-soft-keyboard': true,
+            })}
             renderTile={(editorName: string, path: string) => {
               const editor = editors[editorName];
               if (!editor) {
@@ -421,36 +421,18 @@ const EditorMosaic = React.forwardRef<Props, EditorMosaicInterface>(
                 return null;
               }
 
-              const avoidSoftKeyboardStyle = editor.noSoftKeyboardAvoidance
-                ? null
-                : getAvoidSoftKeyboardStyle(softKeyboardBottomOffset);
-
               if (editor.noTitleBar) {
-                return (
-                  <div
-                    className="mosaic-window-keyboard-avoidance-wrapper"
-                    style={avoidSoftKeyboardStyle}
-                  >
-                    {editor.renderEditor()}
-                  </div>
-                );
+                return editor.renderEditor();
               }
 
               return (
-                <div
-                  className="mosaic-window-keyboard-avoidance-wrapper"
-                  style={avoidSoftKeyboardStyle}
+                <MosaicWindow
+                  path={path}
+                  title={i18n._(editor.title)}
+                  toolbarControls={editor.toolbarControls}
                 >
-                  {
-                    <MosaicWindow
-                      path={path}
-                      title={i18n._(editor.title)}
-                      toolbarControls={editor.toolbarControls}
-                    >
-                      {editor.renderEditor()}
-                    </MosaicWindow>
-                  }
-                </div>
+                  {editor.renderEditor()}
+                </MosaicWindow>
               );
             }}
             value={mosaicNode}

diff --git a/newIDE/app/src/UI/MobileSoftKeyboard.js b/newIDE/app/src/UI/MobileSoftKeyboard.js
@@ -3,6 +3,9 @@ export const useSoftKeyboardBottomOffset = () => {
   return 0;
 };
 
+/**
+ * Helper for avoiding the soft keyboard. See also `.avoid-soft-keyboard`.
+ */
 export const getAvoidSoftKeyboardStyle = (softKeyboardBottomOffset: number) => {
   return {
     transform: `translateY(0px)`,

diff --git a/newIDE/app/src/UI/Theme/Global/Mosaic.css b/newIDE/app/src/UI/Theme/Global/Mosaic.css
@@ -13,15 +13,6 @@
   background: var(--mosaic-layout-background-color) !important;
 }
 
-/**
- * We wrap mosaic-window in a div to allow it to move up when the soft keyboard is open.
- * We need to apply a 100% width/height to the child, as mosaic-window does to its child.
- */
-.mosaic-gd-theme .mosaic-window-keyboard-avoidance-wrapper > * {
-  width: 100%;
-  height: 100%;
-}
-
 .mosaic-gd-theme .mosaic-window .mosaic-window-title {
   padding-left: 8px; /* Follow same spacing as in the rest of the app. */
   color: var(--mosaic-title-color) !important;