Style checkout instructions and url according to visual

This commit provides:

* The checkout instructions as a notification-box with info icon
* A style for affixed inputs in the toolbar
* The checkout URL as an affixed input
* The checkout URL inside the notifcation-box on empty repository pages
* Animations for the checkout instructions toggle
* Restyle revision section

app/assets/javascripts/repository_navigation.js

@@ -42,6 +42,12 @@
       selects.prop('disable', false);
     }
 
+    /*
+    Enable select2
+    */
+    branch.select2();
+    tag.select2();
+
     /*
     If we're viewing a tag or branch, don't display it in the
     revision box
@@ -68,6 +74,33 @@
         sendForm();
       }
     });
+
+
+    /*
+    Close checkout instructions
+    */
+    var checkout = $('#repository--checkout-instructions'),
+      toggle = $('#repository--checkout-instructions-toggle');
+
+    if (checkout.length > 0) {
+      checkout.find('.notification-box--close').click(function(e){
+        e.preventDefault();
+        checkout.hide().prop('hidden', true);
+        toggle.removeClass('-pressed');
+      });
+
+      toggle.click(function(e) {
+        e.preventDefault();
+        if (checkout.prop('hidden')) {
+          checkout.prop('hidden', false);
+          checkout.slideDown();
+        } else {
+          checkout.slideUp(function() { checkout.prop('hidden', true); });
+        }
+
+        toggle.toggleClass('-pressed');
+      });
+    }
   });
 }(jQuery));
 

app/assets/stylesheets/content/_forms.sass

@@ -387,14 +387,14 @@ fieldset.form--fieldset
 .form--text-field
   @extend %input-style
 
-  &[readonly].-clickable
-    cursor: pointer
-    background: white
-
 .form--text-field,
 #{$text-input-selectors}
   line-height: 1.5
 
+input[readonly].-clickable
+  cursor: pointer
+  background: white
+
 .form--select
   @extend %input-style
   line-height: normal

app/assets/stylesheets/content/_notifications.lsg

@@ -8,6 +8,16 @@
 </div>
 ```
 
+## Info
+
+```
+<div class="notification-box -info">
+  <div class="notification-box--content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia laudantium ea delectus incidunt accusantium repudiandae deserunt excepturi non esse vero distinctio et reprehenderit, cupiditate quidem consectetur rerum iste magnam voluptatibus.</p>
+  </div>
+</div>
+```
+
 ## Error
 
 ```

app/assets/stylesheets/content/_notifications.sass

@@ -49,6 +49,8 @@ $nm-color-warning-border: #b5b078
 $nm-color-warning-icon: #000
 $nm-color-warning-background: #f4f4aa
 
+$nm-color-info-icon: #000
+
 $nm-color-border: #8fc0db
 $nm-color-background: #e3f5ff
 $nm-padding-box: rem-calc(10px)
@@ -76,6 +78,10 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   @extend .icon-attention1:before
   color: $nm-color-warning-icon
 
+%nm-icon-info
+  @extend .icon-info:before
+  color: $nm-color-info-icon
+
 %error-placeholder
   background-color: $nm-color-error-background
   border-color: $nm-color-error-border
@@ -125,7 +131,10 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
     &:hover
       text-decoration: none
 
-  &.-error, &.-success, &.-warning
+  &.-error,
+  &.-success,
+  &.-warning,
+  &.-info,
     padding: $nm-box-padding
 
   &.-error
@@ -149,6 +158,10 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
       background-color: $nm-color-error-background
       border-color: $nm-color-error-border
 
+  &.-info::before
+    @include messages-icon
+    @extend %nm-icon-info
+
   &.-upload
     padding: $nm-upload-box-padding
 
@@ -167,6 +180,8 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
     color: $nm-color-success-icon
   &.-warning
     color: $nm-color-warning-icon
+  &.-info
+    color: $nm-color-info-icon
 
 .notification-box--wrapper
   position: absolute

