Adding dialog to Multi Expression Editor (#4602)

* Adding dialog to Multi Expression Editor * Adding Max width as a property for the Dialog, defaults to old value in css
elsa-workflows · Nov 15, 2023 · f015e85 · f015e85
1 parent 3e16e6a
commit f015e85
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts
@@ -145,6 +145,7 @@ export namespace Components {
         "propertyModel": ActivityDefinitionProperty;
     }
     interface ElsaModalDialog {
+        "dialogWidth": string;
         "hide": (animate?: boolean) => Promise<void>;
         "show": (animate?: boolean) => Promise<void>;
     }
@@ -1065,6 +1066,7 @@ declare namespace LocalJSX {
         "propertyModel"?: ActivityDefinitionProperty;
     }
     interface ElsaModalDialog {
+        "dialogWidth"?: string;
         "onHidden"?: (event: CustomEvent<any>) => void;
         "onShown"?: (event: CustomEvent<any>) => void;
     }

diff --git a/...udio/src/components/editors/elsa-multi-expression-editor/elsa-multi-expression-editor.tsx b/...udio/src/components/editors/elsa-multi-expression-editor/elsa-multi-expression-editor.tsx
@@ -181,7 +181,8 @@ export class ElsaMultiExpressionEditor {
                                   language={monacoLanguage}
                                   editorHeight={this.editorHeight}
                                   singleLineMode={this.singleLineMode}
-                                  context={this.context}/>
+                                  context={this.context}
+                                  opensModal/>
         </div>
         <div class={defaultEditorClass}>
           <slot/>

diff --git a/...-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx b/...-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx
@@ -680,12 +680,12 @@ export class ElsaWorkflowDefinitionEditorScreen {
     return (
       <elsa-modal-dialog ref={el => {
           monacoEditorDialogService.monacoEditorDialog = el;
-        }}>
+        }} dialogWidth='80vw'>
           <div slot="content" class="elsa-py-8 elsa-px-4">
             <elsa-monaco
               value=""
               language="javascript"
-              editor-height="400px"
+              editor-height="80vh"
               single-line={false}
               onValueChanged={e => {
                 monacoEditorDialogService.currentValue = e.detail.value;

diff --git a/...igner/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx b/...igner/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx
@@ -1,4 +1,4 @@
-import {Component, Host, h, State, Listen, Method, Event, EventEmitter} from '@stencil/core';
+import {Component, Host, h, State, Listen, Method, Event, EventEmitter, Prop} from '@stencil/core';
 import {enter, leave} from 'el-transition'
 import {eventBus} from "../../../services";
 import {EventTypes} from "../../../models";
@@ -13,6 +13,7 @@ export class ElsaModalDialog {
   @State() isVisible: boolean;
   overlay: HTMLElement
   modal: HTMLElement
+  @Prop({attribute : 'dialog-width', reflect: true}) dialogWidth: string = '56em'
 
   render() {
     return this.renderModal();
@@ -87,8 +88,8 @@ export class ElsaModalDialog {
                  data-transition-leave="elsa-ease-in elsa-duration-200"
                  data-transition-leave-start="elsa-opacity-0 elsa-translate-y-0 sm:elsa-scale-100"
                  data-transition-leave-end="elsa-opacity-0 elsa-translate-y-4 sm:elsa-translate-y-0 sm:elsa-scale-95"
-                 class="hidden elsa-inline-block sm:elsa-align-top elsa-bg-white elsa-rounded-lg elsa-text-left elsa-overflow-visible elsa-shadow-xl elsa-transform elsa-transition-all sm:elsa-my-8 sm:elsa-align-top sm:elsa-max-w-4xl sm:elsa-w-full"
-                 role="dialog" aria-modal="true" aria-labelledby="modal-headline">
+                 class="hidden elsa-inline-block sm:elsa-align-top elsa-bg-white elsa-rounded-lg elsa-text-left elsa-overflow-visible elsa-shadow-xl elsa-transform elsa-transition-all sm:elsa-my-8 sm:elsa-align-top sm:elsa-w-full"
+                 role="dialog" aria-modal="true" aria-labelledby="modal-headline" style={{'max-width' : this.dialogWidth}}>
               <div class="modal-content">
                 <slot name="content"/>
               </div>