From 2e1f97019434c68e758117127574164e7ffc3327 Mon Sep 17 00:00:00 2001
From: Jasper Vriends <4417659+jaspervriends@users.noreply.github.com>
Date: Fri, 26 Nov 2021 00:58:13 +0100
Subject: [PATCH] Updated editor modal Closes #8 #16 #12

---
 js/src/admin/components/EditBadgeModal.js | 35 +++++++++++++++++------
 less/Admin.less                           | 24 ++++++++++++++++
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/js/src/admin/components/EditBadgeModal.js b/js/src/admin/components/EditBadgeModal.js
index 48705ad..2ee4b17 100644
--- a/js/src/admin/components/EditBadgeModal.js
+++ b/js/src/admin/components/EditBadgeModal.js
@@ -168,7 +168,7 @@ export default class EditBadgeModal extends Modal {
     else {
       items.add(
         "icon",
-        <div className="Form-group BadgeForm-split" style="position: relative;">
+        <div className="Form-group BadgeForm-split BadgeForm-IconField">
           <label>
             {app.translator.trans(
               "v17development-flarum-badges.admin.badge.icon"
@@ -180,17 +180,14 @@ export default class EditBadgeModal extends Modal {
             placeholder="fas fa-icons"
             bidi={this.icon}
           />
-          <i
-            className={this.icon() || "fas fa-icons "}
-            style="position: absolute; bottom: 8px; right: 15px; font-size: 20px;"
-          />
+          <span className={this.icon() || "fas fa-icons "} />
         </div>,
         50
       );
 
       items.add(
         "icon_color",
-        <div className="Form-group BadgeForm-split">
+        <div className="Form-group BadgeForm-split BadgeForm-ColorField">
           <label>
             {app.translator.trans(
               "v17development-flarum-badges.admin.badge.icon_color"
@@ -202,13 +199,19 @@ export default class EditBadgeModal extends Modal {
             placeholder="auto"
             bidi={this.iconColor}
           />
+          <span
+            className={"BadgeForm-Chosen-Color"}
+            style={{
+              backgroundColor: this.iconColor(),
+            }}
+          />
         </div>,
         50
       );
 
       items.add(
         "background_color",
-        <div className="Form-group BadgeForm-split">
+        <div className="Form-group BadgeForm-split BadgeForm-ColorField">
           <label>
             {app.translator.trans(
               "v17development-flarum-badges.admin.badge.background_color"
@@ -220,13 +223,19 @@ export default class EditBadgeModal extends Modal {
             bidi={this.backgroundColor}
             placeholder="auto"
           />
+          <span
+            className={"BadgeForm-Chosen-Color"}
+            style={{
+              backgroundColor: this.backgroundColor(),
+            }}
+          />
         </div>,
         50
       );
 
       items.add(
         "label_color",
-        <div className="Form-group BadgeForm-split">
+        <div className="Form-group BadgeForm-split BadgeForm-ColorField">
           <label>
             {app.translator.trans(
               "v17development-flarum-badges.admin.badge.label_color"
@@ -238,6 +247,12 @@ export default class EditBadgeModal extends Modal {
             placeholder="auto"
             bidi={this.labelColor}
           />
+          <span
+            className={"BadgeForm-Chosen-Color"}
+            style={{
+              backgroundColor: this.labelColor(),
+            }}
+          />
         </div>,
         50
       );
@@ -281,8 +296,12 @@ export default class EditBadgeModal extends Modal {
       .save({
         name: this.name(),
         icon: this.icon(),
+        image: this.image(),
         description: this.description(),
         isVisible: this.isVisible(),
+        iconColor: this.iconColor(),
+        backgroundColor: this.backgroundColor(),
+        labelColor: this.labelColor(),
       })
       .then(
         () => this.hide(),
diff --git a/less/Admin.less b/less/Admin.less
index 37a9311..e3938c0 100644
--- a/less/Admin.less
+++ b/less/Admin.less
@@ -42,3 +42,27 @@
     }
   }
 }
+
+.BadgeForm-ColorField {
+  position: relative;
+
+  .BadgeForm-Chosen-Color {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    bottom: 10px;
+    right: 15px;
+    border-radius: 100%;
+  }
+}
+
+.BadgeForm-IconField {
+  position: relative;
+
+  > span {
+    position: absolute;
+    bottom: 8px;
+    right: 15px;
+    font-size: 20px;
+  }
+}