app/assets/stylesheets/layout/_toolbar.sass

@@ -67,10 +67,19 @@
     &.toolbar-item
       margin: 0 5px //$drop-nav-spacing // spacing between nav items
 
-  button, .button, input[type=text], input[type=number], select
+  button, .button, input[type=text], input[type=number], select,
+  .toolbar-input--affix, .select2-choice
     margin: 0.625rem 0 0
     height: 40px
     line-height: 22px
+    border: 1px solid $toolbar-item--border-color
+  button, .button, .toolbar-input--affix
+    background: $toolbar-item--bg-color
+
+    &.-pressed, &:active
+      background: $toolbar-item--bg-color-pressed
+      box-shadow: inset 0 2px 3px rgba(0,0,0,.125)
+
   select
     //extend forms select
     @extend .form--select
@@ -117,6 +126,26 @@
     overflow-y: auto
     max-height: 500px
 
+.toolbar-input--group
+  display: flex
+
+  input
+    flex: 1
+
+  .toolbar-input--affix
+    color: $inlinelabel-color
+    border-radius: 2px
+    padding: 0 5px
+    display: flex
+    align-items: center
+
+    &.-prepend
+      border-right: none !important
+
+    &.-append
+      border-left: none !important
+
+
 #querySelectDropdown
   min-width: 250px
   border: 1px solid #dddddd

app/assets/stylesheets/open_project_global/_variables.sass

@@ -121,6 +121,10 @@ $main-menu-sidebar-link-color:                  #333333 !default
 $main-menu-sidebar-h3-border-top-color:         #1F4654 !default
 $main-menu-sidebar-h3-font-size:                15px !default
 
+$toolbar-item--bg-color:                        #F8F8F8
+$toolbar-item--bg-color-pressed:                #E9E9E9
+$toolbar-item--border-color:                    #DDD
+
 $breadcrumb-height:                             40px !default
 $breadcrumb-bg-color:                           #F8F8F8 !default
 $breadcrumb-border-color:                       #E7E7E7 !default

app/assets/stylesheets/scm.css.sass

@@ -74,6 +74,9 @@ li.change
     float: left
     margin-right: 1em
 
+.repository--checkout-instructions--url
+  margin-top: 1rem
+
 table.filecontent
   border: 1px solid #ccc
   border-collapse: collapse

app/views/repositories/_checkout_instructions.html.erb

@@ -1,30 +1,31 @@
-<% if instructions.present? && instructions.available? %>
-<form class="form -bordered -compressed">
-  <fieldset class="form--fieldset -collapsible">
-    <legend class="form--fieldset-legend" title="<%= l('repositories.checkout.instructions') %>"
-            onclick="toggleFieldset(this);"><%= l('repositories.checkout.instructions') %></legend>
-    <div class="form--field">
-        <label class="form--label"><%= l('repositories.checkout.url') %></label>
-        <div class="form--field-container">
-            <div class="form--field-affix">
-              <%= instructions.checkout_command %>
-            </div>
-            <div class="form--text-field-container -xwide">
-                <input type="text" class="form--text-field -clickable"
-                onclick="this.focus(); this.select()"
-                readonly="readonly" value="<%= instructions.checkout_url %>">
-            </div>
-        </div>
-        <div class="form--field-instructions -no-italic">
-          <%= simple_format instructions.instructions %>
-          <% if instructions.manages_permissions? %>
-            <p>
-              <span><%= l('repositories.checkout.access_permission') %></span>
-              <strong><%= l("repositories.checkout.access.#{instructions.permission}") %></strong>
-            </p>
-          <% end %>
+<div id="repository--checkout-instructions" class="notification-box -info">
+  <a href="#" class="notification-box--close">&times;</a>
+  <div class="notification-box--content">
+    <p>
+    <%= simple_format instructions.instructions %>
+    <% if instructions.manages_permissions? %>
+      <br/>
+      <span><%= l('repositories.checkout.access_permission') %>:</span>
+      <strong><%= l("repositories.checkout.access.#{instructions.permission}") %></strong>
+    <% end %>
+    </p>
+  <% if show_url %>
+    <div class="repository--checkout-instructions--url">
+      <form class="form">
+        <div class="form--field">
+          <div class="form--field-container">
+              <div class="form--field-affix">
+                <%= instructions.checkout_command %>
+              </div>
+              <div class="form--text-field-container -xwide">
+                  <input type="text" class="form--text-field -clickable"
+                  onclick="this.focus(); this.select()"
+                  readonly="readonly" value="<%= instructions.checkout_url %>">
+              </div>
+          </div>
         </div>
