diff options
Diffstat (limited to 'app/assets/javascripts')
| -rw-r--r-- | app/assets/javascripts/gl_dropdown.js.coffee | 50 | ||||
| -rw-r--r-- | app/assets/javascripts/issuable_context.js.coffee | 23 | ||||
| -rw-r--r-- | app/assets/javascripts/labels_select.js.coffee | 147 | ||||
| -rw-r--r-- | app/assets/javascripts/lib/animate.js.coffee | 13 | ||||
| -rw-r--r-- | app/assets/javascripts/milestone_select.js.coffee | 90 | ||||
| -rw-r--r-- | app/assets/javascripts/users_select.js.coffee | 111 |
6 files changed, 351 insertions, 83 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 4b78bcde774..2b56ab2e6de 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -126,8 +126,10 @@ class GitLabDropdown @selectFirstRow() # Event listeners + @dropdown.on "shown.bs.dropdown", @opened @dropdown.on "hidden.bs.dropdown", @hidden + @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate if @dropdown.find(".dropdown-toggle-page").length @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) => @@ -143,10 +145,11 @@ class GitLabDropdown selector = ".dropdown-page-one .dropdown-content a" @dropdown.on "click", selector, (e) -> + e.preventDefault() self.rowClicked $(@) if self.options.clicked - self.options.clicked() + self.options.clicked.call(@,e) toggleLoading: -> $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS @@ -176,6 +179,15 @@ class GitLabDropdown @appendMenu(full_html) + shouldPropagate: (e) => + if @options.multiSelect + $target = $(e.target) + if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') + e.stopPropagation() + return false + else + return true + opened: => contentHtml = $('.dropdown-content', @dropdown).html() if @remote && contentHtml is "" @@ -184,7 +196,7 @@ class GitLabDropdown if @options.filterable @dropdown.find(".dropdown-input-field").focus() - hidden: => + hidden: (e) => if @options.filterable @dropdown .find(".dropdown-input-field") @@ -195,6 +207,9 @@ class GitLabDropdown if @dropdown.find(".dropdown-toggle-page").length $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS + if @options.hidden + @options.hidden.call(@,e) + # Render the full menu renderMenu: (html) -> @@ -226,6 +241,13 @@ class GitLabDropdown html = @options.renderRow(data) else selected = if @options.isSelected then @options.isSelected(data) else false + if not selected + value = if @options.id then @options.id(data) else data.id + fieldName = @options.fieldName + field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']") + if field.length + selected = true + url = if @options.url then @options.url(data) else "#" text = if @options.text then @options.text(data) else "" cssClass = ""; @@ -258,26 +280,28 @@ class GitLabDropdown rowClicked: (el) -> fieldName = @options.fieldName - field = @dropdown.parent().find("input[name='#{fieldName}']") - + selectedIndex = el.parent().index() + if @renderedData + selectedObject = @renderedData[selectedIndex] + value = if @options.id then @options.id(selectedObject, el) else selectedObject.id + field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']") if el.hasClass(ACTIVE_CLASS) + el.removeClass(ACTIVE_CLASS) field.remove() else fieldName = @options.fieldName selectedIndex = el.parent().index() if @renderedData selectedObject = @renderedData[selectedIndex] + selectedObject.selected = true value = if @options.id then @options.id(selectedObject, el) else selectedObject.id if !value? field.remove() - if @options.multiSelect - oldValue = field.val() - if oldValue - value = "#{oldValue},#{value}" - else + if not @options.multiSelect @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS + @dropdown.parent().find("input[name='#{fieldName}']").remove() # Toggle active class for the tick mark el.toggleClass "is-active" @@ -285,15 +309,15 @@ class GitLabDropdown # 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 - input = "<input type='hidden' name='#{fieldName}' />" + input = "<input type='hidden' name='#{fieldName}' value='#{value}' />" + if @options.inputId? + input = $(input) + .attr('id', @options.inputId) @dropdown.before input - @dropdown.parent().find("input[name='#{fieldName}']").val value - selectFirstRow: -> selector = '.dropdown-content li:first-child a' if @dropdown.find(".dropdown-toggle-page").length diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee index d6d09b36d8d..6fc924d3d66 100644 --- a/app/assets/javascripts/issuable_context.js.coffee +++ b/app/assets/javascripts/issuable_context.js.coffee @@ -1,8 +1,7 @@ class @IssuableContext - constructor: -> + constructor: (currentUser) -> @initParticipants() - - new UsersSelect() + new UsersSelect(currentUser) $('select.select2').select2({width: 'resolve', dropdownAutoWidth: true}) $(".issuable-sidebar .inline-update").on "change", "select", -> @@ -11,10 +10,20 @@ class @IssuableContext $(this).submit() $(document).on "click",".edit-link", (e) -> - block = $(@).parents('.block') - block.find('.selectbox').show() - block.find('.value').hide() - block.find('.js-select2').select2("open") + $block = $(@).parents('.block') + $selectbox = $block.find('.selectbox') + if $selectbox.is(':visible') + $selectbox.hide() + $block.find('.value').show() + else + $selectbox.show() + $block.find('.value').hide() + + if $selectbox.is(':visible') + setTimeout (-> + $block.find('.dropdown-menu-toggle').trigger 'click' + ), 0 + $(".right-sidebar").niceScroll() diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee index e08648d583b..b5c7af9a8ad 100644 --- a/app/assets/javascripts/labels_select.js.coffee +++ b/app/assets/javascripts/labels_select.js.coffee @@ -4,14 +4,20 @@ class @LabelsSelect $dropdown = $(dropdown) projectId = $dropdown.data('project-id') labelUrl = $dropdown.data('labels') + issueUpdateURL = $dropdown.data('issueUpdate') selectedLabel = $dropdown.data('selected') - if selectedLabel - selectedLabel = selectedLabel.toString().split(',') + if selectedLabel? + selectedLabel = selectedLabel.split(',') newLabelField = $('#new_label_name') newColorField = $('#new_label_color') showNo = $dropdown.data('show-no') showAny = $dropdown.data('show-any') defaultLabel = $dropdown.data('default-label') + abilityName = $dropdown.data('ability-name') + $selectbox = $dropdown.closest('.selectbox') + $block = $selectbox.closest('.block') + $value = $block.find('.value') + $loading = $block.find('.block-loading').fadeOut() if newLabelField.length $newLabelCreateButton = $('.js-new-label-btn') @@ -21,6 +27,22 @@ class @LabelsSelect # Suggested colors in the dropdown to chose from pre-chosen colors $('.suggest-colors-dropdown a').on 'click', (e) -> + + issueURLSplit = issueUpdateURL.split('/') if issueUpdateURL? + if issueUpdateURL + labelHTMLTemplate = _.template( + '<% _.each(labels, function(label){ %> + <a href="<%= ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?label_name=<%= label.title %>"> + <span class="label color-label" style="background-color: <%= label.color %>;"> + <%= label.title %> + </span> + </a> + <% }); %>' + ); + labelNoneHTMLTemplate = _.template('<div class="light">None</div>') + + if newLabelField.length and $dropdown.hasClass 'js-extra-options' + $('.suggest-colors-dropdown a').on "click", (e) -> e.preventDefault() e.stopPropagation() newColorField @@ -57,6 +79,23 @@ class @LabelsSelect # This allows us to enable the button when ready enableLabelCreateButton = -> if newLabelField.val() isnt '' and newColorField.val() isnt '' + $newLabelError.hide() + $('.js-new-label-btn').disable() + + # Create new label with API + Api.newLabel projectId, { + name: newLabelField.val() + color: newColorField.val() + }, (label) -> + $('.js-new-label-btn').enable() + + if label.message? + $newLabelError + .text label.message + .show() + else + $('.dropdown-menu-back', $dropdown.parent()).trigger 'click' + $newLabelCreateButton.enable() else $newLabelCreateButton.disable() @@ -90,41 +129,78 @@ class @LabelsSelect else $('.dropdown-menu-back', $dropdown.parent()).trigger 'click' + saveLabelData = -> + selected = $dropdown + .closest('.selectbox') + .find("input[name='#{$dropdown.data('field-name')}']") + .map(-> + @value + ).get() + data = {} + data[abilityName] = {} + data[abilityName].label_ids = selected + if not selected.length + data[abilityName].label_ids = [''] + $loading.fadeIn() + $.ajax( + type: 'PUT' + url: issueUpdateURL + dataType: 'JSON' + data: data + ).done (data) -> + $loading.fadeOut() + $selectbox.hide() + data.issueURLSplit = issueURLSplit + if not data.labels.length + template = labelNoneHTMLTemplate() + else + template = labelHTMLTemplate(data) + href = $value + .show() + .html(template) + $value + .find('a') + .each((i) -> + setTimeout(=> + glAnimate($(@), 'pulse') + ,200 * i + ) + ) + + $dropdown.glDropdown( data: (term, callback) -> $.ajax( url: labelUrl ).done (data) -> - if showNo - data.unshift( - id: 0 - title: 'No Label' - ) - - if showAny - data.unshift( - isAny: true - title: 'Any Label' - ) - - if data.length > 2 - data.splice 2, 0, 'divider' - + if $dropdown.hasClass 'js-extra-options' + if showNo + data.unshift( + id: 0 + title: 'No Label' + ) + + if showAny + data.unshift( + isAny: true + title: 'Any Label' + ) + + if data.length > 2 + data.splice 2, 0, 'divider' callback data + renderRow: (label) -> - if $.isArray(selectedLabel) - selected = '' - $.each selectedLabel, (i, selectedLbl) -> - selectedLbl = selectedLbl.trim() - if selected is '' and label.title is selectedLbl - selected = 'is-active' - else - selected = if label.title is selectedLabel then 'is-active' else '' + selectedClass = '' + if $selectbox.find("input[type='hidden']\ + [name='#{$dropdown.data('field-name')}']\ + [value='#{label.id}']").length + selectedClass = 'is-active' color = if label.color? then "<span class='dropdown-label-box' style='background-color: #{label.color}'></span>" else "" "<li> - <a href='#' class='#{selected}'> + <a href='#' class='#{selectedClass}'> #{color} #{label.title} </a> @@ -133,6 +209,7 @@ class @LabelsSelect search: fields: ['title'] selectable: true + toggleLabel: (selected) -> if selected and selected.title isnt 'Any Label' selected.title @@ -142,8 +219,19 @@ class @LabelsSelect id: (label) -> if label.isAny? '' - else + else if $dropdown.hasClass "js-filter-submit" label.title + else + label.id + + hidden: -> + $selectbox.hide() + $value.show() + if $dropdown.hasClass 'js-multiselect' + saveLabelData() + + multiSelect: $dropdown.hasClass 'js-multiselect' + clicked: -> page = $('body').data 'page' isIssueIndex = page is 'projects:issues:index' @@ -153,4 +241,9 @@ class @LabelsSelect Issues.filterResults $dropdown.closest('form') else if $dropdown.hasClass 'js-filter-submit' $dropdown.closest('form').submit() + else + if $dropdown.hasClass 'js-multiselect' + return + else + saveLabelData() ) diff --git a/app/assets/javascripts/lib/animate.js.coffee b/app/assets/javascripts/lib/animate.js.coffee new file mode 100644 index 00000000000..8f892b5a2b9 --- /dev/null +++ b/app/assets/javascripts/lib/animate.js.coffee @@ -0,0 +1,13 @@ +((w) -> + + w.glAnimate = ($el, animation, done) -> + $el + .removeClass() + .addClass(animation + ' animated') + .one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', -> + $(this).removeClass() + return + return + return + +) window
\ No newline at end of file diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee index e17a1adb648..d1746c38e74 100644 --- a/app/assets/javascripts/milestone_select.js.coffee +++ b/app/assets/javascripts/milestone_select.js.coffee @@ -1,35 +1,52 @@ class @MilestoneSelect - constructor: -> + constructor: (currentProject) -> + if currentProject? + _this = @ + @currentProject = JSON.parse(currentProject) $('.js-milestone-select').each (i, dropdown) -> $dropdown = $(dropdown) projectId = $dropdown.data('project-id') milestonesUrl = $dropdown.data('milestones') + issueUpdateURL = $dropdown.data('issueUpdate') selectedMilestone = $dropdown.data('selected') showNo = $dropdown.data('show-no') showAny = $dropdown.data('show-any') useId = $dropdown.data('use-id') defaultLabel = $dropdown.data('default-label') + issuableId = $dropdown.data('issuable-id') + abilityName = $dropdown.data('ability-name') + $selectbox = $dropdown.closest('.selectbox') + $block = $selectbox.closest('.block') + $value = $block.find('.value') + $loading = $block.find('.block-loading').fadeOut() + + if issueUpdateURL + milestoneLinkTemplate = _.template( + '<a href="/<%= namespace %>/<%= path %>/milestones/<%= iid %>"><%= title %></a>' + ) + + milestoneLinkNoneTemplate = '<div class="light">None</div>' $dropdown.glDropdown( data: (term, callback) -> $.ajax( url: milestonesUrl ).done (data) -> - if showNo - data.unshift( - id: '0' - title: 'No Milestone' - ) - - if showAny - data.unshift( - isAny: true - title: 'Any Milestone' - ) + if $dropdown.hasClass "js-extra-options" + if showNo + data.unshift( + id: '0' + title: 'No Milestone' + ) - if data.length > 2 - data.splice 2, 0, 'divider' + if showAny + data.unshift( + isAny: true + title: 'Any Milestone' + ) + if data.length > 2 + data.splice 2, 0, 'divider' callback(data) filterable: true search: @@ -53,13 +70,38 @@ class @MilestoneSelect milestone.id isSelected: (milestone) -> milestone.title is selectedMilestone - clicked: -> - 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() - ) + hidden: -> + $selectbox.hide() + $value.show() + clicked: (e) -> + if $dropdown.hasClass 'js-filter-bulk-update' + return + + if $dropdown.hasClass 'js-filter-submit' + $dropdown.parents('form').submit() + else + selected = $selectbox + .find('input[type="hidden"]') + .val() + data = {} + data[abilityName] = {} + data[abilityName].milestone_id = selected + $loading + .fadeIn() + $.ajax( + type: 'PUT' + url: issueUpdateURL + data: data + ).done (data) -> + $loading.fadeOut() + $selectbox.hide() + $milestoneLink = $value + .show() + .find('a') + if data.milestone? + data.milestone.namespace = _this.currentProject.namespace + data.milestone.path = _this.currentProject.path + $value.html(milestoneLinkTemplate(data.milestone)) + else + $value.html(milestoneLinkNoneTemplate) + )
\ No newline at end of file diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee index 84193400890..3262d8b8c90 100644 --- a/app/assets/javascripts/users_select.js.coffee +++ b/app/assets/javascripts/users_select.js.coffee @@ -1,7 +1,9 @@ class @UsersSelect - constructor: -> + constructor: (currentUser) -> @usersPath = "/autocomplete/users.json" @userPath = "/autocomplete/users/:id.json" + if currentUser? + @currentUser = JSON.parse(currentUser) $('.js-user-search').each (i, dropdown) => $dropdown = $(dropdown) @@ -12,6 +14,67 @@ class @UsersSelect firstUser = $dropdown.data('first-user') selectedId = $dropdown.data('selected') defaultLabel = $dropdown.data('default-label') + issueURL = $dropdown.data('issueUpdate') + $selectbox = $dropdown.closest('.selectbox') + $block = $selectbox.closest('.block') + abilityName = $dropdown.data('ability-name') + $value = $block.find('.value') + $loading = $block.find('.block-loading').fadeOut() + + $block.on('click', '.js-assign-yourself', (e) => + e.preventDefault() + assignTo(@currentUser.id) + ) + + assignTo = (selected) -> + data = {} + data[abilityName] = {} + data[abilityName].assignee_id = selected + $loading + .fadeIn() + $.ajax( + type: 'PUT' + dataType: 'json' + url: issueURL + data: data + ).done (data) -> + $loading.fadeOut() + $selectbox.hide() + + if data.assignee + user = + name: data.assignee.name + username: data.assignee.username + avatar: data.assignee.avatar_url + else + user = + name: 'Unassigned' + username: '' + avatar: '' + + $value.html(noAssigneeTemplate(user)) + $value.find('a').attr('href') + + noAssigneeTemplate = _.template( + '<% if (username) { %> + <a class="author_link " href="/u/<%= username %>"> + <% if( avatar ) { %> + <img width="32" class="avatar avatar-inline s32" alt="" src="<%= avatar %>"> + <% } %> + <span class="author"><%= name %></span> + <span class="username"> + @<%= username %> + </span> + </a> + <% } else { %> + <span class="assign-yourself"> + No assignee - + <a href="#" class="js-assign-yourself"> + assign yourself + </a> + </span> + <% } %>' + ) $dropdown.glDropdown( data: (term, callback) => @@ -57,20 +120,36 @@ class @UsersSelect fields: ['name', 'username'] selectable: true fieldName: $dropdown.data('field-name') + toggleLabel: (selected) -> if selected && 'id' of selected selected.name else defaultLabel + + inputId: 'issue_assignee_id' + + hidden: (e) -> + $selectbox.hide() + $value.show() + clicked: -> page = $('body').data 'page' isIssueIndex = page is 'projects:issues:index' isMRIndex = page is page is 'projects:merge_requests:index' + if $dropdown.hasClass('js-filter-bulk-update') + return 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() + else + selected = $dropdown + .closest('.selectbox') + .find("input[name='#{$dropdown.data('field-name')}']").val() + assignTo(selected) + renderRow: (user) -> username = if user.username then "@#{user.username}" else "" avatar = if user.avatar_url then user.avatar_url else false @@ -87,17 +166,25 @@ class @UsersSelect if avatar img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />" - "<li> - <a href='#' class='dropdown-menu-user-link #{selected}'> - #{img} - <strong class='dropdown-menu-user-full-name'> - #{user.name} - </strong> - <span class='dropdown-menu-user-username'> - #{username} - </span> - </a> - </li>" + # split into three parts so we can remove the username section if nessesary + listWithName = "<li> + <a href='#' class='dropdown-menu-user-link #{selected}'> + #{img} + <strong class='dropdown-menu-user-full-name'> + #{user.name} + </strong>" + + listWithUserName = "<span class='dropdown-menu-user-username'> + #{username} + </span>" + listClosingTags = "</a> + </li>" + + + if username is '' + listWithUserName = '' + + listWithName + listWithUserName + listClosingTags ) $('.ajax-users-select').each (i, select) => |