From 5542c9456c44816d45caba42b00389da0b1d1f26 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 25 Apr 2016 14:42:17 +0100
Subject: [PATCH] Updated project group sharing UI
Closes #13991
---
app/assets/stylesheets/framework/selects.scss | 12 ++-
.../stylesheets/framework/variables.scss | 4 +-
app/assets/stylesheets/pages/profile.scss | 17 +---
app/assets/stylesheets/pages/settings.scss | 14 ++++
.../doorkeeper/applications/index.html.haml | 4 +-
app/views/profiles/keys/_key.html.haml | 2 +-
app/views/profiles/keys/_key_table.html.haml | 2 +-
.../projects/group_links/index.html.haml | 79 ++++++++++---------
8 files changed, 72 insertions(+), 62 deletions(-)
create mode 100644 app/assets/stylesheets/pages/settings.scss
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
--
2.30.9