refactor: quick entry layout builder modal

frontend/src/components/Settings/QuickEntryLayoutBuilder.vue

@@ -1,14 +1,11 @@
 <template>
   <div>
-    <Draggable :list="sections" item-key="label" class="flex flex-col">
+    <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
       <template #item="{ element: section }">
+        <div class="flex flex-col gap-1.5 p-2.5 bg-gray-50 rounded">
+          <div class="flex items-center justify-between">
             <div
-          class="py-2 first:pt-0"
+              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4"
-          :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
-        >
-          <div class="flex items-center justify-between pb-2">
-            <div
-              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
             >
               <div
                 v-if="!section.editingLabel"
@@ -39,12 +36,11 @@
               </template>
             </Dropdown>
           </div>
-          <div>
           <Draggable
             :list="section.fields"
             group="fields"
             item-key="label"
-              class="grid gap-2"
+            class="grid gap-1.5"
             :class="
               section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
             "
@@ -52,22 +48,21 @@
           >
             <template #item="{ element: field }">
               <div
-                  class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+                class="px-2.5 py-2 border rounded text-base bg-white text-gray-800 flex items-center leading-4 justify-between gap-2"
               >
                 <div class="flex items-center gap-2">
                   <DragVerticalIcon class="h-3.5 cursor-grab" />
                   <div>{{ field.label }}</div>
                 </div>
-                  <div>
                 <Button
                   variant="ghost"
+                  class="!size-4 rounded-sm"
                   icon="x"
                   @click="
                     section.fields.splice(section.fields.indexOf(field), 1)
                   "
                 />
               </div>
-                </div>
             </template>
           </Draggable>
           <Autocomplete
@@ -77,16 +72,9 @@
             @change="(e) => addField(section, e)"
           >
             <template #target="{ togglePopover }">
-                <div
+              <div class="gap-2 w-full">
-                  class="grid gap-2 w-full"
-                  :class="
-                    section.columns
-                      ? 'grid-cols-' + section.columns
-                      : 'grid-cols-3'
-                  "
-                >
                 <Button
-                    class="mt-2 w-full !h-[38px] !border-gray-200"
+                  class="w-full !h-8 !border-gray-200 hover:!border-gray-300"
                   variant="outline"
                   @click="togglePopover()"
                   :label="__('Add Field')"
@@ -107,13 +95,12 @@
             </template>
           </Autocomplete>
         </div>
-        </div>
       </template>
     </Draggable>
-    <div class="py-2 border-t">
+    <div class="mt-5.5">
       <Button
-        class="w-full !h-[38px] !border-gray-200"
+        class="w-full h-8"
-        variant="outline"
+        variant="subtle"
         :label="__('Add Section')"
         @click="
           sections.push({

frontend/src/components/Settings/QuickEntryModal.vue

@@ -1,9 +1,9 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
-    <template #body>
+    <template #body-title>
-      <div class="flex flex-col overflow-hidden h-[calc(100vh_-_8rem)]">
+      <h3
-        <div class="flex flex-col gap-2 p-8 pb-5">
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
-          <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+      >
         <div>{{ __('Edit Quick Entry Layout') }}</div>
         <Badge
           v-if="dirty"
@@ -11,35 +11,25 @@
           variant="subtle"
           theme="orange"
         />
-          </h2>
+      </h3>
-          <div class="flex gap-6 items-end">
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-3">
+        <div class="flex justify-between gap-2">
           <FormControl
-              class="flex-1"
             type="select"
+            class="w-1/4"
             v-model="_doctype"
-              :label="__('DocType')"
             :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
             @change="reload"
           />
-            <div class="flex flex-row-reverse gap-2">
+          <Switch
-              <Button
+            v-model="preview"
-                :loading="loading"
+            :label="preview ? __('Hide preview') : __('Show preview')"
-                :label="__('Save')"
+            size="sm"
-                variant="solid"
-                @click="saveChanges"
-              />
-              <Button :label="__('Reset')" @click="reload" />
-              <Button
-                :label="preview ? __('Hide Preview') : __('Show Preview')"
-                @click="preview = !preview"
           />
         </div>
-          </div>
+        <div v-if="sections?.data">
-        </div>
-        <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
-          <div
-            class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
-          >
           <QuickEntryLayoutBuilder
             v-if="!preview"
             :sections="sections.data"
@@ -48,6 +38,16 @@
           <Fields v-else :sections="sections.data" :data="{}" />
         </div>
       </div>
+    </template>
+    <template #actions>
+      <div class="flex flex-row-reverse gap-2">
+        <Button
+          :loading="loading"
+          :label="__('Save')"
+          variant="solid"
+          @click="saveChanges"
+        />
+        <Button :label="__('Reset')" @click="reload" />
       </div>
     </template>
   </Dialog>
@@ -56,7 +56,7 @@
 import Fields from '@/components/Fields.vue'
 import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
-import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
 import { ref, watch, onMounted, nextTick } from 'vue'
 
 const props = defineProps({
@@ -121,6 +121,7 @@ function saveChanges() {
     },
   ).then(() => {
     loading.value = false
+    show.value = false
     reload()
   })
 }

frontend/src/components/Settings/SidePanelLayoutBuilder.vue

@@ -62,13 +62,12 @@
             >
               <template #item="{ element: field }">
                 <div
-                  class="px-2.5 py-2 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+                  class="px-2.5 py-2 border rounded text-base leading-4 text-gray-800 flex items-center justify-between gap-2"
                 >
                   <div class="flex items-center gap-2">
                     <DragVerticalIcon class="h-3.5 cursor-grab" />
                     <div>{{ field.label }}</div>
                   </div>
-                  <div>
                   <Button
                     variant="ghost"
                     icon="x"
@@ -78,7 +77,6 @@
                     "
                   />
                 </div>
-                </div>
               </template>
             </Draggable>
             <Autocomplete