Add badges API + styles for discussions and users

framework/core/ember/app/components/discussion/post-header/user.js

@@ -8,5 +8,5 @@ var precompileTemplate = Ember.Handlebars.compile;
 export default Ember.Component.extend({
   tagName: 'h3',
   classNames: ['post-user'],
-  layout: precompileTemplate('{{#if post.user}}{{#link-to "user" post.user}}{{user-avatar post.user}} {{user-name post.user}}{{/link-to}}{{else}}{{user-avatar post.user}} {{user-name post.user}}{{/if}}')
+  layout: precompileTemplate('{{#if post.user}}{{#link-to "user" post.user}}{{user-avatar post.user}} {{user-name post.user}}{{/link-to}}{{else}}{{user-avatar post.user}} {{user-name post.user}}{{/if}}{{ui/item-list items=post.user.badges class="badges"}}')
 });

framework/core/ember/app/components/ui/badge-button.js

@@ -0,0 +1,11 @@
+import ActionButton from 'flarum/components/ui/action-button';
+
+export default ActionButton.extend({
+  tagName: 'span',
+  classNames: ['badge'],
+  title: Ember.computed.alias('label'),
+
+  didInsertElement: function() {
+    this.$().tooltip();
+  }
+});

framework/core/ember/app/models/discussion.js

@@ -1,7 +1,25 @@
 import Ember from 'ember';
 import DS from 'ember-data';
 
-export default DS.Model.extend({
+import HasItemLists from 'flarum/mixins/has-item-lists';
+
+export default DS.Model.extend(HasItemLists, {
+  /**
+    Define a "badges" item list. Example usage:
+    ```
+    populateBadges: function(items) {
+      items.pushObjectWithTag(BadgeButton.extend({
+        label: 'Sticky',
+        icon: 'thumb-tack',
+        className: 'badge-sticky',
+        discussion: this,
+        isHiddenInList: Ember.computed.not('discussion.sticky')
+      }), 'sticky');
+    }
+    ```
+   */
+  itemLists: ['badges'],
+
   title: DS.attr('string'),
   slug: Ember.computed('title', function() {
     return this.get('title').toLowerCase().replace(/[^a-z0-9]/gi, '-').replace(/-+/g, '-');

framework/core/ember/app/models/user.js

@@ -1,8 +1,11 @@
 import DS from 'ember-data';
 
+import HasItemLists from 'flarum/mixins/has-item-lists';
 import stringToColor from 'flarum/utils/string-to-color';
 
-export default DS.Model.extend({
+export default DS.Model.extend(HasItemLists, {
+  itemLists: ['badges'],
+
   username: DS.attr('string'),
   email: DS.attr('string'),
   password: DS.attr('string'),

framework/core/ember/app/styles/app.less

@@ -21,6 +21,7 @@
 // Finally, with our vendor CSS loaded, we can import Flarum-specific stuff.
 @import "@{flarum-base}components.less";
 @import "@{flarum-base}buttons.less";
+@import "@{flarum-base}badges.less";
 @import "@{flarum-base}dropdowns.less";
 @import "@{flarum-base}avatars.less";
 @import "@{flarum-base}forms.less";

framework/core/ember/app/styles/flarum/badges.less

@@ -0,0 +1,31 @@
+.badges {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &, & > li {
+    display: inline-block;
+  }
+}
+
+.badge-size(@size) {
+  width: @size;
+  height: @size;
+  border-radius: @size / 2;
+  line-height: @size - 4px;
+  &, & .fa {
+    font-size: 0.6 * @size;
+  }
+}
+.badge {
+  .badge-size(24px);
+  border: 2px solid @fl-body-bg;
+  background: @fl-body-secondary-color;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+
+  & .label {
+    display: none;
+  }
+}

framework/core/ember/app/styles/flarum/discussion.less

@@ -1,3 +1,16 @@
+// ------------------------------------
+// Hero
+
+.discussion-hero {
+  & .badges {
+    margin-right: 5px;
+  }
+}
+.discussion-title {
+  display: inline;
+  vertical-align: middle;
+}
+
 // ------------------------------------
 // Sidebar
 
@@ -159,6 +172,16 @@
     &, & a {
       color: @fl-body-heading-color;
     }
+
+    & .badges {
+      text-align: right;
+      white-space: nowrap;
+
+      & .badge {
+        margin-left: -15px;
+        position: relative;
+      }
+    }
   }
 }
 .post-body {
@@ -273,6 +296,21 @@
       margin-right: 5px;
     }
   }
+  .post-user {
+    position: relative;
+
+    & .badges {
+      position: absolute;
+      top: -7px;
+      left: 5px;
+      width: 32px;
+
+      & .badge {
+        .badge-size(20px);
+        margin-left: -13px;
+      }
+    }
+  }
   .post-activity {
     padding-left: 30px;
   }
@@ -304,6 +342,14 @@
       .avatar-size(64px);
     }
   }
+  .post-user {
+    & .badges {
+      float: left;
+      margin-left: -85px;
+      margin-top: -3px;
+      width: 64px;
+    }
+  }
   .post-icon {
     text-align: right;
     margin-left: -90px;

framework/core/ember/app/styles/flarum/index.less

@@ -262,13 +262,24 @@
 .discussion-summary {
   position: relative;
 
-  &, & a {
+  &, & .main {
     color: @fl-body-muted-color;
     text-decoration: none;
   }
   & .author {
     float: left;
-    margin-top: 18px;
+    margin-top: 20px;
+  }
+  & .badges {
+    float: left;
+    margin-top: 17px;
+    text-align: right;
+    white-space: nowrap;
+
+    & .badge {
+      margin-left: -15px;
+      position: relative;
+    }
   }
   & .main {
     display: inline-block;
@@ -324,6 +335,15 @@
     & .author {
       margin-left: -45px;
     }
+    & .badges {
+      margin-left: -45px;
+      width: 38px;
+
+      & .badge {
+        .badge-size(20px);
+        margin-left: -13px;
+      }
+    }
     & .avatar {
       .avatar-size(32px);
     }
@@ -362,6 +382,10 @@
     & .author {
       margin-left: -65px;
     }
+    & .badges {
+      margin-left: -65px;
+      width: 58px;
+    }
     & .main {
       margin-right: -65px;
     }

framework/core/ember/app/templates/components/index/discussion-listing.hbs

@@ -9,11 +9,7 @@
 
 {{#link-to "user" discussion.startUser class="author"}}{{user-avatar discussion.startUser}}{{/link-to}}
 
-<div class="badges">
+{{ui/item-list items=discussion.badges class="badges"}}
-  {{#each badge in badges}}
-    {{fl-badge badge}}
-  {{/each}}
-</div>
 
 {{#link-to "discussion" discussion.content (query-params start=start) current-when="discussion" class="main"}}
   <h3 class="title">{{highlight-words discussion.title searchQuery}}</h3>

framework/core/ember/app/templates/discussion.hbs

@@ -1,5 +1,6 @@
 <header class="hero discussion-hero">
   <div class="container">
+    {{ui/item-list items=model.badges class="badges"}}
     <h2 class="discussion-title">{{model.title}}</h2>
   </div>
 </header>