From 869d40892f646ce1e3cfdc3fcb4ea178a51a19b7 Mon Sep 17 00:00:00 2001 From: 199ocero <199ocero@gmail.com> Date: Thu, 4 Jan 2024 20:09:04 +0800 Subject: [PATCH] fix design and remove future todos --- .../components/activity-date.blade.php | 6 +- .../components/activity-description.blade.php | 2 +- .../components/activity-icon.blade.php | 68 +++- .../components/activity-section.blade.php | 341 +++--------------- .../components/activity-title.blade.php | 2 +- src/Components/ActivitySection.php | 83 +++-- 6 files changed, 153 insertions(+), 349 deletions(-) diff --git a/resources/views/infolists/components/activity-date.blade.php b/resources/views/infolists/components/activity-date.blade.php index 5778dd4..027ca9f 100644 --- a/resources/views/infolists/components/activity-date.blade.php +++ b/resources/views/infolists/components/activity-date.blade.php @@ -1,3 +1,5 @@ -
- {{ $getState() != null ? $getDate($getState()) : $getPlaceholder() }} +
+

+ {{ $getState() != null ? $getDate($getState()) : $getPlaceholder() }} +

diff --git a/resources/views/infolists/components/activity-description.blade.php b/resources/views/infolists/components/activity-description.blade.php index b70376c..a1c7deb 100644 --- a/resources/views/infolists/components/activity-description.blade.php +++ b/resources/views/infolists/components/activity-description.blade.php @@ -1,3 +1,3 @@ -

+

{{ $getState() ?? $getPlaceholder() }}

