Add user group badges

framework/core/js/forum/src/components/post-header-user.js

@@ -25,7 +25,7 @@ export default class PostHeaderUser extends Component {
             avatar(user),
             username(user)
           ]),
-          m('ul.badges', listItems(user.badges().toArray()))
+          m('ul.badges', listItems(user.badges().toArray().reverse()))
         ] : [
           avatar(),
           username()

framework/core/js/lib/models/group.js

@@ -3,6 +3,9 @@ import Model from 'flarum/model';
 class Group extends Model {}
 
 Group.prototype.id = Model.prop('id');
-Group.prototype.name = Model.prop('name');
+Group.prototype.nameSingular = Model.prop('nameSingular');
+Group.prototype.namePlural = Model.prop('namePlural');
+Group.prototype.color = Model.prop('color');
+Group.prototype.icon = Model.prop('icon');
 
 export default Group;

framework/core/js/lib/models/user.js

@@ -2,6 +2,7 @@ import Model from 'flarum/model'
 import stringToColor from 'flarum/utils/string-to-color';
 import ItemList from 'flarum/utils/item-list';
 import computed from 'flarum/utils/computed';
+import Badge from 'flarum/components/badge';
 
 class User extends Model {}
 
@@ -48,6 +49,22 @@ User.prototype.color = computed('username', 'avatarUrl', 'avatarColor', function
   }
 });
 
-User.prototype.badges = () => new ItemList();
+User.prototype.badges = function() {
+  var items = new ItemList();
+
+  this.groups().forEach(group => {
+    if (group.id() != 3) {
+      items.add('group'+group.id(),
+        Badge.component({
+          label: group.nameSingular(),
+          icon: group.icon(),
+          style: {backgroundColor: group.color()}
+        })
+      );
+    }
+  });
+
+  return items;
+}
 
 export default User;

framework/core/less/forum/discussion.less

@@ -191,7 +191,7 @@
       font-size: 15px;
     }
 
-    & .badges {
+    & h3 .badges {
       text-align: right;
       white-space: nowrap;
 
@@ -337,7 +337,7 @@
   .post-user {
     position: relative;
 
-    & .badges {
+    & h3 .badges {
       position: absolute;
       top: -7px;
       left: 5px;
@@ -381,7 +381,7 @@
     }
   }
   .post-user {
-    & .badges {
+    & h3 .badges {
       float: left;
       margin-left: -85px;
       margin-top: -3px;

framework/core/less/lib/badges.less

@@ -12,13 +12,13 @@
   width: @size;
   height: @size;
   border-radius: @size / 2;
-  line-height: @size - 4px;
+  line-height: @size - 5px;
   &, & .fa {
-    font-size: 0.6 * @size;
+    font-size: 0.56 * @size;
   }
 }
 .badge {
-  .badge-size(23px);
+  .badge-size(25px);
   border: 2px solid @fl-body-bg;
   background: @fl-body-muted-color;
   color: #fff;

framework/core/migrations/2015_02_24_000000_create_groups_table.php

@@ -3,30 +3,31 @@
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
 
-class CreateGroupsTable extends Migration {
-
-	/**
-	 * Run the migrations.
-	 *
-	 * @return void
-	 */
-	public function up()
-	{
-		Schema::create('groups', function(Blueprint $table)
-		{
-			$table->increments('id');
-			$table->string('name');
-		});
-	}
-
-	/**
-	 * Reverse the migrations.
-	 *
-	 * @return void
-	 */
-	public function down()
-	{
-		Schema::drop('groups');
-	}
+class CreateGroupsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('groups', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('name_singular');
+            $table->string('name_plural');
+            $table->string('color')->nullable();
+            $table->string('icon')->nullable();
+        });
+    }
 
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::drop('groups');
+    }
 }

framework/core/src/Api/Actions/Posts/ShowAction.php

@@ -28,6 +28,7 @@ class ShowAction extends SerializeResourceAction
      */
     public static $include = [
         'user' => true,
+        'user.groups' => true,
         'editUser' => true,
         'hideUser' => true,
         'discussion' => false

framework/core/src/Api/Serializers/GroupSerializer.php

@@ -18,8 +18,11 @@ class GroupSerializer extends BaseSerializer
     protected function attributes($group)
     {
         $attributes = [
-            'id'   => (int) $group->id,
-            'name' => $group->name
+            'id'           => (int) $group->id,
+            'nameSingular' => $group->name_singular,
+            'namePlural'   => $group->name_plural,
+            'color'        => $group->color,
+            'icon'         => $group->icon,
         ];
 
         return $this->extendAttributes($group, $attributes);

framework/core/src/Api/Serializers/UserBasicSerializer.php

@@ -24,4 +24,9 @@ class UserBasicSerializer extends BaseSerializer
 
         return $this->extendAttributes($user, $attributes);
     }
+
+    protected function groups()
+    {
+        return $this->hasMany('Flarum\Api\Serializers\GroupSerializer');
+    }
 }

framework/core/src/Api/Serializers/UserSerializer.php

@@ -56,9 +56,4 @@ class UserSerializer extends UserBasicSerializer
 
         return $this->extendAttributes($user, $attributes);
     }
-
-    protected function groups()
-    {
-        return $this->hasMany('Flarum\Api\Serializers\GroupSerializer');
-    }
 }

framework/core/src/Core/Seeders/GroupsTableSeeder.php

@@ -15,9 +15,19 @@ class GroupsTableSeeder extends Seeder {
         Group::unguard();
         Group::truncate();
 
-		$groups = ['Administrator', 'Guest', 'Member', 'Moderator', 'Staff'];
+		$groups = [
+            ['Admin', 'Admins', '#B72A2A', 'wrench'],
+            ['Guest', 'Guests', null, null],
+            ['Member', 'Members', null, null],
+            ['Mod', 'Mods', '#80349E', 'bolt']
+        ];
         foreach ($groups as $group) {
-            Group::create(['name' => $group]);
+            Group::create([
+                'name_singular' => $group[0],
+                'name_plural' => $group[1],
+                'color' => $group[2],
+                'icon' => $group[3]
+            ]);
         }
 	}