From 7675eac73dc58f91f48052730fafb40eb7b7bf6c Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Sun, 14 Feb 2021 00:51:50 +0000 Subject: [PATCH] wip --- resources/views/components/avatar.blade.php | 14 +-- resources/views/fields/avatar.blade.php | 53 ---------- resources/views/fields/file.blade.php | 28 ++++- src/Fields/Avatar.php | 44 +------- src/Fields/File.php | 107 ++++++++++++++++++++ src/HasForm.php | 2 - src/Http/Controllers/ImageController.php | 2 +- src/Http/Livewire/EditAccount.php | 9 +- src/View/Components/Avatar.php | 38 +++---- src/View/Components/Image.php | 19 ++-- 10 files changed, 180 insertions(+), 136 deletions(-) delete mode 100644 resources/views/fields/avatar.blade.php diff --git a/resources/views/components/avatar.blade.php b/resources/views/components/avatar.blade.php index 93595eec24..e2e3313f90 100644 --- a/resources/views/components/avatar.blade.php +++ b/resources/views/components/avatar.blade.php @@ -1,8 +1,8 @@ merge([ - 'src' => $src(), - 'srcset' => $srcSet(), - 'alt' => $user->name, - 'width' => $size, - 'height' => $size, - 'loading' => 'lazy' - ]) }} /> \ No newline at end of file + 'src' => $src(), + 'srcset' => $srcSet(), + 'alt' => $user->name, + 'width' => $size, + 'height' => $size, + 'loading' => 'lazy' +]) }} /> diff --git a/resources/views/fields/avatar.blade.php b/resources/views/fields/avatar.blade.php deleted file mode 100644 index dfbfb87711..0000000000 --- a/resources/views/fields/avatar.blade.php +++ /dev/null @@ -1,53 +0,0 @@ -@extends('filament::components.layouts.field-group') - -@section('field') -
-
-
- @if ($field->avatar && ! $errors->has($field->name)) - {{ $field->user->name }} - @else - - - - - - - - @endif -
- - @if ($field->user->avatar) - - @endif -
- -
- - - nameAttribute }}="{{ $field->name }}" - class="sr-only" - id="{{ $field->id }}" - {{ Filament\format_attributes($field->extraAttributes) }} - /> - -
- -
-
-
-@overwrite diff --git a/resources/views/fields/file.blade.php b/resources/views/fields/file.blade.php index b356940788..cf5c058ff0 100644 --- a/resources/views/fields/file.blade.php +++ b/resources/views/fields/file.blade.php @@ -7,7 +7,11 @@ + + + + @endpushonce maxSize KB'," : null }} - {{ $field->minSize ? "minFileSize: '$field->minSize KB'," : null }} + {{ $field->imageCropAspectRatio !== null ? "imageCropAspectRatio: '{$field->imageCropAspectRatio}'," : null }} + {{ $field->imagePreviewHeight !== null ? "imagePreviewHeight: {$field->imagePreviewHeight}," : null }} + {{ $field->imageResizeTargetHeight !== null ? "imageResizeTargetHeight: {$field->imageResizeTargetHeight}," : null }} + {{ $field->imageResizeTargetWidth !== null ? "imageResizeTargetWidth: {$field->imageResizeTargetWidth}," : null }} + {{ $field->placeholder !== null ? 'labelIdle: \''.__($field->placeholder).'\',' : null }} + {{ $field->maxSize !== null ? "maxFileSize: '{$field->maxSize} KB'," : null }} + {{ $field->minSize !== null ? "minFileSize: '{$field->minSize} KB'," : null }} server: { load: (source, load, error, progress, abort, headers) => { fetch(source).then((response) => { - response.blob().then((myBlob) => { - load(myBlob) + response.blob().then((blob) => { + load(blob) }) }) }, @@ -59,6 +71,12 @@ }) }, }, + styleButtonProcessItemPosition: '{{ $field->uploadButtonPosition }}', + styleButtonRemoveItemPosition: '{{ $field->removeUploadButtonPosition }}', + styleLoadIndicatorPosition: '{{ $field->loadingIndicatorPosition }}', + {{ $field->panelAspectRatio !== null ? "stylePanelAspectRatio: '{$field->panelAspectRatio}'," : null }} + {{ $field->panelLayout !== null ? "stylePanelLayout: '{$field->panelLayout}'," : null }} + styleProgressIndicatorPosition: '{{ $field->uploadProgressIndicatorPosition }}', } $wire.getUploadedFileUrl('{{ $field->name }}', '{{ $field->disk }}').then((uploadedFileUrl) => { diff --git a/src/Fields/Avatar.php b/src/Fields/Avatar.php index 3986db55b4..2832ba4bfa 100644 --- a/src/Fields/Avatar.php +++ b/src/Fields/Avatar.php @@ -2,48 +2,12 @@ namespace Filament\Fields; -class Avatar extends InputField +class Avatar extends File { - public $avatar; - - public $buttonLabel = 'filament::avatar.change'; - - public $nameAttribute = 'wire:model'; - - public $size = 64; - - public $user; - - public static function make($name) + public function __construct($name) { - return static::make($name)->image(); - } + parent::__construct($name); - public function avatar($avatar) - { - $this->avatar = $avatar; - - return $this; - } - - public function buttonLabel(string $label) - { - $this->buttonLabel = $label; - - return $this; - } - - public function size($size) - { - $this->size = $size; - - return $this; - } - - public function user($user) - { - $this->user = $user; - - return $this; + $this->image(); } } diff --git a/src/Fields/File.php b/src/Fields/File.php index c0a34d061e..ac3c12e723 100644 --- a/src/Fields/File.php +++ b/src/Fields/File.php @@ -16,10 +16,30 @@ class File extends InputField public $disk; + public $imageCropAspectRatio; + + public $imagePreviewHeight; + + public $imageResizeTargetHeight; + + public $imageResizeTargetWidth; + + public $loadingIndicatorPosition = 'right'; + public $maxSize; public $minSize; + public $panelAspectRatio = null; + + public $panelLayout = null; + + public $removeUploadButtonPosition = 'left'; + + public $uploadButtonPosition = 'right'; + + public $uploadProgressIndicatorPosition = 'right'; + public $visibility = 'public'; public function __construct($name) @@ -43,6 +63,23 @@ class File extends InputField return $this; } + public function avatar() + { + $this->extraAttributes(['class' => 'w-36']); + $this->image(); + $this->imageCropAspectRatio('1:1'); + $this->imagePreviewHeight(170); + $this->imageResizeTargetHeight(500); + $this->imageResizeTargetWidth(500); + $this->loadingIndicatorPosition('center bottom'); + $this->panelLayout('compact circle'); + $this->removeUploadButtonPosition('center bottom'); + $this->uploadButtonPosition('center bottom'); + $this->uploadProgressIndicatorPosition('center bottom'); + + return $this; + } + public function disk($disk) { $this->disk = $disk; @@ -83,6 +120,41 @@ class File extends InputField return $this; } + public function imageCropAspectRatio($ratio) + { + $this->imageCropAspectRatio = $ratio; + + return $this; + } + + public function imagePreviewHeight($height) + { + $this->imagePreviewHeight = $height; + + return $this; + } + + public function imageResizeTargetHeight($height) + { + $this->imageResizeTargetHeight = $height; + + return $this; + } + + public function imageResizeTargetWidth($width) + { + $this->imageResizeTargetWidth = $width; + + return $this; + } + + public function loadingIndicatorPosition($position) + { + $this->loadingIndicatorPosition = $position; + + return $this; + } + public function maxSize($size) { $this->maxSize = $size; @@ -101,6 +173,41 @@ class File extends InputField return $this; } + public function panelAspectRatio($ratio) + { + $this->panelAspectRatio = $ratio; + + return $this; + } + + public function panelLayout($layout) + { + $this->panelLayout = $layout; + + return $this; + } + + public function removeUploadButtonPosition($position) + { + $this->removeUploadButtonPosition = $position; + + return $this; + } + + public function uploadButtonPosition($position) + { + $this->uploadButtonPosition = $position; + + return $this; + } + + public function uploadProgressIndicatorPosition($position) + { + $this->uploadProgressIndicatorPosition = $position; + + return $this; + } + public function visibility($visibility) { $this->visibility = $visibility; diff --git a/src/HasForm.php b/src/HasForm.php index 3018b4fa26..5050620c8b 100644 --- a/src/HasForm.php +++ b/src/HasForm.php @@ -6,9 +6,7 @@ use Filament\Fields\File; use Filament\Fields\InputField; use Filament\Fields\Tab; use Illuminate\Database\Eloquent\Model; -use Illuminate\Support\Arr; use Illuminate\Support\Facades\Storage; -use Illuminate\Support\Facades\Validator; use Illuminate\Support\Str; use Illuminate\Validation\ValidationException; use Livewire\WithFileUploads; diff --git a/src/Http/Controllers/ImageController.php b/src/Http/Controllers/ImageController.php index 2c4ecf5e53..d7927f7265 100644 --- a/src/Http/Controllers/ImageController.php +++ b/src/Http/Controllers/ImageController.php @@ -20,7 +20,7 @@ class ImageController extends Controller 'cache' => Storage::disk(config('filament.cache_disk'))->getDriver(), 'cache_path_prefix' => config('filament.cache_path_prefix'), 'response' => new LaravelResponseFactory(app('request')), - 'source' => Storage::disk(config('filament.storage_disk'))->getDriver(), + 'source' => Storage::disk(config('filament.default_filesystem_disk'))->getDriver(), ]); return $server->getImageResponse($path, request()->all()); diff --git a/src/Http/Livewire/EditAccount.php b/src/Http/Livewire/EditAccount.php index bb92625701..01354d71b6 100644 --- a/src/Http/Livewire/EditAccount.php +++ b/src/Http/Livewire/EditAccount.php @@ -33,11 +33,9 @@ class EditAccount extends Component return [ Fields\Fieldset::make()->fields([ Fields\Text::make('record.name') - ->label('Name') ->disableAutocomplete() ->required(), Fields\Text::make('record.email') - ->label('Email') ->email() ->disableAutocomplete() ->required() @@ -58,6 +56,9 @@ class EditAccount extends Component ->requiredWith('newPassword'), ]) ->columns(2), + Fields\File::make('record.avatar') + ->avatar() + ->directory('filament-avatars'), ]; } @@ -68,6 +69,10 @@ class EditAccount extends Component public function submit() { + $this->validateTemporaryUploadedFiles(); + + $this->storeTemporaryUploadedFiles(); + $this->validate(); if ($this->newPassword) { diff --git a/src/View/Components/Avatar.php b/src/View/Components/Avatar.php index 8dd60e7aef..2bb2602688 100644 --- a/src/View/Components/Avatar.php +++ b/src/View/Components/Avatar.php @@ -16,33 +16,33 @@ class Avatar extends Component public function __construct($user, $size = 48, $dprs = [1, 2, 3]) { - $this->user = $user; - $this->size = $size; $this->dprs = $dprs; + $this->size = $size; + $this->user = $user; } - public function srcSet() - { - $srcSet = []; - foreach ($this->dprs as $dpr) { - $srcSet[] = $this->src($dpr) . ' ' . $dpr . 'x'; - } - - return implode(', ', $srcSet); - } - - public function src(int $dpr = 1) + public function src($dpr = 1) { if (! $this->user->avatar) { return Gravatar::src($this->user->email, $this->size * $dpr); } - return get_image_url($this->user->avatar, [ - 'w' => $this->size, - 'h' => $this->size, - 'fit' => 'crop', - 'dpr' => $dpr, - ]); + return get_image_url( + $this->user->avatar, + [ + 'dpr' => $dpr, + 'fit' => 'crop', + 'h' => $this->size, + 'w' => $this->size, + ] + ); + } + + public function srcSet() + { + return collect($this->dprs) + ->map(fn ($dpr) => $this->src($dpr) . ' ' . $dpr . 'x') + ->implode(', '); } public function render() diff --git a/src/View/Components/Image.php b/src/View/Components/Image.php index 6d8b11227c..929deea192 100644 --- a/src/View/Components/Image.php +++ b/src/View/Components/Image.php @@ -16,18 +16,23 @@ class Image extends Component public function __construct($src, $manipulations, $dprs = [1, 1.5, 2, 3]) { $this->dprs = $dprs; - $this->src = $src; $this->manipulations = $manipulations; - } - - public function srcSet() - { - return collect($this->dprs)->map(fn ($dpr) => $this->src($dpr) . ' ' . $dpr . 'x')->implode(', '); + $this->src = $src; } public function src($dpr = 1) { - return get_image_url($this->src, array_merge(['dpr' => $dpr], $this->manipulations)); + return get_image_url( + $this->src, + array_merge(['dpr' => $dpr], $this->manipulations), + ); + } + + public function srcSet() + { + return collect($this->dprs) + ->map(fn ($dpr) => $this->src($dpr) . ' ' . $dpr . 'x') + ->implode(', '); } public function render()