+      </form>
     </div>
-  </fieldset>
-</form>
-<% end %>
+  <% end %>
+  </div>
+</div>

app/views/repositories/_navigation.html.erb

@@ -30,28 +30,44 @@ See doc/COPYRIGHT.rdoc for more details.
 <% content_for :header_tags do %>
   <%= javascript_include_tag 'repository_navigation' %>
 <% end %>
-<% merge ||= {} %>
 <%= toolbar title: l(:label_repository) do %>
+  <% if @instructions && @instructions.available? %>
+  <li class="toolbar-item">
+    <div class="toolbar-input--group">
+      <div class="toolbar-input--affix -prepend">
+        <span><%= @instructions.checkout_command %></span>
+      </div>
+      <input type="text" class="-clickable" size="40"
+             onclick="this.focus(); this.select()"
+             readonly="readonly" value="<%= @instructions.checkout_url %>">
+    </div>
+  </li>
+  <li class="toolbar-item">
+    <a id="repository--checkout-instructions-toggle" class="button -pressed" href="javascript:"
+       title="<%= l('repositories.checkout.show_instructions') %>">
+      <i class="button--icon icon-info"></i>
+      <span class="button--text"></span>
+    </a>
+  </li>
+  <% end %>
   <% if User.current.allowed_to?(:browse_repository, @project) %>
   <li class="toolbar-item">
-    <%= link_to stats_project_repository_path(@project), class: 'button' do %>
+    <%= link_to stats_project_repository_path(@project),
+        class: 'button', title: l(:label_statistics) do %>
       <i class="button--icon icon-stats1"></i>
-      <span class="button--text"><%= l(:label_statistics) %></span>
+      <span class="button--text"></span>
     <% end %>
   </li>
   <% end %>
   <%= call_hook(:repositories_navigation_toolbar, { repository: @repository, project: @project }) %>
   <% if User.current.allowed_to?(:manage_repository, @project) %>
     <li class="toolbar-item">
-      <%= link_to settings_project_path(@project, tab: 'repository') , class: 'button' do %>
+      <%= link_to settings_project_path(@project, tab: 'repository'),
+          class: 'button', title: l(:label_settings) do %>
         <i class="button--icon icon-settings"></i>
-        <span class="button--text"><%= l(:label_settings) %></span>
+        <span class="button--text"></span>
       <% end %>
     </li>
   <% end %>
 <% end %>
-<div>
-  <h3>
-    <%= render :partial => 'breadcrumbs', :locals => { :path => @path, :revision => @rev }.merge(merge) %>
-  </h3>
-</div>
+

app/views/repositories/empty.html.erb

@@ -33,7 +33,10 @@ See doc/COPYRIGHT.rdoc for more details.
              message: l('repositories.errors.empty_repository')) %></p>
   </div>
 </div>
