From 2779d6543e1649bd7c12bc1b3be71de964c2279e Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Thu, 16 Nov 2023 18:36:22 -0500
Subject: [PATCH] Updated Tag Create and Edit Modal UI, added icons, added
 ability to choose any color

---
 post/tag_model.php          |  2 +-
 settings_tag_add_modal.php  | 37 ++++++++++++++++---------------
 settings_tag_edit_modal.php | 43 ++++++++++++++++---------------------
 3 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/post/tag_model.php b/post/tag_model.php
index 772bc245..b7639f71 100644
--- a/post/tag_model.php
+++ b/post/tag_model.php
@@ -1,5 +1,5 @@
 <?php
 $name = sanitizeInput($_POST['name']);
 $type = intval($_POST['type']);
-$color = preg_replace("/[^0-9a-zA-Z-]/", "", sanitizeInput($_POST['color']));
+$color = sanitizeInput($_POST['color']);
 $icon = preg_replace("/[^0-9a-zA-Z-]/", "", sanitizeInput($_POST['icon']));
diff --git a/settings_tag_add_modal.php b/settings_tag_add_modal.php
index d2073068..e3654f61 100644
--- a/settings_tag_add_modal.php
+++ b/settings_tag_add_modal.php
@@ -13,7 +13,12 @@
           
           <div class="form-group">
             <label>Name <strong class="text-danger">*</strong></label>
-            <input type="text" class="form-control" name="name" placeholder="Tag name" required autofocus>
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-fw fa-tag"></i></span>
+              </div>
+              <input type="text" class="form-control" name="name" placeholder="Tag name" required autofocus>
+            </div>
           </div>
 
           <div class="form-group">
@@ -29,30 +34,24 @@
             </div>
           </div>
 
-          <label>Color</label>
-          <div class="form-row">
-
-            <?php
-            
-            foreach($colors_array as $color) {
-            
-            ?>
-            
-            <div class="col-3 mb-3">
-              <div class="form-check">
-                <input class="form-check-input" type="radio" name="color" value="<?php echo $color; ?>">
-                <label class="form-check-label">
-                  <i class="fa fa-fw fa-3x fa-circle" style="color:<?php echo $color; ?>"></i>
-                </label>
+          <div class="form-group">
+            <label>Color <strong class="text-danger">*</strong></label>
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
               </div>
+              <input type="color" class="form-control col-3" name="color" required>
             </div>
-           
-            <?php } ?>
           </div>
 
           <div class="form-group">
             <label>Icon</label>
-            <input type="text" class="form-control" name="icon" placeholder="Icon ex handshake">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-fw fa-image"></i></span>
+              </div>
+              <input type="text" class="form-control" name="icon" placeholder="Icon ex handshake">
+            </div>
           </div>
         
         </div>
diff --git a/settings_tag_edit_modal.php b/settings_tag_edit_modal.php
index 001d715b..0d21df3b 100644
--- a/settings_tag_edit_modal.php
+++ b/settings_tag_edit_modal.php
@@ -13,7 +13,12 @@
           
           <div class="form-group">
             <label>Name <strong class="text-danger">*</strong></label>
-            <input type="text" class="form-control" name="name" value="<?php echo $tag_name; ?>" required>
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-fw fa-tag"></i></span>
+              </div>
+              <input type="text" class="form-control" name="name" value="<?php echo $tag_name; ?>" required>
+            </div>
           </div>
 
           <div class="form-group">
@@ -29,36 +34,24 @@
             </div>
           </div>
           
-          <label>Color</label>
-          <div class="mb-3">
-              <div class="form-check">
-                <input class="form-check-input" type="radio" name="color" value="<?php echo $tag_color; ?>" checked>
-                <label class="form-check-label">
-                  <i class="fa fa-fw fa-4x fa-circle" style="color:<?php echo $tag_color; ?>"></i>
-                </label>
+          <div class="form-group">
+            <label>Color <strong class="text-danger">*</strong></label>
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-fw fa-paint-brush"></i></span>
               </div>
+              <input type="color" class="form-control col-3" name="color" value="<?php echo $tag_color; ?>" required>
             </div>
-          <div class="form-row">
-
-            <?php 
-
-            foreach($colors_array as $color) { 
-            ?>
-            <div class="col-3 mb-3">
-              <div class="form-check">
-                <input class="form-check-input" type="radio" name="color" value="<?php echo $color; ?>">
-                <label class="form-check-label">
-                  <i class="fa fa-fw fa-3x fa-circle" style="color:<?php echo $color; ?>"></i>
-                </label>
-              </div>
-            </div>
-           
-            <?php } ?>
           </div>
 
           <div class="form-group">
             <label>Icon</label>
-            <input type="text" class="form-control" name="icon" placeholder="Icon ex handshake" value="<?php echo $tag_icon; ?>">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fa fa-fw fa-image"></i></span>
+              </div>
+              <input type="text" class="form-control" name="icon" placeholder="Icon ex handshake" value="<?php echo $tag_icon; ?>">
+            </div>
           </div>
         
         </div>