Skip to content

Commit c4d0319

Browse files
ManukMinasyanManukMinasyan
committed
Refactor column.blade.php to improve color handling and enhance readability
1 parent 37ca589 commit c4d0319

File tree

1 file changed

+33
-26
lines changed

1 file changed

+33
-26
lines changed

‎resources/views/livewire/column.blade.php‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
@props(['columnId', 'column', 'config'])
22

3+
@php
4+
use Filament\Support\Colors\Color;
5+
$color = Color::generateV3Palette($column['color']);
6+
@endphp
7+
38
<div
4-
class="w-[300px] min-w-[300px] flex-shrink-0 border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-md rounded-xl flex flex-col max-h-full overflow-hidden">
9+
class="w-[300px] min-w-[300px] flex-shrink-0 border border-gray-200 dark:border-gray-700 shadow-sm dark:shadow-md rounded-xl flex flex-col max-h-full overflow-hidden">
510
<!-- Column Header -->
611
<div class="flex items-center justify-between py-3 px-4 border-b border-gray-200 dark:border-gray-700">
712
<div class="flex items-center">
813
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-200">
914
{{ $column['label'] }}
1015
</h3>
11-
<div @class([
12-
'ms-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
13-
'bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700/60 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700' => ($column['color'] ?? 'default') === 'gray' || ($column['color'] ?? 'default') === 'default',
14-
'bg-blue-50 text-blue-800 border border-blue-200 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:border-blue-800/60 dark:hover:bg-blue-900/60' => ($column['color'] ?? 'default') === 'blue',
15-
'bg-green-50 text-green-800 border border-green-200 hover:bg-green-100 dark:bg-green-900/40 dark:text-green-200 dark:border-green-800/60 dark:hover:bg-green-900/60' => ($column['color'] ?? 'default') === 'green',
16-
'bg-red-50 text-red-800 border border-red-200 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-200 dark:border-red-800/60 dark:hover:bg-red-900/60' => ($column['color'] ?? 'default') === 'red',
17-
'bg-amber-50 text-amber-800 border border-amber-200 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:border-amber-800/60 dark:hover:bg-amber-900/60' => ($column['color'] ?? 'default') === 'amber',
18-
])>
16+
<div
17+
style="background-color: {{ $color[500] }}; color: {{ $color[50] }};"
18+
@class([
19+
'ms-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
20+
'bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700/60 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700' => ($column['color'] ?? 'default') === 'gray' || ($column['color'] ?? 'default') === 'default',
21+
'bg-blue-50 text-blue-800 border border-blue-200 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:border-blue-800/60 dark:hover:bg-blue-900/60' => ($column['color'] ?? 'default') === 'blue',
22+
'bg-green-50 text-green-800 border border-green-200 hover:bg-green-100 dark:bg-green-900/40 dark:text-green-200 dark:border-green-800/60 dark:hover:bg-green-900/60' => ($column['color'] ?? 'default') === 'green',
23+
'bg-red-50 text-red-800 border border-red-200 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-200 dark:border-red-800/60 dark:hover:bg-red-900/60' => ($column['color'] ?? 'default') === 'red',
24+
'bg-amber-50 text-amber-800 border border-amber-200 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:border-amber-800/60 dark:hover:bg-amber-900/60' => ($column['color'] ?? 'default') === 'amber',
25+
])>
1926
{{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
2027
</div>
2128
</div>
@@ -39,25 +46,25 @@ class="w-[300px] min-w-[300px] flex-shrink-0 border border-gray-200 dark:border-
3946

4047
<!-- Column Content -->
4148
<div
42-
data-column-id="{{ $columnId }}"
43-
@if($this->getBoard()->getPositionIdentifierAttribute())
44-
x-sortable
49+
data-column-id="{{ $columnId }}"
50+
@if($this->getBoard()->getPositionIdentifierAttribute())
51+
x-sortable
4552
x-sortable-group="cards"
4653
@end.stop="handleSortableEnd($event)"
47-
@endif
48-
@if(isset($column['total']) && $column['total'] > count($column['items']))
49-
@scroll.throttle.100ms="handleColumnScroll($event, '{{ $columnId }}')"
50-
@endif
51-
class="p-3 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain kanban-cards"
52-
style="max-height: calc(100vh - 13rem);"
54+
@endif
55+
@if(isset($column['total']) && $column['total'] > count($column['items']))
56+
@scroll.throttle.100ms="handleColumnScroll($event, '{{ $columnId }}')"
57+
@endif
58+
class="p-3 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain kanban-cards"
59+
style="max-height: calc(100vh - 13rem);"
5360
>
5461
@if (isset($column['items']) && count($column['items']) > 0)
5562
@foreach ($column['items'] as $record)
5663
<x-flowforge::card
57-
:record="$record"
58-
:config="$config"
59-
:columnId="$columnId"
60-
wire:key="card-{{ $record['id'] }}"
64+
:record="$record"
65+
:config="$config"
66+
:columnId="$columnId"
67+
wire:key="card-{{ $record['id'] }}"
6168
/>
6269
@endforeach
6370

@@ -66,8 +73,8 @@ class="p-3 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain kanban-ca
6673
@if(isset($column['total']) && $column['total'] > count($column['items']))
6774
{{-- More items available --}}
6875
<div
69-
x-intersect.margin.300px="handleSmoothScroll('{{ $columnId }}')"
70-
class="w-full">
76+
x-intersect.margin.300px="handleSmoothScroll('{{ $columnId }}')"
77+
class="w-full">
7178

7279
<div x-show="isLoadingColumn('{{ $columnId }}')"
7380
x-transition
@@ -79,8 +86,8 @@ class="text-xs text-primary-600 dark:text-primary-400 flex items-center justify-
7986
</div>
8087
@else
8188
<x-flowforge::empty-column
82-
:columnId="$columnId"
83-
:pluralCardLabel="$config['pluralCardLabel']"
89+
:columnId="$columnId"
90+
:pluralCardLabel="$config['pluralCardLabel']"
8491
/>
8592
@endif
8693
</div>

0 commit comments

Comments
 (0)