diff --git a/resources/views/infolists/components/activity-icon.blade.php b/resources/views/infolists/components/activity-icon.blade.php index 901a9c0..a4b4ca9 100644 --- a/resources/views/infolists/components/activity-icon.blade.php +++ b/resources/views/infolists/components/activity-icon.blade.php @@ -6,22 +6,54 @@ $color = $getColor($getState()) ?? 'gray'; $size = $getSize($getState()) ?? IconEntrySize::Medium; @endphp - - 'fi-in-icon-item-size-xs h-3 w-3', - IconEntrySize::Small, 'sm' => 'fi-in-icon-item-size-sm h-4 w-4', - IconEntrySize::Medium, 'md' => 'fi-in-icon-item-size-md h-5 w-5', - IconEntrySize::Large, 'lg' => 'fi-in-icon-item-size-lg h-6 w-6', - IconEntrySize::ExtraLarge, 'xl' => 'fi-in-icon-item-size-xl h-7 w-7', - default => $size, - }, - match ($color) { - 'gray' => 'fi-color-gray text-gray-400 dark:text-gray-500', - default => 'fi-color-custom text-custom-500 dark:text-custom-400', - }, - ]) @style([ - \Filament\Support\get_color_css_variables($color, shades: [400, 500], alias: 'infolists::components.icon-entry.item') => $color !== 'gray', - ]) /> +
+
+ 'w-7 h-7', + IconEntrySize::Medium, 'md' => 'w-8 h-8', + IconEntrySize::Large, 'lg' => 'w-9 h-9', + default => 'w-8 h-8', + }, + match ($color) { + 'gray' => 'bg-gray-100', + default => 'fi-color-custom bg-custom-100', + }, + ]) @style([ + \Filament\Support\get_color_css_variables($color, shades: [100, 800], alias: 'infolists::components.icon-entry.item') => $color !== 'gray', + ])> + 'fi-in-icon-item-size-sm h-4 w-4', + IconEntrySize::Medium, 'md' => 'fi-in-icon-item-size-md h-5 w-5', + IconEntrySize::Large, 'lg' => 'fi-in-icon-item-size-lg h-6 w-6', + default => 'fi-in-icon-item-size-md h-5 w-5', + }, + match ($color) { + 'gray' => 'fi-color-gray text-gray-400 dark:text-gray-500', + default => 'fi-color-custom text-custom-500 dark:text-custom-400', + }, + ]) @style([ + \Filament\Support\get_color_css_variables($color, shades: [400, 500], alias: 'infolists::components.icon-entry.item') => $color !== 'gray', + ]) /> +
+
+@else +
+
'w-7 h-7', + IconEntrySize::Medium, 'md' => 'w-8 h-8', + IconEntrySize::Large, 'lg' => 'w-9 h-9', + default => 'w-8 h-8', + }, + ])> +
+
+
@endif diff --git a/resources/views/infolists/components/activity-section.blade.php b/resources/views/infolists/components/activity-section.blade.php index 67cf478..2e9b533 100644 --- a/resources/views/infolists/components/activity-section.blade.php +++ b/resources/views/infolists/components/activity-section.blade.php @@ -12,299 +12,64 @@ @if (count($childComponentContainers = $getChildComponentContainers()) && - count($getChildComponentContainers()[0]->getComponents()) > 0) - @if ($getDirection() == Direction::Vertical) -
    - @foreach ($childComponentContainers as $index => $container) - @php - $activityIcon = null; - $activityBadge = null; - $activityTitle = null; - $activityDate = null; - $activityDescription = null; + count($childComponentContainers[0]->getComponents()) > 0) + @foreach ($childComponentContainers as $index => $container) + @php + $activityComponents = [ + 'activityIcon' => null, + 'activityBadge' => null, + 'activityTitle' => null, + 'activityDate' => null, + 'activityDescription' => null, + ]; - $notEmptyCount = 0; - $isActivityBadgeEmpty = true; + foreach ($container->getComponents() as $component) { + $viewIdentifier = $component->getViewIdentifier(); + if (array_key_exists($viewIdentifier, $activityComponents)) { + $activityComponents[$viewIdentifier] = $component; + } + } - foreach ($container->getComponents() as $component) { - switch ($component->getViewIdentifier()) { - case 'activityIcon': - $activityIcon = $component; - break; - case 'activityBadge': - $activityBadge = $component; - if ($activityBadge->getState()) { - $notEmptyCount++; - $isActivityBadgeEmpty = false; - } - break; - case 'activityTitle': - $activityTitle = $component; - if ($activityTitle->getState()) { - $notEmptyCount++; - } - break; - case 'activityDate': - $activityDate = $component; - if ($activityDate->getState()) { - $notEmptyCount++; - } - break; - case 'activityDescription': - $activityDescription = $component; - if ($activityDescription->getState()) { - $notEmptyCount++; - } - break; - default: - # code... - break; - } - } + extract($activityComponents); + @endphp - $isComponentEmpty = false; - $isOnlyDate = false; - - if ($notEmptyCount == 0 || $notEmptyCount == 1) { - $isComponentEmpty = true; - } - - if ($notEmptyCount == 1 && $activityDate) { - $isOnlyDate = true; - } - - @endphp -
  1. $loop->last, 'mb-8' => !$loop->last])> -
    - @php - $color = $activityIcon ? $activityIcon->getColor($activityIcon->getState()) : 'gray'; - $size = $activityIcon ? $activityIcon->getSize($activityIcon->getState()) : IconEntrySize::Medium; - $icon = $activityIcon ? $activityIcon->getIcon($activityIcon->getState()) : null; - @endphp - - @if ($icon) - 'w-5 h-5 -start-[10px] p-[2px]', - IconEntrySize::Small, 'sm' => 'h-6 w-6 -start-[12px] p-[5px]', - IconEntrySize::Medium, 'md' => 'h-8 w-8 -start-[16px] p-[7px]', - IconEntrySize::Large, 'lg' => 'h-9 w-9 -start-[18px] p-[8px]', - IconEntrySize::ExtraLarge, 'xl' => 'h-10 w-10 -start-[20px] p-[10px]', - default => 'h-8 w-8 -start-[16px] p-[7px]', - }, - match ($color) { - 'gray' => 'bg-gray-100', - default => 'fi-color-custom bg-custom-100', - }, - ]) @style([ - \Filament\Support\get_color_css_variables($color, shades: [100, 800], alias: 'infolists::components.icon-entry.item') => $color !== 'gray', - ])> - {{ $activityIcon }} - - @else -
    -
    - @endif -
    - @if (!$isActivityBadgeEmpty) -
    - {{ $activityBadge }} -
    - @endif - {{ $activityTitle }} - {{ $activityDate }} - {{ $activityDescription }} -
    -
    -
    2. - @endforeach -
