Merge pull request #60 from NomisCZ/master

Add custom icon functionality

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()
     };
   }

extensions/tags/js/src/common/helpers/tagIcon.js

@@ -1,12 +1,20 @@
-export default function tagIcon(tag, attrs = {}) {
+export default function tagIcon(tag, attrs = {}, settings = {}) {
-  attrs.className = 'icon TagIcon ' + (attrs.className || '');
+  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}/>;
 }

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>
     )
   );

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'),

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>

extensions/tags/less/admin/TagsPage.less

@@ -31,7 +31,7 @@
     cursor: move;
   }
 
-  .TagIcon {
+  .TagIcon, .icon {
     margin-right: 10px;
   }
 }

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]
+]);

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,

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')
         );
 

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'];
         }

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;