Updated project group sharing UI

Closes #13991

1 files changed, 41 insertions, 38 deletions

diff --git a/app/views/projects/group_links/index.html.haml b/app/views/projects/group_links/index.html.haml
index 13f5fc141fa..627419c1b18 100644
--- a/app/views/projects/group_links/index.html.haml
+++ b/app/views/projects/group_links/index.html.haml
@@ -1,41 +1,44 @@
 - page_title "Groups"
-%h3.page_title Share project with other groups
-%p.light
-  Projects can be stored in only one group at once. However you can share a project with other groups here.
-%hr
-- if @group_links.present?
-  .enabled-groups.panel.panel-default
-    .panel-heading
-      Already shared with
-    %ul.well-list
-      - @group_links.each do |group_link|
-        - group = group_link.group
-        %li
-          .pull-right
-            = link_to namespace_project_group_link_path(@project.namespace, @project, group_link), method: :delete, class: 'btn btn-sm' do
-              %i.icon-remove
-              disable sharing
-          = link_to group do
-            %strong
-              %i.icon-folder-open
-              = group.name
-          %br
-          .light up to #{group_link.human_access}
-
-
-.available-groups
-  %h4
-    Can be shared with
-  %div
-    = form_tag namespace_project_group_links_path(@project.namespace, @project), method: :post, class: 'form-horizontal' do
+.row.prepend-top-default
+  .col-lg-3.settings-sidebar
+    %h4.prepend-top-0
+      Share project with other groups
+    %p
+      Projects can be stored in only one group at once. However you can share a project with other groups here.
+  .col-lg-9
+    %h5.prepend-top-0
+      Set a group to share
+    = form_tag namespace_project_group_links_path(@project.namespace, @project), method: :post do
       .form-group
-        = label_tag :link_group_id, 'Group', class: 'control-label'
-        .col-sm-10
-          = groups_select_tag(:link_group_id, skip_group: @project.group.try(:path))
+        = label_tag :link_group_id, "Group", class: "label-light"
+        = groups_select_tag(:link_group_id, skip_group: @project.group.try(:path))
       .form-group
-        = label_tag :link_group_access, 'Max access level', class: 'control-label'
-        .col-sm-10
-          = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control"
-      .form-actions
-        = submit_tag "Share", class: "btn btn-create"
-
+        = label_tag :link_group_access, "Max access level", class: "label-light"
+        = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control"
+      = submit_tag "Share", class: "btn btn-create"
+  .col-sm-12
+    %hr
+  .col-lg-3.settings-sidebar
+    %h4.prepend-top-0
+  .col-lg-9.append-bottom-default
+    %h5.prepend-top-0
+      Groups you share with (#{@group_links.size})
+    - if @group_links.present?
+      %ul.well-list
+        - @group_links.each do |group_link|
+          - group = group_link.group
+          %li
+            .pull-left.append-right-10.hidden-xs
+              = icon("folder-open-o", class: "settings-list-icon")
+            .pull-left
+              = link_to group do
+                = group.name
+              %br
+              up to #{group_link.human_access}
+            .pull-right
+              = link_to namespace_project_group_link_path(@project.namespace, @project, group_link), method: :delete, class: "btn btn-transparent" do
+                %span.sr-only disable sharing
+                = icon("trash")
+    - else
+      .settings-message.text-center
+        There are no groups with access to your project, add one in the form above