Updated members UI

app/assets/javascripts/dispatcher.js

@@ -132,7 +132,7 @@
           break;
         case 'projects:project_members:index':
           new gl.MemberExpirationDate();
-          new ProjectMembers();
+          new gl.ProjectMembers();
           new UsersSelect();
           break;
         case 'groups:new':

app/assets/javascripts/project_members.js

-(function() {
-  this.ProjectMembers = (function() {
-    function ProjectMembers() {
-      $('li.project_member').bind('ajax:success', function() {
-        return $(this).fadeOut();
-      });
-    }
-    return ProjectMembers;
-  })();
-}).call(this);

app/assets/javascripts/project_members.js.es6

+((w) => {
+  window.gl = window.gl || {};
+
+  class ProjectMembers {
+    constructor() {
+      this.removeListeners();
+      this.addListeners();
+    }
+
+    removeListeners() {
+      $('.project_member').off('ajax:success');
+      $('.js-member-update-control').off('change');
+    }
+
+    addListeners() {
+      $('.project_member').on('ajax:success', this.removeRow);
+      $('.js-member-update-control').on('change', function () {
+        console.log($(this).val());
+      });
+    }
+
+    removeRow(e) {
+      const $target = $(e.target);
+
+      if ($target.hasClass('btn-remove')) {
+        $target.fadeOut();
+      }
+    }
+
+    submitForm() {
+      
+    }
+  }
+
+  gl.ProjectMembers = ProjectMembers;
+})(window);

app/assets/stylesheets/framework/selects.scss

@@ -86,7 +86,7 @@
     background: none;
 
     .select2-search-field input {
-      padding: $gl-padding / 2;
+      padding: 5px $gl-padding / 2;
       font-size: 13px;
       height: auto;
       font-family: inherit;
@@ -191,6 +191,10 @@
   &.input-clamp {
     max-width: 100%;
   }
+
+  &.input-full {
+    width: 100%;
+  }
 }
 
 .select2-highlighted {

app/assets/stylesheets/pages/members.scss

+.project-members-new {
+  > h5 {
+    font-weight: normal;
+  }
+}
+
+.member {
+  .controls {
+    display: flex;
+    width: 400px;
+  }
+
+  .form-horizontal {
+    display: flex;
+    flex: 1;
+    margin-top: 3px;
+  }
+
+  .member-form-control {
+    width: 50%;
+  }
+}

app/views/projects/project_members/_new_project_member.html.haml

-= form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project), html: { class: 'form-horizontal users-project-form' } do |f|
-  .form-group
-    = f.label :user_ids, "People", class: 'control-label'
-    .col-sm-10
-      = users_select_tag(:user_ids, multiple: true, class: 'input-large', scope: :all, email_user: true)
-      .help-block
+= form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project) do |f|
+  .row
+    .col-md-4.col-lg-6
+      = users_select_tag(:user_ids, multiple: true, class: "input-full", scope: :all, email_user: true)
+      .help-block.append-bottom-10
         Search for users by name, username, or email, or invite new ones using their email address.
 
-  .form-group
-    = f.label :access_level, "Project Access", class: 'control-label'
-    .col-sm-10
-      = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "project-access-select select2"
-      .help-block
-        Read more about role permissions
-        %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
+    .col-md-3.col-lg-2
+      = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
+      .help-block.append-bottom-10
+        = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
+        about role permissions
 
-  .form-group
-    = f.label :expires_at, 'Access expiration date', class: 'control-label'
-    .col-sm-10
+    .col-md-3.col-lg-2
       .clearable-input
-        = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date'
+        = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
         %i.clear-icon.js-clear-input
-      .help-block
+      .help-block.append-bottom-10
         On this date, the user(s) will automatically lose access to this project.
 
-  .form-actions
-    = f.submit 'Add users to project', class: "btn btn-create"
+    .col-md-2
+      = f.submit "Add to project", class: "btn btn-create btn-block"

app/views/projects/project_members/_team.html.haml

 .panel.panel-default
   .panel-heading
+    Users with access to
     %strong #{@project.name}
-    project members
     %span.badge= members.size
     .controls
       = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do

app/views/projects/project_members/index.html.haml

 - page_title "Members"
 
 .project-members-page.js-project-members-page.prepend-top-default
+  %h4
+    Members
+  %hr
   - if can?(current_user, :admin_project_member, @project)
-    .panel.panel-default
-      .panel-heading
-        Add new user to project
-        .controls
-          = 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.
+    .project-members-new.append-bottom-default
+      %h5.clearfix
+        Add new user to
+        %strong= @project.name
+        -# = link_to "Import", import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-default pull-right", title: "Import members from another project"
       = render "new_project_member"
 
       = render 'shared/members/requests', membership_source: @project, requesters: @requesters
 
+  %h5.append-bottom-default
+    Existing users and groups
   = render 'team', members: @project_members
 
   - if @group

app/views/shared/members/_member.html.haml

@@ -2,23 +2,24 @@
 - show_controls = local_assigns.fetch(:show_controls, true)
 - user = member.user
 
-%li.js-toggle-container{ class: dom_class(member), id: dom_id(member) }
+%li.member{ class: dom_class(member), id: dom_id(member) }
   - if show_roles
     .controls
-      %strong.control-text= member.human_access
       - if show_controls
+        - if @project.owner != user
+          = form_for member, remote: true, html: { class: 'form-horizontal' } do |f|
+            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can?(current_user, action_member_permission(:update, member), member)
+            .prepend-left-5.append-right-10.clearable-input.member-form-control
+              = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can?(current_user, action_member_permission(:update, member), member)
+              %i.clear-icon.js-clear-input
           - 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'
+        - else
+          Owner
 
-        - if can?(current_user, action_member_permission(:update, member), member)
-          = button_tag icon('pencil'),
-                       type: 'button',
-                       class: 'btn inline js-toggle-button',
-                       title: 'Edit'
-
-          - if member.request?
+        - if member.request? && can?(current_user, action_member_permission(:update, member), member)
           = link_to icon('check inverse'), polymorphic_path([:approve_access_request, member]),
                     method: :post,
                     class: 'btn btn-success',
@@ -44,7 +45,7 @@
       = image_tag avatar_icon(user, 40), class: "avatar s40", alt: ''
       %strong
         = link_to user.name, user_path(user)
-      %span.cgray= user.username
+      %span.cgray= user.to_reference
 
       - if user == current_user
         %span.label.label-success It's you
@@ -73,20 +74,3 @@
           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, html: { class: 'form-horizontal' }  do |f|
-        .form-group
-          = label_tag "member_access_level_#{member.id}", 'Project access', class: 'control-label'
-          .col-sm-10
-            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control', id: "member_access_level_#{member.id}"
-        .form-group
-          = label_tag "member_expires_at_#{member.id}", 'Access expiration date', class: 'control-label'
-          .col-sm-10
-            .clearable-input
-              = f.text_field :expires_at, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date', id: "member_expires_at_#{member.id}"
-              %i.clear-icon.js-clear-input
-        .prepend-top-10
-          = f.submit 'Save', class: 'btn btn-save btn-sm'