Improve UX of project visiblity level. Improve "Public Access" help page

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

4 files changed, 58 insertions, 27 deletions

diff --git a/app/assets/stylesheets/sections/projects.scss b/app/assets/stylesheets/sections/projects.scss
index 22bd6fb1807..45e52bb23a6 100644
--- a/app/assets/stylesheets/sections/projects.scss
+++ b/app/assets/stylesheets/sections/projects.scss
@@ -18,7 +18,7 @@
   border-bottom: 1px solid #DDD;
   padding-bottom: 25px;
   margin-bottom: 30px;
-  
+
   &.empty-project {
       border-bottom: 0px;
       padding-bottom: 15px;
@@ -112,6 +112,13 @@
       &.restricted {
         color: #888;
       }
+
+      label {
+        float: none;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+      }
     }
     .info {
       display: block;
diff --git a/app/helpers/visibility_level_helper.rb b/app/helpers/visibility_level_helper.rb
index 5cec7f8b4e6..81e10f3685c 100644
--- a/app/helpers/visibility_level_helper.rb
+++ b/app/helpers/visibility_level_helper.rb
@@ -18,17 +18,11 @@ module VisibilityLevelHelper
           haml_concat "Project access must be granted explicitly for each user."
         when Gitlab::VisibilityLevel::INTERNAL
           haml_concat "The project can be cloned by"
-          haml_tag :em, "any logged in user."
-          haml_concat "It will also be listed on the #{link_to "public access directory", public_root_path} for logged in users."
-          haml_tag :em, "Any logged in user"
-          haml_concat "will have #{link_to "Guest", help_permissions_path} permissions on the repository."
+          haml_concat "any logged in user."
         when Gitlab::VisibilityLevel::PUBLIC
           haml_concat "The project can be cloned"
-          haml_tag :em, "without any"
+          haml_concat "without any"
           haml_concat "authentication."
-          haml_concat "It will also be listed on the #{link_to "public access directory", public_root_path}."
-          haml_tag :em, "Any logged in user"
-          haml_concat "will have #{link_to "Guest", help_permissions_path} permissions on the repository."
         end
       end
     end
@@ -48,8 +42,8 @@ module VisibilityLevelHelper
   def visibility_level_label(level)
     Project.visibility_levels.key(level)
   end
-  
+
   def restricted_visibility_levels
     current_user.is_admin? ? [] : gitlab_config.restricted_visibility_levels
   end
-end
\ No newline at end of file
+end
diff --git a/app/views/help/public_access.html.haml b/app/views/help/public_access.html.haml
index 3a8aedc780e..b7579cb5bf6 100644
--- a/app/views/help/public_access.html.haml
+++ b/app/views/help/public_access.html.haml
@@ -1,21 +1,48 @@
 = render layout: 'help/layout' do
   %h3.page-title Public Access
 
-  %p
-    GitLab allows you to open selected projects to be accessed publicly or internally.
-    Projects with either of these visibility levels will be listed in the #{link_to "public access directory", public_root_path}. Internal projects will only be available to authenticated users.
-  %p
+  %p.slead
+    GitLab allows you to open selected projects to be accessed
+    %strong publicly
+    or
+    %strong internally
+    \.
+    %br
+    Projects with either of these visibility levels will be listed in the #{link_to "public access directory", public_root_path}.
+    %br
+    Internal projects will only be available to authenticated users.
+
+  %hr
+  %h4
     = public_icon
-    Public projects will be cloneable
-    %em without any
-    authentication.
+     
+    Public projects
   %p
+    Public project can be cloned
+    %strong without any
+    authentication.
+    %br
+    It will also be listed on the #{link_to "public access directory", public_root_path}."
+    %br
+    %strong Any logged in user
+    will have #{link_to "Guest", help_permissions_path} permissions on the repository."
+
+  %hr
+  %h4
     = internal_icon
-    Internal projects will be cloneable by
-    %em any authenticated user.
+     
+    Internal projects
+  %p
+    Internal project can be cloned by any logged in user.
+    %br
+    It will also be listed on the #{link_to "public access directory", public_root_path} for logged in users.
+    %br
+    Any logged in user will have #{link_to "Guest", help_permissions_path} permissions on the repository.
 
+  %hr
+
+  %h4 How to change project visibility
   %ol
     %li Go to your project dashboard
     %li Click on the "Edit" tab
     %li Change "Visibility Level"
-
diff --git a/app/views/projects/_visibility_level.html.haml b/app/views/projects/_visibility_level.html.haml
index 1bce3ba8cda..7fc257811ca 100644
--- a/app/views/projects/_visibility_level.html.haml
+++ b/app/views/projects/_visibility_level.html.haml
@@ -1,15 +1,18 @@
 .control-group.project-visibility-level-holder
-  = f.label :visibility_level, "Visibility Level"
+  = f.label :visibility_level do
+    Visibility Level
+    = link_to "(?)", help_public_access_path
   - if can_change_visibility_level
     - Gitlab::VisibilityLevel.values.each do |level|
       - restricted = restricted_visibility_levels.include?(level)
       .controls
         = f.radio_button :visibility_level, level, checked: (visibility_level == level), disabled: restricted
         %span.descr{:class => ("restricted" if restricted)}
-          = visibility_level_icon(level)
-          %strong
-            = visibility_level_label(level)
-          = visibility_level_description(level)
+          = label :project_visibility_level, level do
+            = visibility_level_icon(level)
+            %strong
+              = visibility_level_label(level)
+          .light= visibility_level_description(level)
     - unless restricted_visibility_levels.empty?
       .controls
         %span.info
@@ -20,4 +23,4 @@
         = visibility_level_icon(visibility_level)
         %strong
           = visibility_level_label(visibility_level)
-        = visibility_level_description(visibility_level)
\ No newline at end of file
+        .light= visibility_level_description(visibility_level)