-<%= render partial: 'checkout_instructions', locals: { repository: @repository, instructions: @instructions } %>
+<% if @instructions && @instructions.available? %>
+  <%= render partial: 'checkout_instructions',
+             locals: { repository: @repository, instructions: @instructions, show_url: true } %>
+<% end %>
 <%= call_hook(:view_repositories_show_contextual,
     { repository: @repository, project: @project }) %>
 <%= call_hook(:repositories_below_empty_warning,

app/views/repositories/show.html.erb

@@ -27,78 +27,68 @@ See doc/COPYRIGHT.rdoc for more details.
 
 ++#%>
 
-<%= render partial: 'checkout_instructions', locals: { repository: @repository, instructions: @instructions } %>
-<%= call_hook(:view_repositories_show_contextual, { :repository => @repository, :project => @project }) %>
+<%= call_hook(:view_repositories_show_contextual, { repository: @repository, project: @project }) %>
+<%= render partial: 'navigation' %>
 
+<%# Checkout %>
+<% if @instructions && @instructions.available? %>
+  <%= render partial: 'checkout_instructions',
+             locals: { repository: @repository, instructions: @instructions, show_url: false } %>
+<% end %>
 
-<%= render :partial => 'navigation', locals: { merge: { kind: 'dir' } } %>
+<%# Breadcrumbs %>
+<div>
+  <h3>
+    <%= render partial: 'breadcrumbs',
+               locals: { path: @path, revision: @rev }.merge(kind: 'dir') %>
+  </h3>
+</div>
 
 <% if !@entries.nil? && authorize_for('repositories', 'browse') %>
-<%= render :partial => 'dir_list' %>
+<%= render partial: 'dir_list' %>
 <% end %>
 
 <%= render_properties(@properties) %>
 
-<%# rev => nil prevents overwriting the rev parameter queried for in the form with the parameter from the request %>
-<%= form_tag({ action: controller.action_name,
-               project_id: @project,
-               path: to_path_param(@path),
-               rev: nil
-             },
-             method: :get,
-             id: 'revision_selector',
-             class: 'form -vertical'
-            ) do %>
-<fieldset class="form--fieldset">
-  <legend class="form--fieldset-legend"><%= l(:label_revision_plural) %></legend>
-  <div class="grid-block wrap">
-    <div class="form--column medium-3">
-      <div class="form--field -wide-label -break-words ">
-        <label class="form--label"><%= l('repositories.go_to_revision') %></label>
-        <div class="form--field-container">
-          <div class="form--text-field-container">
-            <%= text_field_tag :rev, @rev, id: 'revision-identifier-input', placeholder: l(:label_revision) %>
-          </div>
-        </div>
-      </div>
-    </div>
+<%= toolbar title: l(:label_revision_plural) do %>
+  <%# rev => nil prevents overwriting the rev parameter queried for in the form with the parameter from the request %>
+  <%= form_tag({ action: controller.action_name,
+                 project_id: @project,
+                 path: to_path_param(@path),
+                 rev: nil
+               },
+               method: :get,
+               id: 'revision_selector',
+               class: 'form -vertical'
+              ) do %>
+    <li class="toolbar-item">
+    <%= text_field_tag :rev, @rev, id: 'revision-identifier-input', placeholder: l(:label_revision) %>
+    </li>
     <% if !@repository.branches.nil? && @repository.branches.length > 0 %>
-    <div class="form--column medium-3">
-      <div class="form--field -wide-label -break-words ">
-        <label class="form--label"><%= l(:label_branch) %></label>
-        <div class="form--field-container">
-          <div class="form--select-container">
-            <%= select_tag :branch, options_for_select([''] + @repository.branches, @rev), id: 'revision-branch-select' %>
-          </div>
-        </div>
-      </div>
-    </div>
+    <li class="toolbar-item">
+      <%= select_tag :branch, options_for_select([''] + @repository.branches, @rev), id: 'revision-branch-select' %>
+    </li>
     <% end %>
     <% if !@repository.tags.nil? && @repository.tags.length > 0 %>
-    <div class="form--column medium-3">
-      <div class="form--field -wide-label -break-words ">
-        <label class="form--label"><%= l(:label_tag) %></label>
-        <div class="form--field-container">
-          <div class="form--select-container">
-            <%= select_tag :tag, options_for_select([''] + @repository.tags, @rev), id: 'revision-tag-select' %>
-          </div>
-        </div>
+    <li class="toolbar-item">
+      <%= select_tag :tag, options_for_select([''] + @repository.tags, @rev), id: 'revision-tag-select' %>
+    </li>
+    <% end %>
+    <% if User.current.impaired? %>
+    <li class="toolbar-item">
+      <div>
+        <%= button_tag l(:label_submit), type: :submit, class: 'button -highlight' %>
       </div>
-    </div>
+    </li>
     <% end %>
-  </div>
-  <% if User.current.impaired? %>
-    <div>
-      <%= button_tag 'OK', type: :submit, class: 'button -highlight' %>
-    </div>
   <% end %>
-</fieldset>
 <% end %>
+
 <% if authorize_for('repositories', 'revisions') %>
 <%   if @changesets && !@changesets.empty? %>
-<%=    render :partial => 'revisions',
-              :locals => {:project => @project, :path => @path,
-                          :revisions => @changesets, :entry => nil }%>
+<%=    render partial: 'revisions',
+              locals: {project: @project, path: @path,
+                          revisions: @changesets, entry: nil }%>
 <%   end %>
 <p>
 <%
@@ -117,10 +107,10 @@ See doc/COPYRIGHT.rdoc for more details.
 <%= sep %>
 <%=
     link_to l(:label_view_revisions),
-            :action => 'changes',
-            :project_id => @project,
-            :path   => to_path_param(@path),
-            :rev    => @rev
+            action: 'changes',
+            project_id: @project,
+            path:   to_path_param(@path),
+            rev:    @rev
             %>
 <%   end %>
 </p>
@@ -128,15 +118,15 @@ See doc/COPYRIGHT.rdoc for more details.
 <%   if true # @path.blank? %>
 <%     content_for :header_tags do %>
   <%= auto_discovery_link_tag(:atom,
-                              params.merge( { :format => 'atom',
-                                              :action => 'revisions',
-                                              :project_id => @project,
-                                              :page => nil,
-                                              :key => User.current.rss_key })) %>
+                              params.merge( { format: 'atom',
+                                              action: 'revisions',
+                                              project_id: @project,
+                                              page: nil,
+                                              key: User.current.rss_key })) %>
 <%     end %>
 
 <%= other_formats_links do |f| %>
