Merge pull request #465 from mlorb/ml_sci_937

Redesign of individual team page [SCI-937]

app/assets/javascripts/users/settings/team.js

@@ -104,14 +104,9 @@ function initUsersTable() {
       fixedColumnsLeft: 1000000 // Disable reordering
     },
     columnDefs: [{
-      targets: [ 0, 1, 2 ],
+      targets: [ 0, 1, 2, 3, 4 ],
       searchable: true,
       orderable: true
-    }, {
-      targets: [ 3, 4 ],
-      searchable: true,
-      orderable: true,
-      sWidth: "1%"
     }, {
       targets: 5,
       searchable: false,

app/datatables/team_users_datatable.rb

@@ -62,9 +62,9 @@ class TeamUsersDatatable < AjaxDatatablesRails::Base
         'DT_RowId': record.id,
         '0': escape_input(record.user.full_name),
         '1': escape_input(record.user.email),
-        '2': I18n.l(record.created_at, format: :full),
+        '2': record.role_str,
-        '3': record.user.active_status_str,
+        '3': I18n.l(record.created_at, format: :full_date),
-        '4': record.role_str,
+        '4': record.user.active_status_str,
         '5': ApplicationController.new.render_to_string(
           partial: 'users/settings/teams/user_dropdown.html.erb',
           locals: {

app/helpers/teams_helper.rb

@@ -16,4 +16,8 @@ module TeamsHelper
       name
     end
   end
+
+  def team_created_by(team)
+    User.find_by_id(team.created_by_id)
+  end
 end

app/views/users/settings/team.html.erb

@@ -1,5 +1,7 @@
 <% provide(:head_title, t("users.settings.teams.head_title")) %>
 
+<div data-hook="team-beginning"></div>
+
 <%= render partial: "users/settings/navigation.html.erb" %>
 <div class="tab-content">
   <div class="tab-pane tab-pane-settings" role="tabpanel"></div>
@@ -25,31 +27,33 @@
         </div>
         <div class="well well-sm">
           <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_at") %></span>
-          <strong><%= l(@team.created_at, format: :full) %></strong>
+          <strong><%= l(@team.created_at, format: :full_date) %></strong>
         </div>
       </div>
 
-      <div class="col-xs-6 col-sm-3">
+      <div class="col-xs-10 col-sm-5">
         <div class="badge-icon bg-primary">
           <span class="glyphicon glyphicon-user"></span>
         </div>
         <div class="well well-sm">
-          <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_joined_on") %></span>
+          <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_by") %></span>
-            <strong><%= l(@user_team.created_at, format: :full) %></strong>
+          <strong><%= t("users.settings.teams.edit.header_created_by_name_email", name: team_created_by(@team).name, email: team_created_by(@team).email) %></strong>
         </div>
       </div>
 
-       <div class="col-xs-12 col-sm-6">
+      <div class="col-xs-8 col-sm-4">
         <div class="badge-icon bg-primary">
           <span class="glyphicon glyphicon-hdd"></span>
         </div>
         <div class="well well-sm">
           <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_space_taken") %></span>
-            <strong><%= "#{number_to_human_size(@team.space_taken)}" %></strong>
+          <strong data-hook="team-space-taken"><%= "#{number_to_human_size(@team.space_taken)}" %></strong>
         </div>
       </div>
     </div>
 
+    <div data-hook="team-header-second-row"></div>
+
     <div>
       <div class="badge-icon bg-primary">
         <%= link_to team_description_path(@team, format: :json),
@@ -73,23 +77,25 @@
     <!-- USERS TABLE -->
     <div class="panel panel-default panel-team-users">
       <div class="panel-heading">
-        <%= t("users.settings.teams.edit.manage_users") %>
+        <%= t("users.settings.teams.edit.team_members_title") %>
       </div>
       <div class="panel-body">
-        <a href="#" class="btn btn-primary" data-trigger="invite-users" data-modal-id="team-invite-users-modal">
+        <div class="col-xs-24 col-sm-12">
+          <a href="#" class="btn btn-primary pull-right row" data-trigger="invite-users" data-modal-id="team-invite-users-modal">
             <span class="glyphicon glyphicon-plus"></span>
             <%= t("users.settings.teams.edit.add_user") %>
           </a>
+        </div>
         <div class="users-datatable">
           <table id="users-table" class="table" data-source="<%= team_users_datatable_path(@team, format: :json) %>">
             <thead>
               <tr>
                 <th id="user-name"><%= t("users.settings.teams.edit.thead_user_name") %></th>
                 <th id="email"><%= t("users.settings.teams.edit.thead_email") %></th>
+                <th id="user-role"><%= t("users.settings.teams.edit.thead_role") %></th>
                 <th id="joined-on"><%= t("users.settings.teams.edit.thead_joined_on") %></th>
                 <th id="status"><%= t("users.settings.teams.edit.thead_status") %></th>
-                <th id="user-role"><%= t("users.settings.teams.edit.thead_role") %></th>
+                <th id="options"><%= t("users.settings.teams.edit.thead_actions") %></th>
-                <th id="options"></th>
               </tr>
             </thead>
             <tbody></tbody>
@@ -98,6 +104,9 @@
       </div>
     </div>
     <!-- End of USERS TABLE -->
+
+    <div data-hook="team-the-end"></div>
+
   </div>
 </div>
 

app/views/users/settings/teams/_user_dropdown.html.erb

@@ -1,7 +1,6 @@
 <% if user_team.user == user %>
   <div class="btn btn-default btn-xs" type="button" disabled="disabled">
     <span class="glyphicon glyphicon-cog"></span>
-    <%= t("users.settings.teams.edit.user_dropdown.btn_label") %>&nbsp;
     <span class="caret"></span>
   </div>
 <% else %>
@@ -14,7 +13,6 @@
          aria-haspopup="true"
          aria-expanded="true">
       <span class="glyphicon glyphicon-cog"></span>
-      <%= t("users.settings.teams.edit.user_dropdown.btn_label") %>&nbsp;
       <span class="caret"></span>
     </div>
     <ul class="dropdown-menu" aria-labelledby="<%= id %>">

config/locales/en.yml

@@ -1024,8 +1024,8 @@ en:
   users:
     enums:
       status:
-        active: "Active"
+        active: "active"
-        pending: "Pending"
+        pending: "pending"
     invitations:
       edit:
         head_title: "Accept invitation"
@@ -1118,23 +1118,24 @@ en:
           description_sublabel: "Describe your team."
           create: "Create team"
         edit:
-          header_created_at: "Created at:"
+          header_created_at: "Created on:"
-          header_joined_on: "Joined on:"
+          header_created_by: "Created by:"
-          header_space_taken: "Space taken:"
+          header_created_by_name_email: "%{name} (%{email})"
+          header_space_taken: "Space usage:"
           header_no_description: "No description"
           name_title: "Edit team name"
           name_label: "Name"
           description_title: "Edit team description"
           description_label: "Description"
-          manage_users: "Manage users"
+          team_members_title: "Team members"
-          add_user: "Invite user"
+          add_user: "Add team members"
-          thead_user_name: "Member name"
+          thead_user_name: "Name"
-          thead_email: "Member email"
+          thead_email: "Email"
           thead_joined_on: "Joined on"
           thead_status: "Status"
           thead_role: "Role"
+          thead_actions: "Actions"
           user_dropdown:
-            btn_label: "Edit"
             role_label: "User role"
             remove_label: "Remove"
           destroy_uo_heading: "Remove user %{user} from team %{team}"