opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modal component

Browse Source
This commit is contained in:
Ryan Scherler
2020-12-31 21:47:15 -08:00
parent a1eaad8f48
commit e971aaf368
14 changed files with 96 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/css/filament.css
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
dist/css/filament.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/mix-manifest.json
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
{
"/js/filament.js": "/js/filament.js?id=575bb8a26dd76080eafa",
"/css/filament.css": "/css/filament.css?id=f8c226197b7f6bbec99e"
"/css/filament.css": "/css/filament.css?id=9e789a6d61b222e0e77d"
}
resources/css/components/filepond.css
+1 -1
View File
@@ -2,7 +2,7 @@
@apply font-sans;
.filepond--panel-root {
@apply rounded bg-gray-100 shadow-sm border border-dashed border-gray-300;
@apply rounded bg-gray-100 border border-dashed border-gray-300;
}
.filepond--drop-label {
resources/css/components/lists.css
+1 -1
View File
@@ -1,5 +1,5 @@
.list-dropdown {
@apply bg-white shadow rounded text-sm leading-tight text-left overflow-hidden;
@apply bg-white shadow-sm rounded text-sm leading-tight text-left overflow-hidden;
> li {
@apply whitespace-nowrap;
resources/css/components/typography.css
+1 -1
View File
@@ -8,7 +8,7 @@
}
.help code {
@apply rounded-sm bg-gray-200 px-1 py-0.5;
@apply rounded bg-gray-200 px-1 py-0.5;
}
.help a,
resources/views/components/modal.blade.php
+66
View File
@@ -0,0 +1,66 @@
<div
{{ $attributes }}
x-data="{ open: false }"
x-init="
$watch('open', value => {
if (value === true) {
document.body.classList.add('overflow-hidden')
} else {
document.body.classList.remove('overflow-hidden')
}
});
"
>
<button
type="button"
@click="open = true"
>
{{ $button }}
</button>
<div
x-show="open"
class="fixed z-40 inset-0 flex"
:aria-hidden="!open"
>
<div
x-show="open"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 transition-opacity absolute inset-0 bg-gray-800 bg-opacity-75"
aria-hidden="true"
></div>
<div class="flex-grow flex items-center justify-center p-4 overflow-y-auto">
<div
x-show="open"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="relative transform transition-all"
role="dialog"
aria-modal="true"
@click.away="open = false"
>
<div class="flex flex-col space-y-4">
<button
type="button"
@click="open = false"
class="flex-shrink-0 self-center text-gray-200 hover:text-white transition-colors duration-200 flex"
>
<x-heroicon-o-x class="w-6 h-6" />
<span class="sr-only">{{ __('Close') }}</span>
</button>
<div class="flex-grow">
{{ $slot }}
</div>
</div>
</div>
</div>
</div>
</div>
resources/views/components/notification.blade.php
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="fixed z-20 inset-0 flex items-end justify-center p-4 md:py-3 md:px-6 pointer-events-none sm:items-start sm:justify-end">
<div class="fixed z-50 inset-0 flex items-end justify-center p-4 md:py-3 md:px-6 pointer-events-none sm:items-start sm:justify-end">
<div
x-data="{ show: false, message: '' }"
x-on:notify.window="show = true; message = event.detail; setTimeout(() => { show = false }, 2500)"
resources/views/components/table.blade.php
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="shadow rounded bg-white overflow-x-scroll">
<div class="shadow-sm rounded bg-white overflow-x-scroll">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100">
<tr>
resources/views/components/tabs.blade.php
+1 -1
View File
@@ -6,7 +6,7 @@
<div
x-data="{ tab: '{{ $tab }}' }"
x-cloak
{{ $attributes->merge(['class' => 'bg-white shadow rounded overflow-hidden']) }}
{{ $attributes->merge(['class' => 'bg-white shadow-sm rounded overflow-hidden']) }}
>
<div class="bg-gray-100 border-b border-gray-200 flex" class="tablist" role="tablist" aria-label="{{ $label }}">
{{ $tablist }}
resources/views/fields/avatar.blade.php
+1 -1
View File
@@ -9,7 +9,7 @@
x-on:livewire-upload-progress="progress = $event.detail.progress"
class="flex items-center space-x-4">
<div class="flex-shrink-0 relative">
<label for="{{ $field->id }}" class="cursor-pointer rounded-full shadow flex overflow-hidden">
<label for="{{ $field->id }}" class="cursor-pointer rounded-full shadow-sm flex overflow-hidden">
@if ($field->avatar && !$errors->has($field->model))
<img src="{{ $field->avatar->temporaryUrl() }}" alt="{{ $field->user->name }}" class="h-full object-cover" width="{{ $field->size }}" height="{{ $field->size }}" loading="lazy">
@else
resources/views/fields/file.blade.php
+6 -8
View File
@@ -52,14 +52,12 @@
>
<div class="p-2 bg-white shadow-sm rounded border border-gray-300 flex items-center space-x-4">
@if (exif_imagetype(Filament::storage()->path($file)))
<a
href="{{ Filament::storage()->url($file) }}"
target="_blank"
rel="noopener noreferrer"
class="flex-shrink-0"
>
<x-filament-image :src="$file" alt="{{ $file }}" :manipulations="[ 'w' => 48, 'h' => 48, 'fit' => 'crop' ]" class="w-12 h-12 rounded" />
</a>
<x-filament::modal class="flex-shrink-0">
<x-slot name="button">
<x-filament-image :src="$file" alt="{{ $file }}" :manipulations="[ 'w' => 48, 'h' => 48, 'fit' => 'crop' ]" width="48px" height="48px" loading="lazy" class="w-12 h-12 rounded" />
</x-slot>
<x-filament-image :src="$file" alt="{{ $file }}" :manipulations="[ 'w' => 1024, 'fit' => 'max' ]" loading="lazy" />
</x-filament::modal>
@endif
<div class="flex-grow overflow-scroll flex flex-col leading-tight">
<a
resources/views/layouts/app.blade.php
+10 -3
View File
@@ -10,14 +10,21 @@
x-data="{ headerIsOpen: false }"
x-on:keydown.escape="headerIsOpen = false"
x-on:resize.window="if (window.outerWidth > 768) headerIsOpen = false">
<div class="flex-shrink-0 flex w-56 absolute md:relative z-10 inset-y-0 transform transition-transform duration-200 md:translate-x-0"
<div class="flex-shrink-0 flex w-56 absolute md:relative z-20 inset-y-0 transform transition-transform duration-200 md:translate-x-0"
:class="headerIsOpen ? 'translate-x-0' : '-translate-x-full'">
<x-filament::app-header class="flex-grow" />
<button type="button" aria-controls="banner" @click.prevent="headerIsOpen = false" :aria-expanded="headerIsOpen" x-cloak x-show.opacity="headerIsOpen" class="md:hidden absolute top-2 right-0 transform translate-x-full p-3 text-gray-200 hover:text-white transition-colors duration-200">
<button
type="button"
aria-controls="banner"
@click.prevent="headerIsOpen = false"
:aria-expanded="headerIsOpen"
x-cloak
x-show.opacity="headerIsOpen"
class="md:hidden absolute top-2 right-0 transform translate-x-full p-3 text-gray-200 hover:text-white transition-colors duration-200">
<x-heroicon-o-x class="w-6 h-6" />
</button>
</div>
<span class="absolute z-0 inset-0 bg-black bg-opacity-50 md:hidden" x-cloak x-show="headerIsOpen" @click="headerIsOpen = false"></span>
<span class="absolute z-10 inset-0 bg-gray-800 bg-opacity-50 md:hidden" x-cloak x-show="headerIsOpen" @click="headerIsOpen = false"></span>
<div class="flex-grow w-full flex flex-col">
<header class="p-4 md:p-6 flex justify-between items-center space-x-4">
<div class="flex items-center">
resources/views/livewire/dashboard.blade.php
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="p-4 md:p-6 bg-white shadow rounded overflow-hidden">
<div class="p-4 md:p-6 bg-white shadow-sm rounded overflow-hidden">
<div class="p-4 border border-gray-300 border-dashed rounded-lg h-64 flex items-center justify-center">
<span class="text-xs text-gray-600 font-mono">{{ config('app.name') }} Dashboard</span>
</div>