Tweaks styles

hotwired-laravel · Sep 8, 2023 · 60eb8b5 · 60eb8b5
1 parent 84e92c3
commit 60eb8b5
Show file tree

Hide file tree

Showing 24 changed files with 335 additions and 56 deletions.
diff --git a/tests/TurboStreamsBroadcastingTest.php b/tests/TurboStreamsBroadcastingTest.php
@@ -51,13 +51,18 @@ public function can_manually_broadcast_append_streams(string $action)
             channel: 'general',
             target: 'notifications',
             content: View::make('partials._notification', [
-                'status' => 'Hello World',
+                'message' => 'Hello World',
             ]),
         );
 
         $expected = <<<HTML
         <turbo-stream target="notifications" action="{$action}">
-            <template><div>Hello World</div></template>
+            <template><div
+            class="px-4 py-2 shadow-lg opacity-90 bg-gray-900 text-white rounded-full mx-auto animate-appear-then-fade-out"
+            data-controller="remover"
+            data-action="animationend->remover#remove"
+            data-turbo-temporary
+        >Hello World</div></template>
         </turbo-stream>
         HTML;
 

diff --git a/tests/Views/ViewHelpersTest.php b/tests/Views/ViewHelpersTest.php
@@ -40,13 +40,13 @@ public function renders_unless_turbo_native()
         $this->assertFalse(Turbo::isTurboNativeVisit());
 
         $this->get(route('articles.show', $article))
-            ->assertSee('Back to Index');
+            ->assertSee('Index');
 
         Turbo::setVisitingFromTurboNative();
         $this->assertTrue(Turbo::isTurboNativeVisit());
 
         $this->get(route('articles.show', $article))
-            ->assertDontSee('Back to Index');
+            ->assertDontSee('Back');
     }
 
     /** @test */

diff --git a/workbench/app/Http/Controllers/ArticlesController.php b/workbench/app/Http/Controllers/ArticlesController.php
@@ -40,10 +40,12 @@ public function store(Request $request)
                     'article' => $article,
                 ])),
                 turbo_stream()->replace('create_article_details', view('articles._create_article_link')),
+                turbo_stream()->flash(__('Article created.')),
             ]);
         }
 
-        return to_route('articles.show', $article);
+        return to_route('articles.show', $article)
+            ->with('status', __('Article created.'));
     }
 
     public function show(Article $article)
@@ -74,7 +76,8 @@ public function update(Request $request, Article $article)
             ]);
         }
 
-        return to_route('articles.show', $article);
+        return to_route('articles.show', $article)
+            ->with('status', __('Article updated.'));
     }
 
     public function delete(Article $article)
@@ -94,6 +97,7 @@ public function destroy(Request $request, Article $article)
 
         $article->delete();
 
-        return to_route('articles.index');
+        return to_route('articles.index')
+            ->with('status', __('Article removed.'));
     }
 }
diff --git a/workbench/app/Providers/WorkbenchAppServiceProvider.php b/workbench/app/Providers/WorkbenchAppServiceProvider.php
@@ -8,6 +8,10 @@
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\ServiceProvider;
 use Workbench\App\View\Components\AppLayout;
