add 'auto' style option, (stechstudio#28)

* add 'auto' style option, don't really like this solution, better would be to move to tailwind and accept custom additional tailwind classes, will maybe look into this in the future * move colors to config file, build out more css vars, reduce php conditionals * need rgb here * zindex * just a bit of a border in light mode * typos --------- Co-authored-by: Joseph Szobody <[email protected]>
lamberttraccard · Feb 18, 2023 · 3dbc935 · 3dbc935
1 parent 7c2c4d8
commit 3dbc935
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 17 deletions.
diff --git a/config/filament-impersonate.php b/config/filament-impersonate.php
@@ -10,13 +10,26 @@
  'leave_middleware' => env('FILAMENT_IMPERSONATE_LEAVE_MIDDLEWARE', 'web'),
 
  'banner' => [
- // Currently supports 'dark' and 'light'.
+ // Currently supports 'dark', 'light' and 'auto'.
  'style' => env('FILAMENT_IMPERSONATE_BANNER_STYLE', 'dark'),
 
  // Turn this off if you want `absolute` positioning, so the banner scrolls out of view
  'fixed' => env('FILAMENT_IMPERSONATE_BANNER_FIXED', true),
 
  // Currently supports 'top' and 'bottom'.
  'position' => env('FILAMENT_IMPERSONATE_BANNER_POSITION', 'top'),
+
+ 'styles' => [
+ 'light' => [
+ 'text' => '#1f2937',
+ 'background' => '#f3f4f6',
+ 'border' => '#e8eaec',
+ ],
+ 'dark' => [
+ 'text' => '#f3f4f6',
+ 'background' => '#1f2937',
+ 'border' => '#374151',
+ ],
+ ]
  ],
 ];
diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
@@ -3,15 +3,32 @@
 @if(app('impersonate')->isImpersonating())
 
 @php
-$style = $style ?? config('filament-impersonate.banner.style');
 $display = $display ?? Filament\Facades\Filament::getUserName(auth()->user());
 $fixed = $fixed ?? config('filament-impersonate.banner.fixed');
 $position = $position ?? config('filament-impersonate.banner.position');
+$borderPosition = $position === 'top' ? 'bottom' : 'top';
+
+$style = $style ?? config('filament-impersonate.banner.style');
+$styles = config('filament-impersonate.banner.styles');
+$default = $style === 'auto' ? 'light' : $style;
+$flipped = $default === 'dark' ? 'light' : 'dark';
 @endphp
 
 <style>
  :root {
  --impersonate-banner-height: 50px;
+
+ --impersonate-light-bg-color: {{ $styles['light']['background'] }};
+ --impersonate-light-text-color: {{ $styles['light']['text'] }};
+ --impersonate-light-border-color: {{ $styles['light']['border'] }};
+ --impersonate-light-button-bg-color: {{ implode(',', sscanf($styles['dark']['background'], "#%02x%02x%02x")) }};
+ --impersonate-light-button-text-color: {{ $styles['dark']['text'] }};
+
+ --impersonate-dark-bg-color: {{ $styles['dark']['background'] }};
+ --impersonate-dark-text-color: {{ $styles['dark']['text'] }};
+ --impersonate-dark-border-color: {{ $styles['dark']['border'] }};
+ --impersonate-dark-button-bg-color: {{ implode(',', sscanf($styles['light']['background'], "#%02x%02x%02x")) }};
+ --impersonate-dark-button-text-color: {{ $styles['light']['text'] }};
  }
  html {
  margin-{{ $position }}: var(--impersonate-banner-height);
@@ -30,32 +47,44 @@
  column-gap: 20px;
  justify-content: center;
  align-items: center;
+ background-color: var(--impersonate-{{ $default }}-bg-color);
+ color: var(--impersonate-{{ $default }}-text-color);
+ border-{{ $borderPosition }}: 1px solid var(--impersonate-{{ $default }}-border-color);
+ z-index: 1000;
+ }
 
- @if($style == 'dark')
- background-color: #1f2937;
- color: #f3f4f6;
- border-bottom: 1px solid #374151;
- @else
- background-color: #f3f4f6;
- color: #1f2937;
- @endif
+ @if($style === 'auto')
+ .dark #impersonate-banner {
+ background-color: var(--impersonate-dark-bg-color);
+ color: var(--impersonate-dark-text-color);
+ border-{{ $borderPosition }}: 1px solid var(--impersonate-dark-border-color);
  }
+ @endif
 
  #impersonate-banner a {
  display: block;
  padding: 4px 20px;
- background-color: #d1d5db;
- color: #000;
  border-radius: 5px;
+ background-color: rgba(var(--impersonate-{{ $default }}-button-bg-color), 0.7);
+ color: var(--impersonate-{{ $default }}-button-text-color);
  }
 
+ @if($style === 'auto')
+ .dark #impersonate-banner a {
+ background-color: rgba(var(--impersonate-dark-button-bg-color), 0.7);
+ color: var(--impersonate-dark-button-text-color);
+ }
+ @endif
+
  #impersonate-banner a:hover {
- @if($style == 'dark')
- background-color: #f3f4f6;
- @else
- background-color: #9ca3af;
- @endif
+ background-color: rgb(var(--impersonate-{{ $default }}-button-bg-color));
  }
+
+ @if($style === 'auto')
+ .dark #impersonate-banner a:hover {
+ background-color: rgb(var(--impersonate-dark-button-bg-color));
+ }
+ @endif
  
  @if($fixed && $position === 'top')
  .filament-main-topbar {