Improve snippets UX

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

app/assets/stylesheets/gitlab_bootstrap/common.scss

@@ -93,6 +93,12 @@ pre.well-pre {
   font-size: 12px;
   font-style: normal;
   font-weight: normal;
+
+  &.label-gray {
+    background-color: #eee;
+    color: #999;
+    text-shadow: none;
+  }
 }
 
 /** Big Labels **/

app/assets/stylesheets/gitlab_bootstrap/forms.scss

@@ -3,6 +3,16 @@ form {
 
   label {
     @extend .control-label;
+
+    &.radio-label {
+      text-align: left;
+      width: 100%;
+      margin-left: 0;
+
+      input[type="radio"] {
+        margin-top: 1px !important;
+      }
+    }
   }
 }
 

app/views/snippets/_form.html.haml

@@ -13,9 +13,20 @@
       = f.label :title
       .controls= f.text_field :title, placeholder: "Example Snippet", class: 'input-xlarge', required: true
     .control-group
-      = f.label "Private?"
+      = f.label "Access"
       .controls
-        = f.check_box :private, {class: ''}
+        = f.label :private_true, class: 'radio-label' do
+          = f.radio_button :private, true
+          %span
+            %strong Private
+            (only you can see this snippet)
+        %br
+        = f.label :private_false, class: 'radio-label' do
+          = f.radio_button :private, false
+          %span
+            %strong Public
+            (GitLab users can can see this snippet)
+
     .control-group
       .file-editor
         = f.label :file_name, "File"
@@ -33,9 +44,10 @@
       - else
         = f.submit 'Save', class: "btn-save btn"
 
-      = link_to "Cancel", snippets_path(@project), class: "btn btn-cancel"
       - unless @snippet.new_record?
-        .pull-right= link_to 'Destroy', snippet_path(@snippet), confirm: 'Removed snippet cannot be restored! Are you sure?', method: :delete, class: "btn pull-right danger delete-snippet", id: "destroy_snippet_#{@snippet.id}"
+        .pull-right.prepend-left-20
+          = link_to 'Remove', snippet_path(@snippet), confirm: 'Removed snippet cannot be restored! Are you sure?', method: :delete, class: "btn btn-remove delete-snippet", id: "destroy_snippet_#{@snippet.id}"
+      = link_to "Cancel", snippets_path(@project), class: "btn btn-cancel"
 
 
 :javascript

app/views/snippets/_snippet.html.haml

@@ -3,7 +3,7 @@
     = link_to reliable_snippet_path(snippet) do
       = truncate(snippet.title, length: 60)
       - if snippet.private?
-        %span.label.label-success
+        %span.label.label-gray
           %i.icon-lock
           private
     %span.cgray.monospace.tiny.pull-right

features/steps/snippets/snippets.rb

@@ -19,7 +19,7 @@ class SnippetsFeature < Spinach::FeatureSteps
   end
 
   And 'I click link "Destroy"' do
-    click_link "Destroy"
+    click_link "Remove"
   end
 
   And 'I submit new snippet "Personal snippet three"' do
@@ -46,7 +46,7 @@ class SnippetsFeature < Spinach::FeatureSteps
   end
 
   And 'I uncheck "Private" checkbox' do
-    find(:xpath, "//input[@id='personal_snippet_private']").set true
+    choose "Public"
     click_button "Save"
   end