+use Workbench\App\View\Components\Button;
+use Workbench\App\View\Components\ButtonLink;
+use Workbench\App\View\Components\Icon;
+use Workbench\App\View\Components\Modal;
 
 class WorkbenchAppServiceProvider extends ServiceProvider
 {
@@ -28,13 +32,18 @@ public function register(): void
     public function boot(): void
     {
         View::addLocation(dirname(__DIR__, levels: 2).'/resources/views');
+
         Blade::component('app-layout', AppLayout::class);
+        Blade::component('icon', Icon::class);
+        Blade::component('button', Button::class);
+        Blade::component('button-link', ButtonLink::class);
+        Blade::component('modal', Modal::class);
 
         $this->loadMigrationsFrom(dirname(__DIR__, levels: 2).'/database/migrations');
 
-        PendingTurboStreamResponse::macro('flash', function (string $status) {
+        PendingTurboStreamResponse::macro('flash', function (string $message) {
             return $this->append('notifications', view('partials._notification', [
-                'status' => $status,
+                'message' => $message,
             ]));
         });
     }

diff --git a/workbench/app/View/Components/Button.php b/workbench/app/View/Components/Button.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Workbench\App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+    public function __construct(public $type = 'submit', public $variant = 'primary')
+    {
+        //
+    }
+
+    public function render(): View|Closure|string
+    {
+        return view('components.button', [
+            'color' => match ($this->variant) {
+                'primary' => 'bg-gray-900 text-white',
+                'secondary' => 'bg-gray-200 text-gray-900',
+                'danger' => 'bg-red-600 text-white',
+            },
+        ]);
+    }
+}
diff --git a/workbench/app/View/Components/ButtonLink.php b/workbench/app/View/Components/ButtonLink.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Workbench\App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ButtonLink extends Component
+{
+    public function __construct(public $variant = 'primary', public $icon = null)
+    {
+        //
+    }
+
+    public function render(): View|Closure|string
+    {
+        return view('components.button-link', [
+            'color' => match ($this->variant) {
+                'primary' => 'bg-gray-900 text-white',
+                'secondary' => 'bg-gray-200 text-gray-900',
+            },
+        ]);
+    }
+}
diff --git a/workbench/app/View/Components/Icon.php b/workbench/app/View/Components/Icon.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Workbench\App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Icon extends Component
+{
+    public function __construct(public $type)
+    {
+        //
+    }
+
+    public function render(): View|Closure|string
+    {
+        return view('components.icon');
+    }
+}
diff --git a/workbench/app/View/Components/Modal.php b/workbench/app/View/Components/Modal.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Workbench\App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Modal extends Component
+{
+    public function __construct(public $minHeight = '', public bool $closable = true)
+    {
+    }
+
+    public function render(): View|Closure|string
+    {
+        return view('components.modal');
+    }
+}
diff --git a/workbench/resources/views/article_comments/turbo/created.blade.php b/workbench/resources/views/article_comments/turbo/created.blade.php
@@ -3,5 +3,5 @@
 </x-turbo-stream>
 
 <x-turbo-stream target="notifications" action="append">
-    @include('partials._notification', ['status' => $status])
+    @include('partials._notification', ['message' => $status])
 </x-turbo-stream>
diff --git a/workbench/resources/views/articles/_article.blade.php b/workbench/resources/views/articles/_article.blade.php
@@ -1,14 +1,25 @@
-<x-turbo-frame :id="$article" class="contents">
-    <h2 class="text-4xl font-semibold">{{ $article->title }}</h2>
+<x-turbo-frame :id="$article" class="block relative">
+    <div class="absolute right-0 top-0 flex items-center justify-end space-x-4">
+        <a href="{{ route('articles.edit', $article) }}" class="opacity-50 transition transform hover:opacity-100" title="{{ __('Edit Article') }}">
+            <x-icon type="pencil" />
+            <span class="sr-only">{{ __('Edit') }}</span>
+        </a>
 
-    <p class="prose">{{ $article->content }}</p>
+        <a
+            data-turbo-frame="{{ dom_id($article, 'remove_modal_frame') }}"
+            data-controller="modal-trigger"
+            data-modal-trigger-modal-outlet="#{{ dom_id($article, 'remove_modal') }}"
+            data-action="modal-trigger#toggle"
+            href="{{ route('articles.delete', $article) }}"
+            class="opacity-50 transition transform hover:opacity-100"
+            title="{{ __('Edit Article') }}"
+        >
+            <x-icon type="trash" />
+            <span class="sr-only">{{ __('Trash') }}</span>
+        </a>
+    </div>
 
-    <div class="mt-4 border-t pt-2">
-        <h4 class="text-2xl">{{ __('Actions') }}</h4>
+    <h2 class="text-4xl font-semibold">{{ $article->title }}</h2>
 
-        <ul class="flex items-center space-x-2">
-            <li><a class="underline text-indigo-600" href="{{ route('articles.edit', $article) }}">{{ __('Edit') }}</a></li>
-            <li><a class="underline text-red-600" href="{{ route('articles.delete', $article) }}">{{ __('Delete') }}</a></li>
-        </ul>
-    </div>
+    <p class="mt-4 prose">{{ $article->content }}</p>
 </x-turbo-frame>
diff --git a/workbench/resources/views/articles/_article_card.blade.php b/workbench/resources/views/articles/_article_card.blade.php
@@ -1,7 +1,7 @@
-<div id="@domid($article, 'card')" class="p-4">
-    <p class="mb-2 flex items-center justify-between">{{ $article->title }}</p>
+<div id="@domid($article, 'card')" class="p-4 relative">
+    <p class="mb-2 text-lg font-semibold flex items-center justify-between">
+        <a href="{{ route('articles.show', $article) }}">{{ $article->title }} <span class="absolute inset-0"></span></a>
+    </p>
 
-    <span class="pt-2 border-t text-sm">
-        <a class="underline text-indigo-500" href="{{ route('articles.show', $article)}}">{{ __('View') }}</a>
-    </span>
+    <p class="text-sm">{{ str($article->content)->limit(50) }}</p>
 </div>
diff --git a/workbench/resources/views/articles/_form.blade.php b/workbench/resources/views/articles/_form.blade.php
@@ -5,7 +5,7 @@
 
     <div>
         <label class="block font-medium text-sm text-gray-700 dark:text-gray-300" for="title">{{ __('Title') }}</label>
-        <input class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" type="text" name="title" placeholder="{{ __('Title') }}" value="{{ old('title', $article?->title) }}" />
+        <input class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" type="text" name="title" placeholder="{{ __('Title') }}" autofocus value="{{ old('title', $article?->title) }}" />
         @error('title')
         <span class="mt-1 block text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
         @enderror
@@ -19,11 +19,11 @@
         @enderror
     </div>
 
-    <div class="mt-4 flex items-center space-x-2 justify-end">
+    <div class="mt-4 flex items-center space-x-4 justify-end">
         @if ($article?->exists)
-        <a class="underline text-indigo-600" href="{{ route('articles.show', $article) }}">{{ __('Cancel') }}</a>
+        <a class="underline text-gray-600" href="{{ route('articles.show', $article) }}">{{ __('Cancel') }}</a>
         @endif
 
-        <button class="px-4 py-2 text-lg rounded bg-indigo-600 text-white" type="submit">{{ $article?->exists ? __('Save') : __('Create') }}</button>
+        <x-button type="submit">{{ $article?->exists ? __('Save') : __('Create') }}</x-button>
     </div>
 </form>
diff --git a/workbench/resources/views/articles/create.blade.php b/workbench/resources/views/articles/create.blade.php
@@ -1,15 +1,17 @@
 <x-app-layout>
     <x-slot name="title">{{ __('New Article') }}</x-slot>
 
-    <h1 class="mb-4 text-4xl font-semibold font-cursive">{{ __('New Article') }}</h1>
+    <div class="flex items-center space-x-4">
+        @unlessturbonative
+        <x-button-link variant="secondary" href="{{ route('articles.index') }}" icon="arrow-uturn-left">
+            <span>{{ __('Index') }}</span>
+        </x-button-link>
+        @endturbonative
 
-    <div class="p-6">
-        <a class="underline text-indigo-600" href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
+        <h1 class="my-4 text-4xl font-semibold font-cursive">{{ __('New Article') }}</h1>
     </div>
 
-    <br>
-
-    <x-turbo-frame id="create_article">
+    <x-turbo-frame id="create_article" class="block mt-6 rounded p-6 border shadow-sm">
         @include('articles._form', ['article' => null])
     </x-turbo-frame>
 </x-app-layout>
diff --git a/workbench/resources/views/articles/delete.blade.php b/workbench/resources/views/articles/delete.blade.php
@@ -1,25 +1,32 @@
 <x-app-layout>
     <x-slot name="title">{{ __('Delete Article') }}</x-slot>
 
-    <h1 class="mb-4 text-4xl font-semibold font-sans">{{ __('Delete Article') }}</h1>
+    <div class="flex items-center space-x-4">
+        @unlessturbonative
+        <x-button-link variant="secondary" href="{{ route('articles.show', $article) }}" icon="arrow-uturn-left">
+            <span>{{ __('Back') }}</span>
+        </x-button-link>
+        @endturbonative
 
-    <div class="p-6">
-        <a class="underline text-indigo-600" href="{{ route('articles.show', $article) }}">{{ __('Back to Article') }}</a>
+        <h1 class="my-4 text-4xl font-semibold font-cursive">{{ __('Delete Article') }}</h1>
+    </div>
 
+    <div class="p-6 hidden">
         <p>{{ __('My cookie: :value.', ['value' => request()->cookie('my-cookie', 'no-cookie')]) }}</p>
         <p>{{ __('Response cookie: :value.', ['value' => request()->cookie('response-cookie', 'no-cookie')]) }}</p>
     </div>
 
-    <x-turbo-frame :id="$article" target="_top">
+    <x-turbo-frame id="{{ request()->header('Turbo-Frame', dom_id($article)) }}" target="_top">
         <form action="{{ route('articles.destroy', $article) }}" method="post" data-turbo-frame="_top">
             @method('DELETE')
 
             <p class="text-lg">{{ __('Are you sure you wanna delete this article?') }}</p>
 
-            <div class="mt-4 flex items-center justify-end space-x-2">
-                <a class="text-gray-600 underline" href="{{ route('articles.show', $article) }}">{{ __('No, cancel.') }}</a>
+            <div class="mt-4 flex items-center justify-end space-x-4">
+                <a class="text-gray-600 underline dialog:hidden" href="{{ route('articles.show', $article) }}">{{ __('No, cancel.') }}</a>
+                <button class="text-gray-600 underline hidden dialog:block" formmethod="diaglo" value="cancel" data-action="modal#close:prevent">{{ __('No, cancel.') }}</button>
 
-                <button class="px-4 py-2 border border-red-600 rounded bg-red-600 text-white" type="submit">{{ __('Yes, delete it.') }}</button>
+                <x-button type="submit" variant="danger">{{ __('Yes, delete it.') }}</x-button>
             </div>
         </form>
     </x-turbo-frame>

diff --git a/workbench/resources/views/articles/edit.blade.php b/workbench/resources/views/articles/edit.blade.php
@@ -1,11 +1,17 @@
 <x-app-layout>
     <x-slot name="title">{{ __('Edit Article') }}</x-slot>
 
-    <h1>{{ __('Edit Article') }}</h1>
+    <div class="flex items-center space-x-4">
+        @unlessturbonative
+        <x-button-link variant="secondary" href="{{ route('articles.show', $article) }}" icon="arrow-uturn-left">
+            <span>{{ __('Back') }}</span>
+        </x-button-link>
+        @endturbonative
 
-    <div>
-        <a href="{{ route('articles.show', $article) }}">{{ __('Back to View') }}</a>
+        <h1 class="my-4 text-4xl font-semibold font-cursive">{{ __('Edit Article') }}</h1>
+    </div>
 
+    <div>
         @if (request('frame'))
         <p>{{ __('Showing frame: :frame.', ['frame' => request('frame')]) }}</p>
         @endif

diff --git a/workbench/resources/views/articles/index.blade.php b/workbench/resources/views/articles/index.blade.php
@@ -1,11 +1,25 @@
 <x-app-layout>
     <x-slot name="title">{{ __('Articles') }}</x-slot>
 
-    <h1 class="mb-4 text-4xl font-semibold font-sans">{{ __('Articles Index') }}</h1>
+    <h1 class="my-4 text-4xl font-semibold font-sans">{{ __('Articles Index') }}</h1>
 
-    @include('articles._create_article_link')
+    <div class="flex items-center justify-end">
+        <x-button-link
+            data-controller="modal-trigger"
+            data-modal-trigger-modal-outlet="#create-article-modal"
+            data-action="modal-trigger#toggle"
+            href="{{ route('articles.create') }}"
+            data-turbo-frame="create_article"
+        >{{ __('Add Article') }}</x-button-link>
+    </div>
 
     <div id="articles" class="mt-4 flex flex-col space-y-2 divide-y border rounded">
         @each('articles._article_card', $articles, 'article')
     </div>
+
+    <x-modal id="create-article-modal" min-height="min-h-[30vh]">
+        <x-turbo-frame class="mt-2" id="create_article" loading="lazy">
+            <p class="text-gray-600">{{ __('Loading...') }}</p>
+        </x-turbo-frame>
+    </x-modal>
 </x-app-layout>