Add roles section to UserDetails

src/components/tools/user-details.js

@@ -23,6 +23,7 @@ import {
 } from '../../prop-types/common';
 import Avatar from '../user/avatar';
 import FollowButton from '../follow-button';
+import UserRoles from './user-roles';
 
 
 export default function UserDetails({ current_user, following, triggers, user }) {
@@ -37,15 +38,20 @@ export default function UserDetails({ current_user, following, triggers, user })
   return (
     <div className="tools_page__details_col">
       <div className="tools_details">
-        <div className="tools_details__left_col">
+        <Link className="tools_details__left_col" to={`/user/${user.get('username')}`}>
           <Avatar isRound={false} size={140} user={user} />
-        </div>
+        </Link>
         <div>
-          <Link className="tools_details__title" to={`/user/${user.get('username')}`}>
-            {user.get('username')}
-          </Link>
-          <div className="tools_details__description">
-            {fullName}
+          <div className="tools_details__title">
+            <Link to={`/user/${user.get('username')}`}>
+              {user.get('username')}
+              <div className="tools_details__subtext">
+                {fullName}
+              </div>
+            </Link>
+          </div>
+          <div className="tools_details__paragraph">
+            <UserRoles roles={user.getIn(['more', 'roles'])} />
           </div>
           {user.getIn(['more', 'bio']) &&
             <div className="tools_details__description">

src/components/tools/user-roles.js

@@ -0,0 +1,35 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from 'react';
+
+
+export default function UserRoles({ roles }) {
+  if (!roles || !roles.size) {
+    return null;
+  }
+
+  const roleElements = roles.map(role => (
+    <span className="user_roles__role" key={role.get('id')} title={role.get('description')}>{role.get('title')}</span>
+  ));
+
+  return (
+    <div className="user_roles">
+      {roleElements}
+    </div>
+  );
+}

src/less/blocks/tools/tools_details.less

@@ -26,6 +26,7 @@
   background-color: white;
   border-bottom: 2px solid #EDEDED;
 
+  // TODO: Implement a framework instead of reinventing utility classes all over and over again.
   &__title {
     display: block;
     margin-bottom: @space;
@@ -36,7 +37,15 @@
     margin-bottom: @space;
   }
 
+  &__paragraph {
+    padding-bottom: @space;
+  }
+
   &__left_col {
     margin-right: @doubleSpace;
   }
+
+  &__subtext {
+    color: @subtextColor;
+  }
 }

src/less/blocks/user_roles.less

@@ -0,0 +1,27 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2015  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+.user_roles {
+  &__role {
+    display: inline-block;
+    margin: 0 5px 5px 0;
+    padding: 5px;
+    background-color: rgba(0, 0, 0, 0.1);
+    cursor: help;
+    font-size: 13px;
+  }
+}

src/less/styles.less

@@ -131,3 +131,4 @@
 @import 'blocks/v2/layout';
 @import 'blocks/form';
 @import 'blocks/sidebar';
+@import 'blocks/user_roles';