Improve UI for member row on project/group members pages

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

2 files changed, 53 insertions, 45 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index a12c0bba44a..aed0b44d91b 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -137,6 +137,15 @@ ul.content-list {
       padding-top: 1px;
       float: right;
 
+      > .control-text {
+        margin-right: $gl-padding-top;
+        line-height: 40px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
       > .btn,
       > .btn-group {
         margin-right: $gl-padding-top;
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index a137fde1c13..8701c8deca0 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -3,75 +3,74 @@
 - user = member.user
 
 %li.js-toggle-container{ class: dom_class(member), id: dom_id(member) }
-  %span{ class: ("list-item-name" if show_controls) }
-    - if user
-      = image_tag avatar_icon(user, 24), class: "avatar s24", alt: ''
-      %strong
-        = link_to user.name, user_path(user)
-      %span.cgray= user.username
-
-      - if user == current_user
-        %span.label.label-success It's you
-
-      - if user.blocked?
-        %label.label.label-danger
-          %strong Blocked
-
-      - if member.request?
-        %span.cgray
-          – Requested
-          = time_ago_with_tooltip(member.requested_at)
-      - else
-        %span.cgray
-          = "(joined #{time_ago_with_tooltip(member.created_at)})"
-
-    - else
-      = image_tag avatar_icon(member.invite_email, 24), class: "avatar s24", alt: ''
-      %strong= member.invite_email
-      %span.cgray
-        – Invited
-        - if member.created_by
-          by
-          = link_to member.created_by.name, user_path(member.created_by)
-        = time_ago_with_tooltip(member.created_at)
-
-      - if show_controls && can?(current_user, action_member_permission(:admin, member), member.source)
-        = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
-                  method: :post,
-                  class: 'btn-xs btn'
-
   - if show_roles
-    %span.pull-right
-      %strong= member.human_access
+    .controls
+      %strong.control-text= member.human_access
       - if show_controls
+        - if !user && can?(current_user, action_member_permission(:admin, member), member.source)
+          = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
+                    method: :post,
+                    class: 'btn'
+
         - if can?(current_user, action_member_permission(:update, member), member)
           = button_tag icon('pencil'),
                        type: 'button',
-                       class: 'btn-xs btn btn-grouped inline js-toggle-button',
+                       class: 'btn inline js-toggle-button',
                        title: 'Edit access level'
 
           - if member.request?
-             
             = link_to icon('check inverse'), polymorphic_path([:approve_access_request, member]),
                       method: :post,
-                      class: 'btn-xs btn btn-success',
+                      class: 'btn btn-success',
                       title: 'Grant access'
 
         - if can?(current_user, action_member_permission(:destroy, member), member)
-           
           - if current_user == user
             = link_to icon('sign-out', text: 'Leave'), polymorphic_path([:leave, member.source, :members]),
                       method: :delete,
                       data: { confirm: leave_confirmation_message(member.source) },
-                      class: 'btn-xs btn btn-remove'
+                      class: 'btn btn-remove'
           - else
             = link_to icon('trash'), member,
                       remote: true,
                       method: :delete,
                       data: { confirm: remove_member_message(member) },
-                      class: 'btn-xs btn btn-remove',
+                      class: 'btn btn-remove',
                       title: remove_member_title(member)
 
+
+  %span{ class: ("list-item-name" if show_controls) }
+    - if user
+      = image_tag avatar_icon(user, 40), class: "avatar s40", alt: ''
+      %strong
+        = link_to user.name, user_path(user)
+      %span.cgray= user.username
+
+      - if user == current_user
+        %span.label.label-success It's you
+
+      - if user.blocked?
+        %label.label.label-danger
+          %strong Blocked
+
+      .cgray
+        - if member.request?
+          – Requested
+          = time_ago_with_tooltip(member.requested_at)
+        - else
+          Joined #{time_ago_with_tooltip(member.created_at)}
+
+    - else
+      = image_tag avatar_icon(member.invite_email, 40), class: "avatar s40", alt: ''
+      %strong= member.invite_email
+      .cgray
+        Invited
+        - if member.created_by
+          by
+          = link_to member.created_by.name, user_path(member.created_by)
+        = time_ago_with_tooltip(member.created_at)
+
+  - if show_roles
     .edit-member.hide.js-toggle-content
       %br
       = form_for member, remote: true do |f|