Skip to content

Commit

Permalink
Merge pull request #12660 from filamentphp/actually-hide-hidden-item-…
Browse files Browse the repository at this point in the history 
…actions

Actually hide hidden item actions
  • Loading branch information
@danharrin
danharrin committed May 9, 2024
2 parents b5de297 + 7b3ba50 commit 04f2bcf
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 41 deletions.
44 changes: 28 additions & 16 deletions packages/forms/resources/views/components/builder.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@
$isReorderableWithButtons = $isReorderableWithButtons();
$isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
$collapseAllActionIsVisible = $isCollapsible && $collapseAllAction->isVisible();
$expandAllActionIsVisible = $isCollapsible && $expandAllAction->isVisible();
$statePath = $getStatePath();
@endphp

Expand All @@ -36,22 +39,22 @@
->class(['fi-fo-builder grid gap-y-4'])
}}
>
@if ($isCollapsible && ($collapseAllAction->isVisible() || $expandAllAction->isVisible()))
@if ($collapseAllActionIsVisible || $expandAllActionIsVisible)
<div
@class([
'flex gap-x-3',
'hidden' => count($containers) < 2,
])
>
@if ($collapseAllAction->isVisible())
@if ($collapseAllActionIsVisible)
<span
x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')"
>
{{ $collapseAllAction }}
</span>
@endif

@if ($expandAllAction->isVisible())
@if ($expandAllActionIsVisible)
<span
x-on:click="$dispatch('builder-expand', '{{ $statePath }}')"
>
Expand Down Expand Up @@ -79,6 +82,15 @@ class="space-y-4"
$extraItemActions,
fn (Action $action): bool => $action(['item' => $uuid])->isVisible(),
);
$cloneAction = $cloneAction(['item' => $uuid]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
$deleteAction = $deleteAction(['item' => $uuid]);
$deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
$moveDownAction = $moveDownAction(['item' => $uuid])->disabled($loop->last);
$moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
$moveUpAction = $moveUpAction(['item' => $uuid])->disabled($loop->first);
$moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
@endphp

<li
Expand All @@ -93,7 +105,7 @@ class="space-y-4"
class="fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10"
x-bind:class="{ 'fi-collapsed overflow-hidden': isCollapsed }"
>
@if ($isReorderableWithDragAndDrop || $isReorderableWithButtons || $hasBlockLabels || $isCloneable || $isDeletable || $isCollapsible || $visibleExtraItemActions)
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible || $hasBlockLabels || $cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<div
@if ($isCollapsible)
x-on:click.stop="isCollapsed = !isCollapsed"
Expand All @@ -103,9 +115,9 @@ class="fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 d
'cursor-pointer select-none' => $isCollapsible,
])
>
@if ($isReorderableWithDragAndDrop || $isReorderableWithButtons)
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible)
<ul class="flex items-center gap-x-3">
@if ($isReorderableWithDragAndDrop)
@if ($reorderActionIsVisible)
<li
x-sortable-handle
x-on:click.stop
Expand All @@ -114,13 +126,13 @@ class="fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 d
</li>
@endif

@if ($isReorderableWithButtons)
@if ($moveUpActionIsVisible || $moveDownActionIsVisible)
<li x-on:click.stop>
{{ $moveUpAction(['item' => $uuid])->disabled($loop->first) }}
{{ $moveUpAction }}
</li>

<li x-on:click.stop>
{{ $moveDownAction(['item' => $uuid])->disabled($loop->last) }}
{{ $moveDownAction }}
</li>
@endif
</ul>
Expand All @@ -141,7 +153,7 @@ class="fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 d
</h4>
@endif

@if ($isCloneable || $isDeletable || $isCollapsible || $visibleExtraItemActions)
@if ($cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<ul
class="ms-auto flex items-center gap-x-3"
>
Expand All @@ -151,15 +163,15 @@ class="ms-auto flex items-center gap-x-3"
</li>
@endforeach

@if ($isCloneable)
@if ($cloneActionIsVisible)
<li x-on:click.stop>
{{ $cloneAction(['item' => $uuid]) }}
{{ $cloneAction }}
</li>
@endif

@if ($isDeletable)
@if ($deleteActionIsVisible)
<li x-on:click.stop>
{{ $deleteAction(['item' => $uuid]) }}
{{ $deleteAction }}
</li>
@endif

Expand Down Expand Up @@ -198,7 +210,7 @@ class="fi-fo-builder-item-content border-t border-gray-100 p-4 dark:border-white
</li>

@if (! $loop->last)
@if ($isAddable && $addBetweenAction->isVisible())
@if ($isAddable && $addBetweenAction(['afterItem' => $uuid])->isVisible())
<li class="relative -top-2 !mt-0 h-0">
<div
class="flex w-full justify-center opacity-0 transition duration-75 hover:opacity-100"
Expand All @@ -215,7 +227,7 @@ class="fi-fo-builder-block-picker-ctn rounded-lg bg-white dark:bg-gray-900"
:width="$blockPickerWidth"
>
<x-slot name="trigger">
{{ $addBetweenAction }}
{{ $addBetweenAction(['afterItem' => $uuid]) }}
</x-slot>
</x-filament-forms::builder.block-picker>
</div>
Expand Down
43 changes: 27 additions & 16 deletions packages/forms/resources/views/components/repeater/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
$isReorderableWithButtons = $isReorderableWithButtons();
$isReorderableWithDragAndDrop = $isReorderableWithDragAndDrop();
$collapseAllActionIsVisible = $isCollapsible && $collapseAllAction->isVisible();
$expandAllActionIsVisible = $isCollapsible && $expandAllAction->isVisible();
$statePath = $getStatePath();
@endphp

Expand All @@ -33,22 +36,22 @@
->class(['fi-fo-repeater grid gap-y-4'])
}}
>
@if ($isCollapsible && ($collapseAllAction->isVisible() || $expandAllAction->isVisible()))
@if ($collapseAllActionIsVisible || $expandAllActionIsVisible)
<div
@class([
'flex gap-x-3',
'hidden' => count($containers) < 2,
])
>
@if ($collapseAllAction->isVisible())
@if ($collapseAllActionIsVisible)
<span
x-on:click="$dispatch('repeater-collapse', '{{ $statePath }}')"
>
{{ $collapseAllAction }}
</span>
@endif

