Merge branch 'feature/jschatz1/issuable-sidebar' into 'master'

Implement new design for issue and merge request right sidebar

Fixes #3981 



See merge request !2645

2 files changed, 73 insertions, 13 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index d5e6ff0717a..e54bfce058a 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -215,4 +215,76 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
 
+  $(document).on 'breakpoint:change', (e, breakpoint) ->
+    if breakpoint is 'sm' or breakpoint is 'xs'
+      $gutterIcon = $('.gutter-toggle').find('i')
+      if $gutterIcon.hasClass('fa-angle-double-right')
+        $gutterIcon.closest('a').trigger('click')
+
+
+  $(document).on 'click', 'aside .gutter-toggle', (e) ->
+    e.preventDefault()
+    $this = $(this)
+    $thisIcon = $this.find 'i'
+    if $thisIcon.hasClass('fa-angle-double-right')
+      $thisIcon.removeClass('fa-angle-double-right')
+        .addClass('fa-angle-double-left')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
+      $('.page-with-sidebar')
+        .removeClass('right-sidebar-expanded')
+        .addClass('right-sidebar-collapsed')
+    else
+      $thisIcon.removeClass('fa-angle-double-left')
+        .addClass('fa-angle-double-right')
+      $this
+        .closest('aside')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+      $('.page-with-sidebar')
+        .removeClass('right-sidebar-collapsed')
+        .addClass('right-sidebar-expanded')
+    $.cookie("collapsed_gutter", 
+      $('.right-sidebar')
+        .hasClass('right-sidebar-collapsed'), { path: '/' })
+
+  bootstrapBreakpoint = undefined;
+  checkBootstrapBreakpoints = ->
+    if $('.device-xs').is(':visible')
+      bootstrapBreakpoint = "xs"
+    else if $('.device-sm').is(':visible')
+      bootstrapBreakpoint = "sm"
+    else if $('.device-md').is(':visible')
+      bootstrapBreakpoint = "md"
+    else if $('.device-lg').is(':visible')
+      bootstrapBreakpoint = "lg"
+
+  setBootstrapBreakpoints = ->
+    if $('.device-xs').length
+      return
+
+    $("body")
+      .append('<div class="device-xs visible-xs"></div>'+
+        '<div class="device-sm visible-sm"></div>'+
+        '<div class="device-md visible-md"></div>'+
+        '<div class="device-lg visible-lg"></div>')
+    checkBootstrapBreakpoints()
+
+  fitSidebarForSize = ->
+    oldBootstrapBreakpoint = bootstrapBreakpoint
+    checkBootstrapBreakpoints()
+    if bootstrapBreakpoint != oldBootstrapBreakpoint
+      $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
+
+  checkInitialSidebarSize = ->
+    if bootstrapBreakpoint is "xs" or "sm"
+      $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
+
+  $(window).on "resize", (e) ->
+    fitSidebarForSize()
+
+  setBootstrapBreakpoints()
+  checkInitialSidebarSize()
   new Aside()
diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee
index 02232698bc2..d17b1123418 100644
--- a/app/assets/javascripts/issuable_context.js.coffee
+++ b/app/assets/javascripts/issuable_context.js.coffee
@@ -10,19 +10,7 @@ class @IssuableContext
     $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
-    $('.issuable-details').waitForImages ->
-      $('.issuable-affix').on 'affix.bs.affix', ->
-        $(@).width($(@).outerWidth())
-      .on 'affixed-top.bs.affix affixed-bottom.bs.affix', ->
-        $(@).width('')
-
-      $('.issuable-affix').affix offset:
-        top: ->
-          @top = ($('.issuable-affix').offset().top - 70)
-        bottom: ->
-          @bottom = $('.footer').outerHeight(true)
-
-    $(".edit-link").click (e) ->
+    $(document).on "click",".edit-link", (e) ->
       block = $(@).parents('.block')
       block.find('.selectbox').show()
       block.find('.value').hide()