Skip to content

Commit 7838aef

Browse files
benjpaddockbenjpaddock
committed
refactor lookup ui and fix for rtl
1 parent 9b983c1 commit 7838aef

File tree

6 files changed

+74
-84
lines changed

6 files changed

+74
-84
lines changed

‎packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,13 @@ class="relative rounded border border-gray-200 px-2 py-1 hover:border-gray-400 f
116116
<li>
117117
<input
118118
type="text"
119-
class="w-full px-1 py-1"
119+
class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
120120
placeholder="@lang('admin::app.activities.edit.participants')"
121121
/>
122122
</li>
123123
</ul>
124124

125-
<span class="icon-down-arrow absolute right-1.5 top-1.5 text-2xl"></span>
125+
<span class="icon-down-arrow absolute top-1.5 text-2xl ltr:right-1.5 rtl:left-1.5"></span>
126126
</div>
127127
</v-multi-lookup-component>
128128
</x-admin::form.control-group>
@@ -276,7 +276,7 @@ class="icon-cross-large cursor-pointer p-0.5 text-xl"
276276
<li>
277277
<input
278278
type="text"
279-
class="w-full px-1 py-1"
279+
class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
280280
placeholder="@lang('admin::app.activities.edit.participants')"
281281
v-model.lazy="searchTerm"
282282
v-debounce="500"
@@ -288,13 +288,13 @@ class="w-full px-1 py-1"
288288
<div>
289289
<template v-if="! isSearching.users && ! isSearching.persons">
290290
<span
291-
class="absolute right-1.5 top-1.5 text-2xl"
291+
class="absolute top-1.5 text-2xl ltr:right-1.5 rtl:left-1.5"
292292
:class="[searchTerm.length >= 2 ? 'icon-up-arrow' : 'icon-down-arrow']"
293293
></span>
294294
</template>
295295
296296
<template v-else>
297-
<x-admin::spinner class="absolute right-2 top-2" />
297+
<x-admin::spinner class="absolute top-2 ltr:right-2 rtl:left-2" />
298298
</template>
299299
</div>
300300
</div>

‎packages/Webkul/Admin/src/Resources/views/components/activities/actions/mail.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ class="flex h-[74px] w-[84px] flex-col items-center justify-center gap-1 rounded
7171
:placeholder="trans('admin::app.components.activities.actions.mail.enter-emails')"
7272
/>
7373

74-
<div class="absolute right-2 top-[9px] flex items-center gap-2">
74+
<div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
7575
<span
7676
class="cursor-pointer font-medium hover:underline dark:text-white"
7777
@click="showCC = ! showCC"

‎packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,16 @@ class="relative inline-block w-full"
2626
@click="toggle"
2727
>
2828
<!-- Input Container -->
29-
<div class="relative h-10 rounded border p-2 hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400">
29+
<div class="relative rounded border border-gray-200 p-2 hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:text-gray-300">
3030
@{{ selectedItem ? selectedItem : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
31-
</div>
32-
33-
<!-- Arrow down icon -->
34-
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
35-
<i class="fas fa-chevron-down text-gray-400"></i>
36-
</div>
37-
</div>
38-
39-
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
40-
<div class="flex items-center justify-center space-x-1">
31+
32+
<!-- Arrow Icon -->
4133
<i
42-
class="text-2xl"
43-
:class="showPopup ? 'icon-up-arrow': 'icon-down-arrow'"
34+
class="absolute text-2xl ltr:right-2 rtl:left-2"
35+
:class="showPopup ? 'icon-up-arrow' : 'icon-down-arrow'"
4436
></i>
4537
</div>
46-
</span>
38+
</div>
4739
4840
<!-- Hidden Input Entity Value -->
4941
<input
@@ -54,38 +46,36 @@ class="text-2xl"
5446
5547
<div
5648
v-if="showPopup"
57-
class="absolute top-full z-10 mt-1 w-full origin-top transform rounded-lg border border-gray-200 bg-white p-2 shadow-lg transition-transform dark:border-gray-900 dark:bg-gray-800"
49+
class="absolute top-full z-10 mt-1 flex w-full origin-top transform flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg transition-transform dark:border-gray-900 dark:bg-gray-800"
5850
>
5951
<!-- Search Bar -->
60-
<div class="relative">
52+
<div class="relative flex items-center">
6153
<!-- Input Box -->
6254
<input
6355
type="text"
6456
v-model.lazy="searchTerm"
6557
v-debounce="500"
66-
class="!mb-2 w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
58+
class="w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 dark:focus:border-gray-400"
6759
placeholder="@lang('Search...')"
6860
ref="searchInput"
6961
@keyup="search"
7062
/>
7163
7264
<!-- Search Icon (absolute positioned) -->
73-
<span class="absolute bottom-1 top-2 right-0 flex items-center pr-3">
74-
<div class="flex items-center justify-center space-x-1">
75-
<!-- Loader (optional, based on condition) -->
76-
<i
77-
v-if="entityId && ! isSearching"
78-
class="icon-cross-large cursor-pointer text-2xl"
79-
@click="remove"
80-
></i>
81-
82-
<!-- Loader (optional, based on condition) -->
83-
<div
84-
class="relative"
85-
v-if="isSearching"
86-
>
87-
<x-admin::spinner />
88-
</div>
65+
<span class="absolute flex items-center ltr:right-2 rtl:left-2">
66+
<!-- Close Icon -->
67+
<i
68+
v-if="entityId && ! isSearching"
69+
class="icon-cross-large cursor-pointer text-2xl text-gray-600"
70+
@click="remove"
71+
></i>
72+
73+
<!-- Loader (optional, based on condition) -->
74+
<div
75+
class="relative"
76+
v-if="isSearching"
77+
>
78+
<x-admin::spinner />
8979
</div>
9080
</span>
9181
</div>

‎packages/Webkul/Admin/src/Resources/views/components/form/control-group/controls/tags.blade.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="flex min-h-[38px] w-full items-center rounded border border-gray-200 px-2.5 py-1.5 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 dark:border-gray-800 dark:text-white dark:hover:border-gray-400">
1212
<ul class="flex flex-wrap items-center gap-1">
1313
<li
14-
class="flex items-center gap-1 rounded-md bg-gray-100 pl-2 dark:bg-gray-950"
14+
class="flex items-center gap-1 rounded-md bg-gray-100 dark:bg-gray-950 ltr:pl-2 rtl:pr-2"
1515
v-for="(tag, index) in tags"
1616
>
1717
<x-admin::form.control-group.control
@@ -40,6 +40,7 @@ class="icon-cross-large cursor-pointer p-0.5 text-xl"
4040
type="text"
4141
:name="'temp-' + name"
4242
v-bind="field"
43+
class="dark:!bg-gray-900"
4344
:placeholder="placeholder"
4445
:label="label"
4546
@keydown.enter.prevent="addTag"

‎packages/Webkul/Admin/src/Resources/views/mail/index.blade.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,7 @@ class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200
160160
:placeholder="trans('admin::app.mail.index.mail.enter-emails')"
161161
/>
162162
163-
164-
<div class="absolute right-2 top-[9px] flex items-center gap-2">
163+
<div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
165164
<span
166165
class="cursor-pointer font-medium hover:underline dark:text-white"
167166
@click="showCC = ! showCC"

0 commit comments

Comments
 (0)