Sidebar collapse update issue

7 files changed, 71 insertions, 18 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/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 408cba33cb3..d1fe116397a 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -143,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
@@ -150,6 +151,7 @@ class @LabelsSelect
           data: data
         ).done (data) ->
           $loading.fadeOut()
+          $dropdown.trigger('loaded.gl.dropdown')
           $selectbox.hide()
           data.issueURLSplit = issueURLSplit
           labelCount = 0
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index 2b292c387a5..e2a7d5fbba2 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -18,7 +18,7 @@ class @MilestoneSelect
       abilityName = $dropdown.data('ability-name')
       $selectbox = $dropdown.closest('.selectbox')
       $block = $selectbox.closest('.block')
-      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
+      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon')
       $value = $block.find('.value')
       $loading = $block.find('.block-loading').fadeOut()
 
@@ -99,11 +99,13 @@ 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()
               $value.removeAttr('style')
@@ -111,7 +113,8 @@ class @MilestoneSelect
                 data.milestone.namespace = _this.currentProject.namespace
                 data.milestone.path = _this.currentProject.path
                 $value.html(milestoneLinkTemplate(data.milestone))
-                $sidebarCollapsedValue.text(data.milestone.title)
+                $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..4b08c5caf26
--- /dev/null
+++ b/app/assets/javascripts/right_sidebar.js.coffee
@@ -0,0 +1,53 @@
+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) ->
+    console.log 'loaded'
+    $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')
+
+  sidebarDropdownHidden: (e) ->
+    $block = $(@).closest('.block')
+    if $block.hasClass('collapse-after-update')
+      $block.removeClass('collapse-after-update')
+      $('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 a25836a140a..eee9b6e690e 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -17,9 +17,6 @@ class @UsersSelect
       issueURL = $dropdown.data('issueUpdate')
       $selectbox = $dropdown.closest('.selectbox')
       $block = $selectbox.closest('.block')
-      $gutterToggle = $block
-        .closest('aside')
-        .find('.gutter-toggle')
       abilityName = $dropdown.data('ability-name')
       $value = $block.find('.value')
       $collapsedSidebar = $block.find('.sidebar-collapsed-user')
@@ -30,28 +27,20 @@ class @UsersSelect
         assignTo(@currentUser.id)
       )
 
-      $block.on('click', '.author_link', (e) =>
-        e.preventDefault()
-        $gutterToggle
-          .trigger('click')
-        $block
-          .find('.edit-link')
-          .trigger('click')
-        $block.addClass('collapse-after-update')
-      )
-
       assignTo = (selected) ->
         data = {}
         data[abilityName] = {}
         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()
 
@@ -67,9 +56,6 @@ class @UsersSelect
               avatar: ''
           $value.html(assigneeTemplate(user))
           $collapsedSidebar.html(collapsedAssigneeTemplate(user))
-          if $block.hasClass('collapse-after-update')
-            $block.removeClass('collapse-after-update')
-            $gutterToggle.trigger('click')
 
 
       collapsedAssigneeTemplate = _.template(
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 9d188317783..da844dc11e1 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 {
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