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

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) ->

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')

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()
 

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')
+      )

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')

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'

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;
+  }
 }

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

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();