Updated project group sharing UI

Closes #13991

8 files changed, 72 insertions, 62 deletions

diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index eae5f062dda..6efc6ec1e4b 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -7,13 +7,11 @@
   .select2-choice {
     background: #fff;
     border-color: $input-border;
-    border-color: $border-white-light;
     height: 35px;
     padding: $gl-vert-padding $gl-btn-padding;
     font-size: $gl-font-size;
     line-height: 1.42857143;
-
-    @include border-radius($border-radius-default);
+    border-radius: $border-radius-base;
 
     .select2-arrow {
       background-image: none;
@@ -199,6 +197,14 @@
   }
 }
 
+.select2-highlighted {
+  .group-result {
+    .group-path {
+      color: #fff;
+    }
+  }
+}
+
 .group-result {
   .group-image {
     float: left;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 30ca27ab104..300f941bda6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -71,8 +71,8 @@ $gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
 $border-radius-default: 2px;
 $btn-transparent-color: #8f8f8f;
-$ssh-key-icon-color: #8f8f8f;
-$ssh-key-icon-size: 18px;
+$settings-icon-color: #8f8f8f;
+$settings-icon-size: 18px;
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index a9656e5cae7..01f98479623 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -18,7 +18,8 @@
 }
 
 .account-btn-link,
-.profile-settings-sidebar a {
+.profile-settings-sidebar a,
+.settings-sidebar a {
   color: $md-link-color;
 }
 
@@ -123,12 +124,6 @@
   }
 }
 
-.key-icon {
-  color: $ssh-key-icon-color;
-  font-size: $ssh-key-icon-size;
-  line-height: 42px;
-}
-
 .key-created-at {
   line-height: 42px;
 }
@@ -180,14 +175,6 @@
   }
 }
 
-.profile-settings-message {
-  line-height: 32px;
-  color: $warning-message-color;
-  background-color: $warning-message-bg;
-  border: 1px solid $warning-message-border;
-  border-radius: $border-radius-base;
-}
-
 .oauth-applications {
   form {
     display: inline-block;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
new file mode 100644
index 00000000000..67dbeca7bbd
--- /dev/null
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -0,0 +1,14 @@
+.settings-list-icon {
+  color: $settings-icon-color;
+  font-size: $settings-icon-size;
+  line-height: 42px;
+}
+
+.settings-message {
+  padding: 5px;
+  line-height: 1.3;
+  color: $warning-message-color;
+  background-color: $warning-message-bg;
+  border: 1px solid $warning-message-border;
+  border-radius: $border-radius-base;
+}
diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml
index 79df17ba612..3998e66f40d 100644
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
@@ -44,7 +44,7 @@
                         = icon('pencil')
                       = render 'delete_form', application: application, small: true
         - else
-          .profile-settings-message.text-center
+          .settings-message.text-center
             You don't have any applications
     .oauth-authorized-applications.prepend-top-20.append-bottom-default
       - if user_oauth_applications?
@@ -78,5 +78,5 @@
                   %td= token.scopes
                   %td= render 'doorkeeper/authorized_applications/delete_form', token: token
       - else
-        .profile-settings-message.text-center
+        .settings-message.text-center
           You don't have any authorized applications
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 4dbaa662b66..3276db6692c 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,6 +1,6 @@
 %li.key-list-item
   .pull-left.append-right-10
-    = icon 'key', class: "key-icon hidden-xs"
+    = icon 'key', class: "settings-list-icon hidden-xs"
   .key-list-item-info
     = link_to path_to_key(key, is_admin), class: "title" do
       = key.title
diff --git a/app/views/profiles/keys/_key_table.html.haml b/app/views/profiles/keys/_key_table.html.haml
index 296cafa6e31..e78763bdcb2 100644
--- a/app/views/profiles/keys/_key_table.html.haml
+++ b/app/views/profiles/keys/_key_table.html.haml
@@ -4,7 +4,7 @@
   %ul.well-list
     = render partial: 'profiles/keys/key', collection: @keys, locals: { is_admin: is_admin }
 - else
-  %p.profile-settings-message.text-center
+  %p.settings-message.text-center
     - if is_admin
       There are no SSH keys associated with this account.
     - else
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