Merge pull request #1339 from suraj-webkul/inline-ui

Inline UI
krayin · Aug 13, 2024 · be0ab1e · be0ab1e
2 parents d5f70cf + 8a782d4
commit be0ab1e
Show file tree

Hide file tree

Showing 14 changed files with 185 additions and 141 deletions.
diff --git a/packages/Webkul/Admin/src/Resources/views/components/attributes/view.blade.php b/packages/Webkul/Admin/src/Resources/views/components/attributes/view.blade.php
@@ -5,10 +5,10 @@
     'url'              => null,
 ])
 
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-1">
     @foreach ($customAttributes as $attribute)
         @if (view()->exists($typeView = 'admin::components.attributes.view.' . $attribute->type))
-            <div class="grid grid-cols-[1fr_2fr] items-center gap-2">
+            <div class="grid grid-cols-[1fr_2fr] items-center gap-1">
                 <div class="label">{{ $attribute->name }}</div>
 
                 <div class="font-medium">

diff --git a/...Admin/src/Resources/views/components/form/control-group/controls/inline/address.blade.php b/...Admin/src/Resources/views/components/form/control-group/controls/inline/address.blade.php
@@ -1,7 +1,13 @@
 <v-inline-address-edit
     {{ $attributes->except('value') }}
     :value='@json($attributes->get('value'))'
-></v-inline-address-edit>
+>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-address-edit>
 
 @pushOnce('scripts')
     <script
@@ -11,7 +17,7 @@
         <div class="group w-full max-w-full hover:rounded-sm">
             <!-- Non-editing view -->
             <div
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >

diff --git a/...Admin/src/Resources/views/components/form/control-group/controls/inline/boolean.blade.php b/...Admin/src/Resources/views/components/form/control-group/controls/inline/boolean.blade.php
@@ -1,4 +1,10 @@
-<v-inline-boolean-edit {{ $attributes->except('options') }}></v-inline-boolean-edit>
+<v-inline-boolean-edit {{ $attributes->except('options') }}>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-boolean-edit>
 
 @pushOnce('scripts')
     <script
@@ -9,7 +15,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -20,7 +26,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ selectedValue?.name }}</span>
+                <span class="pl-[2px]">@{{ selectedValue?.name }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/...ul/Admin/src/Resources/views/components/form/control-group/controls/inline/date.blade.php b/...ul/Admin/src/Resources/views/components/form/control-group/controls/inline/date.blade.php
@@ -1,4 +1,10 @@
-<v-inline-date-edit {{ $attributes }}></v-inline-date-edit>
+<v-inline-date-edit {{ $attributes }}>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-date-edit>
 
 @pushOnce('scripts')
     <script
@@ -9,7 +15,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -20,7 +26,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ inputValue }}</span>
+                <span class="pl-[2px]">@{{ inputValue }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/...dmin/src/Resources/views/components/form/control-group/controls/inline/datetime.blade.php b/...dmin/src/Resources/views/components/form/control-group/controls/inline/datetime.blade.php
@@ -1,4 +1,10 @@
-<v-inline-datetime-edit {{ $attributes }}></v-inline-datetime-edit>
+<v-inline-datetime-edit {{ $attributes }}>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-datetime-edit>
 
 @pushOnce('scripts')
     <script
@@ -9,7 +15,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -20,7 +26,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ inputValue }}</span>
+                <span class="pl-[2px]">@{{ inputValue }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/...l/Admin/src/Resources/views/components/form/control-group/controls/inline/email.blade.php b/...l/Admin/src/Resources/views/components/form/control-group/controls/inline/email.blade.php
@@ -1,7 +1,13 @@
 <v-inline-email-edit
     {{ $attributes->except('value') }}
     :value={{ json_encode($attributes->get('value')) }}
-></v-inline-email-edit>
+>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-email-edit>
 
 @pushOnce('scripts')
     <script
@@ -11,11 +17,11 @@
         <div class="group w-full max-w-full hover:rounded-sm">
             <!-- Non-editing view -->
             <div
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
-                <span class="font-normal text-sm pl-2">@{{ inputValue.map(item => `${item.value}(${item.label})`).join(', ') }}</span>
+                <span class="pl-[2px]">@{{ inputValue.map(item => `${item.value}(${item.label})`).join(', ') }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/...ul/Admin/src/Resources/views/components/form/control-group/controls/inline/file.blade.php b/...ul/Admin/src/Resources/views/components/form/control-group/controls/inline/file.blade.php
@@ -1,4 +1,10 @@
-<v-inline-file-edit {{ $attributes }}></v-inline-file-edit>
+<v-inline-file-edit {{ $attributes }}>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-file-edit>
 
 @pushOnce('scripts')
     <script
@@ -9,7 +15,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >

diff --git a/...l/Admin/src/Resources/views/components/form/control-group/controls/inline/image.blade.php b/...l/Admin/src/Resources/views/components/form/control-group/controls/inline/image.blade.php
@@ -1,4 +1,10 @@
-<v-inline-image-edit {{ $attributes }}></v-inline-image-edit>
+<v-inline-image-edit {{ $attributes }}>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-image-edit>
 
 @pushOnce('scripts')
     <script

diff --git a/.../Admin/src/Resources/views/components/form/control-group/controls/inline/lookup.blade.php b/.../Admin/src/Resources/views/components/form/control-group/controls/inline/lookup.blade.php
@@ -5,7 +5,13 @@
 <v-inline-look-edit
     {{ $attributes }}
     :attribute="{{ json_encode($attribute) }}"
-></v-inline-look-edit>
+>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-look-edit>
 
 @pushOnce('scripts')
     <script
@@ -16,7 +22,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -27,7 +33,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ inputValue }}</span>
+                <span class="pl-[2px]">@{{ inputValue }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/...n/src/Resources/views/components/form/control-group/controls/inline/multiselect.blade.php b/...n/src/Resources/views/components/form/control-group/controls/inline/multiselect.blade.php
@@ -1,7 +1,13 @@
 <v-inline-multi-select-edit
     {{ $attributes->except('data') }}
     :data="{{ json_encode($data) }}"
-></v-inline-multi-select-edit>
+>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-multi-select-edit>
 
 @pushOnce('scripts')
     <script
@@ -12,7 +18,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -23,7 +29,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ selectedValue }}</span>
+                <span class="pl-[2px]">@{{ selectedValue }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/...l/Admin/src/Resources/views/components/form/control-group/controls/inline/phone.blade.php b/...l/Admin/src/Resources/views/components/form/control-group/controls/inline/phone.blade.php
@@ -1,7 +1,13 @@
 <v-inline-phone-edit
     {{ $attributes->except('value') }}
     :value={{ json_encode($attributes->get('value')) }}
-></v-inline-phone-edit>
+>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-phone-edit>
 
 @pushOnce('scripts')
     <script
@@ -11,11 +17,11 @@
         <div class="group w-full max-w-full hover:rounded-sm">
             <!-- Non-editing view -->
             <div
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
-                <span class="font-normal text-sm pl-2">@{{ inputValue.map(item => `${item.value}(${item.label})`).join(', ') }}</span>
+                <span class="pl-[2px]">@{{ inputValue.map(item => `${item.value}(${item.label})`).join(', ') }}</span>
 
                 <template v-if="allowEdit">
                     <i

diff --git a/.../Admin/src/Resources/views/components/form/control-group/controls/inline/select.blade.php b/.../Admin/src/Resources/views/components/form/control-group/controls/inline/select.blade.php
@@ -1,7 +1,13 @@
 <v-inline-select-edit
     {{ $attributes->except('options') }}
     :options="{{ json_encode($options) }}"
-></v-inline-select-edit>
+>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-select-edit>
 
 @pushOnce('scripts')
     <script
@@ -12,7 +18,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -23,7 +29,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ selectedValue?.name }}</span>
+                <span class="pl-[2px]">@{{ selectedValue?.name }}</span>
 
                 <template v-if="allowEdit">
                     <i
