diff --git a/newIDE/app/src/MainFrame/MainFrame.css b/newIDE/app/src/MainFrame/MainFrame.css index 3597e3c1e528..3c0c698f54e9 100644 --- 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 index a6ea5c991ffe..b30418fb0cb7 100644 --- 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( ); const gdevelopTheme = React.useContext(GDevelopThemeContext); - const softKeyboardBottomOffset = useSoftKeyboardBottomOffset(); return ( {({ i18n }) => ( { const editor = editors[editorName]; if (!editor) { @@ -421,36 +421,18 @@ const EditorMosaic = React.forwardRef( return null; } - const avoidSoftKeyboardStyle = editor.noSoftKeyboardAvoidance - ? null - : getAvoidSoftKeyboardStyle(softKeyboardBottomOffset); - if (editor.noTitleBar) { - return ( -
- {editor.renderEditor()} -
- ); + return editor.renderEditor(); } return ( -
- { - - {editor.renderEditor()} - - } -
+ {editor.renderEditor()} + ); }} value={mosaicNode} diff --git a/newIDE/app/src/UI/MobileSoftKeyboard.js b/newIDE/app/src/UI/MobileSoftKeyboard.js index e8c541e13983..63a2bffba1dd 100644 --- 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 index aa8d8a0daebf..bd5459e9f011 100644 --- 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;