Merge branch 'functional-closed-sidebar' into 'master'

Functional closed sidebar

Adds functionality to include the closed sidebar.

When sidebar is closed the details will be visible once changed in open sidebar.

This MR fixes some bugs and adds some features from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3175

Fixes: #13594  

See merge request !3411

9 files changed, 116 insertions, 26 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index dd0465b9358..dbcad9c0514 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -195,6 +195,8 @@ class GitLabDropdown
     if @options.filterable
       @dropdown.find(".dropdown-input-field").focus()
 
+    @dropdown.trigger('shown.gl.dropdown')
+
   hidden: (e) =>
     if @options.filterable
       @dropdown
@@ -209,6 +211,8 @@ class GitLabDropdown
     if @options.hidden
       @options.hidden.call(@,e)
 
+    @dropdown.trigger('hidden.gl.dropdown')
+
 
   # Render the full menu
   renderMenu: (html) ->
diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee
index 6fc924d3d66..2f19513a831 100644
--- a/app/assets/javascripts/issuable_context.js.coffee
+++ b/app/assets/javascripts/issuable_context.js.coffee
@@ -9,7 +9,7 @@ class @IssuableContext
     $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
-    $(document).on "click",".edit-link", (e) ->
+    $(document).off("click", ".edit-link").on "click",".edit-link", (e) ->
       $block = $(@).parents('.block')
       $selectbox = $block.find('.selectbox')
       if $selectbox.is(':visible')
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index e69a9e3e4b1..d1fe116397a 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -16,6 +16,7 @@ class @LabelsSelect
       abilityName = $dropdown.data('ability-name')
       $selectbox = $dropdown.closest('.selectbox')
       $block = $selectbox.closest('.block')
+      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
       $value = $block.find('.value')
       $loading = $block.find('.block-loading').fadeOut()
 
@@ -142,6 +143,7 @@ class @LabelsSelect
         if not selected.length
           data[abilityName].label_ids = ['']
         $loading.fadeIn()
+        $dropdown.trigger('loading.gl.dropdown')
         $.ajax(
           type: 'PUT'
           url: issueUpdateURL
@@ -149,15 +151,20 @@ class @LabelsSelect
           data: data
         ).done (data) ->
           $loading.fadeOut()
+          $dropdown.trigger('loaded.gl.dropdown')
           $selectbox.hide()
           data.issueURLSplit = issueURLSplit
-          if not data.labels.length
-            template = labelNoneHTMLTemplate()
-          else
+          labelCount = 0
+          if data.labels.length
             template = labelHTMLTemplate(data)
-          href = $value
-                  .show()
-                  .html(template)
+            labelCount = data.labels.length
+          else
+            template = labelNoneHTMLTemplate()
+          $value
+            .removeAttr('style')
+            .html(template)
+          $sidebarCollapsedValue.text(labelCount)
+
           $value
             .find('a')
             .each((i) ->
@@ -226,7 +233,8 @@ class @LabelsSelect
 
         hidden: ->
           $selectbox.hide()
-          $value.show()
+          # display:block overrides the hide-collapse rule
+          $value.removeAttr('style')
           if $dropdown.hasClass 'js-multiselect'
             saveLabelData()
 
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index d61d03791fa..e2a7d5fbba2 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -18,6 +18,7 @@ class @MilestoneSelect
       abilityName = $dropdown.data('ability-name')
       $selectbox = $dropdown.closest('.selectbox')
       $block = $selectbox.closest('.block')
+      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon')
       $value = $block.find('.value')
       $loading = $block.find('.block-loading').fadeOut()
 
@@ -80,18 +81,14 @@ class @MilestoneSelect
           milestone.name is selectedMilestone
         hidden: ->
           $selectbox.hide()
-          $value.show()
-        clicked: (selected) ->
+
+          # display:block overrides the hide-collapse rule
+          $value.removeAttr('style')
+        clicked: (e) ->
           if $dropdown.hasClass 'js-filter-bulk-update'
             return
 
-          if $dropdown.hasClass('js-filter-submit')
-            if selected.name?
-              selectedMilestone = selected.name
-            else if selected.title?
-              selectedMilestone = selected.title
-            else
-              selectedMilestone = ''
+          if $dropdown.hasClass 'js-filter-submit'
             $dropdown.parents('form').submit()
           else
             selected = $selectbox
@@ -102,20 +99,22 @@ class @MilestoneSelect
             data[abilityName].milestone_id = selected
             $loading
               .fadeIn()
+            $dropdown.trigger('loading.gl.dropdown')
             $.ajax(
               type: 'PUT'
               url: issueUpdateURL
               data: data
             ).done (data) ->
+              $dropdown.trigger('loaded.gl.dropdown')
               $loading.fadeOut()
               $selectbox.hide()
-              $milestoneLink = $value
-                      .show()
-                      .find('a')
+              $value.removeAttr('style')
               if data.milestone?
                 data.milestone.namespace = _this.currentProject.namespace
                 data.milestone.path = _this.currentProject.path
                 $value.html(milestoneLinkTemplate(data.milestone))
+                $sidebarCollapsedValue.find('span').text(data.milestone.title)
               else
                 $value.html(milestoneLinkNoneTemplate)
-      )
+                $sidebarCollapsedValue.find('span').text('No')
+      )
\ No newline at end of file
diff --git a/app/assets/javascripts/right_sidebar.js.coffee b/app/assets/javascripts/right_sidebar.js.coffee
new file mode 100644
index 00000000000..67403554340
--- /dev/null
+++ b/app/assets/javascripts/right_sidebar.js.coffee
@@ -0,0 +1,55 @@
+class @Sidebar
+  constructor: (currentUser) ->
+    @addEventListeners()
+
+  addEventListeners: ->
+    $('aside').on('click', '.sidebar-collapsed-icon', @sidebarCollapseClicked)
+    $('.dropdown').on('hidden.gl.dropdown', @sidebarDropdownHidden)
+    $('.dropdown').on('loading.gl.dropdown', @sidebarDropdownLoading)
+    $('.dropdown').on('loaded.gl.dropdown', @sidebarDropdownLoaded)
+
+  sidebarDropdownLoading: (e) ->
+    $sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
+    img = $sidebarCollapsedIcon.find('img')
+    i = $sidebarCollapsedIcon.find('i')
+    $loading = $('<i class="fa fa-spinner fa-spin"></i>')
+    if img.length
+      img.before($loading)
+      img.hide()
+    else if i.length
+      i.before($loading)
+      i.hide()
+
+  sidebarDropdownLoaded: (e) ->
+    $sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
+    img = $sidebarCollapsedIcon.find('img')
+    $sidebarCollapsedIcon.find('i.fa-spin').remove()
+    i = $sidebarCollapsedIcon.find('i')
+    if img.length
+      img.show()
+    else
+      i.show()
+
+
+  sidebarCollapseClicked: (e) ->
+    e.preventDefault()
+    $block = $(@).closest('.block')
+
+    $('aside')
+      .find('.gutter-toggle')
+      .trigger('click')
+    $editLink = $block.find('.edit-link')
+
+    if $editLink.length
+      $editLink.trigger('click')
+      $block.addClass('collapse-after-update')
+      $('.page-with-sidebar').addClass('with-overlay')
+
+  sidebarDropdownHidden: (e) ->
+    $block = $(@).closest('.block')
+    if $block.hasClass('collapse-after-update')
+      $block.removeClass('collapse-after-update')
+      $('.page-with-sidebar').removeClass('with-overlay')
+      $('aside')
+        .find('.gutter-toggle')
+        .trigger('click')
\ No newline at end of file
diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee
index aec13e54c98..eee9b6e690e 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -19,6 +19,7 @@ class @UsersSelect
       $block = $selectbox.closest('.block')
       abilityName = $dropdown.data('ability-name')
       $value = $block.find('.value')
