kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch '31106-tabs-alignment' into 'master'

Browse source 
fix Resolved Discussions counter wrapping to next line

Closes #31106

See merge request !10775
This commit is contained in:
Annabel Dunstone Gray 2017-05-15 17:43:42 +00:00
commit aab904f743
7 changed files with 82 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/framework/nav.scss
View file

@ -24,10 +24,10 @@
} }
@mixin scrolling-links() { @mixin scrolling-links() {
white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
display: flex;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@ -35,6 +35,7 @@
} }
.nav-links { .nav-links {
display: flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
@ -42,17 +43,16 @@
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
li { li {
display: inline-block; display: flex;
a { a {
display: inline-block;
padding: $gl-btn-padding; padding: $gl-btn-padding;
padding-bottom: 11px; padding-bottom: 11px;
margin-bottom: -1px;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
white-space: nowrap;
&:hover, &:hover,
&:active, &:active,
@ -85,10 +85,10 @@
.container-fluid { .container-fluid {
background-color: $gray-normal; background-color: $gray-normal;
margin-bottom: 0; margin-bottom: 0;
display: flex;
} }
li { li {
&.active a { &.active a {
border-bottom: none; border-bottom: none;
color: $link-underline-blue; color: $link-underline-blue;
@ -137,9 +137,9 @@
} }
.nav-links { .nav-links {
display: inline-block;
margin-bottom: 0; margin-bottom: 0;
border-bottom: none; border-bottom: none;
float: left;
&.wide { &.wide {
width: 100%; width: 100%;
@ -337,6 +337,10 @@
border-bottom: none; border-bottom: none;
height: 51px; height: 51px;
@media (min-width: $screen-sm-min) {
justify-content: center;
}
li { li {
a { a {
padding-top: 10px; padding-top: 10px;
@ -347,6 +351,7 @@
.scrolling-tabs-container { .scrolling-tabs-container {
position: relative; position: relative;
overflow: hidden;
.nav-links { .nav-links {
@include scrolling-links(); @include scrolling-links();
@ -484,10 +489,7 @@
.inner-page-scroll-tabs { .inner-page-scroll-tabs {
position: relative; position: relative;
overflow: hidden;
.nav-links {
padding-bottom: 1px;
}
.fade-right { .fade-right {
@include fade(left, $white-light); @include fade(left, $white-light);

10
app/assets/stylesheets/pages/issuable.scss
View file

@ -23,16 +23,6 @@
.merge-manually { .merge-manually {
@extend .fixed-width-container; @extend .fixed-width-container;
} }
.merge-request-tabs-holder {
&.affix {
border-bottom: 1px solid $border-color;
.nav-links {
border: 0;
}
}
}
} }
.merge-request-details { .merge-request-details {

20
app/assets/stylesheets/pages/merge_requests.scss
View file

@ -693,6 +693,7 @@
top: $header-height; top: $header-height;
z-index: 100; z-index: 100;
background-color: $white-light; background-color: $white-light;
border-bottom: 1px solid $border-color;
@media(min-width: $screen-sm-min) { @media(min-width: $screen-sm-min) {
position: sticky; position: sticky;
@ -712,6 +713,16 @@
padding-right: $gl-padding; padding-right: $gl-padding;
} }
} }
.nav-links {
border: 0;
}
}
.merge-request-tabs {
display: flex;
margin-bottom: 0;
padding: 0;
} }
.limit-container-width { .limit-container-width {
@ -722,6 +733,15 @@
} }
} }
.merge-request-tabs-container {
display: flex;
justify-content: space-between;
@media (max-width: $screen-xs-max) {
flex-direction: column-reverse;
}
}
.limit-container-width:not(.container-limited) { .limit-container-width:not(.container-limited) {
.merge-request-tabs-holder:not(.affix) { .merge-request-tabs-holder:not(.affix) {
.merge-request-tabs-container { .merge-request-tabs-container {

9
app/assets/stylesheets/pages/notes.scss
View file

@ -609,6 +609,15 @@ ul.notes {
} }
.line-resolve-all-container { .line-resolve-all-container {
@media (min-width: $screen-sm-min) {
margin-right: 0;
padding-left: $gl-padding;
}
> div {
white-space: nowrap;
}
.btn-group { .btn-group {
margin-left: -4px; margin-left: -4px;
} }

70
app/views/projects/merge_requests/_show.html.haml
View file

@ -27,40 +27,42 @@
= render 'award_emoji/awards_block', awardable: @merge_request, inline: true = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
.merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') } .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
.merge-request-tabs-container.scrolling-tabs-container.inner-page-scroll-tabs .merge-request-tabs-container
.fade-left= icon('angle-left') .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
.fade-right= icon('angle-right') .fade-left= icon('angle-left')
%ul.merge-request-tabs.nav-links.scrolling-tabs .fade-right= icon('angle-right')
%li.notes-tab .nav-links.scrolling-tabs
= link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do %ul.merge-request-tabs
Discussion %li.notes-tab
%span.badge= @merge_request.related_notes.user.count = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
- if @merge_request.source_project Discussion
%li.commits-tab %span.badge= @merge_request.related_notes.user.count
= link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do - if @merge_request.source_project
Commits %li.commits-tab
%span.badge= @commits_count = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
- if @pipelines.any? Commits
%li.pipelines-tab %span.badge= @commits_count
= link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do - if @pipelines.any?
Pipelines %li.pipelines-tab
%span.badge= @pipelines.size = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
%li.diffs-tab Pipelines
= link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do %span.badge= @pipelines.size
Changes %li.diffs-tab
%span.badge= @merge_request.diff_size = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
%li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true } Changes
%resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" } %span.badge= @merge_request.diff_size
%div #resolve-count-app.line-resolve-all-container.prepend-top-10{ "v-cloak" => true }
.line-resolve-all{ "v-show" => "discussionCount > 0", %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" } %div
%span.line-resolve-btn.is-disabled{ type: "button", .line-resolve-all{ "v-show" => "discussionCount > 0",
":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" } ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
= render "shared/icons/icon_status_success.svg" %span.line-resolve-btn.is-disabled{ type: "button",
%span.line-resolve-text ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
{{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved = render "shared/icons/icon_status_success.svg"
= render "discussions/new_issue_for_all_discussions", merge_request: @merge_request %span.line-resolve-text
= render "discussions/jump_to_next" {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
= render "discussions/new_issue_for_all_discussions", merge_request: @merge_request
= render "discussions/jump_to_next"
.tab-content#diff-notes-app .tab-content#diff-notes-app
#notes.notes.tab-pane.voting_notes #notes.notes.tab-pane.voting_notes

4
changelogs/unreleased/31106-tabs-alignment.yml Normal file
View file

@ -0,0 +1,4 @@
---
title: prevent nav tabs from wrapping to new line
merge_request:
author:

2
spec/features/issues/create_issue_for_discussions_in_merge_request_spec.rb
View file

@ -14,7 +14,7 @@ feature 'Resolving all open discussions in a merge request from an issue', featu
end end
it 'shows a button to resolve all discussions by creating a new issue' do it 'shows a button to resolve all discussions by creating a new issue' do
within('li#resolve-count-app') do within('#resolve-count-app') do
expect(page).to have_link "Resolve all discussions in new issue", href: new_namespace_project_issue_path(project.namespace, project, merge_request_to_resolve_discussions_of: merge_request.iid) expect(page).to have_link "Resolve all discussions in new issue", href: new_namespace_project_issue_path(project.namespace, project, merge_request_to_resolve_discussions_of: merge_request.iid)
end end
end end