From 6a75aca81e2a7e1ea46b62c1e31f729f3c4e82b9 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Tue, 15 Feb 2022 15:48:48 +0000 Subject: [PATCH 01/13] Tweak compact file upload layout --- packages/forms/resources/css/components/file-upload.css | 9 +++++++++ .../resources/views/components/file-upload.blade.php | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index b3cb07dfca..e394716f95 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -13,3 +13,12 @@ .dark .filepond--panel-root { @apply border-gray-600 text-white bg-gray-700; } + +.filepond--root[data-style-panel-layout="compact"] .filepond--drop-label { + min-height: 2.625em; +} + +.filepond--root[data-style-panel-layout="compact"] .filepond--file { + padding-top: 0.5em; + padding-bottom: 0.5em; +} diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php index df9415e525..19cd9f849e 100644 --- a/packages/forms/resources/views/components/file-upload.blade.php +++ b/packages/forms/resources/views/components/file-upload.blade.php @@ -46,7 +46,7 @@ }, })" wire:ignore - style="min-height: 76px" + style="min-height: {{ $layout === 'compact' ? '2.625em' : '4.75em' }}" {{ $attributes->merge($getExtraAttributes())->class([ 'filament-forms-file-upload-component', 'w-32 mx-auto' => $isAvatar(), From bbfc263d16a68192f313036d6290dd1cdeee0e9e Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Tue, 15 Feb 2022 15:58:43 +0000 Subject: [PATCH 02/13] Add disable preview option --- .../forms/resources/js/components/file-upload.js | 2 ++ .../views/components/file-upload.blade.php | 1 + packages/forms/src/Components/BaseFileUpload.php | 14 ++++++++++++++ 3 files changed, 17 insertions(+) diff --git a/packages/forms/resources/js/components/file-upload.js b/packages/forms/resources/js/components/file-upload.js index 145e118629..26a0ceba0c 100644 --- a/packages/forms/resources/js/components/file-upload.js +++ b/packages/forms/resources/js/components/file-upload.js @@ -23,6 +23,7 @@ export default (Alpine) => { Alpine.data('fileUploadFormComponent', ({ acceptedFileTypes, canReorder, + canPreview, deleteUploadedFileUsing, getUploadedFileUrlUsing, imageCropAspectRatio, @@ -80,6 +81,7 @@ export default (Alpine) => { this.pond = FilePond.create(this.$refs.input, { acceptedFileTypes, allowReorder: canReorder, + allowImagePreview: canPreview, credits: false, files: shouldAppendFiles ? this.files : this.files.reverse(), imageCropAspectRatio, diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php index 19cd9f849e..1f94da250a 100644 --- a/packages/forms/resources/views/components/file-upload.blade.php +++ b/packages/forms/resources/views/components/file-upload.blade.php @@ -12,6 +12,7 @@ x-data="fileUploadFormComponent({ acceptedFileTypes: {{ json_encode($getAcceptedFileTypes()) }}, canReorder: {{ $canReorder() ? 'true' : 'false' }}, + canPreview: {{ $canPreview() ? 'true' : 'false' }}, deleteUploadedFileUsing: async (fileKey) => { return await $wire.deleteUploadedFile('{{ $getStatePath() }}', fileKey) }, diff --git a/packages/forms/src/Components/BaseFileUpload.php b/packages/forms/src/Components/BaseFileUpload.php index 1208564ea2..5be76d7c38 100644 --- a/packages/forms/src/Components/BaseFileUpload.php +++ b/packages/forms/src/Components/BaseFileUpload.php @@ -18,6 +18,8 @@ class BaseFileUpload extends Field protected bool | Closure $canReorder = false; + protected bool | Closure $canPreview = true; + protected string | Closure | null $directory = null; protected string | Closure | null $diskName = null; @@ -149,6 +151,13 @@ public function enableReordering(bool | Closure $condition = true): static return $this; } + public function disablePreview(bool | Closure $condition = false): static + { + $this->canPreview = $condition; + + return $this; + } + public function preserveFilenames(bool | Closure $condition = true): static { $this->shouldPreserveFilenames = $condition; @@ -243,6 +252,11 @@ public function canReorder(): bool return $this->evaluate($this->canReorder); } + public function canPreview(): bool + { + return $this->evaluate($this->canPreview); + } + public function getAcceptedFileTypes(): ?array { $types = $this->evaluate($this->acceptedFileTypes); From 939a4fe1fc457973d89d932c2c4c6866c3f60c99 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Wed, 16 Feb 2022 09:42:30 +0000 Subject: [PATCH 03/13] Remove dark mode label background --- packages/forms/resources/css/components/file-upload.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index e394716f95..b93546ddf0 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -7,7 +7,7 @@ } .dark .filepond--drop-label { - @apply bg-gray-700 text-gray-200 rounded-md; + @apply text-gray-200; } .dark .filepond--panel-root { From 723ee44dd6536de7721188e3a718df92d8239cbe Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Wed, 16 Feb 2022 09:45:43 +0000 Subject: [PATCH 04/13] Reduce text size --- packages/forms/resources/css/components/file-upload.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index b93546ddf0..5cb2040946 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -14,6 +14,10 @@ @apply border-gray-600 text-white bg-gray-700; } +.filepond--root[data-style-panel-layout="compact"] .filepond--drop-label label { + @apply text-sm; +} + .filepond--root[data-style-panel-layout="compact"] .filepond--drop-label { min-height: 2.625em; } From 07e6e7ad1d6021897d1e54e4c857d93ee24bba17 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Wed, 16 Feb 2022 12:56:36 +0000 Subject: [PATCH 05/13] Add compact multiple item spacing --- packages/forms/resources/css/components/file-upload.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index 5cb2040946..59e2f5c95f 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -14,6 +14,12 @@ @apply border-gray-600 text-white bg-gray-700; } +/* compact only styles, excludes compact circle (avatar) */ + +.filepond--root[data-style-panel-layout="compact"] .filepond--item { + @apply mt-0.5; +} + .filepond--root[data-style-panel-layout="compact"] .filepond--drop-label label { @apply text-sm; } From 870a359a86864a9b7fc4684329d8d5d998431af1 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Wed, 16 Feb 2022 12:59:31 +0000 Subject: [PATCH 06/13] Set min-height correctly in avatar layout --- packages/forms/resources/views/components/file-upload.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php index 1f94da250a..0df2c6baad 100644 --- a/packages/forms/resources/views/components/file-upload.blade.php +++ b/packages/forms/resources/views/components/file-upload.blade.php @@ -47,7 +47,7 @@ }, })" wire:ignore - style="min-height: {{ $layout === 'compact' ? '2.625em' : '4.75em' }}" + style="min-height: {{ $isAvatar() ? '8em' : ($getPanelLayout() === 'compact' ? '2.625em' : '4.75em') }}" {{ $attributes->merge($getExtraAttributes())->class([ 'filament-forms-file-upload-component', 'w-32 mx-auto' => $isAvatar(), From 51f309b9c23be25a417f5912e40a56a3f2274e3c Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Wed, 16 Feb 2022 13:06:07 +0000 Subject: [PATCH 07/13] Tweak --- packages/forms/resources/css/components/file-upload.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index 59e2f5c95f..26566cc124 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -16,7 +16,7 @@ /* compact only styles, excludes compact circle (avatar) */ -.filepond--root[data-style-panel-layout="compact"] .filepond--item { +.filepond--root[data-style-panel-layout="compact"] .filepond--item + .filepond--item { @apply mt-0.5; } From 81a4613bd7ba2856a77412827460dfd622f0ca3f Mon Sep 17 00:00:00 2001 From: Saade Date: Wed, 16 Feb 2022 20:10:12 -0300 Subject: [PATCH 08/13] add filepond-plugin-media-preview --- package.json | 3 ++- packages/forms/resources/js/components/file-upload.js | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a12e1d2948..4f5e6a1d42 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "trix": "^1.3.1" }, "dependencies": { - "@alpinejs/collapse": "^3.8.1" + "@alpinejs/collapse": "^3.8.1", + "filepond-plugin-media-preview": "^1.0.9" } } diff --git a/packages/forms/resources/js/components/file-upload.js b/packages/forms/resources/js/components/file-upload.js index 145e118629..323b8cf3f4 100644 --- a/packages/forms/resources/js/components/file-upload.js +++ b/packages/forms/resources/js/components/file-upload.js @@ -6,9 +6,11 @@ import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orien import FilePondPluginImagePreview from 'filepond-plugin-image-preview' import FilePondPluginImageResize from 'filepond-plugin-image-resize' import FilePondPluginImageTransform from 'filepond-plugin-image-transform' +import FilePondPluginMediaPreview from 'filepond-plugin-media-preview' import 'filepond/dist/filepond.min.css' import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css' +import 'filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css'; import '../../css/components/file-upload.css' FilePond.registerPlugin(FilePondPluginFileValidateSize) @@ -18,6 +20,7 @@ FilePond.registerPlugin(FilePondPluginImageExifOrientation) FilePond.registerPlugin(FilePondPluginImagePreview) FilePond.registerPlugin(FilePondPluginImageResize) FilePond.registerPlugin(FilePondPluginImageTransform) +FilePond.registerPlugin(FilePondPluginMediaPreview) export default (Alpine) => { Alpine.data('fileUploadFormComponent', ({ @@ -164,7 +167,7 @@ export default (Alpine) => { this.pond.files = shouldAppendFiles ? files : files.reverse() }) - + this.pond.on('reorderfiles', async (files) => { const orderedFileKeys = files .map(file => file.source instanceof File ? file.serverId : this.uploadedFileUrlIndex[file.source] ?? null) // file.serverId is null for a file that is not yet uploaded From a7ddbb690ae321a686acdb7cb86ca10109f05f7d Mon Sep 17 00:00:00 2001 From: Saade Date: Wed, 16 Feb 2022 20:13:52 -0300 Subject: [PATCH 09/13] fix: adds package as dev dependency --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4f5e6a1d42..ab6490ef62 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "filepond-plugin-image-preview": "^4.6.7", "filepond-plugin-image-resize": "^2.0.10", "filepond-plugin-image-transform": "^3.8.6", + "filepond-plugin-media-preview": "^1.0.9", "imask": "^6.1.0", "laravel-mix": "^6.0.37", "marked": "^4.0.10", @@ -34,7 +35,6 @@ "trix": "^1.3.1" }, "dependencies": { - "@alpinejs/collapse": "^3.8.1", - "filepond-plugin-media-preview": "^1.0.9" + "@alpinejs/collapse": "^3.8.1" } } From 1267ff6df5b1f0531432ecfb04c70453c5bf5023 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Thu, 17 Feb 2022 12:26:43 +0000 Subject: [PATCH 10/13] Apply `disablePreview` to video and audio --- packages/forms/resources/js/components/file-upload.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/forms/resources/js/components/file-upload.js b/packages/forms/resources/js/components/file-upload.js index 277d061c7d..156b1f4842 100644 --- a/packages/forms/resources/js/components/file-upload.js +++ b/packages/forms/resources/js/components/file-upload.js @@ -85,6 +85,8 @@ export default (Alpine) => { acceptedFileTypes, allowReorder: canReorder, allowImagePreview: canPreview, + allowVideoPreview: canPreview, + allowAudioPreview: canPreview, credits: false, files: shouldAppendFiles ? this.files : this.files.reverse(), imageCropAspectRatio, From ab77e3abd4c29533c956acfc9a8e2e9502d3d9e2 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Thu, 17 Feb 2022 12:54:38 +0000 Subject: [PATCH 11/13] Fix color of drag and drob blob in dark mode --- packages/forms/resources/css/components/file-upload.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index 26566cc124..05dd201c19 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -6,6 +6,10 @@ @apply bg-white border border-gray-300 rounded-lg shadow-sm; } +.filepond--drip-blob { + @apply bg-gray-900; +} + .dark .filepond--drop-label { @apply text-gray-200; } @@ -14,6 +18,10 @@ @apply border-gray-600 text-white bg-gray-700; } +.dark .filepond--drip-blob { + @apply bg-gray-100; +} + /* compact only styles, excludes compact circle (avatar) */ .filepond--root[data-style-panel-layout="compact"] .filepond--item + .filepond--item { From ac1546f9d9a5652fe90800e992c64f37fda589c2 Mon Sep 17 00:00:00 2001 From: Jack Sleight Date: Mon, 21 Feb 2022 09:35:09 +0000 Subject: [PATCH 12/13] Default to compact panel layout --- packages/forms/src/Components/FileUpload.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/forms/src/Components/FileUpload.php b/packages/forms/src/Components/FileUpload.php index b383ee1bff..327f1aa596 100644 --- a/packages/forms/src/Components/FileUpload.php +++ b/packages/forms/src/Components/FileUpload.php @@ -26,7 +26,7 @@ class FileUpload extends BaseFileUpload protected string | Closure | null $panelAspectRatio = null; - protected string | Closure | null $panelLayout = null; + protected string | Closure | null $panelLayout = 'compact'; protected string | Closure $removeUploadedFileButtonPosition = 'left'; From 21ee9512f92f2c9df064796b84bb9bf68c483667 Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Thu, 24 Feb 2022 20:03:56 +0000 Subject: [PATCH 13/13] Update file-upload.css --- .../forms/resources/css/components/file-upload.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index 05dd201c19..9c20445a4a 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/packages/forms/resources/css/components/file-upload.css @@ -22,21 +22,21 @@ @apply bg-gray-100; } -/* compact only styles, excludes compact circle (avatar) */ +/* Compact-only styles, excluding compact circle layouts */ -.filepond--root[data-style-panel-layout="compact"] .filepond--item + .filepond--item { +.filepond--root[data-style-panel-layout='compact'] .filepond--item + .filepond--item { @apply mt-0.5; } -.filepond--root[data-style-panel-layout="compact"] .filepond--drop-label label { +.filepond--root[data-style-panel-layout='compact'] .filepond--drop-label label { @apply text-sm; } -.filepond--root[data-style-panel-layout="compact"] .filepond--drop-label { +.filepond--root[data-style-panel-layout='compact'] .filepond--drop-label { min-height: 2.625em; } -.filepond--root[data-style-panel-layout="compact"] .filepond--file { +.filepond--root[data-style-panel-layout='compact'] .filepond--file { padding-top: 0.5em; padding-bottom: 0.5em; }