+      $collapsedSidebar = $block.find('.sidebar-collapsed-user')
       $loading = $block.find('.block-loading').fadeOut()
 
       $block.on('click', '.js-assign-yourself', (e) =>
@@ -32,12 +33,14 @@ class @UsersSelect
         data[abilityName].assignee_id = selected
         $loading
           .fadeIn()
+        $dropdown.trigger('loading.gl.dropdown')
         $.ajax(
           type: 'PUT'
           dataType: 'json'
           url: issueURL
           data: data
         ).done (data) ->
+          $dropdown.trigger('loaded.gl.dropdown')
           $loading.fadeOut()
           $selectbox.hide()
 
@@ -51,11 +54,22 @@ class @UsersSelect
               name: 'Unassigned'
               username: ''
               avatar: ''
+          $value.html(assigneeTemplate(user))
+          $collapsedSidebar.html(collapsedAssigneeTemplate(user))
 
-          $value.html(noAssigneeTemplate(user))
-          $value.find('a').attr('href')
 
-      noAssigneeTemplate = _.template(
+      collapsedAssigneeTemplate = _.template(
+        '<% if( avatar ) { %>
+        <a class="author_link" href="/u/<%= username %>">
+          <img width="24" class="avatar avatar-inline s24" alt="" src="<%= avatar %>">
+          <span class="author">Toni Boehm</span>
+        </a>
+        <% } else { %>
+        <i class="fa fa-user"></i>
+        <% } %>'
+      )
+
+      assigneeTemplate = _.template(
         '<% if (username) { %>
         <a class="author_link " href="/u/<%= username %>">
           <% if( avatar ) { %>
@@ -131,7 +145,8 @@ class @UsersSelect
 
         hidden: (e) ->
           $selectbox.hide()
-          $value.show()
+          # display:block overrides the hide-collapse rule
+          $value.removeAttr('style')
 
         clicked: (user) ->
           page = $('body').data 'page'
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 9d188317783..18189e985c4 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -288,6 +288,10 @@
   @media (min-width: $screen-sm-min) {
     padding-right: $sidebar_collapsed_width;
   }
+
+  .sidebar-collapsed-icon {
+    cursor: pointer;
+  }
 }
 
 .right-sidebar-expanded {
@@ -300,4 +304,8 @@
   @media (min-width: $screen-md-min) {
     padding-right: $gutter_width;
   }
+
+  &.with-overlay {
+    padding-right: $sidebar_collapsed_width;
+  }
 }
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 6189de09f27..0b0ad984eb4 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -154,7 +154,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
                        @merge_request.target_project, @merge_request])
         end
         format.json do
-          render json: @merge_request.to_json(include: [:milestone, :labels, :assignee])
+          render json: @merge_request.to_json(include: [:milestone, :labels, assignee: { methods: :avatar_url }])
         end
       end
     else
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 451c64da2c4..47e544acf52 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -150,3 +150,4 @@
       new LabelsSelect();
       new IssuableContext('#{current_user.to_json(only: [:username, :id, :name])}');
       new Subscription('.subscription')
+      new Sidebar();
\ No newline at end of file