feat(#149): add css_name and css_variables to DeviceModel and update related views

resources/views/default-screens/error.blade.php

@@ -5,12 +5,14 @@
     'deviceOrientation' => null,
     'colorDepth' => '1bit',
     'scaleLevel' => null,
+    'cssVariables' => null,
     'pluginName' => 'Recipe',
 ])
 
 <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
                  device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
-                 scale-level="{{$scaleLevel}}">
+                 scale-level="{{$scaleLevel}}"
+                 :css-variables="$cssVariables">
     <x-trmnl::view>
         <x-trmnl::layout>
             <x-trmnl::richtext gapSize="large" align="center">

resources/views/default-screens/setup.blade.php

@@ -5,11 +5,13 @@
     'deviceOrientation' => null,
     'colorDepth' => '1bit',
     'scaleLevel' => null,
+    'cssVariables' => null,
 ])
 
 <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
                  device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
-                 scale-level="{{$scaleLevel}}">
+                 scale-level="{{$scaleLevel}}"
+                 :css-variables="$cssVariables">
     <x-trmnl::view>
         <x-trmnl::layout>
             <x-trmnl::richtext gapSize="large" align="center">

resources/views/default-screens/sleep.blade.php

@@ -5,11 +5,13 @@
     'deviceOrientation' => null,
     'colorDepth' => '1bit',
     'scaleLevel' => null,
+    'cssVariables' => null,
 ])
 
 <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
                  device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
-                 scale-level="{{$scaleLevel}}">
+                 scale-level="{{$scaleLevel}}"
+                 :css-variables="$cssVariables">
     <x-trmnl::view>
         <x-trmnl::layout>
             <x-trmnl::richtext gapSize="large" align="center">

resources/views/livewire/device-models/index.blade.php

@@ -39,6 +39,8 @@ new class extends Component
 
     public $palette_id;
 
+    public $css_name;
+
     protected $rules = [
         'name' => 'required|string|max:255|unique:device_models,name',
         'label' => 'required|string|max:255',
@@ -102,10 +104,11 @@ new class extends Component
             $this->offset_y = $deviceModel->offset_y;
             $this->published_at = $deviceModel->published_at?->format('Y-m-d\TH:i');
             $this->palette_id = $deviceModel->palette_id;
+            $this->css_name = $deviceModel->css_name;
         } else {
             $this->editingDeviceModelId = null;
             $this->viewingDeviceModelId = null;
-            $this->reset(['name', 'label', 'description', 'width', 'height', 'colors', 'bit_depth', 'scale_factor', 'rotation', 'mime_type', 'offset_x', 'offset_y', 'published_at', 'palette_id']);
+            $this->reset(['name', 'label', 'description', 'width', 'height', 'colors', 'bit_depth', 'scale_factor', 'rotation', 'mime_type', 'offset_x', 'offset_y', 'published_at', 'palette_id', 'css_name']);
             $this->mime_type = 'image/png';
             $this->scale_factor = 1.0;
             $this->rotation = 0;
@@ -131,6 +134,7 @@ new class extends Component
             'offset_y' => 'required|integer',
             'published_at' => 'nullable|date',
             'palette_id' => 'nullable|exists:device_palettes,id',
+            'css_name' => 'nullable|string|max:255',
         ];
 
         if ($this->editingDeviceModelId) {
@@ -158,6 +162,7 @@ new class extends Component
                 'offset_y' => $this->offset_y,
                 'published_at' => $this->published_at,
                 'palette_id' => $this->palette_id ?: null,
+                'css_name' => $this->css_name ?: null,
             ]);
             $message = 'Device model updated successfully.';
         } else {
@@ -176,12 +181,13 @@ new class extends Component
                 'offset_y' => $this->offset_y,
                 'published_at' => $this->published_at,
                 'palette_id' => $this->palette_id ?: null,
+                'css_name' => $this->css_name ?: null,
                 'source' => 'manual',
             ]);
             $message = 'Device model created successfully.';
         }
 
-        $this->reset(['name', 'label', 'description', 'width', 'height', 'colors', 'bit_depth', 'scale_factor', 'rotation', 'mime_type', 'offset_x', 'offset_y', 'published_at', 'palette_id', 'editingDeviceModelId', 'viewingDeviceModelId']);
+        $this->reset(['name', 'label', 'description', 'width', 'height', 'colors', 'bit_depth', 'scale_factor', 'rotation', 'mime_type', 'offset_x', 'offset_y', 'published_at', 'palette_id', 'css_name', 'editingDeviceModelId', 'viewingDeviceModelId']);
         Flux::modal('device-model-modal')->close();
 
         $this->deviceModels = DeviceModel::all();
@@ -217,6 +223,7 @@ new class extends Component
         $this->offset_y = $deviceModel->offset_y;
         $this->published_at = $deviceModel->published_at?->format('Y-m-d\TH:i');
         $this->palette_id = $deviceModel->palette_id;
