Skip to content

Commit 3f688e8

Browse files
Reinhold-JesseReinhold-Jesse
committed
Fixx css for tree view
1 parent 21ec111 commit 3f688e8

5 files changed

Lines changed: 113 additions & 20 deletions

File tree

‎packages/tree/resources/css/tree.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.fi-tree-list {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.fi-tree-list-root {
7+
min-height: 2.5rem;
8+
}
9+
10+
.fi-tree-list-child {
11+
margin-top: 0.25rem;
12+
}
13+
14+
.fi-tree-item {
15+
display: flex;
16+
align-items: center;
17+
gap: 0.25rem;
18+
}
19+
20+
.fi-tree-item-content {
21+
min-width: 0;
22+
flex: 1 1 0%;
23+
}
24+
25+
.fi-tree-item-button {
26+
width: 100%;
27+
text-align: start;
28+
}
29+
30+
.fi-tree-item-label {
31+
display: block;
32+
overflow: hidden;
33+
text-overflow: ellipsis;
34+
white-space: nowrap;
35+
}
36+
37+
.fi-tree-branch {
38+
padding-inline-start: 1rem;
39+
}
40+
41+
.fi-tree-chevron {
42+
transition: transform 150ms ease-in-out;
43+
}
44+
45+
.fi-tree-chevron-open {
46+
transform: rotate(90deg);
47+
}
48+
49+
.fi-tree-actions {
50+
display: flex;
51+
gap: 0.25rem;
52+
}
53+
54+
.fi-tree-scroll-panel {
55+
max-height: calc(100vh - 22rem);
56+
overflow-y: auto;
57+
}
58+
59+
.fi-tree-inspector-scroll {
60+
max-height: calc(100vh - 14rem);
61+
overflow-y: auto;
62+
}
63+
64+
.fi-tree-full-width {
65+
width: 100%;
66+
}
67+
68+
.fi-tree-form {
69+
display: flex;
70+
flex-direction: column;
71+
}
72+
73+
.fi-tree-footer {
74+
display: flex;
75+
flex-wrap: wrap;
76+
align-items: center;
77+
justify-content: space-between;
78+
}
79+
80+
.fi-tree-footer-actions {
81+
display: flex;
82+
flex-wrap: wrap;
83+
gap: 0.5rem;
84+
}

‎packages/tree/resources/views/livewire/partials/resource-tree-item.blade.php‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<li
77
wire:key="resource-tree-item-{{ $item['id'] }}"
88
@if ($reorderable) wire:sort:item="{{ $item['id'] }}" @endif
9-
class="flex items-center gap-1"
9+
class="fi-tree-item"
1010
>
1111
@if ($reorderable)
1212
<x-filament::icon-button
@@ -20,15 +20,12 @@ class="flex items-center gap-1"
2020
/>
2121
@endif
2222

23-
<div
24-
class="min-w-0 flex-1"
25-
@if ($reorderable) wire:sort:ignore @endif
26-
>
23+
<div class="fi-tree-item-content" @if ($reorderable) wire:sort:ignore @endif>
2724
<button
2825
type="button"
2926
wire:click.stop="selectRecord({{ $item['id'] }})"
3027
@class([
31-
'fi-tabs-item fi-tabs-item-vertical w-full text-start',
28+
'fi-tabs-item fi-tabs-item-vertical fi-tree-item-button',
3229
'fi-active' => $isSelected,
3330
])
3431
>
@@ -37,7 +34,7 @@ class="min-w-0 flex-1"
3734
class="fi-tabs-item-icon"
3835
/>
3936

40-
<span class="fi-tabs-item-label truncate">
37+
<span class="fi-tabs-item-label fi-tree-item-label">
4138
{{ $item['label'] }}
4239
</span>
4340
</button>
@@ -53,9 +50,10 @@ class="fi-tabs-item-icon"
5350
:label="'Untereinträge von '.$item['label']"
5451
tooltip="Untereinträge ein-/ausklappen"
5552
wire:sort:ignore
53+
class="fi-tree-chevron"
5654
x-on:click.stop="$store.filamentTreeIndex.toggle({{ $item['id'] }})"
5755
x-bind:aria-expanded="$store.filamentTreeIndex.open[{{ $item['id'] }}] ? 'true' : 'false'"
58-
x-bind:class="{ 'rotate-90': $store.filamentTreeIndex.open[{{ $item['id'] }}] }"
56+
x-bind:class="$store.filamentTreeIndex.open[{{ $item['id'] }}] ? 'fi-tree-chevron-open' : ''"
5957
/>
6058
@else
6159
<x-filament::icon-button
@@ -65,9 +63,10 @@ class="fi-tabs-item-icon"
6563
size="sm"
6664
:label="'Untereinträge von '.$item['label']"
6765
tooltip="Untereinträge ein-/ausklappen"
66+
class="fi-tree-chevron"
6867
x-on:click.stop="$store.filamentTreeIndex.toggle({{ $item['id'] }})"
6968
x-bind:aria-expanded="$store.filamentTreeIndex.open[{{ $item['id'] }}] ? 'true' : 'false'"
70-
x-bind:class="{ 'rotate-90': $store.filamentTreeIndex.open[{{ $item['id'] }}] }"
69+
x-bind:class="$store.filamentTreeIndex.open[{{ $item['id'] }}] ? 'fi-tree-chevron-open' : ''"
7170
/>
7271
@endif
7372
@endif
@@ -76,7 +75,7 @@ class="fi-tabs-item-icon"
7675
@if ($hasTreeChildren)
7776
<li
7877
wire:key="resource-tree-branch-{{ $item['id'] }}"
79-
class="ps-4"
78+
class="fi-tree-branch"
8079
x-show="$store.filamentTreeIndex.open[{{ $item['id'] }}]"
8180
x-cloak
8281
>

‎packages/tree/resources/views/livewire/resource-tree-index.blade.php‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class="fi-sc fi-sc-has-gap fi-grid lg:fi-grid-cols"
1010
compact
1111
>
1212
<x-slot name="afterHeader">
13-
<div class="flex gap-1">
13+
<div class="fi-tree-actions">
1414
<x-filament::icon-button
1515
type="button"
1616
icon="heroicon-m-arrows-pointing-out"
@@ -34,7 +34,7 @@ class="fi-sc fi-sc-has-gap fi-grid lg:fi-grid-cols"
3434
</x-slot>
3535

3636
<div
37-
class="fi-tabs fi-vertical fi-contained w-full max-h-[calc(100vh-22rem)] overflow-y-auto"
37+
class="fi-tabs fi-vertical fi-contained fi-tree-scroll-panel"
3838
wire:key="resource-tree-{{ md5(json_encode($treeBranchIdsWithChildren)) }}"
3939
x-data
4040
x-init="$store.filamentTreeIndex.configure(@js($treeBranchIdsWithChildren), @js($treeAncestorIdsForSelection))"
@@ -53,7 +53,7 @@ class="fi-tabs fi-vertical fi-contained w-full max-h-[calc(100vh-22rem)] overflo
5353
type="button"
5454
wire:click="createRootNode"
5555
icon="heroicon-m-plus"
56-
class="w-full"
56+
class="fi-tree-full-width"
5757
>
5858
{{ $configuration->createRootLabel() }}
5959
</x-filament::button>
@@ -81,7 +81,7 @@ class="w-full"
8181
compact
8282
>
8383
<div
84-
class="max-h-[calc(100vh-14rem)] overflow-y-auto"
84+
class="fi-tree-inspector-scroll"
8585
wire:key="tree-index-inspector-{{ $selectedRecordId }}"
8686
>
8787
@livewire($inspectorPageClass, ['record' => $selectedRecordId], key('tree-inspector-'.$selectedRecordId))
@@ -105,7 +105,11 @@ class="max-h-[calc(100vh-14rem)] overflow-y-auto"
105105
icon="heroicon-o-pencil-square"
106106
compact
107107
>
108-
<form id="tree-index-inspector-form" wire:submit="saveSelectedRecord" class="fi-sc fi-sc-has-gap flex flex-col">
108+
<form
109+
id="tree-index-inspector-form"
110+
wire:submit="saveSelectedRecord"
111+
class="fi-sc fi-sc-has-gap fi-tree-form"
112+
>
109113
<x-filament::section compact secondary>
110114
@include('filament-tree-index::livewire.tree-index-form', [
111115
'configuration' => $configuration,
@@ -115,8 +119,8 @@ class="max-h-[calc(100vh-14rem)] overflow-y-auto"
115119
</form>
116120

117121
<x-slot name="footer">
118-
<div class="fi-sc fi-sc-has-gap flex flex-wrap items-center justify-between">
119-
<div class="flex flex-wrap gap-2">
122+
<div class="fi-sc fi-sc-has-gap fi-tree-footer">
123+
<div class="fi-tree-footer-actions">
120124
<x-filament::button
121125
type="submit"
122126
form="tree-index-inspector-form"

‎packages/tree/resources/views/livewire/resource-tree.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
wire:sort:group-id="{{ $parentId ?? 'root' }}"
1010
@endif
1111
@class([
12-
'fi-sc fi-sc-has-gap flex flex-col',
13-
'min-h-10' => $isRoot ?? false,
14-
'mt-1' => ! ($isRoot ?? false),
12+
'fi-sc fi-sc-has-gap fi-tree-list',
13+
'fi-tree-list-root' => $isRoot ?? false,
14+
'fi-tree-list-child' => ! ($isRoot ?? false),
1515
])
1616
@if ($isRoot ?? false)
1717
role="tree"

‎packages/tree/src/TreeServiceProvider.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
namespace Moox\Tree;
66

7+
use Filament\Support\Assets\Css;
8+
use Filament\Support\Facades\FilamentAsset;
79
use Filament\Support\Facades\FilamentView;
810
use Filament\View\PanelsRenderHook;
911
use Illuminate\Support\HtmlString;
@@ -22,6 +24,10 @@ public function boot(): void
2224
{
2325
$this->loadViewsFrom(__DIR__.'/../resources/views', 'filament-tree-index');
2426

27+
FilamentAsset::register([
28+
Css::make('tree-index', __DIR__.'/../resources/css/tree.css'),
29+
], 'moox/tree');
30+
2531
FilamentView::registerRenderHook(
2632
PanelsRenderHook::SCRIPTS_BEFORE,
2733
fn (): HtmlString => new HtmlString(view('filament-tree-index::scripts.alpine-tree-store')->render()),

0 commit comments

Comments
 (0)