- @elseif ($getDirection() == Direction::Horizontal) -
    'md:grid-cols-2', - 3 => 'md:grid-cols-3', - 4 => 'md:grid-cols-4', - 5 => 'md:grid-cols-5', - 6 => 'md:grid-cols-6', - 7 => 'md:grid-cols-7', - 8 => 'md:grid-cols-8', - 9 => 'md:grid-cols-9', - 10 => 'md:grid-cols-10', - 11 => 'md:grid-cols-11', - 12 => 'md:grid-cols-12', - default => 'md:grid-cols-2', - }, - match ($getHorizontalItems('lg')) { - 2 => 'lg:grid-cols-2', - 3 => 'lg:grid-cols-3', - 4 => 'lg:grid-cols-4', - 5 => 'lg:grid-cols-5', - 6 => 'lg:grid-cols-6', - 7 => 'lg:grid-cols-7', - 8 => 'lg:grid-cols-8', - 9 => 'lg:grid-cols-9', - 10 => 'lg:grid-cols-10', - 11 => 'lg:grid-cols-11', - 12 => 'lg:grid-cols-12', - default => 'lg:grid-cols-3', - }, - 'relative ml-3 md:ml-0 md:border-0 border-gray-300 border-s dark:border-gray-700', + +
    !$loop->last, + 'mb-0' => $loop->last, ])> - @foreach ($childComponentContainers as $index => $container) - @php - $activityIcon = null; - $activityBadge = null; - $activityTitle = null; - $activityDate = null; - $activityDescription = null; + + {{ $activityDate }} + - $notEmptyCount = 0; - $isActivityBadgeEmpty = true; + +
    + + {{ $activityIcon }} + - foreach ($container->getComponents() as $component) { - switch ($component->getViewIdentifier()) { - case 'activityIcon': - $activityIcon = $component; - break; - case 'activityBadge': - $activityBadge = $component; - if ($activityBadge->getState()) { - $notEmptyCount++; - $isActivityBadgeEmpty = false; - } - break; - case 'activityTitle': - $activityTitle = $component; - if ($activityTitle->getState()) { - $notEmptyCount++; - } - break; - case 'activityDate': - $activityDate = $component; - if ($activityDate->getState()) { - $notEmptyCount++; - } - break; - case 'activityDescription': - $activityDescription = $component; - if ($activityDescription->getState()) { - $notEmptyCount++; - } - break; - default: - # code... - break; - } - } - - $isComponentEmpty = false; - $isOnlyDate = false; - - if ($notEmptyCount == 0 || $notEmptyCount == 1) { - $isComponentEmpty = true; - } - - if ($notEmptyCount == 1 && $activityDate) { - $isOnlyDate = true; - } - @endphp -
  1. !$loop->last && !$isComponentEmpty && !$isOnlyDate, - 'mb-14 md:mb-0' => !$loop->last && $isComponentEmpty, - 'mb-10 md:mb-0' => !$loop->last && $isOnlyDate, - ])> - @php - $color = $activityIcon ? $activityIcon->getColor($activityIcon->getState()) : 'gray'; - $size = $activityIcon ? $activityIcon->getSize($activityIcon->getState()) : IconEntrySize::Medium; - $icon = $activityIcon ? $activityIcon->getIcon($activityIcon->getState()) : null; - @endphp - -
    'md:mb-[24px]', - IconEntrySize::Small, 'sm' => 'md:mb-[28px]', - IconEntrySize::Medium, 'md' => 'md:mb-[32px]', - IconEntrySize::Large, 'lg' => 'md:mb-[36px]', - IconEntrySize::ExtraLarge, 'xl' => 'md:mb-[40px]', - default => 'md:mb-[32px]', - }, - ])> - @if ($icon) - 'w-5 h-5 -start-[10px] p-[2px]', - IconEntrySize::Small, 'sm' => 'h-6 w-6 -start-[12px] p-[5px]', - IconEntrySize::Medium, 'md' => 'h-8 w-8 -start-[16px] p-[7px]', - IconEntrySize::Large, 'lg' => 'h-9 w-9 -start-[18px] p-[8px]', - IconEntrySize::ExtraLarge, 'xl' => 'h-10 w-10 -start-[20px] p-[10px]', - default => 'h-8 w-8 -start-[16px] p-[7px]', - }, - match ($color) { - 'gray' => 'bg-gray-100', - default => 'fi-color-custom bg-custom-100', - }, - ]) @style([ - \Filament\Support\get_color_css_variables($color, shades: [100, 800], alias: 'infolists::components.icon-entry.item') => $color !== 'gray', - ])> - {{ $activityIcon }} - - @if (!$loop->last) - - @endif - @else -
    'md:mt-[10px] -start-[8px] md:-start-0', - IconEntrySize::Small, 'sm' => 'md:mt-[12px] -start-[8px] md:-start-0', - IconEntrySize::Medium, 'md' => 'md:mt-[16px] -start-[8px] md:-start-0', - IconEntrySize::Large, 'lg' => 'md:mt-[18px] -start-[8px] md:-start-0', - IconEntrySize::ExtraLarge, - 'xl' - => 'md:mt-[20px] -start-[8px] md:-start-0', - default => 'md:mt-[16px] -start-[8px] md:-start-0', - }, - ])> -
    -
    'mt-[10px]', - IconEntrySize::Small, 'sm' => 'mt-[12px]', - IconEntrySize::Medium, 'md' => 'mt-[16px]', - IconEntrySize::Large, 'lg' => 'mt-[18px]', - IconEntrySize::ExtraLarge, 'xl' => 'mt-[20px]', - default => 'mt-[16px]', - }, - ])>
    - @endif -
    -
    - @if (!$isActivityBadgeEmpty) -
    - {{ $activityBadge }} -
    - @endif - {{ $activityTitle }} - {{ $activityDate }} - {{ $activityDescription }} -
    -
    2. - @endforeach -
