Skip to content

Commit

Permalink
refactor lookup ui and fix for rtl
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivendra-webkul
shivendra-webkul committed Aug 21, 2024
1 parent e591a7f commit 0d8a3cc
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 84 deletions.
10 changes: 5 additions & 5 deletions packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,13 +116,13 @@ class="relative rounded border border-gray-200 px-2 py-1 hover:border-gray-400 f
<li>
<input
type="text"
class="w-full px-1 py-1"
class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
placeholder="@lang('admin::app.activities.edit.participants')"
/>
</li>
</ul>

<span class="icon-down-arrow absolute right-1.5 top-1.5 text-2xl"></span>
<span class="icon-down-arrow absolute top-1.5 text-2xl ltr:right-1.5 rtl:left-1.5"></span>
</div>
</v-multi-lookup-component>
</x-admin::form.control-group>
Expand Down Expand Up @@ -276,7 +276,7 @@ class="icon-cross-large cursor-pointer p-0.5 text-xl"
<li>
<input
type="text"
class="w-full px-1 py-1"
class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300"
placeholder="@lang('admin::app.activities.edit.participants')"
v-model.lazy="searchTerm"
v-debounce="500"
Expand All @@ -288,13 +288,13 @@ class="w-full px-1 py-1"
<div>
<template v-if="! isSearching.users && ! isSearching.persons">
<span
class="absolute right-1.5 top-1.5 text-2xl"
class="absolute top-1.5 text-2xl ltr:right-1.5 rtl:left-1.5"
:class="[searchTerm.length >= 2 ? 'icon-up-arrow' : 'icon-down-arrow']"
></span>
</template>
<template v-else>
<x-admin::spinner class="absolute right-2 top-2" />
<x-admin::spinner class="absolute top-2 ltr:right-2 rtl:left-2" />
</template>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/Webkul/Admin/src/Resources/views/components/activities/actions/mail.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class="flex h-[74px] w-[84px] flex-col items-center justify-center gap-1 rounded
:placeholder="trans('admin::app.components.activities.actions.mail.enter-emails')"
/>

<div class="absolute right-2 top-[9px] flex items-center gap-2">
<div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
<span
class="cursor-pointer font-medium hover:underline dark:text-white"
@click="showCC = ! showCC"
Expand Down
56 changes: 23 additions & 33 deletions packages/Webkul/Admin/src/Resources/views/components/attributes/edit/lookup.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,16 @@ class="relative inline-block w-full"
@click="toggle"
>
<!-- Input Container -->
<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">
<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">
@{{ selectedItem ? selectedItem : "@lang('admin::app.components.attributes.lookup.click-to-add')" }}
</div>
<!-- Arrow down icon -->
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<div class="flex items-center justify-center space-x-1">
<!-- Arrow Icon -->
<i
class="text-2xl"
:class="showPopup ? 'icon-up-arrow': 'icon-down-arrow'"
class="absolute text-2xl ltr:right-2 rtl:left-2"
:class="showPopup ? 'icon-up-arrow' : 'icon-down-arrow'"
></i>
</div>
</span>
</div>
<!-- Hidden Input Entity Value -->
<input
Expand All @@ -54,38 +46,36 @@ class="text-2xl"
<div
v-if="showPopup"
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"
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"
>
<!-- Search Bar -->
<div class="relative">
<div class="relative flex items-center">
<!-- Input Box -->
<input
type="text"
v-model.lazy="searchTerm"
v-debounce="500"
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"
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"
placeholder="@lang('Search...')"
ref="searchInput"
@keyup="search"
/>
<!-- Search Icon (absolute positioned) -->
<span class="absolute bottom-1 top-2 right-0 flex items-center pr-3">
<div class="flex items-center justify-center space-x-1">
<!-- Loader (optional, based on condition) -->
<i
v-if="entityId && ! isSearching"
class="icon-cross-large cursor-pointer text-2xl"
@click="remove"
></i>
<!-- Loader (optional, based on condition) -->
<div
class="relative"
v-if="isSearching"
>
<x-admin::spinner />
</div>
<span class="absolute flex items-center ltr:right-2 rtl:left-2">
<!-- Close Icon -->
<i
v-if="entityId && ! isSearching"
class="icon-cross-large cursor-pointer text-2xl text-gray-600"
@click="remove"
></i>
<!-- Loader (optional, based on condition) -->
<div
class="relative"
v-if="isSearching"
>
<x-admin::spinner />
</div>
</span>
</div>
Expand Down
3 changes: 2 additions & 1 deletion ...es/Webkul/Admin/src/Resources/views/components/form/control-group/controls/tags.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<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">
<ul class="flex flex-wrap items-center gap-1">
<li
class="flex items-center gap-1 rounded-md bg-gray-100 pl-2 dark:bg-gray-950"
class="flex items-center gap-1 rounded-md bg-gray-100 dark:bg-gray-950 ltr:pl-2 rtl:pr-2"
v-for="(tag, index) in tags"
>
<x-admin::form.control-group.control
Expand Down Expand Up @@ -40,6 +40,7 @@ class="icon-cross-large cursor-pointer p-0.5 text-xl"
type="text"
:name="'temp-' + name"
v-bind="field"
class="dark:!bg-gray-900"
:placeholder="placeholder"
:label="label"
@keydown.enter.prevent="addTag"
Expand Down
3 changes: 1 addition & 2 deletions packages/Webkul/Admin/src/Resources/views/mail/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,7 @@ class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200
:placeholder="trans('admin::app.mail.index.mail.enter-emails')"
/>
<div class="absolute right-2 top-[9px] flex items-center gap-2">
<div class="absolute top-[9px] flex items-center gap-2 ltr:right-2 rtl:left-2">
<span
class="cursor-pointer font-medium hover:underline dark:text-white"
@click="showCC = ! showCC"
Expand Down
Loading

0 comments on commit 0d8a3cc

Please sign in to comment.