From 11fae08b503ed1c98bf89dc685008ee5f1c8df1a Mon Sep 17 00:00:00 2001
From: NomisCZ <nomiscz@outlook.com>
Date: Tue, 4 Jun 2019 20:49:16 +0200
Subject: [PATCH] Add custom icon functionality

Add database 'icon' column
Add admin modal icon field
Add icon render to TagHero, tagLabel
Change tagIcon helper functionality
---
 .../tags/js/src/admin/components/EditTagModal.js | 13 ++++++++++++-
 extensions/tags/js/src/common/helpers/tagIcon.js | 16 ++++++++++++----
 .../tags/js/src/common/helpers/tagLabel.js       |  5 +++--
 extensions/tags/js/src/common/models/Tag.js      |  1 +
 .../tags/js/src/forum/components/TagHero.js      |  3 ++-
 extensions/tags/less/admin/TagsPage.less         |  2 +-
 .../2019_04_21_000000_add_icon_to_tags_table.php | 16 ++++++++++++++++
 .../tags/src/Api/Serializer/TagSerializer.php    |  1 +
 extensions/tags/src/Command/CreateTagHandler.php |  1 +
 extensions/tags/src/Command/EditTagHandler.php   |  4 ++++
 extensions/tags/src/Tag.php                      |  3 ++-
 11 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 extensions/tags/migrations/2019_04_21_000000_add_icon_to_tags_table.php

diff --git a/extensions/tags/js/src/admin/components/EditTagModal.js b/extensions/tags/js/src/admin/components/EditTagModal.js
index 830cf9f14..fbb0d0934 100644
--- a/extensions/tags/js/src/admin/components/EditTagModal.js
+++ b/extensions/tags/js/src/admin/components/EditTagModal.js
@@ -19,6 +19,7 @@ export default class EditTagModal extends Modal {
     this.slug = m.prop(this.tag.slug() || '');
     this.description = m.prop(this.tag.description() || '');
     this.color = m.prop(this.tag.color() || '');
+    this.icon = m.prop(this.tag.icon() || '');
     this.isHidden = m.prop(this.tag.isHidden() || false);
   }
 
@@ -30,7 +31,8 @@ export default class EditTagModal extends Modal {
     return this.name()
       ? tagLabel({
         name: this.name,
-        color: this.color
+        color: this.color,
+        icon: this.icon,
       })
       : app.translator.trans('flarum-tags.admin.edit_tag.title');
   }
@@ -71,6 +73,14 @@ export default class EditTagModal extends Modal {
       <input className="FormControl" placeholder="#aaaaaa" value={this.color()} oninput={m.withAttr('value', this.color)}/>
     </div>, 20);
 
+    items.add('icon', <div className="Form-group">
+      <label>{app.translator.trans('core.admin.edit_group.icon_label')}</label>
+      <div className="helpText">
+        {app.translator.trans('core.admin.edit_group.icon_text', {a: <a href="https://fontawesome.com/icons?m=free" tabindex="-1"/>})}
+      </div>
+      <input className="FormControl" placeholder="fas fa-bolt" value={this.icon()} oninput={m.withAttr('value', this.icon)}/>
+    </div>, 10);
+
     items.add('hidden', <div className="Form-group">
       <div>
         <label className="checkbox">
@@ -103,6 +113,7 @@ export default class EditTagModal extends Modal {
       slug: this.slug(),
       description: this.description(),
       color: this.color(),
+      icon: this.icon(),
       isHidden: this.isHidden()
     };
   }
