refactor topicEditor

This commit is contained in:
Eric Blommel
2025-01-06 02:08:10 +01:00
parent 4ebcfdf63e
commit f64b2f0d4c
3 changed files with 221 additions and 183 deletions

View File

@@ -160,24 +160,19 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
<div>
<label class="block text-sm font-medium text-gray-700">Icon</label>
<div class="mt-2 h-[180px] overflow-y-auto grid md:grid-cols-5 lg:grid-cols-8 grid-cols-8 gap-2 p-1">
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer bg-blue-50 ring-2 ring-blue-500" data-icon="fa-book" onclick="selectIcon(this)"><i class="fas fa-book"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-calculator" onclick="selectIcon(this)"><i class="fas fa-calculator"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-flask" onclick="selectIcon(this)"><i class="fas fa-flask"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-atom" onclick="selectIcon(this)"><i class="fas fa-atom"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-globe-europe" onclick="selectIcon(this)"><i class="fas fa-globe-europe"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-palette" onclick="selectIcon(this)"><i class="fas fa-palette"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-music" onclick="selectIcon(this)"><i class="fas fa-music"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-dumbbell" onclick="selectIcon(this)"><i class="fas fa-dumbbell"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-language" onclick="selectIcon(this)"><i class="fas fa-language"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-microscope" onclick="selectIcon(this)"><i class="fas fa-microscope"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-keyboard" onclick="selectIcon(this)"><i class="fas fa-keyboard"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-dna" onclick="selectIcon(this)"><i class="fas fa-dna"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-brain" onclick="selectIcon(this)"><i class="fas fa-brain"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-history" onclick="selectIcon(this)"><i class="fas fa-history"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-chart-line" onclick="selectIcon(this)"><i class="fas fa-chart-line"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-draw-polygon" onclick="selectIcon(this)"><i class="fas fa-draw-polygon"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-running" onclick="selectIcon(this)"><i class="fas fa-running"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-theater-masks" onclick="selectIcon(this)"><i class="fas fa-theater-masks"></i></div>
<?php
$icons = [
"fa-book", "fa-calculator", "fa-flask", "fa-atom", "fa-globe-europe", "fa-palette",
"fa-music", "fa-dumbbell", "fa-language", "fa-microscope", "fa-keyboard", "fa-dna",
"fa-brain", "fa-history", "fa-chart-line", "fa-draw-polygon", "fa-running", "fa-theater-masks",
"fa-chart-pie", "fa-plus-minus", "fa-clock", "fa-code", "fa-divide", "fa-x", "fa-sitemap",
"fa-map-pin", "fa-feather-pointed", "fa-person", "fa-link", "fa-4"
];
foreach ($icons as $icon) {
$selectedClass = $defaultValues['icon'] === $icon ? 'bg-blue-50 ring-2 ring-blue-500' : '';
echo "<div class='icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer $selectedClass' data-icon='$icon' onclick='selectIcon(this)'><i class='fas $icon'></i></div>";
}
?>
</div>
<input type="hidden" id="selectedIcon" name="icon" value="<?php echo $defaultValues['icon']; ?>">
</div>