Skip to content

G
gitlab-ce
Commit ece28bda authored by Jacob Schatz's avatar Jacob Schatz Committed by Rémy Coutable
Browse files
Options

Merge branch 'issue-fade-load' into 'master' 

Changing filter dropdowns shows loading

Instead of doing a full refresh of the page - i've modified the filterResults method on the Issues object to work for this form as well

![issues](/uploads/3335f09f7df88b6d419de7fd3d6857d2/issues.gif)

Closes #14359

See merge request !3237
parent cf52a9b4
Show whitespace changes
Inline Side-by-side
Showing with 112 additions and 63 deletions
app/assets/javascripts/gl_dropdown.js.coffee
View file @ ece28bda
......@@ -246,11 +246,15 @@ class GitLabDropdown
if oldValue
value = "#{oldValue},#{value}"
else
@dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS
@dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
# Toggle active class for the tick mark
el.toggleClass "is-active"
# Toggle the dropdown label
if @options.toggleLabel
$(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
if value?
if !field.length
# Create hidden input for form
......
app/assets/javascripts/issues.js.coffee
View file @ ece28bda
......@@ -41,24 +41,28 @@
@timer = null
$("#issue_search").keyup ->
clearTimeout(@timer)
@timer = setTimeout(Issues.filterResults, 500)
@timer = setTimeout( ->
Issues.filterResults $("#issue_search_form")
, 500)
filterResults: =>
form = $("#issue_search_form")
search = $("#issue_search").val()
$('.issues-holder').css("opacity", '0.5')
issues_url = form.attr('action') + '?' + form.serialize()
filterResults: (form) =>
$('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
formAction = form.attr('action')
formData = form.serialize()
issuesUrl = formAction
issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
issuesUrl += formData
$.ajax
type: "GET"
url: form.attr('action')
data: form.serialize()
url: formAction
data: formData
complete: ->
$('.issues-holder').css("opacity", '1.0')
$('.issues-holder, .merge-requests-holder').css("opacity", '1.0')
success: (data) ->
$('.issues-holder').html(data.html)
$('.issues-holder, .merge-requests-holder').html(data.html)
# Change url so if user reload a page - search results are saved
history.replaceState {page: issues_url}, document.title, issues_url
history.replaceState {page: issuesUrl}, document.title, issuesUrl
Issues.reload()
dataType: "json"
......
app/assets/javascripts/labels_select.js.coffee
View file @ ece28bda
class @LabelsSelect
constructor: ->
$('.js-label-select').each (i, dropdown) ->
projectId = $(dropdown).data('project-id')
labelUrl = $(dropdown).data("labels")
selectedLabel = $(dropdown).data('selected')
$dropdown = $(dropdown)
projectId = $dropdown.data('project-id')
labelUrl = $dropdown.data('labels')
selectedLabel = $dropdown.data('selected')
if selectedLabel
selectedLabel = selectedLabel.split(",")
selectedLabel = selectedLabel.split(',')
newLabelField = $('#new_label_name')
newColorField = $('#new_label_color')
showNo = $(dropdown).data('show-no')
showAny = $(dropdown).data('show-any')
showNo = $dropdown.data('show-no')
showAny = $dropdown.data('show-any')
defaultLabel = $dropdown.text().trim()
if newLabelField.length
$('.suggest-colors-dropdown a').on "click", (e) ->
$('.suggest-colors-dropdown a').on 'click', (e) ->
e.preventDefault()
e.stopPropagation()
newColorField.val $(this).data("color")
newColorField.val $(this).data('color')
$('.js-dropdown-label-color-preview')
.css 'background-color', $(this).data("color")
.css 'background-color', $(this).data('color')
.addClass 'is-active'
$('.js-new-label-btn').on "click", (e) ->
$('.js-new-label-btn').on 'click', (e) ->
e.preventDefault()
e.stopPropagation()
if newLabelField.val() isnt "" && newColorField.val() isnt ""
if newLabelField.val() isnt '' and newColorField.val() isnt ''
$('.js-new-label-btn').disable()
# Create new label with API
......@@ -33,37 +35,38 @@ class @LabelsSelect
color: newColorField.val()
}, (label) ->
$('.js-new-label-btn').enable()
$('.dropdown-menu-back', $(dropdown).parent()).trigger "click"
$('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
$(dropdown).glDropdown(
$dropdown.glDropdown(
data: (term, callback) ->
$.ajax(
url: labelUrl
).done (data) ->
if showNo
data.unshift(
id: "0"
title: 'No label'
id: 0
title: 'No Label'
)
if showAny
data.unshift(
title: 'Any label'
isAny: true
title: 'Any Label'
)
if data.length > 2
data.splice 2, 0, "divider"
data.splice 2, 0, 'divider'
callback data
renderRow: (label) ->
if $.isArray(selectedLabel)
selected = ""
selected = ''
$.each selectedLabel, (i, selectedLbl) ->
selectedLbl = selectedLbl.trim()
if selected is "" && label.title is selectedLbl
selected = "is-active"
if selected is '' and label.title is selectedLbl
selected = 'is-active'
else
selected = if label.title is selectedLabel then "is-active" else ""
selected = if label.title is selectedLabel then 'is-active' else ''
"<li>
<a href='#' class='#{selected}'>
......@@ -74,10 +77,24 @@ class @LabelsSelect
search:
fields: ['title']
selectable: true
fieldName: $(dropdown).data('field-name')
toggleLabel: (selected) ->
if selected and selected.title isnt 'Any Label'
selected.title
else
defaultLabel
fieldName: $dropdown.data('field-name')
id: (label) ->
if label.isAny?
''
else
label.title
clicked: ->
if $(dropdown).hasClass "js-filter-submit"
$(dropdown).parents('form').submit()
page = $('body').data 'page'
isIssueIndex = page is 'projects:issues:index'
isMRIndex = page is page is 'projects:merge_requests:index'
if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Issues.filterResults $dropdown.closest('form')
else if $dropdown.hasClass 'js-filter-submit'
$dropdown.closest('form').submit()
)
app/assets/javascripts/milestone_select.js.coffee
View file @ ece28bda
class @MilestoneSelect
constructor: ->
$('.js-milestone-select').each (i, dropdown) ->
projectId = $(dropdown).data('project-id')
milestonesUrl = $(dropdown).data('milestones')
selectedMilestone = $(dropdown).data('selected')
showNo = $(dropdown).data('show-no')
showAny = $(dropdown).data('show-any')
useId = $(dropdown).data('use-id')
$dropdown = $(dropdown)
projectId = $dropdown.data('project-id')
milestonesUrl = $dropdown.data('milestones')
selectedMilestone = $dropdown.data('selected')
showNo = $dropdown.data('show-no')
showAny = $dropdown.data('show-any')
useId = $dropdown.data('use-id')
defaultLabel = $dropdown.text().trim()
$(dropdown).glDropdown(
$dropdown.glDropdown(
data: (term, callback) ->
$.ajax(
url: milestonesUrl
).done (data) ->
if showNo
data.unshift(
id: "0"
id: '0'
title: 'No Milestone'
)
......@@ -25,14 +27,19 @@ class @MilestoneSelect
)
if data.length > 2
data.splice 2, 0, "divider"
data.splice 2, 0, 'divider'
callback(data)
filterable: true
search:
fields: ['title']
selectable: true
fieldName: $(dropdown).data('field-name')
toggleLabel: (selected) ->
if selected && 'id' of selected
selected.title
else
defaultLabel
fieldName: $dropdown.data('field-name')
text: (milestone) ->
milestone.title
id: (milestone) ->
......@@ -40,12 +47,18 @@ class @MilestoneSelect
if milestone.title isnt "Any milestone"
milestone.title
else
""
''
else
milestone.id
isSelected: (milestone) ->
milestone.title is selectedMilestone
clicked: ->
if $(dropdown).hasClass "js-filter-submit"
$(dropdown).parents('form').submit()
page = $('body').data 'page'
isIssueIndex = page is 'projects:issues:index'
isMRIndex = page is page is 'projects:merge_requests:index'
if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Issues.filterResults $dropdown.closest('form')
else if $dropdown.hasClass 'js-filter-submit'
$dropdown.closest('form').submit()
)
app/assets/javascripts/users_select.js.coffee
View file @ ece28bda
......@@ -4,14 +4,16 @@ class @UsersSelect
@userPath = "/autocomplete/users/:id.json"
$('.js-user-search').each (i, dropdown) =>
@projectId = $(dropdown).data('project-id')
@showCurrentUser = $(dropdown).data('current-user')
showNullUser = $(dropdown).data('null-user')
showAnyUser = $(dropdown).data('any-user')
firstUser = $(dropdown).data('first-user')
selectedId = $(dropdown).data('selected')
$(dropdown).glDropdown(
$dropdown = $(dropdown)
@projectId = $dropdown.data('project-id')
@showCurrentUser = $dropdown.data('current-user')
showNullUser = $dropdown.data('null-user')
showAnyUser = $dropdown.data('any-user')
firstUser = $dropdown.data('first-user')
selectedId = $dropdown.data('selected')
defaultLabel = $dropdown.text().trim()
$dropdown.glDropdown(
data: (term, callback) =>
@users term, (users) =>
if term.length is 0
......@@ -52,10 +54,21 @@ class @UsersSelect
search:
fields: ['name', 'username']
selectable: true
fieldName: $(dropdown).data('field-name')
fieldName: $dropdown.data('field-name')
toggleLabel: (selected) ->
if selected && 'id' of selected
selected.name
else
defaultLabel
clicked: ->
if $(dropdown).hasClass "js-filter-submit"
$(dropdown).parents('form').submit()
page = $('body').data 'page'
isIssueIndex = page is 'projects:issues:index'
isMRIndex = page is page is 'projects:merge_requests:index'
if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
Issues.filterResults $dropdown.closest('form')
else if $dropdown.hasClass 'js-filter-submit'
$dropdown.closest('form').submit()
renderRow: (user) ->
username = if user.username then "@#{user.username}" else ""
avatar = if user.avatar_url then user.avatar_url else false
......
spec/features/merge_requests/filter_by_milestone_spec.rb
View file @ ece28bda
......@@ -30,8 +30,6 @@ feature 'Merge Request filtering by Milestone', feature: true do
def filter_by_milestone(title)
find(".js-milestone-select").click
sleep 0.5
find(".milestone-filter a", text: title).click
sleep 1
end
end
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7