Commit 2c9894d4 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'project-title-dropdown' into 'master'

Project dropdown in header uses new dropdown



See merge request !3339
parents 6f4b4fd9 1ac6bdb5
...@@ -46,6 +46,7 @@ v 8.7.0 (unreleased) ...@@ -46,6 +46,7 @@ v 8.7.0 (unreleased)
v 8.6.6 v 8.6.6
- Fix error on language detection when repository has no HEAD (e.g., master branch). !3654 (Jeroen Bobbeldijk) - Fix error on language detection when repository has no HEAD (e.g., master branch). !3654 (Jeroen Bobbeldijk)
- Project switcher uses new dropdown styling
v 8.6.5 v 8.6.5
- Fix importing from GitHub Enterprise. !3529 - Fix importing from GitHub Enterprise. !3529
......
...@@ -122,7 +122,9 @@ class GitLabDropdown ...@@ -122,7 +122,9 @@ class GitLabDropdown
FILTER_INPUT = '.dropdown-input .dropdown-input-field' FILTER_INPUT = '.dropdown-input .dropdown-input-field'
constructor: (@el, @options) -> constructor: (@el, @options) ->
@dropdown = $(@el).parent() self = @
selector = $(@el).data "target"
@dropdown = if selector? then $(selector) else $(@el).parent()
# Set Defaults # Set Defaults
{ {
......
class @ProjectSelect class @ProjectSelect
constructor: -> constructor: ->
$('.js-projects-dropdown-toggle').each (i, dropdown) ->
$dropdown = $(dropdown)
$dropdown.glDropdown(
filterable: true
filterRemote: true
search:
fields: ['name_with_namespace']
data: (term, callback) ->
finalCallback = (projects) ->
callback projects
if @includeGroups
projectsCallback = (projects) ->
groupsCallback = (groups) ->
data = groups.concat(projects)
finalCallback(data)
Api.groups term, false, groupsCallback
else
projectsCallback = finalCallback
if @groupId
Api.groupProjects @groupId, term, projectsCallback
else
Api.projects term, @orderBy, projectsCallback
url: (project) ->
project.web_url
text: (project) ->
project.name_with_namespace
)
$('.ajax-project-select').each (i, select) -> $('.ajax-project-select').each (i, select) ->
@groupId = $(select).data('group-id') @groupId = $(select).data('group-id')
@includeGroups = $(select).data('include-groups') @includeGroups = $(select).data('include-groups')
......
...@@ -69,6 +69,7 @@ header { ...@@ -69,6 +69,7 @@ header {
} }
.header-content { .header-content {
position: relative;
height: $header-height; height: $header-height;
padding-right: 20px; padding-right: 20px;
...@@ -76,6 +77,10 @@ header { ...@@ -76,6 +77,10 @@ header {
padding-right: 0; padding-right: 0;
} }
.dropdown-menu {
margin-top: -5px;
}
.title { .title {
margin: 0; margin: 0;
font-size: 19px; font-size: 19px;
......
...@@ -65,21 +65,14 @@ module ProjectsHelper ...@@ -65,21 +65,14 @@ module ProjectsHelper
link_to(simple_sanitize(owner.name), user_path(owner)) link_to(simple_sanitize(owner.name), user_path(owner))
end end
project_link = link_to project_path(project), { class: "project-item-select-holder" } do project_link = link_to simple_sanitize(project.name), project_path(project), { class: "project-item-select-holder" }
link_output = simple_sanitize(project.name)
if current_user if current_user
link_output += project_select_tag :project_path, project_link << icon("chevron-down", class: "dropdown-toggle-caret js-projects-dropdown-toggle", data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" })
class: "project-item-select js-projects-dropdown",
data: { include_groups: false, order_by: 'last_activity_at' }
end end
link_output full_title = "#{namespace_link} / #{project_link}".html_safe
end full_title << ' &middot; '.html_safe << link_to(simple_sanitize(name), url) if name
project_link += icon "chevron-down", class: "dropdown-toggle-caret js-projects-dropdown-toggle" if current_user
full_title = namespace_link + ' / ' + project_link
full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url) if name
full_title full_title
end end
......
...@@ -45,6 +45,8 @@ ...@@ -45,6 +45,8 @@
%h1.title= title %h1.title= title
= yield :header_content
= render 'shared/outdated_browser' = render 'shared/outdated_browser'
- if @project && !@project.empty_repo? - if @project && !@project.empty_repo?
......
...@@ -17,4 +17,12 @@ ...@@ -17,4 +17,12 @@
- content_for :scripts_body do - content_for :scripts_body do
= render "layouts/init_auto_complete" if current_user = render "layouts/init_auto_complete" if current_user
- content_for :header_content do
.js-dropdown-menu-projects
.dropdown-menu.dropdown-select.dropdown-menu-projects
= dropdown_title("Go to a project")
= dropdown_filter("Search your projects")
= dropdown_content
= dropdown_loading
= render template: "layouts/application" = render template: "layouts/application"
...@@ -100,8 +100,7 @@ feature 'Project', feature: true do ...@@ -100,8 +100,7 @@ feature 'Project', feature: true do
it 'click toggle and show dropdown', js: true do it 'click toggle and show dropdown', js: true do
find('.js-projects-dropdown-toggle').click find('.js-projects-dropdown-toggle').click
wait_for_ajax expect(page).to have_css('.dropdown-menu-projects .dropdown-content li', count: 1)
expect(page).to have_css('.select2-results li', count: 1)
end end
end end
......
%h1.title .header-content
%h1.title
%a %a
GitLab Org GitLab Org
%a.project-item-select-holder{href: "/gitlab-org/gitlab-test"} %a.project-item-select-holder{href: "/gitlab-org/gitlab-test"}
GitLab Test GitLab Test
%input#project_path.project-item-select.js-projects-dropdown.ajax-project-select{type: "hidden", name: "project_path", "data-include-groups" => "false"} %i.fa.chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle{ "data-toggle" => "dropdown", "data-target" => ".header-content" }
%i.fa.chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle .js-dropdown-menu-projects
.dropdown-menu.dropdown-select.dropdown-menu-projects
.dropdown-title
%span Go to a project
%button.dropdown-title-button.dropdown-menu-close{"aria-label" => "Close", type: "button"}
%i.fa.fa-times.dropdown-menu-close-icon
.dropdown-input
%input.dropdown-input-field{id: "", placeholder: "Search your projects", type: "search", value: ""}
%i.fa.fa-search.dropdown-input-search
%i.fa.fa-times.dropdown-input-clear.js-dropdown-input-clear{role: "button"}
.dropdown-content
.dropdown-loading
%i.fa.fa-spinner.fa-spin
#= require bootstrap
#= require select2 #= require select2
#= require gl_dropdown
#= require api #= require api
#= require project_select #= require project_select
#= require project #= require project
...@@ -14,9 +16,6 @@ describe 'Project Title', -> ...@@ -14,9 +16,6 @@ describe 'Project Title', ->
fixture.load('project_title.html') fixture.load('project_title.html')
@project = new Project() @project = new Project()
spyOn(@project, 'changeProject').and.callFake (url) ->
window.current_project_url = url
describe 'project list', -> describe 'project list', ->
beforeEach => beforeEach =>
@projects_data = fixture.load('projects.json')[0] @projects_data = fixture.load('projects.json')[0]
...@@ -29,18 +28,9 @@ describe 'Project Title', -> ...@@ -29,18 +28,9 @@ describe 'Project Title', ->
it 'to show on toggle click', => it 'to show on toggle click', =>
$('.js-projects-dropdown-toggle').click() $('.js-projects-dropdown-toggle').click()
expect($('.header-content').hasClass('open')).toBe(true)
expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(true)
expect($('.ajax-project-dropdown li').length).toBe(@projects_data.length)
it 'hide dropdown', -> it 'hide dropdown', ->
$("#select2-drop-mask").click() $(".dropdown-menu-close-icon").click()
expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false)
it 'change project when clicking item', ->
$('.js-projects-dropdown-toggle').click()
$('.ajax-project-dropdown li:nth-child(2)').trigger('mouseup')
expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false) expect($('.header-content').hasClass('open')).toBe(false)
expect(window.current_project_url).toBe('http://localhost:3000/h5bp/html5-boilerplate')
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment