Commit 5cdac761 authored by Phil Hughes's avatar Phil Hughes

Started page two for labels dropdown to allow creating new labels

parent 8ca880c3
...@@ -64,6 +64,7 @@ class GitLabDropdownRemote ...@@ -64,6 +64,7 @@ class GitLabDropdownRemote
class GitLabDropdown class GitLabDropdown
LOADING_CLASS = "is-loading" LOADING_CLASS = "is-loading"
PAGE_TWO_CLASS = "is-page-two"
constructor: (@el, @options) -> constructor: (@el, @options) ->
self = @ self = @
...@@ -96,11 +97,23 @@ class GitLabDropdown ...@@ -96,11 +97,23 @@ class GitLabDropdown
@parseData data @parseData data
# Event listeners # Event listeners
$(@el).parent().on "shown.bs.dropdown", @opened @dropdown.on "shown.bs.dropdown", @opened
$(@el).parent().on "hidden.bs.dropdown", @hidden @dropdown.on "hidden.bs.dropdown", @hidden
if @dropdown.find(".dropdown-toggle-page").length
@dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
e.preventDefault()
e.stopPropagation()
@togglePage()
if @options.selectable if @options.selectable
@dropdown.on "click", "a", (e) -> selector = "a"
if @dropdown.find(".dropdown-toggle-page").length
selector = ".dropdown-page-one a"
@dropdown.on "click", selector, (e) ->
self.rowClicked $(@) self.rowClicked $(@)
if self.options.clicked if self.options.clicked
...@@ -109,6 +122,15 @@ class GitLabDropdown ...@@ -109,6 +122,15 @@ class GitLabDropdown
toggleLoading: -> toggleLoading: ->
$('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
togglePage: ->
menu = $('.dropdown-menu', @dropdown)
if menu.hasClass(PAGE_TWO_CLASS)
if @remote
@remote.execute()
menu.toggleClass PAGE_TWO_CLASS
parseData: (data) -> parseData: (data) ->
@renderedData = data @renderedData = data
...@@ -136,6 +158,10 @@ class GitLabDropdown ...@@ -136,6 +158,10 @@ class GitLabDropdown
if @options.filterable if @options.filterable
@dropdown.find(".dropdown-input-field").blur().val("") @dropdown.find(".dropdown-input-field").blur().val("")
if @dropdown.find(".dropdown-toggle-page").length
$('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
# Render the full menu # Render the full menu
renderMenu: (html) -> renderMenu: (html) ->
menu_html = "" menu_html = ""
...@@ -149,12 +175,18 @@ class GitLabDropdown ...@@ -149,12 +175,18 @@ class GitLabDropdown
# Append the menu into the dropdown # Append the menu into the dropdown
appendMenu: (html) -> appendMenu: (html) ->
$('.dropdown-content', @dropdown).html html selector = '.dropdown-content'
if @dropdown.find(".dropdown-toggle-page").length
selector = ".dropdown-page-one .dropdown-content"
$(selector, @dropdown).html html
# Render the row # Render the row
renderItem: (data) -> renderItem: (data) ->
html = "" html = ""
return "<li class='divider'></li>" if data is "divider"
if @options.renderRow if @options.renderRow
# Call the render function # Call the render function
html = @options.renderRow(data) html = @options.renderRow(data)
...@@ -189,7 +221,7 @@ class GitLabDropdown ...@@ -189,7 +221,7 @@ class GitLabDropdown
value = if @options.id then @options.id(selectedObject) else selectedObject.id value = if @options.id then @options.id(selectedObject) else selectedObject.id
if @options.multiSelect if @options.multiSelect
fieldName = "[#{fieldName}]" fieldName = "#{fieldName}[]"
else else
@dropdown.find('.is-active').removeClass 'is-active' @dropdown.find('.is-active').removeClass 'is-active'
@dropdown.parent().find("input[name='#{fieldName}']").remove() @dropdown.parent().find("input[name='#{fieldName}']").remove()
......
...@@ -3,10 +3,29 @@ class @MilestoneSelect ...@@ -3,10 +3,29 @@ class @MilestoneSelect
$('.js-milestone-select').each (i, dropdown) -> $('.js-milestone-select').each (i, dropdown) ->
projectId = $(dropdown).data('project-id') projectId = $(dropdown).data('project-id')
selectedMilestone = $(dropdown).data('selected') selectedMilestone = $(dropdown).data('selected')
showNo = $(dropdown).data('show-no')
showAny = $(dropdown).data('show-any')
$(dropdown).glDropdown( $(dropdown).glDropdown(
data: (term, callback) -> data: (term, callback) ->
Api.milestones projectId, callback Api.milestones projectId, (data) ->
data = $.map data, (milestone) ->
return milestone if milestone.state isnt "closed"
if showNo
data.unshift(
title: 'No milestone'
)
if showAny
data.unshift(
title: 'Any milestone'
)
if data.length > 2
data.splice 2, 0, "divider"
callback(data)
filterable: true filterable: true
search: search:
fields: ['title'] fields: ['title']
...@@ -15,7 +34,10 @@ class @MilestoneSelect ...@@ -15,7 +34,10 @@ class @MilestoneSelect
text: (milestone) -> text: (milestone) ->
milestone.title milestone.title
id: (milestone) -> id: (milestone) ->
milestone.title if milestone.title isnt "Any milestone"
milestone.title
else
""
isSelected: (milestone) -> isSelected: (milestone) ->
milestone.title is selectedMilestone milestone.title is selectedMilestone
clicked: -> clicked: ->
......
...@@ -14,6 +14,8 @@ class @UsersSelect ...@@ -14,6 +14,8 @@ class @UsersSelect
data: (term, callback) => data: (term, callback) =>
@users term, (users) => @users term, (users) =>
if term.length is 0 if term.length is 0
showDivider = 0
if firstUser if firstUser
# Move current user to the front of the list # Move current user to the front of the list
for obj, index in users for obj, index in users
...@@ -23,12 +25,14 @@ class @UsersSelect ...@@ -23,12 +25,14 @@ class @UsersSelect
break break
if showNullUser if showNullUser
showDivider += 1
users.unshift( users.unshift(
name: 'Unassigned', name: 'Unassigned',
id: 0 id: 0
) )
if showAnyUser if showAnyUser
showDivider += 1
name = showAnyUser name = showAnyUser
name = 'Any User' if name == true name = 'Any User' if name == true
anyUser = { anyUser = {
...@@ -37,6 +41,9 @@ class @UsersSelect ...@@ -37,6 +41,9 @@ class @UsersSelect
} }
users.unshift(anyUser) users.unshift(anyUser)
if showDivider
users.splice(showDivider, 0, "divider")
# Send the data back # Send the data back
callback users callback users
filterable: true filterable: true
...@@ -49,12 +56,16 @@ class @UsersSelect ...@@ -49,12 +56,16 @@ class @UsersSelect
$(dropdown).parents('form').submit() $(dropdown).parents('form').submit()
renderRow: (user) -> renderRow: (user) ->
username = if user.username then "@#{user.username}" else "" username = if user.username then "@#{user.username}" else ""
avatar = if user.avatar_url then user.avatar_url else gon.default_avatar_url avatar = if user.avatar_url then user.avatar_url else false
selected = if user.id is selectedId then "is-active" else "" selected = if user.id is selectedId then "is-active" else ""
img = ""
if avatar
img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"
"<li> "<li>
<a href='#' class='dropdown-menu-user-link #{selected}'> <a href='#' class='dropdown-menu-user-link #{selected}'>
<img src='#{avatar}' class='avatar avatar-inline' width='30' /> #{img}
<strong class='dropdown-menu-user-full-name'> <strong class='dropdown-menu-user-full-name'>
#{user.name} #{user.name}
</strong> </strong>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.dropdown-menu-toggle { .dropdown-menu-toggle {
position: relative; position: relative;
min-width: 160px; width: 160px;
padding: 5px 20px 5px 10px; padding: 5px 20px 5px 10px;
background-color: $dropdown-toggle-bg; background-color: $dropdown-toggle-bg;
color: $dropdown-toggle-color; color: $dropdown-toggle-color;
...@@ -128,7 +128,8 @@ ...@@ -128,7 +128,8 @@
} }
.dropdown-menu-paging { .dropdown-menu-paging {
.dropdown-page-two { .dropdown-page-two,
.dropdown-menu-back {
display: none; display: none;
} }
...@@ -137,7 +138,8 @@ ...@@ -137,7 +138,8 @@
display: none; display: none;
} }
.dropdown-page-two { .dropdown-page-two,
.dropdown-menu-back {
display: block; display: block;
} }
} }
...@@ -160,6 +162,7 @@ ...@@ -160,6 +162,7 @@
.dropdown-menu-user-full-name { .dropdown-menu-user-full-name {
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px;
font-weight: 600;
line-height: 1; line-height: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
......
...@@ -7,6 +7,17 @@ ...@@ -7,6 +7,17 @@
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
&.suggest-colors-dropdown {
margin-bottom: 5px;
a {
@include border-radius(0);
width: 36.7px;
margin-right: 0;
margin-bottom: -5px;
}
}
} }
.label-row { .label-row {
......
...@@ -5,7 +5,7 @@ module DropdownsHelper ...@@ -5,7 +5,7 @@ module DropdownsHelper
dropdown_output = "" dropdown_output = ""
dropdown_output += content_tag :button, class: "dropdown-menu-toggle #{toggle_class}", id: id, type: "button", data: toggle_hash do dropdown_output += content_tag :button, class: "dropdown-menu-toggle #{toggle_class}", id: id, type: "button", data: toggle_hash do
output = toggle_text output = content_tag(:span, toggle_text, class: "dropdown-toggle-text")
output << icon('chevron-down') output << icon('chevron-down')
output.html_safe output.html_safe
end end
......
...@@ -22,17 +22,67 @@ ...@@ -22,17 +22,67 @@
- if params[:milestone_title] - if params[:milestone_title]
= hidden_field_tag(:milestone_title, params[:milestone_title]) = hidden_field_tag(:milestone_title, params[:milestone_title])
= dropdown_tag("Milestone", title: "Filter by milestone", toggle_class: 'js-milestone-select', filter: true, dropdown_class: "dropdown-menu-selectable", = dropdown_tag("Milestone", title: "Filter by milestone", toggle_class: 'js-milestone-select', filter: true, dropdown_class: "dropdown-menu-selectable",
placeholder: "Search milestones", data: {field_name: "milestone_title", selected: params[:milestone_title], project_id: @project.id}) placeholder: "Search milestones", footer_content: true, data: {show_no: true, show_any: true, field_name: "milestone_title", selected: params[:milestone_title], project_id: @project.id}) do
%ul.dropdown-footer-list
- if can? current_user, :admin_milestone, @project
%li
= link_to new_namespace_project_milestone_path(@project.namespace, @project), title: "New Milestone" do
Create new
%li
= link_to namespace_project_milestones_path(@project.namespace, @project) do
- if can? current_user, :admin_milestone, @project
Manage milestones
- else
View milestones
.filter-item.inline.labels-filter .filter-item.inline.labels-filter
- if params[:label_name] - if params[:label_name]
= hidden_field_tag(:label_name, params[:label_name]) = hidden_field_tag(:label_name, params[:label_name])
= dropdown_tag("Label", title: "Filter by label", toggle_class: "js-label-select", filter: true, dropdown_class: "dropdown-menu-labels dropdown-menu-selectable", .dropdown
placeholder: "Search labels", footer_content: true, data: {field_name: "label_name", selected: params[:label_name], project_id: @project.id}) do %button.dropdown-menu-toggle.js-label-select{type: "button", data: {toggle: "dropdown", field_name: "label_name", selected: params[:label_name], project_id: @project.id}}
%ul.dropdown-footer-list %span.dropdown-toggle-text
%li Label
= link_to namespace_project_labels_path(@project.namespace, @project) do = icon('chevron-down')
Manage labels .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
.dropdown-page-one
.dropdown-title
%span
Filter by label
%button.dropdown-title-button.dropdown-menu-close{type: "button", aria: {label: "close"}}
= icon('times')
.dropdown-input
= search_field_tag nil, nil, class: "dropdown-input-field", placeholder: "Search labels"
= icon('search')
.dropdown-content
.dropdown-footer
%ul.dropdown-footer-list
- if can? current_user, :admin_label, @project
%li
%a.dropdown-toggle-page{href: "#"}
Create new
%li
= link_to namespace_project_labels_path(@project.namespace, @project) do
- if can? current_user, :admin_label, @project
Manage labels
- else
View labels
- if can? current_user, :admin_label, @project
.dropdown-page-two
.dropdown-title
%button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
= icon('arrow-left')
%span
Create new label
.dropdown-content
= text_field_tag :label_name, nil, class: "dropdown-input-field", placeholder: "Name new label"
.suggest-colors.suggest-colors-dropdown
- suggested_colors.each do |color|
= link_to '#', style: "background-color: #{color}", data: { color: color } do
&nbsp
%button.btn.btn-primary{type: "button"}
Create
.dropdown-loading
= icon('spinner spin')
.pull-right .pull-right
= render 'shared/sort_dropdown' = render 'shared/sort_dropdown'
......
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