fix editors not closing properly on Escape key press

amidaware · Nov 5, 2023 · 0694538 · 0694538
1 parent ac05ad4
commit 0694538
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 64 deletions.
diff --git a/src/components/scripts/ScriptFormModal.vue b/src/components/scripts/ScriptFormModal.vue
@@ -1,17 +1,12 @@
 <template>
   <q-dialog
     ref="dialogRef"
-    persistent
-    @keydown.esc.stop="onDialogHide"
-    :maximized="maximized"
+    maximized
     @hide="onDialogHide"
     @show="loadEditor"
     @before-hide="unloadEditor"
   >
-    <q-card
-      class="q-dialog-plugin"
-      :style="maximized ? '' : 'width: 90vw; max-width: 90vw'"
-    >
+    <q-card class="q-dialog-plugin">
       <q-bar>
         <span class="q-pr-sm">{{ title }}</span>
         <q-btn
@@ -25,28 +20,6 @@
           @click="generateScriptOpenAI"
         />
         <q-space />
-        <q-btn
-          dense
-          flat
-          icon="minimize"
-          @click="maximized = false"
-          :disable="!maximized"
-        >
-          <q-tooltip v-if="maximized" class="bg-white text-primary"
-            >Minimize</q-tooltip
-          >
-        </q-btn>
-        <q-btn
-          dense
-          flat
-          icon="crop_square"
-          @click="maximized = true"
-          :disable="maximized"
-        >
-          <q-tooltip v-if="!maximized" class="bg-white text-primary"
-            >Maximize</q-tooltip
-          >
-        </q-btn>
         <q-btn dense flat icon="close" v-close-popup>
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
@@ -78,7 +51,7 @@
             opacity: '0.2',
           }"
           class="col-4 q-mb-none q-pb-none"
-          :style="{ height: `${maximized ? '82vh' : '64vh'}` }"
+          :style="{ height: `${$q.screen.height - 106}px` }"
         >
           <div class="q-gutter-sm q-pr-sm">
             <q-input
@@ -187,7 +160,7 @@
         <div
           ref="scriptEditor"
           class="col-8 q-mb-none q-pb-none"
-          :style="{ height: `${maximized ? '82vh' : '64vh'}` }"
+          :style="{ height: `${$q.screen.height - 106}px` }"
         ></div>
       </div>
       <q-card-actions>
@@ -296,7 +269,6 @@ const script: Script = props.script
     });
 
 if (props.clone) script.name = `(Copy) ${script.name}`;
-const maximized = ref(false);
 const loading = ref(false);
 const agentLoading = ref(false);
 

diff --git a/src/components/scripts/ScriptSnippetFormModal.vue b/src/components/scripts/ScriptSnippetFormModal.vue
@@ -1,17 +1,12 @@
 <template>
   <q-dialog
     ref="dialogRef"
-    persistent
-    @keydown.esc.stop="onDialogHide"
-    :maximized="maximized"
+    maximized
     @hide="onDialogHide"
     @show="loadEditor"
     @before-hide="unloadEditor"
   >
-    <q-card
-      class="q-dialog-plugin"
-      :style="maximized ? '' : 'width: 70vw; max-width: 90vw'"
-    >
+    <q-card class="q-dialog-plugin">
       <q-bar>
         <span class="q-pr-sm">{{ title }}</span>
         <q-btn
@@ -25,35 +20,13 @@
           @click="generateScriptOpenAI"
         />
         <q-space />
-        <q-btn
-          dense
-          flat
-          icon="minimize"
-          @click="maximized = false"
-          :disable="!maximized"
-        >
-          <q-tooltip v-if="maximized" class="bg-white text-primary"
-            >Minimize</q-tooltip
-          >
-        </q-btn>
-        <q-btn
-          dense
-          flat
-          icon="crop_square"
-          @click="maximized = true"
-          :disable="maximized"
-        >
-          <q-tooltip v-if="!maximized" class="bg-white text-primary"
-            >Maximize</q-tooltip
-          >
-        </q-btn>
         <q-btn dense flat icon="close" v-close-popup>
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
       <div class="row">
         <q-input
-          :rules="[(val) => !!val || '*Required']"
+          :rules="[(val: string) => !!val || '*Required']"
           class="q-pa-sm col-4"
           v-model="snippet.name"
           label="Name"
@@ -82,7 +55,7 @@
 
       <div
         ref="snippetEditor"
-        :style="{ height: `${maximized ? '82vh' : '64vh'}` }"
+        :style="{ height: `${$q.screen.height - 132}px` }"
       ></div>
 
       <q-card-actions align="right">
@@ -139,7 +112,6 @@ const openAIEnabled = computed(() => store.state.openAIIntegrationEnabled);
 const snippet: ScriptSnippet = props.snippet
   ? reactive(Object.assign({}, props.snippet))
   : reactive({ name: "", code: "", shell: "powershell" });
-const maximized = ref(false);
 const loading = ref(false);
 
 const title = computed(() => {