From 930459b681ec62dc941d0f732230c91d74180f92 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 11 Mar 2016 11:14:39 +0000 Subject: [PATCH 1/5] New dropdown for labels in sidebar This will also close #13164 --- app/assets/javascripts/gl_dropdown.js.coffee | 30 +++++++------ .../javascripts/issuable_context.js.coffee | 5 +++ .../javascripts/labels_select.js.coffee | 34 +++++++++----- app/assets/stylesheets/pages/issuable.scss | 4 ++ app/controllers/projects/labels_controller.rb | 6 +++ app/views/shared/issuable/_sidebar.html.haml | 45 +++++++++++++++++-- 6 files changed, 96 insertions(+), 28 deletions(-) diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 8e1449bc59ca..83ffa23eb309 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -79,7 +79,7 @@ class GitLabDropdown constructor: (@el, @options) -> self = @ - @dropdown = $(@el).parent() + @dropdown = $(@el).parents('.dropdown') search_fields = if @options.search then @options.search.fields else []; if @options.data @@ -227,21 +227,20 @@ 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) field.remove() + el.removeClass ACTIVE_CLASS else fieldName = @options.fieldName - selectedIndex = el.parent().index() - if @renderedData - selectedObject = @renderedData[selectedIndex] - value = if @options.id then @options.id(selectedObject, el) else selectedObject.id if @options.multiSelect - oldValue = field.val() - if oldValue - value = "#{oldValue},#{value}" + fieldName = "#{fieldName}" else @dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS field.remove() @@ -250,12 +249,15 @@ class GitLabDropdown el.toggleClass "is-active" if value - if !field.length - # Create hidden input for form - input = "" - @dropdown.before input + if @options.multiSelect + @dropdown.before "" + else + if !field.length + # Create hidden input for form + input = "" + @dropdown.before input - @dropdown.parent().find("input[name='#{fieldName}']").val value + @dropdown.parent().find("input[name='#{fieldName}']").val value selectFirstRow: -> selector = '.dropdown-content li:first-child a' diff --git a/app/assets/javascripts/issuable_context.js.coffee b/app/assets/javascripts/issuable_context.js.coffee index e52b73f94f6b..09c37448887a 100644 --- a/app/assets/javascripts/issuable_context.js.coffee +++ b/app/assets/javascripts/issuable_context.js.coffee @@ -3,6 +3,7 @@ class @IssuableContext constructor: -> new UsersSelect() + new LabelsSelect() $('select.select2').select2({width: 'resolve', dropdownAutoWidth: true}) $(".issuable-sidebar .inline-update").on "change", "select", -> @@ -16,4 +17,8 @@ class @IssuableContext block.find('.value').hide() block.find('.js-select2').select2("open") + $(@).parents('.dropdown') + .addClass("open") + .trigger('shown.bs.dropdown') + $(".right-sidebar").niceScroll() diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee index 5ade2cb66cb5..5ddf6d096df9 100644 --- a/app/assets/javascripts/labels_select.js.coffee +++ b/app/assets/javascripts/labels_select.js.coffee @@ -5,7 +5,7 @@ class @LabelsSelect labelUrl = $(dropdown).data("labels") selectedLabel = $(dropdown).data('selected') if selectedLabel - selectedLabel = selectedLabel.split(",") + selectedLabel = selectedLabel.toString().split(",") newLabelField = $('#new_label_name') newColorField = $('#new_label_color') showNo = $(dropdown).data('show-no') @@ -41,13 +41,21 @@ class @LabelsSelect # public facing JSON url for labels $.ajax( url: labelUrl - ).done (data) -> - html = $(data) + ).done (labels) -> data = [] - html.find('.label-row a').each -> - data.push( - title: $(@).text().trim() - ) + if $(dropdown).hasClass "js-sidebar-label-select" + $.each labels, (i, label) -> + data.push( + id: label.id + color: label.color + title: label.title + ) + else + html = $(labels) + html.find('.label-row a').each -> + data.push( + title: $(@).text().trim() + ) if showNo data.unshift( @@ -60,7 +68,7 @@ class @LabelsSelect title: 'Any label' ) - if data.length > 2 + if data.length > 2 && (showNo or showAny) data.splice 2, 0, "divider" callback data @@ -69,7 +77,9 @@ class @LabelsSelect selected = "" $.each selectedLabel, (i, selectedLbl) -> selectedLbl = selectedLbl.trim() - if selected is "" && label.title is selectedLbl + labelToCompare = if label.id then label.id.toString() else label.title + + if selected is "" && labelToCompare is selectedLbl selected = "is-active" else selected = if label.title is selectedLabel then "is-active" else "" @@ -83,9 +93,13 @@ class @LabelsSelect search: fields: ['title'] selectable: true + multiSelect: $(dropdown).data('multi-select') fieldName: $(dropdown).data('field-name') id: (label) -> - label.title + if label.id + label.id + else + label.title clicked: -> if $(dropdown).hasClass "js-filter-submit" $(dropdown).parents('form').submit() diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 1310e6ad7c7b..d8625b31f65c 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -251,6 +251,10 @@ border: 1px solid $border-gray-dark; } } + + .dropdown-menu { + left: -15px; + } } .btn-default.gutter-toggle { diff --git a/app/controllers/projects/labels_controller.rb b/app/controllers/projects/labels_controller.rb index ecac3c395ec1..fa93d9536add 100644 --- a/app/controllers/projects/labels_controller.rb +++ b/app/controllers/projects/labels_controller.rb @@ -8,6 +8,12 @@ class Projects::LabelsController < Projects::ApplicationController def index @labels = @project.labels.page(params[:page]).per(PER_PAGE) + + respond_to do |format| + format.js + format.html + format.json { render json: @labels } + end end def new diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 36f063778869..7b8595fcaa59 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -79,11 +79,48 @@ = icon('tags') %span = issuable.labels.count - .title.hide-collapsed + .title.dropdown.hide-collapsed + - if issuable.label_ids + - issuable.label_ids.each do |label_id| + %input{type: "hidden", name: "#{issuable.class.table_name.singularize}[label_ids][]", value: label_id} %label Labels - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project) .pull-right - = link_to 'Edit', '#', class: 'edit-link' + = link_to 'Edit', '#', class: 'edit-link js-label-select js-filter-submit js-sidebar-label-select', + data: {field_name: "#{issuable.class.table_name.singularize}[label_ids][]", multi_select: "true", selected: issuable.label_ids.join(","), + project_id: (@project.id if @project), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project)} + .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable + .dropdown-page-one + = dropdown_title("Filter by label") + = dropdown_filter("Search labels") + = dropdown_content + - if @project + = dropdown_footer do + %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("Create new label", back: true) + = dropdown_content do + %input#new_label_color{type: "hidden"} + %input#new_label_name.dropdown-input-field{type: "text", placeholder: "Name new label"} + .dropdown-label-color-preview.js-dropdown-label-color-preview + .suggest-colors.suggest-colors-dropdown + - suggested_colors.each do |color| + = link_to '#', style: "background-color: #{color}", data: { color: color } do +   + %button.btn.btn-primary.js-new-label-btn{type: "button"} + Create + = dropdown_loading .value.issuable-show-labels.hide-collapsed - if issuable.labels.any? - issuable.labels.each do |label| @@ -91,8 +128,8 @@ - else .light None .selectbox.hide-collapsed - = f.collection_select :label_ids, issuable.project.labels.all, :id, :name, - { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" } + -# = f.collection_select :label_ids, issuable.project.labels.all, :id, :name, + -# { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" } = render "shared/issuable/participants", participants: issuable.participants(current_user) %hr -- GitLab From edf048d243911d41e111c689a7aba5a6a82a1c55 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 11 Mar 2016 11:22:06 +0000 Subject: [PATCH 2/5] removed commented code --- app/views/shared/issuable/_sidebar.html.haml | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 7b8595fcaa59..94753f54a072 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -127,9 +127,6 @@ = link_to_label(label, type: issuable.to_ability_name) - else .light None - .selectbox.hide-collapsed - -# = f.collection_select :label_ids, issuable.project.labels.all, :id, :name, - -# { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" } = render "shared/issuable/participants", participants: issuable.participants(current_user) %hr -- GitLab From cc21a9bb1e064228b0488efbd69f347cc14f772f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 11 Mar 2016 11:36:24 +0000 Subject: [PATCH 3/5] Fixed nicescroll JS error --- app/views/projects/issues/update.js.haml | 1 + app/views/projects/merge_requests/update.js.haml | 1 + 2 files changed, 2 insertions(+) diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml index 986d8c220dbb..a6f0f012af4d 100644 --- a/app/views/projects/issues/update.js.haml +++ b/app/views/projects/issues/update.js.haml @@ -1,3 +1,4 @@ +$('.right-sidebar').getNiceScroll().remove(); $('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @issue)}"; $('aside.right-sidebar').effect('highlight'); new IssuableContext(); diff --git a/app/views/projects/merge_requests/update.js.haml b/app/views/projects/merge_requests/update.js.haml index 9cce5660e1c5..ba69c646b709 100644 --- a/app/views/projects/merge_requests/update.js.haml +++ b/app/views/projects/merge_requests/update.js.haml @@ -1,3 +1,4 @@ +$('.right-sidebar').getNiceScroll().remove(); $('aside.right-sidebar')[0].outerHTML = "#{escape_javascript(render 'shared/issuable/sidebar', issuable: @merge_request)}"; $('aside.right-sidebar').effect('highlight'); new IssuableContext(); -- GitLab From 06375c7e088022b648d70771d3d0a115667b711c Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 11 Mar 2016 11:48:44 +0000 Subject: [PATCH 4/5] Fixed bug on issues home --- app/assets/javascripts/labels_select.js.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee index 5ddf6d096df9..a14d7c801886 100644 --- a/app/assets/javascripts/labels_select.js.coffee +++ b/app/assets/javascripts/labels_select.js.coffee @@ -41,7 +41,7 @@ class @LabelsSelect # public facing JSON url for labels $.ajax( url: labelUrl - ).done (labels) -> + ).always (labels) -> data = [] if $(dropdown).hasClass "js-sidebar-label-select" $.each labels, (i, label) -> @@ -51,7 +51,7 @@ class @LabelsSelect title: label.title ) else - html = $(labels) + html = $(labels.responseText) html.find('.label-row a').each -> data.push( title: $(@).text().trim() -- GitLab From 47014348bfb59395d24daba56709b739a79b0cf3 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 11 Mar 2016 12:00:04 +0000 Subject: [PATCH 5/5] Fixed issue when creating labels in dropdown --- app/assets/javascripts/labels_select.js.coffee | 2 +- app/assets/stylesheets/pages/issuable.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee index a14d7c801886..61145a194813 100644 --- a/app/assets/javascripts/labels_select.js.coffee +++ b/app/assets/javascripts/labels_select.js.coffee @@ -33,7 +33,7 @@ class @LabelsSelect color: newColorField.val() }, (label) -> $('.js-new-label-btn').enable() - $('.dropdown-menu-back', $(dropdown).parent()).trigger "click" + $('.dropdown-menu-back', $(dropdown).parents('.dropdown')).trigger "click" $(dropdown).glDropdown( data: (term, callback) -> diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index d8625b31f65c..125118b9d4fd 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -243,7 +243,7 @@ } } - .btn { + .btn:not(.btn-primary) { background: $gray-normal; border: 1px solid $border-gray-normal; &:hover { -- GitLab