From 7412b3ea2cdf11f80f65fc1100cc372ec20d49d3 Mon Sep 17 00:00:00 2001
From: Dmitry Vdovin <voidxnull@gmail.com>
Date: Sun, 13 Nov 2016 23:12:17 +0200
Subject: [PATCH] Add roles section to UserDetails

---
 src/components/tools/user-details.js     | 20 +++++++++-----
 src/components/tools/user-roles.js       | 35 ++++++++++++++++++++++++
 src/less/blocks/tools/tools_details.less |  9 ++++++
 src/less/blocks/user_roles.less          | 27 ++++++++++++++++++
 src/less/styles.less                     |  1 +
 5 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 src/components/tools/user-roles.js
 create mode 100644 src/less/blocks/user_roles.less

diff --git a/src/components/tools/user-details.js b/src/components/tools/user-details.js
index e735c421..0f22328b 100644
--- a/src/components/tools/user-details.js
+++ b/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">
diff --git a/src/components/tools/user-roles.js b/src/components/tools/user-roles.js
new file mode 100644
index 00000000..feb33ddb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/less/blocks/tools/tools_details.less b/src/less/blocks/tools/tools_details.less
index 07892227..0d0f33bc 100644
--- a/src/less/blocks/tools/tools_details.less
+++ b/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;
+  }
 }
diff --git a/src/less/blocks/user_roles.less b/src/less/blocks/user_roles.less
new file mode 100644
index 00000000..3490742e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/less/styles.less b/src/less/styles.less
index fe4a2cf3..a9b1cbff 100644
--- a/src/less/styles.less
+++ b/src/less/styles.less
@@ -131,3 +131,4 @@
 @import 'blocks/v2/layout';
 @import 'blocks/form';
 @import 'blocks/sidebar';
+@import 'blocks/user_roles';