+        $this->css_name = $deviceModel->css_name;
 
         $this->js('Flux.modal("device-model-modal").show()');
     }
@@ -344,6 +351,11 @@ new class extends Component
                             </flux:select>
                         </div>
 
+                        <div class="mb-4">
+                            <flux:input label="CSS Model Identifier" wire:model="css_name" id="css_name" class="block mt-1 w-full" type="text"
+                                        name="css_name" :disabled="(bool) $viewingDeviceModelId"/>
+                        </div>
+
                         @if (!$viewingDeviceModelId)
                             <div class="flex">
                                 <flux:spacer/>

resources/views/trmnl-layouts/mashup.blade.php

@@ -6,18 +6,22 @@
     'deviceOrientation' => null,
     'colorDepth' => '1bit',
     'scaleLevel' => null,
+    'cssVariables' => null,
 ])
 
 @if(config('app.puppeteer_window_size_strategy') === 'v2')
     <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
                      device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
-                     scale-level="{{$scaleLevel}}">
+                     scale-level="{{$scaleLevel}}"
+                     :css-variables="$cssVariables">
         <x-trmnl::mashup mashup-layout="{{ $mashupLayout }}">
             {!! $slot !!}
         </x-trmnl::mashup>
     </x-trmnl::screen>
 @else
-    <x-trmnl::screen colorDepth="{{$colorDepth}}">
+    <x-trmnl::screen colorDepth="{{$colorDepth}}" device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
+                     scale-level="{{$scaleLevel}}"
+                     :css-variables="$cssVariables">
         <x-trmnl::mashup mashup-layout="{{ $mashupLayout }}">
             {!! $slot !!}
         </x-trmnl::mashup>

resources/views/trmnl-layouts/single.blade.php

@@ -5,16 +5,21 @@
     'deviceOrientation' => null,
     'colorDepth' => '1bit',
     'scaleLevel' => null,
+    'cssVariables' => null,
 ])
 
 @if(config('app.puppeteer_window_size_strategy') === 'v2')
     <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
                      device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
-                     scale-level="{{$scaleLevel}}">
+                     scale-level="{{$scaleLevel}}"
+                     :css-variables="$cssVariables">
         {!! $slot !!}
     </x-trmnl::screen>
 @else
-    <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}">
+    <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
+                     device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
+                     scale-level="{{$scaleLevel}}"
+                     :css-variables="$cssVariables">
         {!! $slot !!}
     </x-trmnl::screen>
 @endif

resources/views/vendor/trmnl/components/screen.blade.php

@@ -1,19 +1,13 @@
 @props([
     'noBleed' => false,
     'darkMode' => false,
-    'deviceVariant' => 'og',
+    'deviceVariant' => 'ogv2',
     'deviceOrientation' => null,
     'colorDepth' => '1bit',
     'scaleLevel' => null,
+    'cssVariables' => null,
 ])
 
-@php
-// HOTFIX Github Issue https://github.com/usetrmnl/byos_laravel/issues/190
-if ($colorDepth == '2bit'){
-    $deviceVariant = 'ogv2';
-}
-@endphp
-
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
@@ -33,9 +27,18 @@ if ($colorDepth == '2bit'){
         <script src="{{ config('services.trmnl.base_url') }}/js/{{ config('trmnl-blade.framework_js_version') ?? config('trmnl-blade.framework_version', '2.1.0') }}/plugins.js"></script>
     @endif
     <title>{{ $title ?? config('app.name') }}</title>
+    @if(config('app.puppeteer_window_size_strategy') === 'v2' && !empty($cssVariables) && is_array($cssVariables))
+        <style>
+            :root {
+                @foreach($cssVariables as $name => $value)
+                {{ $name }}: {{ $value }};
+                @endforeach
+            }
+        </style>
+    @endif
 </head>
 <body class="environment trmnl">
-<div class="screen {{$noBleed ? 'screen--no-bleed' : ''}} {{ $darkMode ? 'dark-mode' : '' }} {{$deviceVariant ? 'screen--' . $deviceVariant : ''}} {{ $deviceOrientation ? 'screen--' . $deviceOrientation : ''}} {{ $colorDepth ? 'screen--' . $colorDepth : ''}} {{ $scaleLevel ? 'screen--scale-' . $scaleLevel : ''}}">
+<div class="screen {{ $noBleed ? 'screen--no-bleed' : '' }} {{ $darkMode ? 'dark-mode' : '' }} {{ $deviceVariant ? 'screen--' . $deviceVariant : '' }} {{ $deviceOrientation ? 'screen--' . $deviceOrientation : '' }} {{ $colorDepth ? 'screen--' . $colorDepth : '' }} {{ $scaleLevel ? 'screen--scale-' . $scaleLevel : '' }}">
     {{ $slot }}
 </div>
 </body>