From 34cc8f4a60f25bfa2503f0ad006b047fd2c2f81c Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Tue, 24 Nov 2015 17:11:45 +0100
Subject: [PATCH] Improve project members page UI

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
---
 app/assets/stylesheets/pages/groups.scss      |  5 ---
 .../groups/group_members/index.html.haml      |  7 +--
 .../project_members/_group_members.html.haml  |  8 ++--
 .../project_members/_project_member.html.haml |  4 +-
 .../projects/project_members/_team.html.haml  | 16 ++++++-
 .../projects/project_members/index.html.haml  | 45 +++++++------------
 6 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index bcb73a9ac..263993f59 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -1,8 +1,3 @@
-.new-group-member-holder {
-  margin-top: 10px;
-  padding-top: 20px;
-}
-
 .member-search-form {
   float: left;
 }
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index b3a811b26..c83766e72 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -1,9 +1,6 @@
-- @blank_container = true
 - page_title "Members"
 - header_title group_title(@group, "Members", group_group_members_path(@group))
-
-
-
+- @blank_container = true
 
 .group-members-page
   - if current_user && current_user.can?(:admin_group_member, @group)
@@ -14,8 +11,6 @@
         - if should_user_see_group_roles?(current_user, @group)
           %p.light
             Members of group have access to all group projects.
-            Read more about permissions
-            %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
         .new-group-member-holder
           = render "new_group_member"
 
diff --git a/app/views/projects/project_members/_group_members.html.haml b/app/views/projects/project_members/_group_members.html.haml
index 43e92437c..0c73d7e34 100644
--- a/app/views/projects/project_members/_group_members.html.haml
+++ b/app/views/projects/project_members/_group_members.html.haml
@@ -4,11 +4,11 @@
     group members
     %small
       (#{members.count})
-    .panel-head-actions
-      = link_to group_group_members_path(@group), class: 'btn btn-sm' do
-        %i.fa.fa-pencil-square-o
+    .pull-right
+      = link_to group_group_members_path(@group), class: 'btn' do
+        = icon('pencil-square-o')
         Edit group members
-  %ul.well-list
+  %ul.content-list
     - members.each do |member|
       = render 'groups/group_members/group_member', member: member, show_controls: false
     - if members.count > 20
diff --git a/app/views/projects/project_members/_project_member.html.haml b/app/views/projects/project_members/_project_member.html.haml
index f07cd97e6..05bf3a7ef 100644
--- a/app/views/projects/project_members/_project_member.html.haml
+++ b/app/views/projects/project_members/_project_member.html.haml
@@ -4,7 +4,7 @@
 %li{class: "#{dom_class(member)} js-toggle-container project_member_row access-#{member.human_access.downcase}", id: dom_id(member)}
   %span.list-item-name
     - if member.user
-      = image_tag avatar_icon(user, 16), class: "avatar s16", alt: ''
+      = image_tag avatar_icon(user, 24), class: "avatar s24", alt: ''
       %strong
         = link_to user.name, user_path(user)
       %span.cgray= user.username
@@ -14,7 +14,7 @@
         %label.label.label-danger
           %strong Blocked
     - else
-      = image_tag avatar_icon(member.invite_email, 16), class: "avatar s16", alt: ''
+      = image_tag avatar_icon(member.invite_email, 24), class: "avatar s24", alt: ''
       %strong
         = member.invite_email
       %span.cgray
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index b807fb2cc..8f4c61342 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,9 +1,21 @@
-.panel.panel-default.prepend-top-20
+.panel.panel-default
   .panel-heading
     %strong #{@project.name}
     project members
     %small
       (#{members.count})
-  %ul.well-list
+    .pull-right
+      = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
+        .form-group
+          = search_field_tag :search, params[:search], { placeholder: 'Find existing member by name', class: 'form-control', spellcheck: false }
+        = button_tag class: 'btn' do
+          = icon("search")
+  %ul.content-list
     - members.each do |project_member|
       = render 'project_member', member: project_member
+
+:javascript
+  $('form.member-search-form').on('submit', function (event) {
+    event.preventDefault();
+    Turbolinks.visit(this.action + '?' + $(this).serialize());
+  });
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index 9fc4be583..29225a363 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -1,36 +1,21 @@
 - page_title "Members"
 = render "header_title"
+- @blank_container = true
 
-.gray-content-block.top-block
-  .clearfix.js-toggle-container
-    = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
-      .form-group
-        = search_field_tag :search, params[:search], { placeholder: 'Find existing member by name', class: 'form-control search-text-input', spellcheck: false }
-      = button_tag 'Search', class: 'btn'
-
-    - if can?(current_user, :admin_project_member, @project)
-      %span.pull-right
-        = button_tag class: 'btn btn-new btn-grouped js-toggle-button', type: 'button' do
-          Add members
-          %i.fa.fa-chevron-down
-        = link_to import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-grouped", title: "Import members from another project" do
-          Import members
-
-      .js-toggle-content.hide.new-group-member-holder
+.project-members-page
+  - if can?(current_user, :admin_project_member, @project)
+    .panel.panel-default
+      .panel-heading
+        Add new user to project
+        .pull-right
+          = link_to import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-grouped", title: "Import members from another project" do
+            Import members
+      .panel-body
+        %p.light
+          Users with access to this project are listed below.
         = render "new_project_member"
 
-%p.prepend-top-default.light
-  Users with access to this project are listed below.
-  Read more about project permissions
-  %strong= link_to "here", help_page_path("permissions", "permissions"), class: "vlink"
-
-= render "team", members: @project_members
-
-- if @group
-  = render "group_members", members: @group_members
+  = render "team", members: @project_members
 
-:javascript
-  $('form.member-search-form').on('submit', function (event) {
-    event.preventDefault();
-    Turbolinks.visit(this.action + '?' + $(this).serialize());
-  });
+  - if @group
+    = render "group_members", members: @group_members
-- 
2.30.9