Skip to content

Commit b8fa73f

Browse files
cklei-carlycklei-carly
authored
Merge pull request #18 from vanhooff/2.x
[ui] Some opinionated UI improvements
2 parents 731d1b3 + dece0ec commit b8fa73f

File tree

2 files changed

+43
-36
lines changed

2 files changed

+43
-36
lines changed

‎resources/views/components/tree/index.blade.php‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
@endphp
77

88
<div wire:disabled="updateTree"
9-
x-data="{
9+
x-data="{
1010
init: function () {
1111
let nestedTree = $('#{{ $containerKey }}').nestable({
1212
group: {{ $containerKey }},
1313
maxDepth: {{ $maxDepth }},
1414
expandBtnHTML: '',
1515
collapseBtnHTML: '',
1616
});
17-
17+
1818
// Custom expand/collapse buttons
1919
$('#{{ $containerKey }} .dd-item-btns [data-action=expand]').on('click', function (el) {
2020
let list = $(this).closest('li');
@@ -34,7 +34,7 @@
3434
list.find('> .dd-list > .dd-item').addClass('dd-collapsed hidden');
3535
}
3636
});
37-
37+
3838
$('#nestable-menu [data-action=expand-all]').on('click', function () {
3939
$('.dd').nestable('expandAll');
4040
$('.dd').find('.dd-item-btns [data-action=expand]').addClass('hidden');
@@ -59,25 +59,25 @@
5959
<x-filament::section :heading="($this->displayTreeTitle() ?? false) ? $this->getTreeTitle() : null">
6060
<menu class="flex gap-2 mb-4" id="nestable-menu">
6161
<div class="btn-group">
62-
<x-filament::button tag="button" data-action="expand-all" wire:loading.attr="disabled" wire:loading.class="cursor-wait opacity-70">
62+
<x-filament::button color="gray" tag="button" data-action="expand-all" wire:loading.attr="disabled" wire:loading.class="cursor-wait opacity-70">
6363
{{ __('filament-tree::filament-tree.button.expand_all') }}
6464
</x-filament::button>
65-
<x-filament::button tag="button" data-action="collapse-all" wire:loading.attr="disabled" wire:loading.class="cursor-wait opacity-70">
65+
<x-filament::button color="gray" tag="button" data-action="collapse-all" wire:loading.attr="disabled" wire:loading.class="cursor-wait opacity-70">
6666
{{ __('filament-tree::filament-tree.button.collapse_all') }}
6767
</x-filament::button>
6868
</div>
6969
<div class="btn-group">
70-
<x-filament::button tag="button" data-action="save" wire:loading.attr="disabled" wire:loading.class="cursor-wait opacity-70" >
71-
<x-filament::loading-indicator class="h-4 w-4" wire:loading wire:target="updateTree" />
70+
<x-filament::button tag="button" data-action="save" wire:loading.attr="disabled" wire:loading.class="cursor-wait opacity-70">
71+
<x-filament::loading-indicator class="h-4 w-4" wire:loading wire:target="updateTree"/>
7272
<span wire:loading.remove wire:target="updateTree">
7373
{{ __('filament-tree::filament-tree.button.save') }}
7474
</span>
75-
75+
7676
</x-filament::button>
7777
</div>
7878
</menu>
7979
<div class="filament-tree dd" id="{{ $containerKey }}">
80-
<x-filament-tree::tree.list :records="$records" :containerKey="$containerKey" :tree="$tree" />
80+
<x-filament-tree::tree.list :records="$records" :containerKey="$containerKey" :tree="$tree"/>
8181
</div>
8282
</x-filament::section>
8383
</div>
@@ -86,7 +86,7 @@
8686
@php
8787
$action = $this->getMountedTreeAction();
8888
@endphp
89-
89+
9090
<x-filament::modal
9191
:alignment="$action?->getModalAlignment()"
9292
:close-button="$action?->hasModalCloseButton()"
@@ -133,4 +133,4 @@
133133
{{ $action->getModalContentFooter() }}
134134
@endif
135135
</x-filament::modal>
136-
</form>
136+
</form>

‎resources/views/components/tree/item.blade.php‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1+
@php use Illuminate\Database\Eloquent\Model; @endphp
2+
@php use Filament\Facades\Filament; @endphp
3+
@php use SolutionForest\FilamentTree\Components\Tree; @endphp
14
@props([
2-
'record',
3-
'containerKey',
5+
'record',
6+
'containerKey',
47
'tree',
58
'title' => null,
69
'icon' => null,
710
])
811
@php
9-
/** @var $record \Illuminate\Database\Eloquent\Model */
12+
/** @var $record Model */
1013
/** @var $containerKey string */
11-
/** @var $tree \SolutionForest\FilamentTree\Components\Tree */
14+
/** @var $tree Tree */
1215
1316
$recordKey = $tree->getRecordKey($record);
1417
$parentKey = $tree->getParentKey($record);
@@ -20,56 +23,60 @@
2023
@endphp
2124

2225
<li class="filament-tree-row dd-item" data-id="{{ $recordKey }}">
23-
<div wire:loading.remove.delay
24-
wire:target="{{ implode(',', \SolutionForest\FilamentTree\Components\Tree::LOADING_TARGETS) }}"
26+
<div wire:loading.remove.delay
27+
wire:target="{{ implode(',', Tree::LOADING_TARGETS) }}"
2528
@class([
26-
'bg-white rounded-lg border border-gray-300 dd-handle',
29+
'bg-white rounded-lg border border-gray-300 dark:border-white/10 dd-handle h-10',
2730
'mb-2',
2831
'flex w-full items-center ',
29-
'dark:bg-gray-900' => \Filament\Facades\Filament::hasDarkMode(),
32+
'dark:bg-gray-900' => Filament::hasDarkMode(),
3033
])>
3134

32-
<button type="button" class="h-full flex items-center bg-gray-50 rounded-lg border-r border-gray-300 px-px">
33-
<x-heroicon-o-ellipsis-vertical class="text-gray-400 w-4 h-4 -mr-2"/>
34-
<x-heroicon-o-ellipsis-vertical class="text-gray-400 w-4 h-4"/>
35+
<button type="button" class="h-full flex items-center bg-gray-50 dark:bg-black/30 rounded-l-lg border-r border-gray-300 dark:border-white/10 px-px">
36+
<x-heroicon-m-ellipsis-vertical class="text-gray-400 dark:text-gray-500 w-4 h-4 -mr-2"/>
37+
<x-heroicon-m-ellipsis-vertical class="text-gray-400 dark:text-gray-500 w-4 h-4"/>
3538
</button>
3639

37-
<div class="dd-content dd-nodrag ml-2 flex gap-1">
38-
<div class="w-4">
39-
@if ($icon)
40-
<x-dynamic-component :component="$icon" class="w-4 h-4" />
41-
@endif
42-
</div>
40+
<div class="dd-content dd-nodrag flex gap-1">
41+
@if ($icon)
42+
<div class="w-4">
43+
<x-dynamic-component :component="$icon" class="w-4 h-4"/>
44+
</div>
45+
@endif
4346

44-
<span>
47+
<span @class([
48+
'ml-4' => !$icon,
49+
'font-semibold'
50+
])>
4551
{{ $title }}
4652
</span>
4753

4854
<div @class([
4955
'dd-item-btns',
5056
'hidden' => ! count($children),
57+
'flex items-center justify-center pl-3'
5158
])>
5259
<button data-action="expand" @class(['hidden' => ! $collapsed])>
53-
<x-heroicon-o-chevron-down class="text-gray-400 w-4 h-4"/>
60+
<x-heroicon-m-chevron-down class="text-gray-400 dark:text-gray-400 w-5 h-5"/>
5461
</button>
5562
<button data-action="collapse" @class(['hidden' => $collapsed])>
56-
<x-heroicon-o-chevron-up class="text-gray-400 w-4 h-4"/>
63+
<x-heroicon-m-chevron-up class="text-gray-400 dark:text-gray-400 w-5 h-5"/>
5764
</button>
5865
</div>
5966
</div>
6067

6168
@if (count($actions))
6269
<div class="dd-nodrag ml-auto px-2">
63-
<x-filament-tree::actions :actions="$actions" :record="$record" />
70+
<x-filament-tree::actions :actions="$actions" :record="$record"/>
6471
</div>
6572
@endif
6673
</div>
6774
@if (count($children))
6875
<x-filament-tree::tree.list :records="$children" :containerKey="$containerKey" :tree="$tree" :collapsed="$collapsed"/>
6976
@endif
70-
<div class="rounded-lg border border-gray-300 mb-2 w-full px-4 py-4 animate-pulse hidden"
71-
wire:loading.class.remove.delay="hidden"
72-
wire:target="{{ implode(',', \SolutionForest\FilamentTree\Components\Tree::LOADING_TARGETS) }}">
77+
<div class="rounded-lg border border-gray-300 mb-2 w-full px-4 py-4 animate-pulse hidden"
78+
wire:loading.class.remove.delay="hidden"
79+
wire:target="{{ implode(',', Tree::LOADING_TARGETS) }}">
7380
<div class="h-4 bg-gray-300 rounded-md"></div>
7481
</div>
75-
</li>
82+
</li>

0 commit comments

Comments
 (0)