Skip to content

Commit

Permalink
[5.x] Fix dark mode for Set Picker (#10173)
Browse files Browse the repository at this point in the history 
* WIP

* Improved dark mode support for Set picker
  • Loading branch information
@martyf
martyf authored May 23, 2024
1 parent dc1c17a commit f10f3be
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions resources/js/components/fieldtypes/replicator/SetPicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,31 @@
<slot name="trigger" />
</template>
<template #default>
<div class="set-picker-header p-3 border-b text-xs flex items-center">
<input ref="search" type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
<div v-if="showGroupBreadcrumb" class="flex items-center text-gray-700 font-medium">
<button @click="unselectGroup" class=" hover:text-gray-900 rtl:mr-2.5 ltr:ml-2.5 rounded">
<div class="set-picker-header p-3 border-b dark:border-dark-900 text-xs flex items-center">
<input ref="search" type="text" class="input-text text-xs h-auto py-1 px-2 border rounded w-full dark:bg-dark-650 dark:border-gray-900" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
<div v-if="showGroupBreadcrumb" class="flex items-center text-gray-700 dark:text-gray-600 font-medium">
<button @click="unselectGroup" class="hover:text-gray-900 dark:hover:text-gray-500 rtl:mr-2.5 ltr:ml-2.5 rounded">
{{ __('Groups') }}
</button>
<svg-icon name="micro/chevron-right" class="w-4 h-4" />
<span>{{ selectedGroupDisplayText }}</span>
</div>
</div>
<div class="p-1 max-h-[21rem] overflow-auto">
<div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200': selectionIndex === i }" @mouseover="selectionIndex = i">
<div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200 dark:bg-dark-600': selectionIndex === i }" @mouseover="selectionIndex = i">
<div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
<svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 rtl:ml-2 ltr:mr-2 p-2 text-gray-800" />
<svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white dark:bg-dark-650 border border-gray-600 dark:border-dark-800 rtl:ml-2 ltr:mr-2 p-2 text-gray-800 dark:text-dark-175" />
<div class="flex-1">
<div class="text-md font-medium text-gray-800 truncate w-52">{{ __(item.display || item.handle) }}</div>
<div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ __(item.instructions) }}</div>
<div class="text-md font-medium text-gray-800 dark:text-dark-175 truncate w-52">{{ __(item.display || item.handle) }}</div>
<div v-if="item.instructions" class="text-2xs text-gray-700 dark:text-dark-175 truncate w-52">{{ __(item.instructions) }}</div>
</div>
<svg-icon name="micro/chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
<svg-icon name="micro/chevron-right-thin" class="text-gray-600 group-hover:text-dark-800 dark:group-hover:text-dark-175" />
</div>
<div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
<svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 rtl:ml-2 ltr:mr-2 p-2 text-gray-800" />
<svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white dark:bg-dark-650 border border-gray-600 dark:border-dark-800 rtl:ml-2 ltr:mr-2 p-2 text-gray-800 dark:text-dark-175" />
<div class="flex-1">
<div class="text-md font-medium text-gray-800 truncate w-52">{{ __(item.display || item.handle) }}</div>
<div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ __(item.instructions) }}</div>
<div class="text-md font-medium text-gray-800 dark:text-dark-175 truncate w-52">{{ __(item.display || item.handle) }}</div>
<div v-if="item.instructions" class="text-2xs text-gray-700 dark:text-dark-175 truncate w-52">{{ __(item.instructions) }}</div>
</div>
</div>
</div>
Expand Down

0 comments on commit f10f3be

Please sign in to comment.