diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-03-29 17:30:39 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-03-29 17:30:39 +0000 |
commit | ac67ce854f46ae7948f8e4dbcd3ff512a467cba0 (patch) | |
tree | 3416c9044fe725cf1ac06312e19b262ca6eea11f | |
parent | 5906a256316b68a6b5d5457338b1ef583b494b22 (diff) | |
parent | 28b8b92e846ccd9f96b18bf6de385c44d8a8359c (diff) | |
download | gitlab-ce-ac67ce854f46ae7948f8e4dbcd3ff512a467cba0.tar.gz |
Merge branch 'scrollable-secondary-tabs' into 'master'
Fixed inner page tabs not being scrollable
Closes #18853
See merge request !10204
-rw-r--r-- | app/assets/javascripts/layout_nav.js | 5 | ||||
-rw-r--r-- | app/assets/javascripts/main.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/vue_pipelines_index/pipelines.js | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 37 | ||||
-rw-r--r-- | app/views/dashboard/_projects_head.html.haml | 6 | ||||
-rw-r--r-- | app/views/projects/merge_requests/_show.html.haml | 6 | ||||
-rw-r--r-- | app/views/search/_category.html.haml | 141 | ||||
-rw-r--r-- | app/views/shared/milestones/_tabs.html.haml | 47 | ||||
-rw-r--r-- | app/views/users/show.html.haml | 35 | ||||
-rw-r--r-- | changelogs/unreleased/scrollable-secondary-tabs.yml | 4 |
11 files changed, 182 insertions, 115 deletions
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index 08ca9e4fa4d..a5f99bcdd8f 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -11,8 +11,9 @@ }); }; - $(function() { - var $scrollingTabs = $('.scrolling-tabs'); + $(document).on('init.scrolling-tabs', () => { + const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized'); + $scrollingTabs.addClass('is-initialized'); hideEndFade($scrollingTabs); $(window).off('resize.nav').on('resize.nav', function() { diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 9007d661d01..665a59f3183 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -370,4 +370,6 @@ $(function () { new Aside(); gl.utils.initTimeagoTimeout(); + + $(document).trigger('init.scrolling-tabs'); }); diff --git a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js index b4480bd98c7..1626ae17a30 100644 --- a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js +++ b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js @@ -16,8 +16,12 @@ export default { }, }, + mounted() { + $(document).trigger('init.scrolling-tabs'); + }, + template: ` - <ul class="nav-links"> + <ul class="nav-links scrolling-tabs"> <li class="js-pipelines-tab-all" :class="{ 'active': scope === 'all'}"> diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js index 48f0e9036e8..9bdc232b7da 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js @@ -182,8 +182,14 @@ export default { <div :class="cssClass"> <div - class="top-area" + class="top-area scrolling-tabs-container inner-page-scroll-tabs" v-if="!isLoading && !shouldRenderEmptyState"> + <div class="fade-left"> + <i class="fa fa-angle-left" aria-hidden="true"></i> + </div> + <div class="fade-right"> + <i class="fa fa-angle-right" aria-hidden="true"></i> + </div> <navigation-tabs :scope="scope" :count="state.count" diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5ab505034b6..0e09638a8cc 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -476,3 +476,40 @@ } } } + +.inner-page-scroll-tabs { + position: relative; + + .fade-right { + @include fade(left, $white-light); + right: 0; + text-align: right; + + .fa { + right: 5px; + } + } + + .fade-left { + @include fade(right, $white-light); + left: 0; + text-align: left; + + .fa { + left: 5px; + } + } + + .fade-right, + .fade-left { + top: 16px; + bottom: auto; + } + + &.is-smaller { + .fade-right, + .fade-left { + top: 11px; + } + } +} diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 600ee63a5c0..4679b9549d1 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -1,7 +1,9 @@ = content_for :flash_message do = render 'shared/project_limit' -.top-area - %ul.nav-links +.top-area.scrolling-tabs-container.inner-page-scroll-tabs + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.nav-links.scrolling-tabs = nav_link(page: [dashboard_projects_path, root_path]) do = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do Your projects diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml index 6682a85ffa6..881ee9fd596 100644 --- a/app/views/projects/merge_requests/_show.html.haml +++ b/app/views/projects/merge_requests/_show.html.haml @@ -52,8 +52,10 @@ = 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-container - %ul.merge-request-tabs.nav-links.no-top.no-bottom + .merge-request-tabs-container.scrolling-tabs-container.inner-page-scroll-tabs + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.merge-request-tabs.nav-links.scrolling-tabs %li.notes-tab = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do Discussion diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml index 5afb95ac430..059a0d1ac78 100644 --- a/app/views/search/_category.html.haml +++ b/app/views/search/_category.html.haml @@ -1,71 +1,74 @@ -%ul.nav-links.search-filter - - if @project - %li{ class: active_when(@scope == 'blobs') } - = link_to search_filter_path(scope: 'blobs') do - Code - %span.badge - = @search_results.blobs_count - %li{ class: active_when(@scope == 'issues') } - = link_to search_filter_path(scope: 'issues') do - Issues - %span.badge - = @search_results.issues_count - %li{ class: active_when(@scope == 'merge_requests') } - = link_to search_filter_path(scope: 'merge_requests') do - Merge requests - %span.badge - = @search_results.merge_requests_count - %li{ class: active_when(@scope == 'milestones') } - = link_to search_filter_path(scope: 'milestones') do - Milestones - %span.badge - = @search_results.milestones_count - %li{ class: active_when(@scope == 'notes') } - = link_to search_filter_path(scope: 'notes') do - Comments - %span.badge - = @search_results.notes_count - %li{ class: active_when(@scope == 'wiki_blobs') } - = link_to search_filter_path(scope: 'wiki_blobs') do - Wiki - %span.badge - = @search_results.wiki_blobs_count - %li{ class: active_when(@scope == 'commits') } - = link_to search_filter_path(scope: 'commits') do - Commits - %span.badge - = @search_results.commits_count +.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.nav-links.search-filter.scrolling-tabs + - if @project + %li{ class: active_when(@scope == 'blobs') } + = link_to search_filter_path(scope: 'blobs') do + Code + %span.badge + = @search_results.blobs_count + %li{ class: active_when(@scope == 'issues') } + = link_to search_filter_path(scope: 'issues') do + Issues + %span.badge + = @search_results.issues_count + %li{ class: active_when(@scope == 'merge_requests') } + = link_to search_filter_path(scope: 'merge_requests') do + Merge requests + %span.badge + = @search_results.merge_requests_count + %li{ class: active_when(@scope == 'milestones') } + = link_to search_filter_path(scope: 'milestones') do + Milestones + %span.badge + = @search_results.milestones_count + %li{ class: active_when(@scope == 'notes') } + = link_to search_filter_path(scope: 'notes') do + Comments + %span.badge + = @search_results.notes_count + %li{ class: active_when(@scope == 'wiki_blobs') } + = link_to search_filter_path(scope: 'wiki_blobs') do + Wiki + %span.badge + = @search_results.wiki_blobs_count + %li{ class: active_when(@scope == 'commits') } + = link_to search_filter_path(scope: 'commits') do + Commits + %span.badge + = @search_results.commits_count - - elsif @show_snippets - %li{ class: active_when(@scope == 'snippet_blobs') } - = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do - Snippet Contents - %span.badge - = @search_results.snippet_blobs_count - %li{ class: active_when(@scope == 'snippet_titles') } - = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do - Titles and Filenames - %span.badge - = @search_results.snippet_titles_count + - elsif @show_snippets + %li{ class: active_when(@scope == 'snippet_blobs') } + = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do + Snippet Contents + %span.badge + = @search_results.snippet_blobs_count + %li{ class: active_when(@scope == 'snippet_titles') } + = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do + Titles and Filenames + %span.badge + = @search_results.snippet_titles_count - - else - %li{ class: active_when(@scope == 'projects') } - = link_to search_filter_path(scope: 'projects') do - Projects - %span.badge - = @search_results.projects_count - %li{ class: active_when(@scope == 'issues') } - = link_to search_filter_path(scope: 'issues') do - Issues - %span.badge - = @search_results.issues_count - %li{ class: active_when(@scope == 'merge_requests') } - = link_to search_filter_path(scope: 'merge_requests') do - Merge requests - %span.badge - = @search_results.merge_requests_count - %li{ class: active_when(@scope == 'milestones') } - = link_to search_filter_path(scope: 'milestones') do - Milestones - %span.badge - = @search_results.milestones_count + - else + %li{ class: active_when(@scope == 'projects') } + = link_to search_filter_path(scope: 'projects') do + Projects + %span.badge + = @search_results.projects_count + %li{ class: active_when(@scope == 'issues') } + = link_to search_filter_path(scope: 'issues') do + Issues + %span.badge + = @search_results.issues_count + %li{ class: active_when(@scope == 'merge_requests') } + = link_to search_filter_path(scope: 'merge_requests') do + Merge requests + %span.badge + = @search_results.merge_requests_count + %li{ class: active_when(@scope == 'milestones') } + = link_to search_filter_path(scope: 'milestones') do + Milestones + %span.badge + = @search_results.milestones_count diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml index a0e9ec46220..9a4502873ef 100644 --- a/app/views/shared/milestones/_tabs.html.haml +++ b/app/views/shared/milestones/_tabs.html.haml @@ -1,26 +1,29 @@ -%ul.nav-links.no-top.no-bottom - - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project) - %li.active - = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do - Issues - %span.badge= milestone.issues_visible_to_user(current_user).size +.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.nav-links.scrolling-tabs + - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project) + %li.active + = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do + Issues + %span.badge= milestone.issues_visible_to_user(current_user).size + %li + = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do + Merge Requests + %span.badge= milestone.merge_requests.size + - else + %li.active + = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do + Merge Requests + %span.badge= milestone.merge_requests.size %li - = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do - Merge Requests - %span.badge= milestone.merge_requests.size - - else - %li.active - = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do - Merge Requests - %span.badge= milestone.merge_requests.size - %li - = link_to '#tab-participants', 'data-toggle' => 'tab' do - Participants - %span.badge= milestone.participants.count - %li - = link_to '#tab-labels', 'data-toggle' => 'tab' do - Labels - %span.badge= milestone.labels.count + = link_to '#tab-participants', 'data-toggle' => 'tab' do + Participants + %span.badge= milestone.participants.count + %li + = link_to '#tab-labels', 'data-toggle' => 'tab' do + Labels + %span.badge= milestone.labels.count - show_project_name = local_assigns.fetch(:show_project_name, false) - show_full_project_name = local_assigns.fetch(:show_full_project_name, false) diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index 1e5b0d2ece2..969ea7ab9e6 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -79,22 +79,25 @@ %p.profile-user-bio = @user.bio - %ul.nav-links.center.user-profile-nav - %li.js-activity-tab - = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do - Activity - %li.js-groups-tab - = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do - Groups - %li.js-contributed-tab - = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do - Contributed projects - %li.js-projects-tab - = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do - Personal projects - %li.js-snippets-tab - = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do - Snippets + .scrolling-tabs-container + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.nav-links.center.user-profile-nav.scrolling-tabs + %li.js-activity-tab + = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do + Activity + %li.js-groups-tab + = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do + Groups + %li.js-contributed-tab + = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do + Contributed projects + %li.js-projects-tab + = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do + Personal projects + %li.js-snippets-tab + = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do + Snippets %div{ class: container_class } - if @user == current_user && !show_user_callout? diff --git a/changelogs/unreleased/scrollable-secondary-tabs.yml b/changelogs/unreleased/scrollable-secondary-tabs.yml new file mode 100644 index 00000000000..963d5d325dc --- /dev/null +++ b/changelogs/unreleased/scrollable-secondary-tabs.yml @@ -0,0 +1,4 @@ +--- +title: Fixed tabs not scrolling on mobile +merge_request: +author: |