474 lines
21 KiB
PHP
474 lines
21 KiB
PHP
@extends('layouts.app', ['title' => 'Stylist — SonarDesk Administration'])
|
|
|
|
@section('content')
|
|
|
|
<div class="stylist-admin">
|
|
|
|
<section class="portal-header stylist-header">
|
|
<div>
|
|
<span class="eyebrow">Administration / Appearance</span>
|
|
<h1>Stylist</h1>
|
|
<p class="lead compact">
|
|
Manage frontend and administration themes independently.
|
|
Install, configure, preview and export complete themes.
|
|
</p>
|
|
</div>
|
|
|
|
<a href="{{ route('admin.index') }}" class="btn btn-secondary">
|
|
Back to administration
|
|
</a>
|
|
</section>
|
|
|
|
@if(session('status'))
|
|
<div class="alert">{{ session('status') }}</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="error">{{ $errors->first() }}</div>
|
|
@endif
|
|
|
|
<section class="stylist-summary">
|
|
<div class="stylist-summary-card">
|
|
<span>Installed themes</span>
|
|
<strong>{{ count($themes) }}</strong>
|
|
<small>Available designs</small>
|
|
</div>
|
|
|
|
<div class="stylist-summary-card">
|
|
<span>Frontend theme</span>
|
|
<strong>{{ $activeFrontendTheme }}</strong>
|
|
<small>Public website</small>
|
|
</div>
|
|
|
|
<div class="stylist-summary-card">
|
|
<span>Backend theme</span>
|
|
<strong>{{ $activeBackendTheme }}</strong>
|
|
<small>Administration interface</small>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stylist-install-panel">
|
|
<div class="stylist-section-heading">
|
|
<div>
|
|
<span class="eyebrow">Theme library</span>
|
|
<h2>Install a theme</h2>
|
|
<p>Upload a self-contained theme package in ZIP format.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST"
|
|
action="{{ route('stylist.install') }}"
|
|
enctype="multipart/form-data"
|
|
class="stylist-install-form">
|
|
|
|
@csrf
|
|
|
|
<label class="stylist-upload-field">
|
|
<span>Theme package</span>
|
|
<input type="file"
|
|
name="theme"
|
|
accept=".zip"
|
|
required>
|
|
<small>Maximum upload size: 50 MB</small>
|
|
</label>
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
Install theme
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="stylist-library">
|
|
|
|
<div class="stylist-section-heading">
|
|
<div>
|
|
<span class="eyebrow">Appearance</span>
|
|
<h2>Installed themes</h2>
|
|
<p>Frontend and backend themes can be activated independently.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stylist-theme-grid">
|
|
|
|
@foreach($themes as $item)
|
|
|
|
@php
|
|
$saved = $settingsService->get($item);
|
|
$variant = $settingsService->variant($item);
|
|
$appearance = $settingsService->appearance($item);
|
|
$accent = $settingsService->accent($item);
|
|
$issues = $accessibility->validate($item);
|
|
|
|
$isActive =
|
|
($item->type() === 'frontend' && $item->key() === $activeFrontendTheme)
|
|
|| ($item->type() === 'backend' && $item->key() === $activeBackendTheme);
|
|
|
|
$isBundled = in_array(
|
|
$item->key(),
|
|
['sonardesk', 'sonardesk-admin'],
|
|
true
|
|
);
|
|
|
|
$themeRoot = realpath(config('stylist.themes_path'));
|
|
$themePath = realpath($item->path());
|
|
|
|
$isInstalled = $themeRoot
|
|
&& $themePath
|
|
&& str_starts_with(
|
|
$themePath,
|
|
rtrim($themeRoot, DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR
|
|
);
|
|
@endphp
|
|
|
|
<article class="stylist-theme-card {{ $isActive ? 'stylist-theme-active' : '' }}">
|
|
|
|
<div class="stylist-preview">
|
|
|
|
@if($item->preview() && $item->has($item->preview()))
|
|
|
|
<img
|
|
src="{{ $urls->forTheme($item, $item->preview()) }}"
|
|
alt="{{ $item->name() }} preview">
|
|
|
|
@else
|
|
|
|
<div class="stylist-preview-placeholder">
|
|
<span class="stylist-preview-symbol">◈</span>
|
|
<strong>{{ $item->name() }}</strong>
|
|
<small>No preview image available</small>
|
|
</div>
|
|
|
|
@endif
|
|
|
|
</div>
|
|
|
|
<div class="stylist-theme-body">
|
|
|
|
<div class="stylist-theme-heading">
|
|
|
|
<div>
|
|
<span class="stylist-theme-type">
|
|
{{ ucfirst($item->type()) }} theme
|
|
</span>
|
|
|
|
<h3>{{ $item->name() }}</h3>
|
|
|
|
<p class="stylist-version">
|
|
Version {{ $item->version() }}
|
|
@if($item->author())
|
|
· {{ $item->author() }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
|
|
@if($isActive)
|
|
<span class="status-chip success">
|
|
Active
|
|
</span>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
@if($item->description())
|
|
<p class="stylist-description">
|
|
{{ $item->description() }}
|
|
</p>
|
|
@endif
|
|
|
|
@if($item->parent())
|
|
<p class="stylist-parent">
|
|
Based on {{ $item->parent() }}
|
|
</p>
|
|
@endif
|
|
|
|
<div class="stylist-actions">
|
|
|
|
@if(in_array($item->type(), ['frontend', 'backend'], true))
|
|
|
|
@unless($isActive)
|
|
|
|
<form method="POST"
|
|
action="{{ route('stylist.activate', $item->key()) }}">
|
|
@csrf
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
Activate {{ ucfirst($item->type()) }}
|
|
</button>
|
|
</form>
|
|
|
|
@endunless
|
|
|
|
<a class="btn btn-secondary"
|
|
href="{{ route('stylist.preview', $item->key()) }}"
|
|
target="_blank"
|
|
rel="noopener">
|
|
Preview
|
|
</a>
|
|
|
|
@endif
|
|
|
|
<a class="btn btn-secondary"
|
|
href="{{ route('stylist.export', $item->key()) }}">
|
|
Export ZIP
|
|
</a>
|
|
|
|
<form method="POST"
|
|
action="{{ route('stylist.optimize', $item->key()) }}">
|
|
@csrf
|
|
|
|
<button type="submit" class="btn btn-secondary">
|
|
Optimise assets
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<details class="stylist-settings">
|
|
|
|
<summary>
|
|
<span>Theme configuration</span>
|
|
<span class="stylist-chevron">⌄</span>
|
|
</summary>
|
|
|
|
<form method="POST"
|
|
action="{{ route('stylist.settings', $item->key()) }}"
|
|
class="stylist-settings-form">
|
|
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
@if($item->variants())
|
|
|
|
<label>
|
|
Variant
|
|
|
|
<select name="variant">
|
|
@foreach(array_keys($item->variants()) as $name)
|
|
<option value="{{ $name }}"
|
|
@selected($variant === $name)>
|
|
{{ ucfirst($name) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</label>
|
|
|
|
@endif
|
|
|
|
@if($item->supports('dark_mode') || $item->appearances())
|
|
|
|
<label>
|
|
Appearance
|
|
|
|
<select name="appearance">
|
|
@foreach(array_keys($item->appearances()) ?: ['light', 'dark', 'auto'] as $name)
|
|
<option value="{{ $name }}"
|
|
@selected($appearance === $name)>
|
|
{{ ucfirst($name) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</label>
|
|
|
|
@endif
|
|
|
|
@if($item->accents())
|
|
|
|
<fieldset class="stylist-accent-options">
|
|
<legend>Accent colour</legend>
|
|
|
|
@foreach($item->accents() as $name => $definition)
|
|
|
|
<label class="stylist-accent-option">
|
|
|
|
<input type="radio"
|
|
name="accent"
|
|
value="{{ $name }}"
|
|
@checked($accent === $name)>
|
|
|
|
<span class="stylist-colour-swatch"
|
|
style="background: {{ data_get($definition, 'swatch', data_get($definition, 'variables.primary', '#64748b')) }}">
|
|
</span>
|
|
|
|
{{ data_get($definition, 'label', ucfirst($name)) }}
|
|
|
|
</label>
|
|
|
|
@endforeach
|
|
|
|
</fieldset>
|
|
|
|
@endif
|
|
|
|
@foreach($item->settingsSchema() as $key => $definition)
|
|
|
|
@php
|
|
$definition = is_array($definition)
|
|
? $definition
|
|
: ['default' => $definition];
|
|
|
|
$fieldType = $definition['type'] ?? 'text';
|
|
$fieldLabel = $definition['label'] ?? str($key)->headline();
|
|
$fieldValue = $saved[$key] ?? ($definition['default'] ?? '');
|
|
@endphp
|
|
|
|
<div class="stylist-setting-field">
|
|
|
|
<label for="stylist-{{ $item->key() }}-{{ $key }}">
|
|
{{ $fieldLabel }}
|
|
</label>
|
|
|
|
@switch($fieldType)
|
|
|
|
@case('color')
|
|
|
|
<input
|
|
id="stylist-{{ $item->key() }}-{{ $key }}"
|
|
type="color"
|
|
name="settings[{{ $key }}]"
|
|
value="{{ $fieldValue }}">
|
|
@break
|
|
|
|
@case('textarea')
|
|
|
|
<textarea
|
|
id="stylist-{{ $item->key() }}-{{ $key }}"
|
|
name="settings[{{ $key }}]"
|
|
rows="4">{{ $fieldValue }}</textarea>
|
|
@break
|
|
|
|
@case('checkbox')
|
|
|
|
<input type="hidden"
|
|
name="settings[{{ $key }}]"
|
|
value="0">
|
|
|
|
<label class="stylist-checkbox">
|
|
<input
|
|
id="stylist-{{ $item->key() }}-{{ $key }}"
|
|
type="checkbox"
|
|
name="settings[{{ $key }}]"
|
|
value="1"
|
|
@checked((bool)$fieldValue)>
|
|
Enabled
|
|
</label>
|
|
@break
|
|
|
|
@default
|
|
|
|
<input
|
|
id="stylist-{{ $item->key() }}-{{ $key }}"
|
|
type="{{ $fieldType === 'url' ? 'url' : 'text' }}"
|
|
name="settings[{{ $key }}]"
|
|
value="{{ $fieldValue }}">
|
|
|
|
@endswitch
|
|
|
|
</div>
|
|
|
|
@endforeach
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
Save configuration
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</details>
|
|
|
|
<div class="stylist-theme-footer">
|
|
|
|
<span class="{{ collect($issues)->contains('severity', 'error') ? 'bad' : 'ok' }}">
|
|
Accessibility:
|
|
{{ count($issues) ? count($issues).' issue(s)' : 'passed static checks' }}
|
|
</span>
|
|
|
|
@if($isInstalled && !$isBundled && !$isActive)
|
|
|
|
<form method="POST"
|
|
action="{{ route('stylist.uninstall', $item->key()) }}"
|
|
onsubmit="return confirm('Permanently uninstall this theme?')">
|
|
|
|
@csrf
|
|
@method('DELETE')
|
|
|
|
<button type="submit" class="stylist-remove">
|
|
Uninstall
|
|
</button>
|
|
|
|
</form>
|
|
|
|
@endif
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.stylist-admin{max-width:1220px;margin:auto;padding-bottom:60px}
|
|
.stylist-header{margin-bottom:30px}
|
|
.stylist-header .lead{max-width:740px}
|
|
.stylist-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
|
|
.stylist-summary-card{background:#fff;border:1px solid #e4e7ec;border-radius:15px;padding:22px;box-shadow:0 2px 6px rgba(15,23,42,.04)}
|
|
.stylist-summary-card span,.stylist-summary-card small{display:block;color:#667085;font-size:12px}
|
|
.stylist-summary-card strong{display:block;margin:8px 0;font-size:24px;color:#101828;overflow-wrap:anywhere}
|
|
.stylist-install-panel{background:#fff;border:1px solid #e4e7ec;border-radius:16px;padding:26px;margin-bottom:35px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
|
|
.stylist-section-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
|
|
.stylist-section-heading h2{font-size:23px;margin:5px 0}
|
|
.stylist-section-heading p{margin:0;color:#667085}
|
|
.stylist-install-form{display:flex;gap:20px;align-items:end}
|
|
.stylist-upload-field{display:block;flex:1;font-size:13px;font-weight:750}
|
|
.stylist-upload-field span,.stylist-upload-field small{display:block}
|
|
.stylist-upload-field small{color:#667085;font-weight:400}
|
|
.stylist-upload-field input{margin:8px 0}
|
|
.stylist-install-form button{margin-bottom:25px}
|
|
.stylist-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
|
|
.stylist-theme-card{background:#fff;border:1px solid #e4e7ec;border-radius:18px;overflow:hidden;box-shadow:0 5px 22px rgba(15,23,42,.05);min-width:0}
|
|
.stylist-theme-active{border-color:#93c5fd;box-shadow:0 0 0 3px #dbeafe}
|
|
.stylist-preview{height:210px;background:#f1f5f9;border-bottom:1px solid #e4e7ec;overflow:hidden}
|
|
.stylist-preview img{width:100%;height:100%;object-fit:cover}
|
|
.stylist-preview-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#101828,#1d3557);color:#fff;gap:5px}
|
|
.stylist-preview-symbol{font-size:40px;color:#93c5fd}
|
|
.stylist-preview-placeholder strong{font-size:18px}
|
|
.stylist-preview-placeholder small{font-size:12px;color:#94a3b8}
|
|
.stylist-theme-body{padding:25px}
|
|
.stylist-theme-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
|
|
.stylist-theme-type{text-transform:uppercase;letter-spacing:.1em;color:#2563eb;font-size:10px;font-weight:850}
|
|
.stylist-theme-heading h3{font-size:22px;letter-spacing:-.025em;margin:5px 0}
|
|
.stylist-version{color:#667085;font-size:12px;margin:0}
|
|
.stylist-description{color:#475467;font-size:14px;line-height:1.6;margin:18px 0}
|
|
.stylist-parent{color:#7c3aed;font-size:12px}
|
|
.stylist-actions{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0}
|
|
.stylist-actions form{margin:0}
|
|
.stylist-actions .btn{font-size:12px;padding:9px 12px}
|
|
.stylist-settings{border:1px solid #e4e7ec;border-radius:12px;margin-top:20px;overflow:hidden}
|
|
.stylist-settings summary{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;cursor:pointer;font-weight:750;list-style:none}
|
|
.stylist-settings summary::-webkit-details-marker{display:none}
|
|
.stylist-settings[open] summary{border-bottom:1px solid #e4e7ec}
|
|
.stylist-chevron{font-size:20px;color:#667085}
|
|
.stylist-settings-form{padding:20px;display:grid;gap:14px}
|
|
.stylist-settings-form label{font-size:13px}
|
|
.stylist-settings-form input:not([type=radio]):not([type=checkbox]),.stylist-settings-form select,.stylist-settings-form textarea{width:100%;margin:6px 0 0}
|
|
.stylist-settings-form input[type=checkbox],.stylist-settings-form input[type=radio]{width:auto;margin:0}
|
|
.stylist-accent-options{border:1px solid #e4e7ec;border-radius:10px;padding:14px;display:flex;flex-wrap:wrap;gap:12px}
|
|
.stylist-accent-options legend{font-size:13px;font-weight:750}
|
|
.stylist-accent-option{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
|
|
.stylist-colour-swatch{width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
|
|
.stylist-checkbox{display:flex;align-items:center;gap:9px}
|
|
.stylist-theme-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #eef2f6;padding-top:17px;margin-top:20px;font-size:12px}
|
|
.stylist-remove{background:transparent!important;color:#b42318!important;padding:5px 0!important;font-size:12px!important;box-shadow:none!important}
|
|
.stylist-remove:hover{text-decoration:underline}
|
|
@media(max-width:850px){.stylist-theme-grid{grid-template-columns:1fr}.stylist-summary{grid-template-columns:1fr}.stylist-install-form{flex-direction:column;align-items:stretch}.stylist-install-form button{margin:0}}
|
|
</style>
|
|
|
|
@endsection
|