diff --git a/extensions/tags/js/src/common/helpers/tagIcon.js b/extensions/tags/js/src/common/helpers/tagIcon.js
index 31dea0b17..529fbcb5a 100644
--- a/extensions/tags/js/src/common/helpers/tagIcon.js
+++ b/extensions/tags/js/src/common/helpers/tagIcon.js
@@ -1,12 +1,20 @@
-export default function tagIcon(tag, attrs = {}) {
-  attrs.className = 'icon TagIcon ' + (attrs.className || '');
+export default function tagIcon(tag, attrs = {}, settings = {}) {
+  const hasIcon = tag && tag.icon();
+
+  attrs.className = hasIcon ? 'icon ' + tag.icon() + ' ' + (attrs.className || '') : 'icon TagIcon ' + (attrs.className || '');
 
   if (tag) {
     attrs.style = attrs.style || {};
-    attrs.style.backgroundColor = tag.color();
+
+    if (hasIcon) {
+      attrs.style.color = settings.disableColors ? '' : tag.color();
+    } else {
+      attrs.style.backgroundColor = tag.color();
+    }
+
   } else {
     attrs.className += ' untagged';
   }
 
-  return <span {...attrs}/>;
+  return hasIcon ? <i {...attrs}/> : <span {...attrs}/>;
 }
diff --git a/extensions/tags/js/src/common/helpers/tagLabel.js b/extensions/tags/js/src/common/helpers/tagLabel.js
index 716099854..9d815a8d8 100644
--- a/extensions/tags/js/src/common/helpers/tagLabel.js
+++ b/extensions/tags/js/src/common/helpers/tagLabel.js
@@ -1,10 +1,12 @@
 import extract from 'flarum/utils/extract';
+import tagIcon from './tagIcon';
 
 export default function tagLabel(tag, attrs = {}) {
   attrs.style = attrs.style || {};
   attrs.className = 'TagLabel ' + (attrs.className || '');
 
   const link = extract(attrs, 'link');
+  let tagText = tag ? tag.name() : app.translator.trans('flarum-tags.lib.deleted_tag_text');
 
   if (tag) {
     const color = tag.color();
@@ -21,11 +23,10 @@ export default function tagLabel(tag, attrs = {}) {
   } else {
     attrs.className += ' untagged';
   }
-
   return (
     m((link ? 'a' : 'span'), attrs,
       <span className="TagLabel-text">
-        {tag ? tag.name() : app.translator.trans('flarum-tags.lib.deleted_tag_text')}
+        {tag.icon() && tagIcon(tag, {}, {disableColors: true})} {tagText}
       </span>
     )
   );
diff --git a/extensions/tags/js/src/common/models/Tag.js b/extensions/tags/js/src/common/models/Tag.js
index 9fa17aae9..4220d7eaa 100644
--- a/extensions/tags/js/src/common/models/Tag.js
+++ b/extensions/tags/js/src/common/models/Tag.js
@@ -10,6 +10,7 @@ export default class Tag extends mixin(Model, {
   color: Model.attribute('color'),
   backgroundUrl: Model.attribute('backgroundUrl'),
   backgroundMode: Model.attribute('backgroundMode'),
+  icon: Model.attribute('icon'),
 
   position: Model.attribute('position'),
   parent: Model.hasOne('parent'),
diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index c553709b8..7567c0953 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -1,4 +1,5 @@
 import Component from 'flarum/Component';
+import tagIcon from '../../common/helpers/tagIcon';
 
 export default class TagHero extends Component {
   view() {
@@ -10,7 +11,7 @@ export default class TagHero extends Component {
         style={color ? {color: '#fff', backgroundColor: color} : ''}>
         <div className="container">
           <div className="containerNarrow">
-            <h2 className="Hero-title">{tag.name()}</h2>
+            <h2 className="Hero-title">{tag.icon() && tagIcon(tag, {}, { disableColors: true })} {tag.name()}</h2>
             <div className="Hero-subtitle">{tag.description()}</div>
           </div>
         </div>
diff --git a/extensions/tags/less/admin/TagsPage.less b/extensions/tags/less/admin/TagsPage.less
index 3ef3cc3a8..06c2197b0 100644
--- a/extensions/tags/less/admin/TagsPage.less
+++ b/extensions/tags/less/admin/TagsPage.less
@@ -31,7 +31,7 @@
     cursor: move;
   }
 
-  .TagIcon {
+  .TagIcon, .icon {
     margin-right: 10px;
   }
 }
diff --git a/extensions/tags/migrations/2019_04_21_000000_add_icon_to_tags_table.php b/extensions/tags/migrations/2019_04_21_000000_add_icon_to_tags_table.php
new file mode 100644
index 000000000..98fb56a5c
--- /dev/null
+++ b/extensions/tags/migrations/2019_04_21_000000_add_icon_to_tags_table.php
@@ -0,0 +1,16 @@
+<?php
+
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+use Flarum\Database\Migration;
+
+return Migration::addColumns('tags', [
+    'icon' => ['string', 'length' => 100, 'nullable' => true]
+]);
diff --git a/extensions/tags/src/Api/Serializer/TagSerializer.php b/extensions/tags/src/Api/Serializer/TagSerializer.php
index c249a0d08..367c30ae5 100644
--- a/extensions/tags/src/Api/Serializer/TagSerializer.php
+++ b/extensions/tags/src/Api/Serializer/TagSerializer.php
@@ -33,6 +33,7 @@ class TagSerializer extends AbstractSerializer
             'color'              => $tag->color,
             'backgroundUrl'      => $tag->background_path,
             'backgroundMode'     => $tag->background_mode,
+            'icon'               => $tag->icon,
             'iconUrl'            => $tag->icon_path,
             'discussionCount'    => (int) $tag->discussion_count,
             'position'           => $tag->position === null ? null : (int) $tag->position,
diff --git a/extensions/tags/src/Command/CreateTagHandler.php b/extensions/tags/src/Command/CreateTagHandler.php
index 406c01743..d6fb584a8 100644
--- a/extensions/tags/src/Command/CreateTagHandler.php
+++ b/extensions/tags/src/Command/CreateTagHandler.php
@@ -48,6 +48,7 @@ class CreateTagHandler
             array_get($data, 'attributes.slug'),
             array_get($data, 'attributes.description'),
             array_get($data, 'attributes.color'),
+            array_get($data, 'attributes.icon'),
             array_get($data, 'attributes.isHidden')
         );
 
diff --git a/extensions/tags/src/Command/EditTagHandler.php b/extensions/tags/src/Command/EditTagHandler.php
index b3f47b3f0..cca4d6c13 100644
--- a/extensions/tags/src/Command/EditTagHandler.php
+++ b/extensions/tags/src/Command/EditTagHandler.php
@@ -72,6 +72,10 @@ class EditTagHandler
             $tag->color = $attributes['color'];
         }
 
+        if (isset($attributes['icon'])) {
+            $tag->icon = $attributes['icon'];
+        }
+
         if (isset($attributes['isHidden'])) {
             $tag->is_hidden = (bool) $attributes['isHidden'];
         }
diff --git a/extensions/tags/src/Tag.php b/extensions/tags/src/Tag.php
index 83c7596c2..110ee4136 100644
--- a/extensions/tags/src/Tag.php
+++ b/extensions/tags/src/Tag.php
@@ -54,7 +54,7 @@ class Tag extends AbstractModel
      * @param bool $isHidden
      * @return static
      */
-    public static function build($name, $slug, $description, $color, $isHidden)
+    public static function build($name, $slug, $description, $color, $icon, $isHidden)
     {
         $tag = new static;
 
@@ -62,6 +62,7 @@ class Tag extends AbstractModel
         $tag->slug = $slug;
         $tag->description = $description;
         $tag->color = $color;
+        $tag->icon = $icon;
         $tag->is_hidden = (bool) $isHidden;
 
         return $tag;