Skip to content
This repository has been archived by the owner on Oct 1, 2019. It is now read-only.

Commit

Permalink
Add roles section to UserDetails
Browse files Browse the repository at this point in the history
  • Loading branch information
voidxnull committed Nov 13, 2016
1 parent 243caa5 commit 7412b3e
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 7 deletions.
20 changes: 13 additions & 7 deletions src/components/tools/user-details.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand All @@ -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">
Expand Down
35 changes: 35 additions & 0 deletions src/components/tools/user-roles.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions src/less/blocks/tools/tools_details.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -36,7 +37,15 @@
margin-bottom: @space;
}

&__paragraph {
padding-bottom: @space;
}

&__left_col {
margin-right: @doubleSpace;
}

&__subtext {
color: @subtextColor;
}
}
27 changes: 27 additions & 0 deletions src/less/blocks/user_roles.less
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions src/less/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -131,3 +131,4 @@
@import 'blocks/v2/layout';
@import 'blocks/form';
@import 'blocks/sidebar';
@import 'blocks/user_roles';

0 comments on commit 7412b3e

Please sign in to comment.