-  <%= f.link_to 'Atom', :url => {:action => 'revisions', :project_id => @project, :key => User.current.rss_key} %>
+  <%= f.link_to 'Atom', url: {action: 'revisions', project_id: @project, key: User.current.rss_key} %>
 <%     end %>
 <%   end %>
 <% end %>

config/locales/en.yml

@@ -1300,7 +1300,7 @@ en:
         readwrite: 'Read + Write'
         read: 'Read-only'
         none: 'No checkout access, you may only view the repository through this application.'
-      access_permission: 'Your permissions on this repository:'
+      access_permission: 'Your permissions on this repository'
       url: "Checkout URL"
       base_url_text: "The base URL to use for generating checkout URLs (e.g., https://myserver.example.org/repos/).\nNote: The base URL is only used for rewriting checkout URLs in managed repositories. Other repositories are not altered."
       default_instructions:
@@ -1312,6 +1312,7 @@ en:
           Please consult the documentation of Subversion if you need more information on the checkout procedure and available clients.
       enable_instructions_text: "Displays checkout instructions defined below on all repository-related pages."
       instructions: "Checkout instructions"
+      show_instructions: "Display checkout instructions"
       text_instructions: "This text is displayed alongside the checkout URL for guidance on how to check out the repository."
       not_available: "Checkout instructions are not available for this repository"
     create_managed_delay: "Please note: The repository is managed, it is created asynchronously on the disk and will be available shortly."