Fiexs theme view to use the new theme assets code

main
Yasen Pramatarov 2025-06-23 14:01:29 +03:00
parent 30ea7ff5c0
commit 51f0b0b369
1 changed files with 21 additions and 14 deletions

View File

@ -4,34 +4,41 @@
* *
* Displays available themes and allows the user to switch between them. * Displays available themes and allows the user to switch between them.
* *
* @var array $themes List of available themes * @var array $themes List of available themes with their data
* @var string $currentTheme Currently active theme ID * - name: Display name
* - screenshotUrl: URL to the screenshot (or null if not available)
* - isActive: Whether this is the current theme
*/ */
?> ?>
<div class="container mt-4"> <div class="container mt-4">
<h2>Theme Switcher</h2> <h2>Theme switcher</h2>
<p class="text-muted">Select a theme to change the appearance of the application.</p> <p class="text-muted">Select a theme to change the appearance of the application.</p>
<div class="row mt-4"> <div class="row mt-4">
<?php foreach ($themes as $themeId => $themeName): ?> <?php foreach ($themes as $themeId => $theme): ?>
<?php $isActive = $themeId === $currentTheme; ?>
<div class="col-md-4 mb-4"> <div class="col-md-4 mb-4">
<div class="card h-100 <?= $isActive ? 'border-primary' : '' ?>"> <div class="card h-100 <?= $theme['isActive'] ? 'border-primary' : '' ?>">
<?php if ($isActive) { ?> <!-- Theme screenshot -->
<div class="card-header bg-primary text-white">Current Theme</div> <div class="theme-screenshot" style="height: 150px; background-size: cover; background-position: center; background-color: #f8f9fa; <?= $theme['screenshotUrl'] ? 'background-image: url(' . htmlspecialchars($theme['screenshotUrl']) . ')' : '' ?>">
<?php } ?> <?php if (!$theme['screenshotUrl']): ?>
<div class="h-100 d-flex align-items-center justify-content-center text-muted">No preview available</div>
<?php endif; ?>
</div>
<?php if ($theme['isActive']): ?>
<div class="card-header bg-primary text-white">Current theme</div>
<?php endif; ?>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<h5 class="card-title"><?= htmlspecialchars($themeName) ?></h5> <h5 class="card-title"><?= htmlspecialchars($theme['name']) ?></h5>
<p class="card-text text-muted">Theme ID: <code><?= htmlspecialchars($themeId) ?></code></p> <p class="card-text text-muted">Theme ID: <code><?= htmlspecialchars($themeId) ?></code></p>
<div class="mt-auto"> <div class="mt-auto">
<?php if (!$isActive) { ?> <?php if (!$theme['isActive']): ?>
<a href="?page=theme&switch_to=<?= urlencode($themeId) ?>&csrf_token=<?= $csrf_token ?>" class="btn btn-primary">Switch to this theme</a> <a href="?page=theme&switch_to=<?= urlencode($themeId) ?>&csrf_token=<?= $csrf_token ?>" class="btn btn-primary">Switch to this theme</a>
<?php } else { ?> <?php else: ?>
<button class="btn btn-outline-secondary" disabled>Currently active</button> <button class="btn btn-outline-secondary" disabled>Currently active</button>
<?php } ?> <?php endif; ?>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
</div> </div>