From 087abdf7fd47cfc1ec597fc18b5fa910b945bbd1 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 27 Jan 2016 17:38:19 -0500 Subject: New right side gutter design. [WIP] --- app/assets/javascripts/issuable_context.js.coffee | 12 -- app/assets/stylesheets/framework/sidebar.scss | 13 +- app/assets/stylesheets/framework/variables.scss | 2 + app/assets/stylesheets/pages/issuable.scss | 13 ++ app/helpers/application_helper.rb | 30 ++++ app/helpers/nav_helper.rb | 6 + app/views/layouts/_page.html.haml | 2 +- app/views/projects/issues/show.html.haml | 8 +- app/views/projects/merge_requests/_show.html.haml | 6 +- app/views/shared/issuable/_sidebar.html.haml | 160 ++++++++++++---------- 10 files changed, 155 insertions(+), 97 deletions(-) diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee index 02232698bc2..c2144aea25e 100644 --- a/app/assets/javascripts/issuable_context.js.coffee +++ b/app/assets/javascripts/issuable_context.js.coffee @@ -10,18 +10,6 @@ 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) -> block = $(@).parents('.block') block.find('.selectbox').show() diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 540d0b03163..e0fc969ff0e 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -200,6 +200,10 @@ } } +@mixin expanded-gutter { + padding-right: $gutter_width; +} + @mixin collapsed-sidebar { padding-left: $sidebar_collapsed_width; @@ -266,6 +270,7 @@ background: #f2f6f7; } +// page is small enough @media (max-width: $screen-md-max) { .page-sidebar-collapsed { @include collapsed-sidebar; @@ -280,7 +285,13 @@ } } +// page is large enough @media(min-width: $screen-md-max) { + + .page-gutter { + @include expanded-gutter; + } + .page-sidebar-collapsed { @include collapsed-sidebar; } @@ -288,4 +299,4 @@ .page-sidebar-expanded { @include expanded-sidebar; } -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 3ec48da9a41..7af6688963f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -12,6 +12,8 @@ $gl-font-size: 15px; $list-font-size: 15px; $sidebar_collapsed_width: 62px; $sidebar_width: 230px; +$gutter_collapsed_width: 62px; +$gutter_width: 320px; $avatar_radius: 50%; $code_font_size: 13px; $code_line_height: 1.5; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 977ada0ff38..d1f2175bfb7 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -133,3 +133,16 @@ margin-right: 2px; } } + + +.right-sidebar { + position: fixed; + top: 58px; + right: 0; + height: 100%; + transition-duration: .3s; + background: $gray-light; + overflow: scroll; + width: $gutter_width; + padding: 10px 20px; +} \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index a2458ad3be0..57a9ce8294a 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -293,6 +293,36 @@ module ApplicationHelper end end + def issuable_count(entity, project) + if project.nil? + 0 + elsif current_controller?(:issues) + project.issues.send(entity).count + elsif current_controller?(:merge_requests) + project.merge_requests.send(entity).count + end + end + + def next_issuable_for(project) + if project.nil? + nil + elsif current_controller?(:issues) + project.issues.where("id > ?", id).first + elsif current_controller?(:merge_requests) + project.merge_requests.where("id > ?", id).first + end + end + + def prev_issuable_for(project) + 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 + end + end + def state_filters_text_for(entity, project) titles = { opened: "Open" diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index e6fb8670e57..20b89cc9db3 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -19,6 +19,12 @@ module NavHelper end end + def page_gutter_class + if current_path?('merge_requests#show') || current_path?('issues#show') + "page-gutter" + end + end + def nav_header_class if nav_menu_collapsed? "header-collapsed" diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 26159989777..0c1b5eec95a 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,4 +1,4 @@ -.page-with-sidebar{ class: page_sidebar_class } +.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" } = render "layouts/broadcast" .sidebar-wrapper.nicescroll{ class: nav_sidebar_class } .header-logo diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 51dcca7a1ab..a567c22c823 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -54,11 +54,9 @@ = render 'votes/votes_block', votable: @issue .row - %section.col-md-9 + %section.col-md-12 .issuable-discussion = render 'projects/issues/discussion' - - %aside.col-md-3 - = render 'shared/issuable/sidebar', issuable: @issue - = render 'shared/show_aside' + += render 'shared/issuable/sidebar', issuable: @issue \ No newline at end of file diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml index 8641c3d8b4b..c2ecb48b094 100644 --- a/app/views/projects/merge_requests/_show.html.haml +++ b/app/views/projects/merge_requests/_show.html.haml @@ -70,11 +70,9 @@ = render 'votes/votes_block', votable: @merge_request .row - %section.col-md-9 + %section.col-md-12 .issuable-discussion = render "projects/merge_requests/discussion" - %aside.col-md-3 - = render 'shared/issuable/sidebar', issuable: @merge_request = render 'shared/show_aside' #commits.commits.tab-pane @@ -87,6 +85,8 @@ .mr-loading-status = spinner += render 'shared/issuable/sidebar', issuable: @merge_request + :javascript var merge_request; diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 3092ff54242..2aa6dc840eb 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -1,88 +1,98 @@ -.issuable-sidebar.issuable-affix - = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| - .block.assignee - .title - %label - Assignee - - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - .pull-right - = link_to 'Edit', '#', class: 'edit-link' - .value - - if issuable.assignee - %strong= link_to_member(@project, issuable.assignee, size: 24) - - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee) - %a.pull-right.cannot-be-merged{href: '#', data: {toggle: 'tooltip'}, title: 'Not allowed to merge'} - = icon('exclamation-triangle') - - else - .light None - - .selectbox - = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true) +%aside.right-sidebar + .issuable-sidebar + .block + = issuable.iid + of + = issuable_count(:all, @project) + .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'} + %a.btn.btn-default{href: '#'} + Prev + %a.btn.btn-default{href: '#'} + Next + = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| + .block.assignee + .title + %label + Assignee + - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) + .pull-right + = link_to 'Edit', '#', class: 'edit-link' + .value + - if issuable.assignee + %strong= link_to_member(@project, issuable.assignee, size: 24) + - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee) + %a.pull-right.cannot-be-merged{href: '#', data: {toggle: 'tooltip'}, title: 'Not allowed to merge'} + = icon('exclamation-triangle') + - else + .light None - .block.milestone - .title - %label - Milestone - - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) - .pull-right - = link_to 'Edit', '#', class: 'edit-link' - .value - - if issuable.milestone - %span.back-to-milestone - = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do - %strong - = icon('clock-o') - = issuable.milestone.title - - else - .light None - .selectbox - = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }}) - = hidden_field_tag :issuable_context - = f.submit class: 'btn hide' + .selectbox + = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true) - - if issuable.project.labels.any? - .block + .block.milestone .title - %label Labels + %label + Milestone - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) .pull-right = link_to 'Edit', '#', class: 'edit-link' - .value.issuable-show-labels - - if issuable.labels.any? - - issuable.labels.each do |label| - = link_to_label(label) + .value + - if issuable.milestone + %span.back-to-milestone + = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do + %strong + = icon('clock-o') + = issuable.milestone.title - else .light None .selectbox - = f.collection_select :label_ids, issuable.project.labels.all, :id, :name, - { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" } + = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }}) + = hidden_field_tag :issuable_context + = f.submit class: 'btn hide' - = render "shared/issuable/participants", participants: issuable.participants(current_user) + - if issuable.project.labels.any? + .block + .title + %label Labels + - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) + .pull-right + = link_to 'Edit', '#', class: 'edit-link' + .value.issuable-show-labels + - if issuable.labels.any? + - issuable.labels.each do |label| + = link_to_label(label) + - else + .light None + .selectbox + = f.collection_select :label_ids, issuable.project.labels.all, :id, :name, + { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" } - - if current_user - - subscribed = issuable.subscribed?(current_user) - .block.light - .title - %label.light Notifications - - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed' - %button.btn.btn-block.btn-gray.subscribe-button{:type => 'button'} - %span= subscribed ? 'Unsubscribe' : 'Subscribe' - .subscription-status{data: {status: subscribtion_status}} - .unsubscribed{class: ( 'hidden' if subscribed )} - You're not receiving notifications from this thread. - .subscribed{class: ( 'hidden' unless subscribed )} - You're receiving notifications because you're subscribed to this thread. + = render "shared/issuable/participants", participants: issuable.participants(current_user) - - project_ref = cross_project_reference(@project, issuable) - .block - .title - .cross-project-reference - %span - Reference: - %cite{title: project_ref} - = project_ref - = clipboard_button(clipboard_text: project_ref) + - if current_user + - subscribed = issuable.subscribed?(current_user) + .block.light + .title + %label.light Notifications + - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed' + %button.btn.btn-block.btn-gray.subscribe-button{:type => 'button'} + %span= subscribed ? 'Unsubscribe' : 'Subscribe' + .subscription-status{data: {status: subscribtion_status}} + .unsubscribed{class: ( 'hidden' if subscribed )} + You're not receiving notifications from this thread. + .subscribed{class: ( 'hidden' unless subscribed )} + You're receiving notifications because you're subscribed to this thread. + + - project_ref = cross_project_reference(@project, issuable) + .block + .title + .cross-project-reference + %span + Reference: + %cite{title: project_ref} + = project_ref + = clipboard_button(clipboard_text: project_ref) - :javascript - new Subscription("#{toggle_subscription_path(issuable)}"); - new IssuableContext(); \ No newline at end of file + :javascript + new Subscription("#{toggle_subscription_path(issuable)}"); + new IssuableContext(); \ No newline at end of file -- cgit v1.2.1 From ee89e9c8d13c9fd58bb8e36c5ca2d6b35891a1f8 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 27 Jan 2016 22:50:18 -0500 Subject: Adds prev/next buttons to top area --- app/assets/stylesheets/framework/variables.scss | 3 ++- app/assets/stylesheets/pages/issuable.scss | 24 ++++++++++++++++++++++++ app/views/shared/issuable/_sidebar.html.haml | 10 +++++++--- 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 7af6688963f..f8b6e0e5e6f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -13,7 +13,7 @@ $list-font-size: 15px; $sidebar_collapsed_width: 62px; $sidebar_width: 230px; $gutter_collapsed_width: 62px; -$gutter_width: 320px; +$gutter_width: 250px; $avatar_radius: 50%; $code_font_size: 13px; $code_line_height: 1.5; @@ -41,6 +41,7 @@ $white-dark: #ededed; $gray-light: #f7f7f7; $gray-normal: #ededed; $gray-dark: #ededed; +$gray-darkest: #c9c9c9; $green-light: #31AF64; $green-normal: #2FAA60; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index d1f2175bfb7..c229d689e3c 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -75,9 +75,28 @@ padding: $gl-padding 0; border-bottom: 1px solid #F0F0F0; + &:first-child { + padding-top: 5px; + } + &:last-child { border: none; } + + span { + margin-top: 7px; + display: inline-block; + } + + .issuable-count { + + } + + .gutter-collapse { + margin-left: 10px; + border-left: 1px solid #F0F0F0; + padding-left: 10px; + } } .title { @@ -145,4 +164,9 @@ overflow: scroll; width: $gutter_width; padding: 10px 20px; + + .btn { + background: $gray-normal; + border: 1px solid $gray-darkest; + } } \ No newline at end of file diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 2aa6dc840eb..76947ca114d 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -1,14 +1,18 @@ %aside.right-sidebar .issuable-sidebar .block - = issuable.iid - of - = issuable_count(:all, @project) + %span.issuable-count.pull-left + = issuable.iid + of + = issuable_count(:all, @project) + %span.gutter-collapse.pull-right + = 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 + = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| .block.assignee .title -- cgit v1.2.1 From f64e35069eb26959a201c25d548c68d00987d30d Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 27 Jan 2016 23:47:37 -0500 Subject: 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 -- cgit v1.2.1 From 0b030e00a15f849a5cbb2778a6b88c57a2e43d4b Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 28 Jan 2016 00:06:36 -0500 Subject: Add icon when collapsed. Hide and show icons in collapse and expanded mode. --- app/assets/stylesheets/pages/issuable.scss | 22 ++++++++++++++++++++++ app/views/shared/issuable/_sidebar.html.haml | 6 ++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 02ac1b2da0c..6be1163a8a6 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -174,4 +174,26 @@ background: $gray-normal; border: 1px solid $gray-darkest; } + + &.right-sidebar-collapsed { + .issuable-count, + .issuable-nav, + .assignee .title, + .assignee .selectbox, + .assignee .value .author, + .milestone, + .labels, + .participants, + .light, + .project-reference { + display: none; + } + + } + + &.right-sidebar-expanded { + .sidebar-collapsed-icon { + display: none; + } + } } \ No newline at end of file diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index e50c4879848..486c1c922d5 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -33,6 +33,8 @@ = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true) .block.milestone + .sidebar-collapsed-icon + = icon('balance-scale') .title %label Milestone @@ -54,7 +56,7 @@ = f.submit class: 'btn hide' - if issuable.project.labels.any? - .block + .block.labels .title %label Labels - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) @@ -87,7 +89,7 @@ You're receiving notifications because you're subscribed to this thread. - project_ref = cross_project_reference(@project, issuable) - .block + .block.project-reference .title .cross-project-reference %span -- cgit v1.2.1 From 9c2bd8b70eedc9969f5ba4c7fc1a7d96369e1438 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 28 Jan 2016 18:26:47 -0500 Subject: Sidebar collapse and expand work with whole page. --- app/assets/javascripts/application.js.coffee | 11 +++++++-- app/assets/stylesheets/framework/sidebar.scss | 11 ++++++++- app/assets/stylesheets/pages/issuable.scss | 27 ++++++++++++++++++---- app/helpers/application_helper.rb | 28 +++++++++++++++++++---- app/helpers/nav_helper.rb | 19 ++++++++++++++- app/views/shared/issuable/_participants.html.haml | 2 ++ app/views/shared/issuable/_sidebar.html.haml | 27 ++++++++++++++++++---- 7 files changed, 108 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 040317ed73a..02b0a32539a 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -223,6 +223,9 @@ $ -> .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') @@ -230,7 +233,11 @@ $ -> .closest('aside') .removeClass('right-sidebar-collapsed') .addClass('right-sidebar-expanded') - - console.log('collapse') + $('.page-with-sidebar') + .removeClass('right-sidebar-collapsed') + .addClass('right-sidebar-expanded') + $.cookie("collapsed_gutter", + $('.right-sidebar') + .hasClass('right-sidebar-collapsed'), { path: '/' }) new Aside() diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index e0fc969ff0e..1616c140c0d 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -204,6 +204,10 @@ padding-right: $gutter_width; } +@mixin collapsed-gutter { + padding-right: $sidebar_collapsed_width; +} + @mixin collapsed-sidebar { padding-left: $sidebar_collapsed_width; @@ -289,7 +293,12 @@ @media(min-width: $screen-md-max) { .page-gutter { - @include expanded-gutter; + &.right-sidebar-collapsed { + @include collapsed-gutter; + } + &.right-sidebar-expanded { + @include expanded-gutter; + } } .page-sidebar-collapsed { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6be1163a8a6..9bceb06ae4b 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -72,6 +72,11 @@ @include clearfix; padding: $gl-padding 0; border-bottom: 1px solid #F0F0F0; + // This prevents the mess when resizing the sidebar + // of elements repositioning themselves.. + width: 210px; + overflow-x: hidden; + // -- &:first-child { padding-top: 5px; @@ -181,14 +186,26 @@ .assignee .title, .assignee .selectbox, .assignee .value .author, - .milestone, - .labels, - .participants, - .light, - .project-reference { + .milestone > *, + .labels > *, + .participants > *, + .light > *, + .project-reference > * { display: none; } + .assignee { + margin-left: -7px; + } + + .gutter-toggle { + margin-left: -207px; + } + + .sidebar-collapsed-icon { + display: block; + } + } &.right-sidebar-expanded { diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index b0cd984024f..00f38932861 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -307,9 +307,19 @@ module ApplicationHelper if project.nil? nil elsif current_controller?(:issues) - project.issues.where("id > ?", id).first + project.issues.where("id > ?", id).last elsif current_controller?(:merge_requests) - project.merge_requests.where("id > ?", id).first + project.merge_requests.where("id > ?", id).last + end + end + + def has_next_issuable?(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 end end @@ -317,9 +327,19 @@ module ApplicationHelper if project.nil? nil elsif current_controller?(:issues) - project.issues.where("id < ?", id).last + project.issues.where("id < ?", id).first + elsif current_controller?(:merge_requests) + project.merge_requests.where("id < ?", id).first + end + end + + def has_prev_issuable?(project, id) + if project.nil? + nil + elsif current_controller?(:issues) + project.issues.where("id < ?", id).first elsif current_controller?(:merge_requests) - project.merge_requests.where("id < ?", id).last + project.merge_requests.where("id < ?", id).first end end diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index 20b89cc9db3..2c299d1d794 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -3,6 +3,18 @@ module NavHelper cookies[:collapsed_nav] == 'true' end + def sidebar_gutter_collapsed_class + if cookies[:collapsed_gutter] == 'true' + "right-sidebar-collapsed" + else + "right-sidebar-expanded" + end + end + + def sidebar_gutter_collapsed? + cookies[:collapsed_gutter] == 'true' + end + def nav_sidebar_class if nav_menu_collapsed? "sidebar-collapsed" @@ -20,8 +32,13 @@ module NavHelper end def page_gutter_class + if current_path?('merge_requests#show') || current_path?('issues#show') - "page-gutter" + if cookies[:collapsed_gutter] == 'true' + "page-gutter right-sidebar-collapsed" + else + "page-gutter right-sidebar-expanded" + end end end diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml index da6bacbb74a..ed34b6d0aef 100644 --- a/app/views/shared/issuable/_participants.html.haml +++ b/app/views/shared/issuable/_participants.html.haml @@ -1,4 +1,6 @@ .block.participants + .sidebar-collapsed-icon + = icon('users') .title = pluralize participants.count, "participant" - participants.each do |participant| diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 486c1c922d5..123eba5f1cf 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -1,4 +1,4 @@ -%aside.right-sidebar.right-sidebar-expanded +%aside.right-sidebar{ class: sidebar_gutter_collapsed_class } .issuable-sidebar .block %span.issuable-count.pull-left @@ -7,13 +7,26 @@ = issuable_count(:all, @project) %span.pull-right %a.gutter-toggle{href: '#'} - = icon('angle-double-right') + - if sidebar_gutter_collapsed? + = icon('angle-double-left') + - else + = icon('angle-double-right') .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'} - = 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' + - if has_prev_issuable?(@project, issuable.id) + = link_to 'Prev', namespace_project_issue_path(@project.namespace, @project, prev_issuable_for(@project, issuable.id).try(:iid)), class: 'btn btn-default' + - else + %a.btn.btn-default.disabled{href: '#'} + Prev + - if has_next_issuable?(@project, issuable.id) + = link_to 'Next', namespace_project_issue_path(@project.namespace, @project, next_issuable_for(@project, issuable.id).try(:iid)), class: 'btn btn-default' + - else + %a.btn.btn-default.disabled{href: '#'} + Next = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| .block.assignee + .sidebar-collapsed-icon + = icon('user') .title %label Assignee @@ -57,6 +70,8 @@ - if issuable.project.labels.any? .block.labels + .sidebar-collapsed-icon + = icon('tags') .title %label Labels - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) @@ -77,6 +92,8 @@ - if current_user - subscribed = issuable.subscribed?(current_user) .block.light + .sidebar-collapsed-icon + = icon('rss') .title %label.light Notifications - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed' @@ -90,6 +107,8 @@ - project_ref = cross_project_reference(@project, issuable) .block.project-reference + .sidebar-collapsed-icon + = icon('clipboard') .title .cross-project-reference %span -- cgit v1.2.1 From 1bba15589a6c8b349bf235058c13120618d516b6 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 28 Jan 2016 19:27:42 -0500 Subject: Fix icon centering on collapsed view --- app/assets/stylesheets/pages/issuable.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 9bceb06ae4b..5d1a488d377 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -183,9 +183,7 @@ &.right-sidebar-collapsed { .issuable-count, .issuable-nav, - .assignee .title, - .assignee .selectbox, - .assignee .value .author, + .assignee > *, .milestone > *, .labels > *, .participants > *, @@ -194,16 +192,17 @@ display: none; } - .assignee { - margin-left: -7px; - } - .gutter-toggle { margin-left: -207px; } .sidebar-collapsed-icon { display: block; + float: left; + width: 62px; + text-align: center; + margin-left: -19px; +} } } -- cgit v1.2.1 From 541fcc37bf0c8979cc1495b63ac71912cc28f825 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 28 Jan 2016 20:36:48 -0500 Subject: Add detail to collapsed icons --- app/assets/stylesheets/pages/issuable.scss | 25 ++++++++++++++++++++++- app/helpers/projects_helper.rb | 6 ++++++ app/views/shared/issuable/_participants.html.haml | 2 ++ app/views/shared/issuable/_sidebar.html.haml | 14 +++++++++++-- 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 5d1a488d377..16429e01e0a 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -169,10 +169,28 @@ &.right-sidebar-expanded { width: $gutter_width; + + hr { + display: none; + } } &.right-sidebar-collapsed { width: $sidebar_collapsed_width; + padding-top: 0; + + hr { + margin: 0; + color: $gray-normal; + border-color: $gray-normal; + width: 62px; + margin-left: -20px + } + + .block { + border-bottom: none; + padding: 15px 0 0 0; + } } .btn { @@ -202,7 +220,12 @@ width: 62px; text-align: center; margin-left: -19px; -} + padding-bottom: 10px; + + span { + display: block; + margin-top: 0; + } } } diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 77ba612548a..9215f29209c 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -20,6 +20,12 @@ module ProjectsHelper end end + def link_to_member_avatar(author, opts = {}) + default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" } + opts = default_opts.merge(opts) + image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar] + end + def link_to_member(project, author, opts = {}) default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name" } opts = default_opts.merge(opts) diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml index ed34b6d0aef..ea61935487c 100644 --- a/app/views/shared/issuable/_participants.html.haml +++ b/app/views/shared/issuable/_participants.html.haml @@ -1,6 +1,8 @@ .block.participants .sidebar-collapsed-icon = icon('users') + %span + = participants.count .title = pluralize participants.count, "participant" - participants.each do |participant| diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 123eba5f1cf..f4f04a42196 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -26,7 +26,10 @@ = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| .block.assignee .sidebar-collapsed-icon - = icon('user') + - if issuable.assignee + = link_to_member_avatar(issuable.assignee, size: 24) + - else + = icon('user') .title %label Assignee @@ -48,6 +51,11 @@ .block.milestone .sidebar-collapsed-icon = icon('balance-scale') + %span + - if issuable.milestone + = issuable.milestone.title + - else + No .title %label Milestone @@ -72,6 +80,8 @@ .block.labels .sidebar-collapsed-icon = icon('tags') + %span + = issuable.labels.count .title %label Labels - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) @@ -88,7 +98,7 @@ { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" } = render "shared/issuable/participants", participants: issuable.participants(current_user) - + %hr - if current_user - subscribed = issuable.subscribed?(current_user) .block.light -- cgit v1.2.1 From e2b6e9c3c531649535e47de0814dd4cb651411fa Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Sat, 30 Jan 2016 00:30:25 -0500 Subject: Add ajax calls to return JSON Fix subtitles on minimize. Fix styles for show. --- app/assets/stylesheets/framework/mobile.scss | 2 +- app/assets/stylesheets/framework/sidebar.scss | 9 +++++++++ app/controllers/projects/issues_controller.rb | 4 +++- app/views/projects/issues/show.html.haml | 1 - app/views/projects/merge_requests/_show.html.haml | 1 - app/views/shared/issuable/_sidebar.html.haml | 2 +- 6 files changed, 14 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 0997dfc287c..3bfac2ad9b5 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -116,7 +116,7 @@ display: none; } - aside { + aside:not(.right-sidebar){ display: none; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 1616c140c0d..b7f532c0771 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -284,6 +284,15 @@ @include collapsed-sidebar; } + .page-gutter { + &.right-sidebar-collapsed { + @include collapsed-gutter; + } + &.right-sidebar-expanded { + @include expanded-gutter; + } + } + .collapse-nav { display: none; } diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb index 68244883803..1b6ea280ad4 100644 --- a/app/controllers/projects/issues_controller.rb +++ b/app/controllers/projects/issues_controller.rb @@ -98,7 +98,9 @@ class Projects::IssuesController < Projects::ApplicationController format.json do render json: { saved: @issue.valid?, - assignee_avatar_url: @issue.assignee.try(:avatar_url) + assignee_avatar_url: @issue.assignee.try(:avatar_url), + milestone: @issue.milestone.title, + labels: @issue.labels.pluck(:id,:title,:color) } end end diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index a567c22c823..030f4a2e644 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -57,6 +57,5 @@ %section.col-md-12 .issuable-discussion = render 'projects/issues/discussion' - = render 'shared/show_aside' = render 'shared/issuable/sidebar', issuable: @issue \ No newline at end of file diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml index c2ecb48b094..da67645bc2b 100644 --- a/app/views/projects/merge_requests/_show.html.haml +++ b/app/views/projects/merge_requests/_show.html.haml @@ -73,7 +73,6 @@ %section.col-md-12 .issuable-discussion = render "projects/merge_requests/discussion" - = render 'shared/show_aside' #commits.commits.tab-pane - # This tab is always loaded via AJAX diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index f4f04a42196..0ed2c9c710d 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -23,7 +23,7 @@ %a.btn.btn-default.disabled{href: '#'} Next - = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| + = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update', 'data-type' => 'json'} do |f| .block.assignee .sidebar-collapsed-icon - if issuable.assignee -- cgit v1.2.1 From d87e317be449274983f5c515edf5285a1bb08c21 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 2 Feb 2016 14:27:45 -0500 Subject: Added correct colors and styles from antetype mockup. --- app/assets/stylesheets/framework/buttons.scss | 2 +- app/assets/stylesheets/framework/issue_box.scss | 2 +- app/assets/stylesheets/framework/variables.scss | 15 ++++++++------- app/assets/stylesheets/pages/issuable.scss | 4 ++-- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index c99292c3f83..b3d7874d277 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -2,7 +2,7 @@ @include border-radius(3px); font-size: $gl-font-size; font-weight: 500; - padding: $gl-vert-padding $gl-padding; + padding: $gl-vert-padding $gl-btn-padding; &:focus, &:active { diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index e93dbab0c42..08dcb563dce 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -9,7 +9,7 @@ display: block; float: left; - padding: 0 $gl-padding; + padding: 0 $gl-btn-padding; font-weight: normal; margin-right: 10px; font-size: $gl-font-size; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index f8b6e0e5e6f..5e249059c29 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -24,6 +24,7 @@ $header-height: 58px; $fixed-layout-width: 1280px; $gl-gray: #5a5a5a; $gl-padding: 16px; +$gl-btn-padding: 10px; $gl-vert-padding: 6px; $gl-padding-top:10px; $gl-avatar-size: 46px; @@ -38,12 +39,12 @@ $white-light: #FFFFFF; $white-normal: #ededed; $white-dark: #ededed; -$gray-light: #f7f7f7; -$gray-normal: #ededed; +$gray-light: #faf9f9; +$gray-normal: #f5f5f5; $gray-dark: #ededed; $gray-darkest: #c9c9c9; -$green-light: #31AF64; +$green-light: #38ae67; $green-normal: #2FAA60; $green-dark: #2CA05B; @@ -55,7 +56,7 @@ $blue-medium-light: #3498CB; $blue-medium: #2F8EBF; $blue-medium-dark: #2D86B4; -$orange-light: #FC6443; +$orange-light: rgba(252, 109, 38, 0.80); $orange-normal: #E75E40; $orange-dark: #CE5237; @@ -67,8 +68,8 @@ $border-white-light: #F1F2F4; $border-white-normal: #D6DAE2; $border-white-dark: #C6CACF; -$border-gray-light: #d1d1d1; -$border-gray-normal: #D6DAE2; +$border-gray-light: rgba(0, 0, 0, 0.06); +$border-gray-normal: rgba(0, 0, 0, 0.10);; $border-gray-dark: #C6CACF; $border-green-light: #2FAA60; @@ -79,7 +80,7 @@ $border-blue-light: #2D9FD8; $border-blue-normal: #2897CE; $border-blue-dark: #258DC1; -$border-orange-light: #ED5C3D; +$border-orange-light: #fc6d26; $border-orange-normal: #CE5237; $border-orange-dark: #C14E35; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 16429e01e0a..2c8fc509f20 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -71,7 +71,7 @@ .block { @include clearfix; padding: $gl-padding 0; - border-bottom: 1px solid #F0F0F0; + border-bottom: 1px solid $border-gray-light; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. width: 210px; @@ -195,7 +195,7 @@ .btn { background: $gray-normal; - border: 1px solid $gray-darkest; + border: 1px solid $border-gray-normal; } &.right-sidebar-collapsed { -- cgit v1.2.1 From 599e554ad4df76e0ec270aa0756a98b9044e877f Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 2 Feb 2016 19:42:19 -0500 Subject: Sidebar works after sidebar ajax calls. --- app/assets/javascripts/application.js.coffee | 2 +- app/assets/javascripts/issuable_context.js.coffee | 2 +- app/assets/stylesheets/pages/issuable.scss | 3 ++- app/views/projects/issues/update.js.haml | 6 +++--- app/views/projects/merge_requests/update.js.haml | 4 ++-- app/views/shared/issuable/_sidebar.html.haml | 2 +- 6 files changed, 10 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 02b0a32539a..be3b326075d 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -212,7 +212,7 @@ $ -> $this = $(this) $this.attr 'value', $this.val() - $('.right-sidebar').on 'click', '.gutter-toggle', (e) -> + $(document).on 'click', 'aside .gutter-toggle', (e) -> e.preventDefault() $this = $(this) $thisIcon = $this.find 'i' diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee index c2144aea25e..d17b1123418 100644 --- a/app/assets/javascripts/issuable_context.js.coffee +++ b/app/assets/javascripts/issuable_context.js.coffee @@ -10,7 +10,7 @@ class @IssuableContext $(".issuable-sidebar .inline-update").on "change", ".js-assignee", -> $(this).submit() - $(".edit-link").click (e) -> + $(document).on "click",".edit-link", (e) -> block = $(@).parents('.block') block.find('.selectbox').show() block.find('.value').hide() diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 2c8fc509f20..b10670afd40 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -97,7 +97,7 @@ .gutter-toggle { margin-left: 10px; - border-left: 1px solid #F0F0F0; + border-left: 1px solid $border-gray-light; padding-left: 10px; } } @@ -221,6 +221,7 @@ text-align: center; margin-left: -19px; padding-bottom: 10px; + color: #999999; span { display: block; diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml index 2f0f3fcfb06..3cec66d262b 100644 --- a/app/views/projects/issues/update.js.haml +++ b/app/views/projects/issues/update.js.haml @@ -1,3 +1,3 @@ -$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"); -$('.issuable-sidebar').parent().effect('highlight') -new Issue(); +$('aside.right-sidebar').parent().html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"); +$('aside.right-sidebar').effect('highlight') +new Issue(); \ No newline at end of file diff --git a/app/views/projects/merge_requests/update.js.haml b/app/views/projects/merge_requests/update.js.haml index 93db65ddf79..ce5157d69a2 100644 --- a/app/views/projects/merge_requests/update.js.haml +++ b/app/views/projects/merge_requests/update.js.haml @@ -1,3 +1,3 @@ -$('.issuable-sidebar').html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}"); -$('.issuable-sidebar').parent().effect('highlight') +$('aside.right-sidebar')[0].outerHTML= "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}"; +$('aside.right-sidebar').effect('highlight') merge_request = new MergeRequest(); diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 0ed2c9c710d..f4f04a42196 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -23,7 +23,7 @@ %a.btn.btn-default.disabled{href: '#'} Next - = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update', 'data-type' => 'json'} do |f| + = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f| .block.assignee .sidebar-collapsed-icon - if issuable.assignee -- cgit v1.2.1 From d6d3a132b887c286b5b74e2a14be327f3a302d26 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 3 Feb 2016 14:45:08 -0500 Subject: Fix sidebar replacement for issues & MRs --- app/views/projects/issues/update.js.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml index 3cec66d262b..c8e79ade110 100644 --- a/app/views/projects/issues/update.js.haml +++ b/app/views/projects/issues/update.js.haml @@ -1,3 +1,3 @@ -$('aside.right-sidebar').parent().html("#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"); +$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"); $('aside.right-sidebar').effect('highlight') new Issue(); \ No newline at end of file -- cgit v1.2.1 From bb81eff4bfcdee87095b03df04fd1086924984c0 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 3 Feb 2016 15:49:30 -0500 Subject: Issue sidebar bug fix. Thanks @rspeicher. --- app/controllers/projects/issues_controller.rb | 4 +--- app/views/projects/issues/update.js.haml | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb index 1b6ea280ad4..68244883803 100644 --- a/app/controllers/projects/issues_controller.rb +++ b/app/controllers/projects/issues_controller.rb @@ -98,9 +98,7 @@ class Projects::IssuesController < Projects::ApplicationController format.json do render json: { saved: @issue.valid?, - assignee_avatar_url: @issue.assignee.try(:avatar_url), - milestone: @issue.milestone.title, - labels: @issue.labels.pluck(:id,:title,:color) + assignee_avatar_url: @issue.assignee.try(:avatar_url) } end end diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml index c8e79ade110..a54733883b4 100644 --- a/app/views/projects/issues/update.js.haml +++ b/app/views/projects/issues/update.js.haml @@ -1,3 +1,3 @@ -$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"); -$('aside.right-sidebar').effect('highlight') +$('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"; +$('aside.right-sidebar').effect('highlight'); new Issue(); \ No newline at end of file -- cgit v1.2.1 From f660d8d0444fc3c953df93f66c42f9895bfe9ade Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 3 Feb 2016 16:04:48 -0500 Subject: Fixes sidebar width. --- app/assets/stylesheets/framework/variables.scss | 3 ++- app/assets/stylesheets/pages/issuable.scss | 12 +++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 5e249059c29..44d3d7715d2 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -13,7 +13,8 @@ $list-font-size: 15px; $sidebar_collapsed_width: 62px; $sidebar_width: 230px; $gutter_collapsed_width: 62px; -$gutter_width: 250px; +$gutter_width: 312px; +$gutter_inner_width: 280px; $avatar_radius: 50%; $code_font_size: 13px; $code_line_height: 1.5; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b10670afd40..6f71ad1f50b 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -74,7 +74,7 @@ border-bottom: 1px solid $border-gray-light; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. - width: 210px; + width: $gutter_inner_width; overflow-x: hidden; // -- @@ -96,7 +96,7 @@ } .gutter-toggle { - margin-left: 10px; + margin-left: 20px; border-left: 1px solid $border-gray-light; padding-left: 10px; } @@ -175,6 +175,12 @@ } } + .subscribe-button { + span { + margin-top: 0; + } + } + &.right-sidebar-collapsed { width: $sidebar_collapsed_width; padding-top: 0; @@ -211,7 +217,7 @@ } .gutter-toggle { - margin-left: -207px; + margin-left: -$gutter_inner_width + 4; } .sidebar-collapsed-icon { -- cgit v1.2.1 From e0efdc4bf759ed8129d12aed16e68fb7392eddc7 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 3 Feb 2016 20:35:26 -0500 Subject: Make size changes based on screen resize. --- app/assets/javascripts/application.js.coffee | 36 ++++++++++++++++++++++++++++ app/assets/stylesheets/pages/issuable.scss | 1 + 2 files changed, 37 insertions(+) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index be3b326075d..1abc4794f21 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -212,6 +212,13 @@ $ -> $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) @@ -240,4 +247,33 @@ $ -> $('.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('
'+ + '
'+ + '
'+ + '
') + checkBootstrapBreakpoints() + + $(window).on "resize", (e) -> + oldBootstrapBreakpoint = bootstrapBreakpoint + checkBootstrapBreakpoints() + if bootstrapBreakpoint != oldBootstrapBreakpoint + $(document).trigger('breakpoint:change',[bootstrapBreakpoint]) + + setBootstrapBreakpoints() new Aside() diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6f71ad1f50b..3bfbd9e17b7 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -184,6 +184,7 @@ &.right-sidebar-collapsed { width: $sidebar_collapsed_width; padding-top: 0; + overflow-x: hidden; hr { margin: 0; -- cgit v1.2.1 From f25ba6e03c6635b75a46e6f53c3cfee8109b74f9 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 4 Feb 2016 08:50:25 -0500 Subject: Resize sidebar on initial page refresh. --- app/assets/javascripts/application.js.coffee | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 1abc4794f21..b7c465401be 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -269,11 +269,19 @@ $ -> '
') checkBootstrapBreakpoints() - $(window).on "resize", (e) -> + fitSidebarForSize = -> oldBootstrapBreakpoint = bootstrapBreakpoint checkBootstrapBreakpoints() if bootstrapBreakpoint != oldBootstrapBreakpoint - $(document).trigger('breakpoint:change',[bootstrapBreakpoint]) + $(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() -- cgit v1.2.1 From 2e6c5fb28e2fb924addffd29345dab45b7980905 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 4 Feb 2016 11:10:11 -0500 Subject: Properly link to the right issue or merge request --- app/helpers/application_helper.rb | 20 ++++++++++++++++++++ app/views/shared/issuable/_sidebar.html.haml | 4 ++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 00f38932861..14f098d8355 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -293,6 +293,26 @@ module ApplicationHelper end end + def issuable_link_next(project,issuable) + if project.nil? + nil + elsif current_controller?(:issues) + namespace_project_issue_path(project.namespace, project, next_issuable_for(project, issuable.id).try(:iid)) + elsif current_controller?(:merge_requests) + namespace_project_merge_request_path(project.namespace, project, next_issuable_for(project, issuable.id).try(:iid)) + end + end + + def issuable_link_prev(project,issuable) + if project.nil? + nil + elsif current_controller?(:issues) + namespace_project_issue_path(project.namespace, project, prev_issuable_for(project, issuable.id).try(:iid)) + elsif current_controller?(:merge_requests) + namespace_project_merge_request_path(project.namespace, project, prev_issuable_for(project, issuable.id).try(:iid)) + end + end + def issuable_count(entity, project) if project.nil? 0 diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index f4f04a42196..cab500d7244 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -13,12 +13,12 @@ = icon('angle-double-right') .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'} - if has_prev_issuable?(@project, issuable.id) - = link_to 'Prev', namespace_project_issue_path(@project.namespace, @project, prev_issuable_for(@project, issuable.id).try(:iid)), class: 'btn btn-default' + = link_to 'Prev', issuable_link_prev(@project, issuable), class: 'btn btn-default' - else %a.btn.btn-default.disabled{href: '#'} Prev - if has_next_issuable?(@project, issuable.id) - = link_to 'Next', namespace_project_issue_path(@project.namespace, @project, next_issuable_for(@project, issuable.id).try(:iid)), class: 'btn btn-default' + = link_to 'Next', issuable_link_next(@project, issuable), class: 'btn btn-default' - else %a.btn.btn-default.disabled{href: '#'} Next -- cgit v1.2.1