Adapt the condition column size in the Events Sheet (#7230)

* Also change the default extension editor layout.

newIDE/app/src/EventsFunctionsExtensionEditor/index.js

@@ -117,12 +117,12 @@ const getInitialMosaicEditorNodes = () => ({
   direction: 'row',
   first: 'functions-list',
   second: {
-    direction: 'column',
-    first: 'parameters',
-    second: 'events-sheet',
-    splitPercentage: 25,
+    direction: 'row',
+    first: 'events-sheet',
+    second: 'parameters',
+    splitPercentage: 80,
   },
-  splitPercentage: 25,
+  splitPercentage: 20,
 });
 
 export default class EventsFunctionsExtensionEditor extends React.Component<

newIDE/app/src/EventsSheet/EventsTree/ConditionsActionsColumns.js

@@ -13,6 +13,7 @@ type Props = {|
   windowSize: WindowSizeType,
   className?: string,
   leftIndentWidth: number,
+  eventsSheetWidth: number,
 |};
 
 const styles = {
@@ -25,6 +26,25 @@ const styles = {
   },
 };
 
+const getConditionWidthRatio = (eventsSheetWidth: number) => {
+  // Avoid to leave too much empty space between condition and action on big screens.
+  const ratioMin = 0.35;
+  const bigSheetWidth = 1600;
+  // Avoid to squash the condition on small screens.
+  const ratioMax = 0.5;
+  const smallSheetWidth = 800;
+  // Smoothly go from one case to another when the window is resized.
+  return Math.max(
+    ratioMin,
+    Math.min(
+      ratioMax,
+      ratioMin +
+        ((ratioMax - ratioMin) * (bigSheetWidth - eventsSheetWidth)) /
+          (bigSheetWidth - smallSheetWidth)
+    )
+  );
+};
+
 /**
  * Display the lists of instructions (conditions and actions),
  * next to each other on a big screen (with proper sizing for the conditions column),
@@ -51,7 +71,9 @@ const ConditionsActionsColumns = (props: Props) => {
     <div style={styles.twoColumnsContainer} className={props.className}>
       {props.renderConditionsList({
         style: {
-          width: `calc(35vw - ${props.leftIndentWidth}px)`,
+          width: `${getConditionWidthRatio(props.eventsSheetWidth) *
+            props.eventsSheetWidth -
+            props.leftIndentWidth}px`,
         },
         className: conditionsContainer,
       })}

newIDE/app/src/EventsSheet/EventsTree/Renderers/EventRenderer.js

@@ -50,6 +50,7 @@ export type EventRendererProps = {
 
   screenType: ScreenType,
   windowSize: WindowSizeType,
+  eventsSheetWidth: number,
   eventsSheetHeight: number,
 
   idPrefix: string,

newIDE/app/src/EventsSheet/EventsTree/Renderers/ForEachChildVariableEvent.js

@@ -314,6 +314,7 @@ export default class ForEachChildVariableEvent extends React.Component<
         <ConditionsActionsColumns
           leftIndentWidth={this.props.leftIndentWidth}
           windowSize={this.props.windowSize}
+          eventsSheetWidth={this.props.eventsSheetWidth}
           renderConditionsList={({ style, className }) => (
             <InstructionsList
               platform={this.props.project.getCurrentPlatform()}

newIDE/app/src/EventsSheet/EventsTree/Renderers/ForEachEvent.js

@@ -164,6 +164,7 @@ export default class ForEachEvent extends React.Component<
         <ConditionsActionsColumns
           leftIndentWidth={this.props.leftIndentWidth}
           windowSize={this.props.windowSize}
+          eventsSheetWidth={this.props.eventsSheetWidth}
           renderConditionsList={({ style, className }) => (
             <InstructionsList
               platform={this.props.project.getCurrentPlatform()}

newIDE/app/src/EventsSheet/EventsTree/Renderers/RepeatEvent.js

@@ -177,6 +177,7 @@ export default class RepeatEvent extends React.Component<
         <ConditionsActionsColumns
           leftIndentWidth={this.props.leftIndentWidth}
           windowSize={this.props.windowSize}
+          eventsSheetWidth={this.props.eventsSheetWidth}
           renderConditionsList={({ style, className }) => (
             <InstructionsList
               platform={this.props.project.getCurrentPlatform()}

newIDE/app/src/EventsSheet/EventsTree/Renderers/StandardEvent.js

@@ -48,6 +48,7 @@ export default class StandardEvent extends React.Component<
         <ConditionsActionsColumns
           leftIndentWidth={this.props.leftIndentWidth}
           windowSize={this.props.windowSize}
+          eventsSheetWidth={this.props.eventsSheetWidth}
           className={classNames({
             [executableEventContainer]: true,
           })}

newIDE/app/src/EventsSheet/EventsTree/Renderers/WhileEvent.js

@@ -88,6 +88,7 @@ export default class WhileEvent extends React.Component<EventRendererProps, *> {
         <ConditionsActionsColumns
           leftIndentWidth={this.props.leftIndentWidth}
           windowSize={this.props.windowSize}
+          eventsSheetWidth={this.props.eventsSheetWidth}
           renderConditionsList={({ style, className }) => (
             <InstructionsList
               platform={this.props.project.getCurrentPlatform()}

newIDE/app/src/EventsSheet/EventsTree/index.js

@@ -127,6 +127,7 @@ type EventsContainerProps = {|
   renderObjectThumbnail: string => Node,
 
   screenType: ScreenType,
+  eventsSheetWidth: number,
   eventsSheetHeight: number,
 
   connectDragSource: ConnectDragSource,
@@ -232,6 +233,7 @@ const EventContainer = (props: EventsContainerProps) => {
               }
               renderObjectThumbnail={props.renderObjectThumbnail}
               screenType={props.screenType}
+              eventsSheetWidth={props.eventsSheetWidth}
               eventsSheetHeight={props.eventsSheetHeight}
               windowSize={props.windowSize}
               idPrefix={props.idPrefix}
@@ -334,6 +336,7 @@ type EventsTreeProps = {|
 
   screenType: ScreenType,
   windowSize: WindowSizeType,
+  eventsSheetWidth: number,
   eventsSheetHeight: number,
   fontSize?: number,
   indentScale: number,
@@ -927,6 +930,7 @@ export default class ThemableEventsTree extends Component<
                 }
                 renderObjectThumbnail={this._renderObjectThumbnail}
                 screenType={this.props.screenType}
+                eventsSheetWidth={this.props.eventsSheetWidth}
                 eventsSheetHeight={this.props.eventsSheetHeight}
                 connectDragSource={connectDragSource}
                 windowSize={this.props.windowSize}

newIDE/app/src/EventsSheet/index.js

@@ -4,6 +4,7 @@ import { I18n } from '@lingui/react';
 import { type I18n as I18nType } from '@lingui/core';
 
 import * as React from 'react';
+import Measure from 'react-measure';
 import EventsTree from './EventsTree';
 import { getInstructionMetadata } from './InstructionEditor/InstructionEditor';
 import InstructionEditorDialog from './InstructionEditor/InstructionEditorDialog';
@@ -1971,6 +1972,11 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
                     }
                     screenType={screenType}
                     windowSize={windowSize}
+                    eventsSheetWidth={
+                      this._containerDiv.current
+                        ? this._containerDiv.current.clientWidth
+                        : 0
+                    }
                     eventsSheetHeight={
                       this._containerDiv.current
                         ? this._containerDiv.current.clientHeight