From 9a4a0bc26150ad289e320cbab88147056fd62185 Mon Sep 17 00:00:00 2001 From: alan Date: Mon, 6 Nov 2023 17:41:13 +0800 Subject: [PATCH 1/5] add a hasCollapsibleNavigationWithText --- .../views/components/sidebar/item.blade.php | 98 +++++++++---------- packages/panels/src/FilamentManager.php | 5 + .../panels/src/Panel/Concerns/HasSidebar.php | 14 +++ 3 files changed, 65 insertions(+), 52 deletions(-) diff --git a/packages/panels/resources/views/components/sidebar/item.blade.php b/packages/panels/resources/views/components/sidebar/item.blade.php index 5dfb48f2eaa..6d28f12a12d 100644 --- a/packages/panels/resources/views/components/sidebar/item.blade.php +++ b/packages/panels/resources/views/components/sidebar/item.blade.php @@ -11,18 +11,14 @@ 'url', ]) -
  • $active, - ]) -> - $active, +])> + isSidebarCollapsibleOnDesktop()) - x-data="{ tooltip: false }" + @if (filament()->isSidebarCollapsibleOnDesktop()) x-data="{ tooltip: false }" x-effect=" tooltip = $store.sidebar.isOpen ? false @@ -32,75 +28,73 @@ theme: $store.theme, } " - x-tooltip.html="tooltip" + x-tooltip.html="tooltip" + + @if (filament()->hasCollapsibleNavigationWithText()) + :class="{ 'flex-col' : !$store.sidebar.isOpen }" @endif @endif @class([ 'fi-sidebar-item-button relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 text-sm outline-none transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5', 'bg-gray-100 dark:bg-white/5' => $active, - ]) - > + ])> @if (filled($icon)) - ! $active, - 'text-primary-600 dark:text-primary-400' => $active, - ]) - /> + !$active, + 'text-primary-600 dark:text-primary-400' => $active, + ]) /> @elseif ($grouped) -
    - @if (! $first) -
    +
    + @if (!$first) +
    @endif - @if (! $last) -
    + @if (!$last) +
    @endif -
    ! $active, - 'bg-primary-600 dark:bg-primary-400' => $active, - ]) - >
    +
    !$active, + 'bg-primary-600 dark:bg-primary-400' => $active, + ])>
    @endif isSidebarCollapsibleOnDesktop()) + @if (filament()->isSidebarCollapsibleOnDesktop() && !filament()->hasCollapsibleNavigationWithText()) x-show="$store.sidebar.isOpen" x-transition:enter="lg:transition lg:delay-100" x-transition:enter-start="opacity-0" - x-transition:enter-end="opacity-100" + x-transition:enter-end="opacity-100" @endif @class([ - 'fi-sidebar-item-label flex-1 truncate', - 'text-gray-700 dark:text-gray-200' => ! $active, + 'fi-sidebar-item-label flex-1', + 'text-gray-700 dark:text-gray-200' => !$active, 'text-primary-600 dark:text-primary-400' => $active, - 'font-semibold' => ! $grouped, + 'font-semibold' => !$grouped, 'font-medium' => $grouped, - ]) - > + 'truncate' => !filament()->hasCollapsibleNavigationWithText(), + 'text-xs text-center text-ellipsis w-16' => + filament()->isSidebarCollapsibleOnDesktop() && + filament()->hasCollapsibleNavigationWithText(), + ]) + + @if (filament()->isSidebarCollapsibleOnDesktop() && filament()->hasCollapsibleNavigationWithText()) + :class="{ 'text-xs text-center text-ellipsis w-16': !$store.sidebar.isOpen }" + @endif + + > {{ $slot }} @if (filled($badge)) isSidebarCollapsibleOnDesktop()) - x-show="$store.sidebar.isOpen" + @if (filament()->isSidebarCollapsibleOnDesktop()) + x-show="$store.sidebar.isOpen " x-transition:enter="lg:transition lg:delay-100" x-transition:enter-start="opacity-0" - x-transition:enter-end="opacity-100" - @endif - > + x-transition:enter-end="opacity-100" @endif> {{ $badge }} diff --git a/packages/panels/src/FilamentManager.php b/packages/panels/src/FilamentManager.php index 4510d919049..06937ad90b4 100644 --- a/packages/panels/src/FilamentManager.php +++ b/packages/panels/src/FilamentManager.php @@ -510,6 +510,11 @@ public function hasCollapsibleNavigationGroups(): bool return $this->getCurrentPanel()->hasCollapsibleNavigationGroups(); } + public function hasCollapsibleNavigationWithText(): bool + { + return $this->getCurrentPanel()->hasCollapsibleNavigationWithText(); + } + public function hasDarkMode(): bool { return $this->getCurrentPanel()->hasDarkMode(); diff --git a/packages/panels/src/Panel/Concerns/HasSidebar.php b/packages/panels/src/Panel/Concerns/HasSidebar.php index 0e0e49f43c3..613ff677dfc 100644 --- a/packages/panels/src/Panel/Concerns/HasSidebar.php +++ b/packages/panels/src/Panel/Concerns/HasSidebar.php @@ -14,6 +14,8 @@ trait HasSidebar protected bool $hasCollapsibleNavigationGroups = true; + protected bool $hasCollapsibleNavigationWithText = false; + public function sidebarCollapsibleOnDesktop(bool $condition = true): static { $this->isSidebarCollapsibleOnDesktop = $condition; @@ -35,6 +37,13 @@ public function collapsibleNavigationGroups(bool $condition = true): static return $this; } + public function collapsibleNavigationWithText(bool $condition = true): static + { + $this->hasCollapsibleNavigationWithText = $condition; + + return $this; + } + public function sidebarWidth(string $width): static { $this->sidebarWidth = $width; @@ -73,4 +82,9 @@ public function hasCollapsibleNavigationGroups(): bool { return $this->hasCollapsibleNavigationGroups; } + + public function hasCollapsibleNavigationWithText(): bool + { + return $this->hasCollapsibleNavigationWithText; + } } From 843a522a9fe7134e2c72f10110f3d2bda52198d8 Mon Sep 17 00:00:00 2001 From: lam0819 Date: Mon, 6 Nov 2023 09:46:47 +0000 Subject: [PATCH 2/5] chore: fix code style --- .../views/components/sidebar/item.blade.php | 98 +++++++++++-------- 1 file changed, 57 insertions(+), 41 deletions(-) diff --git a/packages/panels/resources/views/components/sidebar/item.blade.php b/packages/panels/resources/views/components/sidebar/item.blade.php index 6d28f12a12d..3650a9b49dc 100644 --- a/packages/panels/resources/views/components/sidebar/item.blade.php +++ b/packages/panels/resources/views/components/sidebar/item.blade.php @@ -11,14 +11,18 @@ 'url', ]) -
  • $active, -])> - $active, + ]) +> + isSidebarCollapsibleOnDesktop()) x-data="{ tooltip: false }" + @if (filament()->isSidebarCollapsibleOnDesktop()) + x-data="{ tooltip: false }" x-effect=" tooltip = $store.sidebar.isOpen ? false @@ -28,73 +32,85 @@ theme: $store.theme, } " - x-tooltip.html="tooltip" - + x-tooltip.html="tooltip" + @if (filament()->hasCollapsibleNavigationWithText()) - :class="{ 'flex-col' : !$store.sidebar.isOpen }" @endif + :class="{ 'flex-col' : !$store.sidebar.isOpen }" + @endif @endif @class([ 'fi-sidebar-item-button relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 text-sm outline-none transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5', 'bg-gray-100 dark:bg-white/5' => $active, - ])> + ]) + > @if (filled($icon)) - !$active, - 'text-primary-600 dark:text-primary-400' => $active, - ]) /> + ! $active, + 'text-primary-600 dark:text-primary-400' => $active, + ]) + /> @elseif ($grouped) -
    - @if (!$first) -
    +
    + @if (! $first) +
    @endif - @if (!$last) -
    + @if (! $last) +
    @endif -
    !$active, - 'bg-primary-600 dark:bg-primary-400' => $active, - ])>
    +
    ! $active, + 'bg-primary-600 dark:bg-primary-400' => $active, + ]) + >
    @endif isSidebarCollapsibleOnDesktop() && !filament()->hasCollapsibleNavigationWithText()) + @if (filament()->isSidebarCollapsibleOnDesktop() && ! filament()->hasCollapsibleNavigationWithText()) x-show="$store.sidebar.isOpen" x-transition:enter="lg:transition lg:delay-100" x-transition:enter-start="opacity-0" - x-transition:enter-end="opacity-100" + x-transition:enter-end="opacity-100" @endif @class([ 'fi-sidebar-item-label flex-1', - 'text-gray-700 dark:text-gray-200' => !$active, + 'text-gray-700 dark:text-gray-200' => ! $active, 'text-primary-600 dark:text-primary-400' => $active, - 'font-semibold' => !$grouped, + 'font-semibold' => ! $grouped, 'font-medium' => $grouped, - 'truncate' => !filament()->hasCollapsibleNavigationWithText(), - 'text-xs text-center text-ellipsis w-16' => - filament()->isSidebarCollapsibleOnDesktop() && - filament()->hasCollapsibleNavigationWithText(), - ]) - + 'truncate' => ! filament()->hasCollapsibleNavigationWithText(), + 'w-16 text-ellipsis text-center text-xs' => filament()->isSidebarCollapsibleOnDesktop() && + filament()->hasCollapsibleNavigationWithText(), + ]) @if (filament()->isSidebarCollapsibleOnDesktop() && filament()->hasCollapsibleNavigationWithText()) - :class="{ 'text-xs text-center text-ellipsis w-16': !$store.sidebar.isOpen }" + :class="{ 'text-xs text-center text-ellipsis w-16': !$store.sidebar.isOpen }" @endif - - > + > {{ $slot }} @if (filled($badge)) isSidebarCollapsibleOnDesktop()) + @if (filament()->isSidebarCollapsibleOnDesktop()) x-show="$store.sidebar.isOpen " x-transition:enter="lg:transition lg:delay-100" x-transition:enter-start="opacity-0" - x-transition:enter-end="opacity-100" @endif> + x-transition:enter-end="opacity-100" + @endif + > {{ $badge }} From dc9dd090cf3cce8e764654c9c277011ae433a617 Mon Sep 17 00:00:00 2001 From: alan Date: Mon, 6 Nov 2023 17:50:08 +0800 Subject: [PATCH 3/5] add README --- packages/panels/docs/06-navigation.md | 13 +++++++++++++ packages/panels/src/Facades/Filament.php | 1 + 2 files changed, 14 insertions(+) diff --git a/packages/panels/docs/06-navigation.md b/packages/panels/docs/06-navigation.md index 78d118541ad..e61ef784fdb 100644 --- a/packages/panels/docs/06-navigation.md +++ b/packages/panels/docs/06-navigation.md @@ -175,6 +175,19 @@ public function panel(Panel $panel): Panel } ``` +By default, when you collapse the sidebar on desktop, the navigation icons still show but without text. You can collapse the sidebar and show the text using the `collapsibleNavigationWithText()` method: + +```php +use Filament\Panel; + +public function panel(Panel $panel): Panel +{ + return $panel + // ... + ->collapsibleNavigationWithText(); +} +``` + ## Registering custom navigation items To register new navigation items, you can use the [configuration](configuration): diff --git a/packages/panels/src/Facades/Filament.php b/packages/panels/src/Facades/Filament.php index ac8eb9f9418..6bd0673c0e8 100644 --- a/packages/panels/src/Facades/Filament.php +++ b/packages/panels/src/Facades/Filament.php @@ -104,6 +104,7 @@ * @method static bool hasTopNavigation() * @method static bool isServing() * @method static bool isSidebarCollapsibleOnDesktop() + * @method static bool hasCollapsibleNavigationWithText() * @method static bool isSidebarFullyCollapsibleOnDesktop() * @method static void mountNavigation() * @method static void serving(Closure $callback) From 730d3e6b1b30faf81a637caee565e4ef5179e375 Mon Sep 17 00:00:00 2001 From: alan Date: Tue, 7 Nov 2023 14:14:54 +0800 Subject: [PATCH 4/5] add a simple lightbox in ImageColumn --- packages/tables/docs/03-columns/04-image.md | 11 +++++ .../views/columns/image-column.blade.php | 13 +++-- .../tables/resources/views/index.blade.php | 47 +++++++++++++++++++ packages/tables/src/Columns/ImageColumn.php | 14 ++++++ 4 files changed, 82 insertions(+), 3 deletions(-) diff --git a/packages/tables/docs/03-columns/04-image.md b/packages/tables/docs/03-columns/04-image.md index 953aa7e5516..f8db2066706 100644 --- a/packages/tables/docs/03-columns/04-image.md +++ b/packages/tables/docs/03-columns/04-image.md @@ -93,6 +93,17 @@ ImageColumn::make('avatar') ->defaultImageUrl(url('/images/placeholder.png')) ``` +## Image Lightbox + +You can display a image lightbox by using `lightbox()`: + +```php +use Filament\Tables\Columns\ImageColumn; + +ImageColumn::make('header_image') + ->lightbox() +``` + ## Stacking images You may display multiple images as a stack of overlapping images by using `stacked()`: diff --git a/packages/tables/resources/views/columns/image-column.blade.php b/packages/tables/resources/views/columns/image-column.blade.php index 817706e32e9..b1e34cc6d97 100644 --- a/packages/tables/resources/views/columns/image-column.blade.php +++ b/packages/tables/resources/views/columns/image-column.blade.php @@ -5,6 +5,7 @@ $isCircular = $isCircular(); $isSquare = $isSquare(); $isStacked = $isStacked(); + $hasLightbox = $hasLightBox() ?? false; $overlap = $isStacked ? ($getOverlap() ?? 2) : null; $ring = $isStacked ? ($getRing() ?? 2) : null; $height = $getHeight() ?? ($isStacked ? '2rem' : '2.5rem'); @@ -41,6 +42,7 @@ @endphp
    merge($getExtraAttributes(), escape: false) @@ -50,9 +52,13 @@ ]) }} > + + @if (count($limitedState)) -
    +
    @foreach ($limitedState as $stateItem) $width, ]) }} - /> - @endforeach + /> @endforeach @if ($hasLimitedRemainingText && ($loop->iteration < count($limitedState)) && (! $isLimitedRemainingTextSeparate) && $isCircular)
    @endif +
    diff --git a/packages/tables/resources/views/index.blade.php b/packages/tables/resources/views/index.blade.php index 98833dc7651..da1d8c8cf6e 100644 --- a/packages/tables/resources/views/index.blade.php +++ b/packages/tables/resources/views/index.blade.php @@ -1119,4 +1119,51 @@ class="p-4 sm:px-6" + + +
    diff --git a/packages/tables/src/Columns/ImageColumn.php b/packages/tables/src/Columns/ImageColumn.php index 8b2c4bd2c8b..fb62caa81dd 100644 --- a/packages/tables/src/Columns/ImageColumn.php +++ b/packages/tables/src/Columns/ImageColumn.php @@ -50,6 +50,8 @@ class ImageColumn extends Column protected string | Closure | null $limitedRemainingTextSize = null; + protected bool | Closure $lightbox = false; + public function disk(string | Closure | null $disk): static { $this->disk = $disk; @@ -283,6 +285,18 @@ public function getRing(): ?int return $this->evaluate($this->ring); } + public function lightbox(bool | Closure $lightbox = true): static + { + $this->lightbox = $lightbox; + + return $this; + } + + public function hasLightBox(): ?bool + { + return $this->evaluate($this->lightbox); + } + public function limit(int | Closure | null $limit = 3): static { $this->limit = $limit; From b10f90f3cf33700d30b3f902e66c31c492b8508b Mon Sep 17 00:00:00 2001 From: lam0819 Date: Tue, 7 Nov 2023 06:20:56 +0000 Subject: [PATCH 5/5] chore: fix code style --- .../views/columns/image-column.blade.php | 10 +-- .../tables/resources/views/index.blade.php | 72 ++++++++++--------- 2 files changed, 42 insertions(+), 40 deletions(-) diff --git a/packages/tables/resources/views/columns/image-column.blade.php b/packages/tables/resources/views/columns/image-column.blade.php index b1e34cc6d97..5c8929abc6f 100644 --- a/packages/tables/resources/views/columns/image-column.blade.php +++ b/packages/tables/resources/views/columns/image-column.blade.php @@ -52,13 +52,9 @@ ]) }} > - - @if (count($limitedState)) -
    +
    $width, ]) }} - /> @endforeach + /> + @endforeach @if ($hasLimitedRemainingText && ($loop->iteration < count($limitedState)) && (! $isLimitedRemainingTextSeparate) && $isCircular)
    @endif -
    diff --git a/packages/tables/resources/views/index.blade.php b/packages/tables/resources/views/index.blade.php index da1d8c8cf6e..839eb243902 100644 --- a/packages/tables/resources/views/index.blade.php +++ b/packages/tables/resources/views/index.blade.php @@ -1120,50 +1120,56 @@ class="p-4 sm:px-6" - - + ` + lightboxDiv.addEventListener('click', () => + this.closeSimpleImageLightBox(), + ) + lightboxDiv + .querySelector('button') + .addEventListener('click', (e) => { + e.stopPropagation() + this.closeSimpleImageLightBox() + }) + lightboxDiv + .querySelector('div') + .addEventListener('keydown', (e) => { + if (e.key === 'Escape') + this.closeSimpleImageLightBox() + }) + + this.lightboxDiv = lightboxDiv + document.body.appendChild(lightboxDiv) + }, + closeSimpleImageLightBox() { + this.lightboxDiv.remove() + }, + })) + }) +