From f64e35069eb26959a201c25d548c68d00987d30d Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 27 Jan 2016 23:47:37 -0500 Subject: [PATCH] Add js to expand and contract side menu --- app/assets/javascripts/application.js.coffee | 21 ++++++++++++++++++++ app/assets/stylesheets/pages/issuable.scss | 13 ++++++++---- app/helpers/application_helper.rb | 6 +++--- app/views/shared/issuable/_sidebar.html.haml | 13 ++++++------ 4 files changed, 39 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 48c9890cfb5..040317ed73a 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -212,4 +212,25 @@ $ -> $this = $(this) $this.attr 'value', $this.val() + $('.right-sidebar').on 'click', '.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') + else + $thisIcon.removeClass('fa-angle-double-left') + .addClass('fa-angle-double-right') + $this + .closest('aside') + .removeClass('right-sidebar-collapsed') + .addClass('right-sidebar-expanded') + + console.log('collapse') + new Aside() diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index c229d689e3c..02ac1b2da0c 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -42,8 +42,6 @@ .issuable-details { section { - border-right: 1px solid $border-white-light; - .issuable-discussion { margin-right: 1px; } @@ -92,7 +90,7 @@ } - .gutter-collapse { + .gutter-toggle { margin-left: 10px; border-left: 1px solid #F0F0F0; padding-left: 10px; @@ -162,9 +160,16 @@ transition-duration: .3s; background: $gray-light; overflow: scroll; - width: $gutter_width; padding: 10px 20px; + &.right-sidebar-expanded { + width: $gutter_width; + } + + &.right-sidebar-collapsed { + width: $sidebar_collapsed_width; + } + .btn { background: $gray-normal; border: 1px solid $gray-darkest; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 57a9ce8294a..b0cd984024f 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -303,7 +303,7 @@ module ApplicationHelper end end - def next_issuable_for(project) + def next_issuable_for(project, id) if project.nil? nil elsif current_controller?(:issues) @@ -313,13 +313,13 @@ module ApplicationHelper end end - def prev_issuable_for(project) + def prev_issuable_for(project, id) if project.nil? nil elsif current_controller?(:issues) project.issues.where("id < ?", id).last elsif current_controller?(:merge_requests) - project.merge_requests.where("id > ?", id).last + project.merge_requests.where("id < ?", id).last end end diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 76947ca114d..e50c4879848 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -1,17 +1,16 @@ -%aside.right-sidebar +%aside.right-sidebar.right-sidebar-expanded .issuable-sidebar .block %span.issuable-count.pull-left = issuable.iid of = issuable_count(:all, @project) - %span.gutter-collapse.pull-right - = icon('angle-double-right') + %span.pull-right + %a.gutter-toggle{href: '#'} + = icon('angle-double-right') .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'} - %a.btn.btn-default{href: '#'} - Prev - %a.btn.btn-default{href: '#'} - Next + = link_to 'Prev', namespace_project_issue_path(namespace_id: @project, id: prev_issuable_for(@project, issuable.id)), class: 'btn btn-default' + = link_to 'Next', namespace_project_issue_path(namespace_id: @project, id: next_issuable_for(@project, issuable.id)), class: 'btn btn-default' = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| .block.assignee