BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 5cdac761 by Phil Hughes
Options

Started page two for labels dropdown to allow creating new labels

parent 8ca880c3
Showing with 149 additions and 20 deletions
app/assets/javascripts/gl_dropdown.js.coffee
......@@ -64,6 +64,7 @@ class GitLabDropdownRemote
class GitLabDropdown
LOADING_CLASS = "is-loading"
PAGE_TWO_CLASS = "is-page-two"
constructor: (@el, @options) ->
self = @
......@@ -96,11 +97,23 @@ class GitLabDropdown
@parseData data
# Event listeners
$(@el).parent().on "shown.bs.dropdown", @opened
$(@el).parent().on "hidden.bs.dropdown", @hidden
@dropdown.on "shown.bs.dropdown", @opened
@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
@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 $(@)
if self.options.clicked
......@@ -109,6 +122,15 @@ class GitLabDropdown
toggleLoading: ->
$('.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) ->
@renderedData = data
......@@ -136,6 +158,10 @@ class GitLabDropdown
if @options.filterable
@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
renderMenu: (html) ->
menu_html = ""
......@@ -149,12 +175,18 @@ class GitLabDropdown
# Append the menu into the dropdown
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
renderItem: (data) ->
html = ""
return "<li class='divider'></li>" if data is "divider"
if @options.renderRow
# Call the render function
html = @options.renderRow(data)
......@@ -189,7 +221,7 @@ class GitLabDropdown
value = if @options.id then @options.id(selectedObject) else selectedObject.id
if @options.multiSelect
fieldName = "[#{fieldName}]"
fieldName = "#{fieldName}[]"
else
@dropdown.find('.is-active').removeClass 'is-active'
@dropdown.parent().find("input[name='#{fieldName}']").remove()
......
app/assets/javascripts/milestone_select.js.coffee
......@@ -3,10 +3,29 @@ class @MilestoneSelect
$('.js-milestone-select').each (i, dropdown) ->
projectId = $(dropdown).data('project-id')
selectedMilestone = $(dropdown).data('selected')
showNo = $(dropdown).data('show-no')
showAny = $(dropdown).data('show-any')
$(dropdown).glDropdown(
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
search:
fields: ['title']
......@@ -15,7 +34,10 @@ class @MilestoneSelect
text: (milestone) ->
milestone.title
id: (milestone) ->
milestone.title
if milestone.title isnt "Any milestone"
milestone.title
else
""
isSelected: (milestone) ->
milestone.title is selectedMilestone
clicked: ->
......
app/assets/javascripts/users_select.js.coffee
......@@ -14,6 +14,8 @@ class @UsersSelect
data: (term, callback) =>
@users term, (users) =>
if term.length is 0
showDivider = 0
if firstUser
# Move current user to the front of the list
for obj, index in users
......@@ -23,12 +25,14 @@ class @UsersSelect
break
if showNullUser
showDivider += 1
users.unshift(
name: 'Unassigned',
id: 0
)
if showAnyUser
showDivider += 1
name = showAnyUser
name = 'Any User' if name == true
anyUser = {
......@@ -37,6 +41,9 @@ class @UsersSelect
}
users.unshift(anyUser)
if showDivider
users.splice(showDivider, 0, "divider")
# Send the data back
callback users
filterable: true
......@@ -49,12 +56,16 @@ class @UsersSelect
$(dropdown).parents('form').submit()
renderRow: (user) ->
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 ""
img = ""
if avatar
img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"
"<li>
<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'>
#{user.name}
</strong>
......
app/assets/stylesheets/framework/dropdowns.scss
......@@ -29,7 +29,7 @@
.dropdown-menu-toggle {
position: relative;
min-width: 160px;
width: 160px;
padding: 5px 20px 5px 10px;
background-color: $dropdown-toggle-bg;
color: $dropdown-toggle-color;
......@@ -128,7 +128,8 @@
}
.dropdown-menu-paging {
.dropdown-page-two {
.dropdown-page-two,
.dropdown-menu-back {
display: none;
}
......@@ -137,7 +138,8 @@
display: none;
}
.dropdown-page-two {
.dropdown-page-two,
.dropdown-menu-back {
display: block;
}
}
......@@ -160,6 +162,7 @@
.dropdown-menu-user-full-name {
display: block;
margin-bottom: 2px;
font-weight: 600;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
......
app/assets/stylesheets/pages/labels.scss
......@@ -7,6 +7,17 @@
display: inline-block;
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 {
......
app/helpers/dropdowns_helper.rb
......@@ -5,7 +5,7 @@ module DropdownsHelper
dropdown_output = ""
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.html_safe
end
......
app/views/shared/issuable/_filter.html.haml
......@@ -22,17 +22,67 @@
- if 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",
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
- if 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",
placeholder: "Search labels", footer_content: true, data: {field_name: "label_name", selected: params[:label_name], project_id: @project.id}) do
%ul.dropdown-footer-list
%li
= link_to namespace_project_labels_path(@project.namespace, @project) do
Manage labels
.dropdown
%button.dropdown-menu-toggle.js-label-select{type: "button", data: {toggle: "dropdown", field_name: "label_name", selected: params[:label_name], project_id: @project.id}}
%span.dropdown-toggle-text
Label
= icon('chevron-down')
.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
= 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