Enable modern look&feel for users with "beta-access"

pradoslaw · Dec 16, 2024 · 0f176dd · 0f176dd
1 parent 478b615
commit 0f176dd
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 7 deletions.
diff --git a/app/Domain/Icon/FontAwesomePro.php b/app/Domain/Icon/FontAwesomePro.php
@@ -521,6 +521,9 @@ public function icons(): array
 
             // post review
             'postReviewClose'                           => $genericClose,
+
+            // look&feel
+            'lookAndFeel'                               => 'fa-light fa-palette',
         ];
     }
 }
diff --git a/app/Feature/LookAndFeel/LookAndFeelServiceProvider.php b/app/Feature/LookAndFeel/LookAndFeelServiceProvider.php
@@ -2,6 +2,7 @@
 namespace Coyote\Feature\LookAndFeel;
 
 use Coyote\Services\Guest;
+use Illuminate\Contracts\Auth\Access\Gate;
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
@@ -16,7 +17,10 @@ public function boot(): void
         $view = $this->app['view'];
 
         $view->composer('layout', function (View $view) {
-            $view->with(['lookAndFeelModern' => $this->lookAndFeel() === 'modern']);
+            $view->with([
+                'accessToLookAndFeel' => $this->accessToLookAndFeel(),
+                'lookAndFeelModern'   => $this->lookAndFeel() === 'modern',
+            ]);
         });
 
         Route::middleware(['web', 'auth'])->group(function () {
@@ -26,6 +30,9 @@ public function boot(): void
                 }
                 return response(status:404);
             });
+            Route::post('/LookAndFeel', function (Request $request) {
+                $this->setLookAndFeel($request->get('lookAndFeel') === 'modern');
+            });
         });
     }
 
@@ -61,4 +68,19 @@ private function requestOverride(): ?string
         }
         return null;
     }
+
+    private function setLookAndFeel(bool $isModern): void
+    {
+        if (!auth()->check()) {
+            return;
+        }
+        $guest = new Guest(auth()->user()->guest_id);
+        $guest->setSetting('lookAndFeel', $isModern ? 'modern' : 'legacy');
+    }
+
+    private function accessToLookAndFeel(): bool
+    {
+        $gate = $this->app->get(Gate::class);
+        return $gate->allows('beta-access');
+    }
 }
diff --git a/resources/feature/lookAndFeel/lookAndFeel.ts b/resources/feature/lookAndFeel/lookAndFeel.ts
@@ -0,0 +1,21 @@
+import axios from "axios";
+import {createVueApp} from "../../js/vue";
+
+const lookAndFeelSwitcher = {
+  methods: {
+    lookAndFeelSwitchModern(): void {
+      this.changeLookAndFeel('modern');
+    },
+    lookAndFeelSwitchLegacy(): void {
+      this.changeLookAndFeel('legacy');
+    },
+    changeLookAndFeel(lookAndFeel: 'modern' | 'legacy'): void {
+      axios.post('/LookAndFeel', {lookAndFeel})
+        .then(() => window.location.reload());
+    },
+  },
+};
+
+window.addEventListener('load', () => {
+  createVueApp('LookAndFeelSwitcher', '#lookAndFeelSwitcher', lookAndFeelSwitcher);
+});
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -20,6 +20,7 @@ import './sentry.ts';
 import './store/index.ts';
 import './gdpr.ts';
 import '../feature/stickyAside/sticky-aside.js';
+import '../feature/lookAndFeel/lookAndFeel';
 
 import '../../survey/src/survey';
 

diff --git a/resources/sass/layout/_header.scss b/resources/sass/layout/_header.scss
@@ -127,7 +127,8 @@ body.padding-top {
   display: flex;
   align-items: center; // center image vertically
 
-  a {
+  a,
+  .dropdown-item {
     color: $gray;
 
     &:hover {

diff --git a/resources/views/layout.twig b/resources/views/layout.twig
@@ -79,10 +79,9 @@
               alt="4programmers.net"
               data-src-light="{{ cdn(lookAndFeelModern ? 'img/logo-modern.svg' : 'img/logo-light.svg') }}"
               data-src-dark="{{ cdn(lookAndFeelModern ? 'img/logo-modern.svg' : 'img/logo-dark.svg') }}"
-              src="{{ __dark_theme 
-                ? cdn(lookAndFeelModern ? 'img/logo-modern.svg' : 'img/logo-dark.svg') 
-                : cdn(lookAndFeelModern ? 'img/logo-modern.svg' : 'img/logo-light.svg') 
-              }}"
+              src="{{ __dark_theme
+              ? cdn(lookAndFeelModern ? 'img/logo-modern.svg' : 'img/logo-dark.svg')
+              : cdn(lookAndFeelModern ? 'img/logo-modern.svg' : 'img/logo-light.svg') }}"
           />
         </a>
 
@@ -124,7 +123,8 @@
         </div>
 
         {% if auth_check() %}
-          <ul id="nav-auth" class="nav-auth navbar-nav order-2"></ul>
+          <ul id="nav-auth" class="nav-auth navbar-nav order-2">
+          </ul>
 
           <div class="dropdown nav-avatar order-2">
             <div class="dropdown-toggle d-block i-35 {{ not isHomepageModern ? 'img-thumbnail' }} neon-navbar-user-avatar" data-bs-toggle="dropdown" style="cursor:pointer;">
@@ -141,6 +141,30 @@
                 {% endif %}
               </a>
 
+              {% if accessToLookAndFeel %}
+                <div class="dropdown-divider"></div>
+                <style>
+                    .option {
+                        opacity: 0.5;
+                    }
+                    .option:hover {
+                        text-decoration: underline;
+                    }
+                    .option-active {
+                        font-weight: bold;
+                    }
+                </style>
+                <span class="dropdown-item" title="Przełącz Look&amp;Feel forum" id="lookAndFeelSwitcher">
+                  {{ icon('lookAndFeel') }}
+                  <span class="me-2">
+                    Look&amp;Feel:
+                  </span>
+                  <span class="option {{ lookAndFeelModern ?: 'option-active' }}" @click="lookAndFeelSwitchLegacy">Początkowy</span>
+                  /
+                  <span class="option {{ lookAndFeelModern ?'option-active' }}" @click="lookAndFeelSwitchModern">Nowy</span>
+                </span>
+              {% endif %}
+
               <div class="dropdown-divider"></div>
 
               <a class="dropdown-item" href="{{ route('profile', [user('id')]) }}">