@@ -43,7 +49,7 @@ class="relative flex flex-col w-full"
                         type="select"
                         ::id="name"
                         ::name="name"
-                        class="py-1 pr-16 text-normal"
+                        class="!py-0 !h-[34px]"
                         ::rules="rules"
                         ::label="label"
                         ::placeholder="placeholder"

diff --git a/...ul/Admin/src/Resources/views/components/form/control-group/controls/inline/text.blade.php b/...ul/Admin/src/Resources/views/components/form/control-group/controls/inline/text.blade.php
@@ -1,4 +1,10 @@
-<v-inline-text-edit {{ $attributes }}></v-inline-text-edit>
+<v-inline-text-edit {{ $attributes }}>
+    <div class="group w-full max-w-full hover:rounded-sm">
+        <div class="flex items-center rounded-xs text-left pl-2.5 h-[34px] space-x-2">
+            <div class="shimmer h-5 w-48"></div>
+        </div>
+    </div>
+</v-inline-text-edit>
 
 @pushOnce('scripts')
     <script
@@ -9,7 +15,7 @@
             <!-- Non-editing view -->
             <div
                 v-if="! isEditing"
-                class="flex items-center rounded-xs h-[38px] space-x-2"
+                class="flex items-center rounded-xs h-[34px] space-x-2"
                 :class="allowEdit ? 'cursor-pointer hover:bg-gray-50' : ''"
                 :style="textPositionStyle"
             >
@@ -20,7 +26,7 @@ class="flex items-center rounded-xs h-[38px] space-x-2"
                     v-model="inputValue"
                 />
 
-                <span class="font-normal text-sm pl-[2px]">@{{ inputValue }}</span>
+                <span class="pl-[2px]">@{{ inputValue }}</span>
 
                 <template v-if="allowEdit">
                     <i
@@ -40,7 +46,7 @@ class="relative flex flex-col w-full"
                         type="text"
                         ::id="name"
                         ::name="name"
-                        class="py-1 pr-16 text-normal"
+                        class="py-1 pr-16 !h-[34px]"
                         ::rules="rules"
                         ::label="label"
                         ::placeholder="placeholder"