Add toggles for quick-switching the link display mode from pages (#553)

Kovah · Feb 7, 2024 · c191380 · c191380
1 parent c68dd90
commit c191380
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 8 deletions.
diff --git a/app/Http/Controllers/Models/LinkController.php b/app/Http/Controllers/Models/LinkController.php
@@ -4,6 +4,7 @@
 
 use App\Http\Controllers\Controller;
 use App\Http\Controllers\Traits\ChecksOrdering;
+use App\Http\Controllers\Traits\ConfiguresListDisplay;
 use App\Http\Controllers\Traits\HandlesQueryOrder;
 use App\Http\Requests\Models\LinkStoreRequest;
 use App\Http\Requests\Models\LinkUpdateRequest;
@@ -17,6 +18,7 @@
 class LinkController extends Controller
 {
     use ChecksOrdering;
+    use ConfiguresListDisplay;
 
     public function __construct()
     {
@@ -26,6 +28,8 @@ public function __construct()
 
     public function index(Request $request): View
     {
+        $this->saveNewListDisplay();
+
         $this->orderBy = $request->input('orderBy', session()->get('links.index.orderBy', 'created_at'));
         $this->orderDir = $request->input('orderDir', session()->get('links.index.orderDir', 'desc'));
         $this->checkOrdering();

diff --git a/app/Http/Controllers/Traits/ConfiguresListDisplay.php b/app/Http/Controllers/Traits/ConfiguresListDisplay.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers\Traits;
+
+use App\Models\Link;
+use App\Settings\UserSettings;
+
+trait ConfiguresListDisplay
+{
+    public function saveNewListDisplay(): void
+    {
+        $newSetting = request()?->input('list-type');
+        if ($newSetting === null) {
+            return;
+        }
+
+        if (in_array($newSetting, [Link::DISPLAY_LIST_SIMPLE, Link::DISPLAY_LIST_DETAILED, Link::DISPLAY_CARDS])) {
+            $userSettings = app(UserSettings::class);
+            $userSettings->link_display_mode = $newSetting;
+        }
+    }
+}
diff --git a/resources/assets/js/components/Base.js b/resources/assets/js/components/Base.js
@@ -2,11 +2,19 @@ export default class Base {
 
   constructor () {
     this.initAppData();
+    this.initBootstrapTooltips();
   }
 
   initAppData () {
     // Load data passed by the backend to the JS
     let data = document.querySelector('meta[property="la-app-data"]').getAttribute('content');
     window.appData = JSON.parse(data);
   }
+
+  initBootstrapTooltips () {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+  }
 }
diff --git a/resources/assets/js/components/UpdateCheck.js b/resources/assets/js/components/UpdateCheck.js
@@ -1,5 +1,3 @@
-import { debounce } from '../lib/helper';
-
 export default class UpdateCheck {
 
   constructor ($el) {

diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
@@ -161,6 +161,10 @@ $navbar-brand-padding-y: 0;
 $badge-font-weight: $font-weight-normal;
 
 
+// Tooltips
+$tooltip-bg: $primary;
+$tooltip-color: $light;
+
 // Code
 $code-font-size: 85%;
 $code-color: $teal;

diff --git a/resources/assets/sass/custom/_app.scss b/resources/assets/sass/custom/_app.scss
@@ -252,3 +252,17 @@ code {
     background-size: cover !important;
   }
 }
+
+.link-display-toggles {
+  @include media-breakpoint-up('sm') {
+    font-size: 1.2rem;
+  }
+
+  a:not(.active) {
+    opacity: 70%;
+    transition: opacity ease 200ms;
+  }
+  a:hover, a:focus {
+    opacity: 100%;
+  }
+}
diff --git a/resources/assets/sass/third-party/bootstrap/bootstrap5.scss b/resources/assets/sass/third-party/bootstrap/bootstrap5.scss
@@ -40,7 +40,7 @@
 @import "~bootstrap/scss/close";
 @import "~bootstrap/scss/toasts";
 //@import "~bootstrap/scss/modal";
-//@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/tooltip";
 //@import "~bootstrap/scss/popover";
 //@import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/spinners";

diff --git a/resources/views/components/icon/list-cards.blade.php b/resources/views/components/icon/list-cards.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->merge(['class' => 'icon', 'aria-label' => 'List of Cards']) }} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="128" height="128" rx="7" fill="currentColor"/>
+</svg>
diff --git a/resources/views/components/icon/list-detailed.blade.php b/resources/views/components/icon/list-detailed.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes->merge(['class' => 'icon', 'aria-label' => 'Detailed List']) }} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="128" height="55" rx="7" fill="currentColor"/>
+    <rect y="71" width="128" height="55" rx="7" fill="currentColor"/>
+</svg>
diff --git a/resources/views/components/icon/list-simple.blade.php b/resources/views/components/icon/list-simple.blade.php
@@ -0,0 +1,5 @@
+<svg {{ $attributes->merge(['class' => 'icon', 'aria-label' => 'Simple List']) }} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="128" height="34" rx="7" fill="currentColor"/>
+    <rect y="94" width="128" height="34" rx="7" fill="currentColor"/>
+    <rect y="47" width="128" height="34" rx="7" fill="currentColor"/>
+</svg>
diff --git a/resources/views/models/links/index.blade.php b/resources/views/models/links/index.blade.php
@@ -7,7 +7,10 @@
             @lang('link.links')
         </h3>
 
-        <div class="btn-group ms-auto">
+        <div class="ms-auto">
+            @include('models.links.partials.list-toggles')
+        </div>
+        <div class="btn-group ms-3">
             <a href="{{ route('links.create') }}" class="btn btn-sm btn-primary"
                 aria-label="@lang('link.add')">
                 <x-icon.plus class="me-2"/>
@@ -21,11 +24,9 @@
         @if($links->isNotEmpty())
 
             <div class="link-wrapper">
-                @if((int)usersettings('link_display_mode') === Link::DISPLAY_CARDS)
+                @if(usersettings('link_display_mode') === Link::DISPLAY_CARDS)
                     @include('models.links.partials.list-cards')
-                @elseif((int)usersettings('link_display_mode') === Link::DISPLAY_CARDS_DETAILED)
-                    @include('models.links.partials.list-cards-detailed')
-                @elseif((int)usersettings('link_display_mode') === Link::DISPLAY_LIST_SIMPLE)
+                @elseif(usersettings('link_display_mode') === Link::DISPLAY_LIST_SIMPLE)
                     @include('models.links.partials.list-simple')
                 @else
                     @include('models.links.partials.list-detailed')

diff --git a/resources/views/models/links/partials/list-toggles.blade.php b/resources/views/models/links/partials/list-toggles.blade.php
@@ -0,0 +1,17 @@
+<div class="link-display-toggles">
+    <a href="{{ request()->fullUrlWithQuery(['list-type' => Link::DISPLAY_LIST_SIMPLE]) }}"
+        class="{{ usersettings('link_display_mode') ===  Link::DISPLAY_LIST_SIMPLE ? 'active' : ''}}"
+        data-bs-toggle="tooltip" data-bs-placement="bottom" title="Display Links as simple List">
+        <x-icon.list-simple/>
+    </a>
+    <a href="{{ request()->fullUrlWithQuery(['list-type' => Link::DISPLAY_LIST_DETAILED]) }}"
+        class="ms-1 {{ usersettings('link_display_mode') ===  Link::DISPLAY_LIST_DETAILED ? 'active' : ''}}"
+        data-bs-toggle="tooltip" data-bs-placement="bottom" title="Display Links as detailed List">
+        <x-icon.list-detailed/>
+    </a>
+    <a href="{{ request()->fullUrlWithQuery(['list-type' => Link::DISPLAY_CARDS]) }}"
+        class="ms-1 {{ usersettings('link_display_mode') ===  Link::DISPLAY_CARDS ? 'active' : ''}}"
+        data-bs-toggle="tooltip" data-bs-placement="bottom" title="Display Links as Cards">
+        <x-icon.list-cards/>
+    </a>
+</div>