Fixes v17development#9: Badges visible on UserCard

js/src/forum/components/addBadgeListUserCard.js

@@ -0,0 +1,27 @@
+import { extend } from 'flarum/common/extend';
+import UserCard from 'flarum/forum/components/UserCard';
+import UserBadge from '../../common/components/UserBadge';
+import BadgeModal from './BadgeModal';
+
+export default function addBadgeListUserCard() {
+  extend(UserCard.prototype, 'infoItems', function (items) {
+    const userBadges = this.attrs.user.userBadges();
+
+    if (userBadges.length < 1) return;
+
+    items.add(
+      'badges',
+      userBadges.map((userBadge) => (
+        <UserBadge
+          badge={userBadge.badge()}
+          onclick={() =>
+            app.modal.show(BadgeModal, {
+              badge: userBadge.badge(),
+              userBadgeData: userBadge,
+            })
+          }
+        />
+      ))
+    );
+  });
+}

js/src/forum/index.js

@@ -16,6 +16,7 @@ import addSidebarNav from './addSidebarNav';
 import UserBadgeListState from './states/UserBadgeListState';
 import BadgeReceivedNotification from './notification/BadgeReceivedNotification';
 import NotificationGrid from 'flarum/forum/components/NotificationGrid';
+import addBadgeListUserCard from './components/addBadgeListUserCard';
 
 app.initializers.add('v17development-flarum-badges', (app) => {
   app.store.models.badges = Badge;
@@ -105,4 +106,5 @@ app.initializers.add('v17development-flarum-badges', (app) => {
       );
     }
   });
+  addBadgeListUserCard();
 });

less/forum.less

@@ -4,3 +4,4 @@
 @import "./forum/BadgePage.less";
 @import "./forum/BadgeOverviewPage.less";
 @import "./forum/BadgeUserList.less";
+@import "forum/BadgeUserCard";

less/forum/BadgeUserCard.less

@@ -0,0 +1,14 @@
+.UserCard-info {
+  .item-badges {
+    display: block!important;
+    margin-top: 15px;
+
+    .UserBadge {
+      color: #fff;
+
+      &:hover {
+        border-color: #fff;
+      }
+    }
+  }
+}