- @endif + +
+ {{-- Bagde --}} + @if ($activityBadge) +
+ {{ $activityBadge }} +
+ @endif + {{-- End Badge --}} + {{-- Title --}} + {{ $activityTitle }} + {{-- End Title --}} + {{-- Description --}} + {{ $activityDescription }} + {{-- End Description --}} +
+ +
+ + + + @endforeach @endif diff --git a/resources/views/infolists/components/activity-title.blade.php b/resources/views/infolists/components/activity-title.blade.php index 072622e..88530f8 100644 --- a/resources/views/infolists/components/activity-title.blade.php +++ b/resources/views/infolists/components/activity-title.blade.php @@ -1,3 +1,3 @@ -

+

{{ $getState() ?? $getPlaceholder() }}

diff --git a/src/Components/ActivitySection.php b/src/Components/ActivitySection.php index a6afbef..9fe0ac2 100644 --- a/src/Components/ActivitySection.php +++ b/src/Components/ActivitySection.php @@ -12,13 +12,13 @@ class ActivitySection extends Entry { protected string $view = 'activity-timeline::infolists.components.activity-section'; - protected string|Closure|null $description = null; + // protected string|Closure|null $description = null; - protected Direction|string $direction = Direction::Vertical; + // protected Direction|string $direction = Direction::Vertical; - protected bool|Closure|null $isAside = null; + // protected array|int|null $horizontalItems = null; - protected array|int|null $horizontalItems = null; + protected bool|Closure|null $isAside = null; public function description(string|Closure|null $description = null): static { @@ -27,17 +27,6 @@ public function description(string|Closure|null $description = null): static return $this; } - public function direction(Direction|string $direction = Direction::Vertical): static - { - if (in_array($direction, [Direction::Horizontal, Direction::Vertical])) { - $this->direction = $direction; - } else { - $this->direction = Direction::Vertical; - } - - return $this; - } - public function aside(bool|Closure|null $condition = true): static { $this->isAside = $condition; @@ -45,20 +34,6 @@ public function aside(bool|Closure|null $condition = true): static return $this; } - public function horizontalItems(array|int|null $items = 3): static - { - if (! is_array($items)) { - if ($items === 0 || $items === 1) { - throw new \InvalidArgumentException('Invalid value provided for horizontal items. Please use a value other than 0 or 1.'); - } - $this->horizontalItems = ['lg' => $items]; - } else { - $this->horizontalItems = $items; - } - - return $this; - } - public function isAside(): bool { return (bool) ($this->evaluate($this->isAside) ?? false); @@ -69,22 +44,13 @@ public function getDescription(): string return $this->evaluate($this->description); } - public function getDirection(): Direction|string - { - return $this->evaluate($this->direction); - } - - public function getHorizontalItems(?string $breakpoint = null): ?int - { - return $this->evaluate($this->horizontalItems[$breakpoint] ?? null); - } /** * @return array */ public function getChildComponentContainers(bool $withHidden = false): array { - if ((! $withHidden) && $this->isHidden()) { + if ((!$withHidden) && $this->isHidden()) { return []; } @@ -106,4 +72,43 @@ public function getChildComponentContainers(bool $withHidden = false): array return $containers; } + + // @todo: for now we're not using this + // public function direction(Direction|string $direction = Direction::Vertical): static + // { + // if (in_array($direction, [Direction::Horizontal, Direction::Vertical])) { + // $this->direction = $direction; + // } else { + // $this->direction = Direction::Vertical; + // } + + // return $this; + // } + + // @todo: for now we're not using this + // public function horizontalItems(array|int|null $items = 3): static + // { + // if (! is_array($items)) { + // if ($items === 0 || $items === 1) { + // throw new \InvalidArgumentException('Invalid value provided for horizontal items. Please use a value other than 0 or 1.'); + // } + // $this->horizontalItems = ['lg' => $items]; + // } else { + // $this->horizontalItems = $items; + // } + + // return $this; + // } + + // @todo: for now we're not using this + // public function getDirection(): Direction|string + // { + // return $this->evaluate($this->direction); + // } + + // @todo: for now we're not using this + // public function getHorizontalItems(?string $breakpoint = null): ?int + // { + // return $this->evaluate($this->horizontalItems[$breakpoint] ?? null); + // } }