Skip to content

Commit

Permalink
move css load to filament-language-switch::switch
Browse files Browse the repository at this point in the history
  • Loading branch information
@n4ss1m
n4ss1m committed Dec 28, 2024
1 parent 917527f commit d9d00c0
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 65 deletions.
5 changes: 1 addition & 4 deletions resources/views/language-switch.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@
};
$maxHeight = $languageSwitch->getMaxHeight();
@endphp
<div
x-data
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filament-language-switch', package: 'bezhansalleh/filament-language-switch'))]"
>
<div>
@if ($isVisibleOutsidePanels)
<div @class([
'fls-display-on fixed w-fit flex p-4 z-50',
Expand Down
127 changes: 66 additions & 61 deletions resources/views/switch.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,79 @@
<x-filament::dropdown
teleport
:placement="$placement"
:width="$isFlagsOnly ? 'flags-only' : 'fls-dropdown-width'"
:max-height="$maxHeight"
class="fi-dropdown fi-user-menu"
<div
x-data
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filament-language-switch', package: 'bezhansalleh/filament-language-switch'))]"
>
<x-slot name="trigger">
<div
@class([
'flex items-center justify-center w-9 h-9 language-switch-trigger text-primary-600 bg-primary-500/10',
'rounded-full' => $isCircular,
'rounded-lg' => !$isCircular,
'p-1 ring-2 ring-inset ring-gray-200 hover:ring-gray-300 dark:ring-gray-500 hover:dark:ring-gray-400' => $isFlagsOnly || $hasFlags,
])
x-tooltip="{
<x-filament::dropdown
teleport
:placement="$placement"
:width="$isFlagsOnly ? 'flags-only' : 'fls-dropdown-width'"
:max-height="$maxHeight"
class="fi-dropdown fi-user-menu"
>
<x-slot name="trigger">
<div
@class([
'flex items-center justify-center w-9 h-9 language-switch-trigger text-primary-600 bg-primary-500/10',
'rounded-full' => $isCircular,
'rounded-lg' => !$isCircular,
'p-1 ring-2 ring-inset ring-gray-200 hover:ring-gray-300 dark:ring-gray-500 hover:dark:ring-gray-400' => $isFlagsOnly || $hasFlags,
])
x-tooltip="{
content: @js($languageSwitch->getLabel(app()->getLocale())),
theme: $store.theme,
placement: 'bottom'
}"
>
@if ($isFlagsOnly || $hasFlags)
<x-filament-language-switch::flag
:src="$languageSwitch->getFlag(app()->getLocale())"
:circular="$isCircular"
:alt="$languageSwitch->getLabel(app()->getLocale())"
:switch="true"
/>
@else
<span class="font-semibold text-md">{{ $languageSwitch->getCharAvatar(app()->getLocale()) }}</span>
@endif
</div>
</x-slot>
>
@if ($isFlagsOnly || $hasFlags)
<x-filament-language-switch::flag
:src="$languageSwitch->getFlag(app()->getLocale())"
:circular="$isCircular"
:alt="$languageSwitch->getLabel(app()->getLocale())"
:switch="true"
/>
@else
<span class="font-semibold text-md">{{ $languageSwitch->getCharAvatar(app()->getLocale()) }}</span>
@endif
</div>
</x-slot>

<x-filament::dropdown.list @class(['!border-t-0 space-y-1 !p-2.5'])>
@foreach ($locales as $locale)
@if (!app()->isLocale($locale))
<button
type="button"
wire:click="changeLocale('{{ $locale }}')"
@if ($isFlagsOnly)
x-tooltip="{
<x-filament::dropdown.list @class(['!border-t-0 space-y-1 !p-2.5'])>
@foreach ($locales as $locale)
@if (!app()->isLocale($locale))
<button
type="button"
wire:click="changeLocale('{{ $locale }}')"
@if ($isFlagsOnly)
x-tooltip="{
content: @js($languageSwitch->getLabel($locale)),
theme: $store.theme,
placement: 'right'
}"
@endif
@endif

@class([
'flex items-center w-full transition-colors duration-75 rounded-md outline-none fi-dropdown-list-item whitespace-nowrap disabled:pointer-events-none disabled:opacity-70 fi-dropdown-list-item-color-gray hover:bg-gray-950/5 focus:bg-gray-950/5 dark:hover:bg-white/5 dark:focus:bg-white/5',
'justify-center px-2 py-0.5' => $isFlagsOnly,
'justify-start space-x-2 rtl:space-x-reverse p-1' => !$isFlagsOnly,
])
>
@class([
'flex items-center w-full transition-colors duration-75 rounded-md outline-none fi-dropdown-list-item whitespace-nowrap disabled:pointer-events-none disabled:opacity-70 fi-dropdown-list-item-color-gray hover:bg-gray-950/5 focus:bg-gray-950/5 dark:hover:bg-white/5 dark:focus:bg-white/5',
'justify-center px-2 py-0.5' => $isFlagsOnly,
'justify-start space-x-2 rtl:space-x-reverse p-1' => !$isFlagsOnly,
])
>

@if ($isFlagsOnly)
<x-filament-language-switch::flag
:src="$languageSwitch->getFlag($locale)"
:circular="$isCircular"
:alt="$languageSwitch->getLabel($locale)"
class="w-7 h-7"
/>
@else
@if ($hasFlags)
@if ($isFlagsOnly)
<x-filament-language-switch::flag
:src="$languageSwitch->getFlag($locale)"
:circular="$isCircular"
:alt="$languageSwitch->getLabel($locale)"
class="w-7 h-7"
/>
@else
<span
@if ($hasFlags)
<x-filament-language-switch::flag
:src="$languageSwitch->getFlag($locale)"
:circular="$isCircular"
:alt="$languageSwitch->getLabel($locale)"
class="w-7 h-7"
/>
@else
<span
@class([
'flex items-center justify-center flex-shrink-0 w-7 h-7 p-2 text-xs font-semibold group-hover:bg-white group-hover:text-primary-600 group-hover:border group-hover:border-primary-500/10 group-focus:text-white bg-primary-500/10 text-primary-600',
'rounded-full' => $isCircular,
Expand All @@ -78,14 +82,15 @@ class="w-7 h-7"
>
{{ $languageSwitch->getCharAvatar($locale) }}
</span>
@endif
<span class="text-sm font-medium text-gray-600 hover:bg-transparent dark:text-gray-200">
@endif
<span class="text-sm font-medium text-gray-600 hover:bg-transparent dark:text-gray-200">
{{ $languageSwitch->getLabel($locale) }}
</span>

@endif
</button>
@endif
@endforeach
</x-filament::dropdown.list>
</x-filament::dropdown>
@endif
</button>
@endif
@endforeach
</x-filament::dropdown.list>
</x-filament::dropdown>
</div>

0 comments on commit d9d00c0

Please sign in to comment.