@if ($expandAllAction->isVisible())
@if ($expandAllActionIsVisible)
<span
x-on:click="$dispatch('repeater-expand', '{{ $statePath }}')"
>
Expand Down Expand Up @@ -79,7 +82,15 @@ class="items-start gap-4"
$extraItemActions,
fn (Action $action): bool => $action(['item' => $uuid])->isVisible(),
);
$itemHasToolbar = $isReorderableWithDragAndDrop || $isReorderableWithButtons || filled($itemLabel) || $isCloneable || $isDeletable || $isCollapsible || $visibleExtraItemActions;
$cloneAction = $cloneAction(['item' => $uuid]);
$cloneActionIsVisible = $isCloneable && $cloneAction->isVisible();
$deleteAction = $deleteAction(['item' => $uuid]);
$deleteActionIsVisible = $isDeletable && $deleteAction->isVisible();
$moveDownAction = $moveDownAction(['item' => $uuid])->disabled($loop->last);
$moveDownActionIsVisible = $isReorderableWithButtons && $moveDownAction->isVisible();
$moveUpAction = $moveUpAction(['item' => $uuid])->disabled($loop->first);
$moveUpActionIsVisible = $isReorderableWithButtons && $moveUpAction->isVisible();
$reorderActionIsVisible = $isReorderableWithDragAndDrop && $reorderAction->isVisible();
@endphp

<li
Expand All @@ -94,7 +105,7 @@ class="items-start gap-4"
class="fi-fo-repeater-item divide-y divide-gray-100 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-white/5 dark:ring-white/10"
x-bind:class="{ 'fi-collapsed overflow-hidden': isCollapsed }"
>
@if ($itemHasToolbar)
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible || filled($itemLabel) || $cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<div
@if ($isCollapsible)
x-on:click.stop="isCollapsed = !isCollapsed"
Expand All @@ -104,9 +115,9 @@ class="fi-fo-repeater-item divide-y divide-gray-100 rounded-xl bg-white shadow-s
'cursor-pointer select-none' => $isCollapsible,
])
>
@if ($isReorderableWithDragAndDrop || $isReorderableWithButtons)
@if ($reorderActionIsVisible || $moveUpActionIsVisible || $moveDownActionIsVisible)
<ul class="flex items-center gap-x-3">
@if ($isReorderableWithDragAndDrop)
@if ($reorderActionIsVisible)
<li
x-sortable-handle
x-on:click.stop
Expand All @@ -115,19 +126,19 @@ class="fi-fo-repeater-item divide-y divide-gray-100 rounded-xl bg-white shadow-s
</li>
@endif

@if ($isReorderableWithButtons)
@if ($moveUpActionIsVisible || $moveDownActionIsVisible)
<li
x-on:click.stop
class="flex items-center justify-center"
>
{{ $moveUpAction(['item' => $uuid])->disabled($loop->first) }}
{{ $moveUpAction }}
</li>

<li
x-on:click.stop
class="flex items-center justify-center"
>
{{ $moveDownAction(['item' => $uuid])->disabled($loop->last) }}
{{ $moveDownAction }}
</li>
@endif
</ul>
Expand All @@ -144,7 +155,7 @@ class="flex items-center justify-center"
</h4>
@endif

@if ($isCloneable || $isDeletable || $isCollapsible || $visibleExtraItemActions)
@if ($cloneActionIsVisible || $deleteActionIsVisible || $isCollapsible || $visibleExtraItemActions)
<ul
class="ms-auto flex items-center gap-x-3"
>
Expand All @@ -154,15 +165,15 @@ class="ms-auto flex items-center gap-x-3"
</li>
@endforeach

@if ($isCloneable)
@if ($cloneActionIsVisible)
<li x-on:click.stop>
{{ $cloneAction(['item' => $uuid]) }}
{{ $cloneAction }}
</li>
@endif

@if ($isDeletable)
@if ($deleteActionIsVisible)
<li x-on:click.stop>
{{ $deleteAction(['item' => $uuid]) }}
{{ $deleteAction }}
</li>
@endif

Expand Down Expand Up @@ -201,7 +212,7 @@ class="fi-fo-repeater-item-content p-4"
</li>

@if (! $loop->last)
@if ($isAddable && $addBetweenAction->isVisible())
@if ($isAddable && $addBetweenAction(['afterItem' => $uuid])->isVisible())
<li class="flex w-full justify-center">
<div
class="fi-fo-repeater-add-between-action-ctn rounded-lg bg-white dark:bg-gray-900"
Expand Down

0 comments on commit 04f2bcf

Please sign in to comment.