Add Tools > People > Following page (#671)

- Added PeopleToolPage.
- Refactored tool stylesheets.

src/actions/tools.js

@@ -23,6 +23,7 @@ export const TOOLS__SET_SCHOOLS_ALPHABET = 'TOOLS__SET_SCHOOLS_ALPHABET';
 export const TOOLS__ADD_USER_POSTS_TO_RIVER = 'TOOLS__ADD_USER_POSTS_TO_RIVER';
 export const TOOLS__SET_USER_POSTS_RIVER = 'TOOLS__SET_USER_POSTS_RIVER';
 
+export const TOOLS__SET_FOLLOWED_USERS = 'TOOLS__SET_FOLLOWED_USERS';
 
 export function addSchoolsToRiver(schools) {
   return {
@@ -66,3 +67,10 @@ export function setUserPostsRiver(posts) {
     posts
   };
 }
+
+export function setFollowedUsers(users) {
+  return {
+    type: TOOLS__SET_FOLLOWED_USERS,
+    users
+  };
+}

src/components/tools/user-details.js

@@ -0,0 +1,71 @@
+/*
+ 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';
+import { Link } from 'react-router';
+
+import {
+  Immutable as ImmutablePropType
+} from '../../prop-types/common';
+import Avatar from '../user/avatar';
+import FollowButton from '../follow-button';
+
+
+export default function UserDetails({ current_user, following, triggers, user }) {
+  if (!user) {
+    return null;
+  }
+
+  const firstName = user.getIn(['more', 'firstName']) || '';
+  const lastName = user.getIn(['more', 'lastName']) || '';
+  const fullName = `${firstName} ${lastName}`;
+
+  if (user) {
+    return (
+      <div className="tools_page__details_col">
+        <div className="tools_details">
+          <div className="tools_details__left_col">
+            <Avatar isRound={false} size={140} user={user.toJS()} />
+          </div>
+          <div>
+            <Link className="tools_details__title" to={`/user/${user.get('username')}`}>
+              {user.get('username')}
+            </Link>
+            <div className="tools_details__description">
+              {fullName}
+            </div>
+            <FollowButton
+              active_user={current_user.toJS()}
+              following={following.toJS()}
+              triggers={triggers}
+              user={user.toJS()}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+UserDetails.propTypes = {
+  current_user: ImmutablePropType(FollowButton.propTypes.active_user),
+  following: ImmutablePropType(FollowButton.propTypes.following),
+  triggers: FollowButton.propTypes.triggers,
+  user: ImmutablePropType(FollowButton.propTypes.user)
+};

src/components/tools/user-list.js

@@ -0,0 +1,61 @@
+/*
+ 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, { PropTypes } from 'react';
+
+import {
+  uuid4 as uuid4PropType,
+  Immutable as ImmutablePropType
+} from '../../prop-types/common';
+import {
+  ArrayOfUsers as ArrayOfUsersPropType
+} from '../../prop-types/users';
+import Avatar from '../user/avatar';
+
+
+export default function UserList({ onClick, users, selectedUserId }) {
+  const items = users.map((user, index) => {
+    const handleClick = () => onClick(user.get('id'));
+    let className = 'tools_item tools_item-clickable';
+    if (user.get('id') === selectedUserId) {
+      className += ' tools_item-selected';
+    }
+
+    return (
+      <div
+        className={className}
+        key={index}
+        onClick={handleClick}
+      >
+        <Avatar size={23} user={user.toJS()} />
+        <span className="tools_item__child-padded">{user.get('username')}</span>
+      </div>
+    );
+  });
+
+  return (
+    <div className="tools_page__list_col">
+      {items}
+    </div>
+  );
+}
+
+UserList.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  selectedUserId: uuid4PropType,
+  users: ImmutablePropType(ArrayOfUsersPropType).isRequired
+};

src/less/blocks/tools/schools_tool.less

@@ -17,52 +17,16 @@
 */
 .schools_tool {
   @space: 20px;
-  @doubleSpace: @space * 2;
   @subtextColor: #888;
 
-  &__list_col {
-    margin-right: @space;
-    width: 400px;
-    overflow-y: auto;
-  }
-
-  &__school_item {
-    display: flex;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__school_link {
-    margin: 0 @space;
-  }
-
   &__post_count {
     margin-left: auto;
   }
 
-  &__info {
-    display: flex;
-    width: 100%;
-    padding: @doubleSpace;
-  }
-
-  &__info_icon {
-    margin-right: @doubleSpace;
+  &__details_icon {
     font-size: 100px;
   }
 
-  &__info_title {
-    display: block;
-    margin-bottom: @space;
-  }
-
-  &__info_description {
-    color: @subtextColor;
-    margin-bottom: @space;
-  }
-
   &__filter {
     margin-bottom: @space;
   }

src/less/blocks/tools/tools_details.less

@@ -0,0 +1,42 @@
+/*
+ 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/>.
+*/
+// The details window for items on tool pages.
+.tools_details {
+  @space: 20px;
+  @doubleSpace: @space * 2;
+  @subtextColor: #888;
+
+  display: flex;
+  padding: 40px;
+  background-color: white;
+  border-bottom: 2px solid #EDEDED;
+
+  &__title {
+    display: block;
+    margin-bottom: @space;
+  }
+
+  &__description {
+    color: @subtextColor;
+    margin-bottom: @space;
+  }
+
+  &__left_col {
+    margin-right: @doubleSpace;
+  }
+}

src/less/blocks/tools/tools_item.less

@@ -0,0 +1,42 @@
+/*
+ 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/>.
+*/
+// Visual block used in item lists on tool pages.
+.tools_item {
+  @space: 20px;
+
+  display: flex;
+  margin-bottom: 15px;
+  padding: @space;
+  background-color: white;
+  border-bottom: 2px solid #EDEDED;
+
+  &-selected {
+    background: #FD9315;
+    color: white;
+  }
+
+  &-clickable {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__child-padded {
+    margin-left: @space;
+  }
+}

src/less/blocks/tools/tools_page.less

@@ -67,21 +67,15 @@
     }
   }
 
-  // A universal element for items in collection (schools, posts, etc.)
-  &__item {
-    display: block;
-    margin-bottom: 15px;
-    padding: 20px;
-    background-color: white;
-    border-bottom: 2px solid #EDEDED;
-
-    &-selected {
-      background: #FD9315;
-      color: white;
-    }
+  // Column for lists of things (schools, users, posts, etc.)
+  &__list_col {
+    margin-right: @space;
+    max-width: 400px;
+    flex: 1 1;
   }
 
-  &__paper:extend(&__item) {
-    width: 100%;
+  // Column for the selected item's details.
+  &__details_col {
+    flex: 1 1;
   }
 }

src/less/styles.less

@@ -126,5 +126,7 @@
 @import 'blocks/tools/tools_page';
 @import 'blocks/tools/tools_menu_1';
 @import 'blocks/tools/tools_menu_2';
+@import 'blocks/tools/tools_item';
+@import 'blocks/tools/tools_details';
 @import 'blocks/tools/schools_tool';
 @import 'blocks/v2/layout';

src/pages/tools/my-posts-tool.js

@@ -97,7 +97,7 @@ class MyPostsToolPage extends React.Component {
       <div>
         <Helmet title="My posts tool on " />
         {postsToDisplay.map((post, index) =>
-          <div className="tools_page__item" key={index}>
+          <div className="tools_item tools_item-clickable" key={index}>
             <Link to={`/post/${post.get('id')}`}>{truncate(post.get('text'), { length: 70 })}</Link>
           </div>
         )}