From c191380cf8a99d6f7cb677485b83ffddf3fd61f0 Mon Sep 17 00:00:00 2001 From: Kovah Date: Thu, 8 Feb 2024 00:35:56 +0100 Subject: [PATCH] Add toggles for quick-switching the link display mode from pages (#553) --- .../Controllers/Models/LinkController.php | 4 ++++ .../Traits/ConfiguresListDisplay.php | 22 +++++++++++++++++++ resources/assets/js/components/Base.js | 8 +++++++ resources/assets/js/components/UpdateCheck.js | 2 -- resources/assets/sass/_variables.scss | 4 ++++ resources/assets/sass/custom/_app.scss | 14 ++++++++++++ .../third-party/bootstrap/bootstrap5.scss | 2 +- .../components/icon/list-cards.blade.php | 3 +++ .../components/icon/list-detailed.blade.php | 4 ++++ .../components/icon/list-simple.blade.php | 5 +++++ resources/views/models/links/index.blade.php | 11 +++++----- .../links/partials/list-toggles.blade.php | 17 ++++++++++++++ 12 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 app/Http/Controllers/Traits/ConfiguresListDisplay.php create mode 100644 resources/views/components/icon/list-cards.blade.php create mode 100644 resources/views/components/icon/list-detailed.blade.php create mode 100644 resources/views/components/icon/list-simple.blade.php create mode 100644 resources/views/models/links/partials/list-toggles.blade.php diff --git a/app/Http/Controllers/Models/LinkController.php b/app/Http/Controllers/Models/LinkController.php index 6b741696..1db1867d 100644 --- 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 new file mode 100644 index 00000000..065e1755 --- /dev/null +++ b/app/Http/Controllers/Traits/ConfiguresListDisplay.php @@ -0,0 +1,22 @@ +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 index 6d6d4077..96a1bbd9 100644 --- a/resources/assets/js/components/Base.js +++ b/resources/assets/js/components/Base.js @@ -2,6 +2,7 @@ export default class Base { constructor () { this.initAppData(); + this.initBootstrapTooltips(); } initAppData () { @@ -9,4 +10,11 @@ export default class Base { 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 index c7de1c41..b9ee994c 100644 --- 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 index 8a6d2364..3556ad12 100644 --- 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 index 98286910..85545301 100644 --- 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 index de65f82c..ef6f1d01 100644 --- 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 new file mode 100644 index 00000000..804a8013 --- /dev/null +++ b/resources/views/components/icon/list-cards.blade.php @@ -0,0 +1,3 @@ +merge(['class' => 'icon', 'aria-label' => 'List of Cards']) }} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> + + diff --git a/resources/views/components/icon/list-detailed.blade.php b/resources/views/components/icon/list-detailed.blade.php new file mode 100644 index 00000000..1762c344 --- /dev/null +++ b/resources/views/components/icon/list-detailed.blade.php @@ -0,0 +1,4 @@ +merge(['class' => 'icon', 'aria-label' => 'Detailed List']) }} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> + + + diff --git a/resources/views/components/icon/list-simple.blade.php b/resources/views/components/icon/list-simple.blade.php new file mode 100644 index 00000000..3cfbb022 --- /dev/null +++ b/resources/views/components/icon/list-simple.blade.php @@ -0,0 +1,5 @@ +merge(['class' => 'icon', 'aria-label' => 'Simple List']) }} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> + + + + diff --git a/resources/views/models/links/index.blade.php b/resources/views/models/links/index.blade.php index 44fcadad..3ef6b50b 100644 --- a/resources/views/models/links/index.blade.php +++ b/resources/views/models/links/index.blade.php @@ -7,7 +7,10 @@ @lang('link.links') -
+
+ @include('models.links.partials.list-toggles') +
+
@@ -21,11 +24,9 @@ @if($links->isNotEmpty())
- @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 new file mode 100644 index 00000000..8d6436e4 --- /dev/null +++ b/resources/views/models/links/partials/list-toggles.blade.php @@ -0,0 +1,17 @@ +
+ + + + + + + + + +