From 0a9860817926cf9f32ce1ee6b4dc28ba01366b76 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Sat, 16 Jul 2016 09:03:19 +0100 Subject: [PATCH] GL dropdown default toggle color --- app/assets/javascripts/gl_dropdown.js.coffee | 9 ++++++++- app/assets/javascripts/labels_select.js.coffee | 5 +++++ app/assets/javascripts/milestone_select.js.coffee | 5 +++-- app/assets/javascripts/users_select.js.coffee | 6 +++--- app/assets/stylesheets/framework/dropdowns.scss | 6 ++++++ app/helpers/dropdowns_helper.rb | 3 ++- app/views/shared/issuable/_label_dropdown.html.haml | 2 +- app/views/shared/issuable/_milestone_dropdown.html.haml | 2 +- 8 files changed, 29 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 3bc9ac450e3..6313ad837f0 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -617,7 +617,14 @@ class GitLabDropdown $dropdownContent.scrollTop(listItemTop - dropdownContentTop) updateLabel: (selected = null, el = null, instance = null, added = false) => - $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selected, el, instance, added) + $toggleText = $(@el).find(".dropdown-toggle-text") + $toggleText.text @options.toggleLabel(selected, el, instance, added) + + if @options.defaultLabel + if $toggleText.text().trim() is @options.defaultLabel + $toggleText.addClass('is-default') + else + $toggleText.removeClass('is-default') $.fn.glDropdown = (opts) -> return @.each -> diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee index ce030a8c07b..d1225eb0851 100644 --- a/app/assets/javascripts/labels_select.js.coffee +++ b/app/assets/javascripts/labels_select.js.coffee @@ -4,6 +4,7 @@ class @LabelsSelect $('.js-label-select').each (i, dropdown) -> $dropdown = $(dropdown) + $toggleText = $dropdown.find('.dropdown-toggle-text') projectId = $dropdown.data('project-id') labelUrl = $dropdown.data('labels') issueUpdateURL = $dropdown.data('issueUpdate') @@ -280,12 +281,16 @@ class @LabelsSelect index = selectedLabels.indexOf selected.title selectedLabels.splice index, 1 + if selected.id? and selected.id is 0 + selectedLabels = [] + if selectedLabels.length > 1 "#{selectedLabels[0]} +#{selectedLabels.length - 1} more" else if selectedLabels.length is 1 selectedLabels[0] else defaultLabel + defaultLabel: defaultLabel fieldName: $dropdown.data('field-name') id: (label) -> if $dropdown.hasClass('js-issuable-form-dropdown') diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee index c4dd97d2c61..0d71f3b623a 100644 --- a/app/assets/javascripts/milestone_select.js.coffee +++ b/app/assets/javascripts/milestone_select.js.coffee @@ -70,11 +70,12 @@ class @MilestoneSelect search: fields: ['title'] selectable: true - toggleLabel: (selected) -> - if selected && 'id' of selected + toggleLabel: (selected, el, e, added) -> + if selected and 'id' of selected and added selected.title else defaultLabel + defaultLabel: defaultLabel fieldName: $dropdown.data('field-name') text: (milestone) -> _.escape(milestone.title) diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee index e061f042ca9..bf551430999 100644 --- a/app/assets/javascripts/users_select.js.coffee +++ b/app/assets/javascripts/users_select.js.coffee @@ -142,12 +142,12 @@ class @UsersSelect selectable: true fieldName: $dropdown.data('field-name') - toggleLabel: (selected) -> - if selected && 'id' of selected + toggleLabel: (selected, el, e, added) -> + if selected and 'id' of selected and added if selected.text then selected.text else selected.name else defaultLabel - + defaultLabel: defaultLabel inputId: 'issue_assignee_id' hidden: (e) -> diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 3fd0e12568d..8fd09cabaff 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -562,3 +562,9 @@ display: block; color: $gl-placeholder-color; } + +.dropdown-toggle-text { + &.is-default { + color: $gl-placeholder-color; + } +} diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb index 4566f3782cc..cc2a5a7b134 100644 --- a/app/helpers/dropdowns_helper.rb +++ b/app/helpers/dropdowns_helper.rb @@ -40,8 +40,9 @@ module DropdownsHelper end def dropdown_toggle(toggle_text, data_attr, options = {}) + default_label = options[:data][:default_label] content_tag(:button, class: "dropdown-menu-toggle #{options[:toggle_class] if options.has_key?(:toggle_class)}", id: (options[:id] if options.has_key?(:id)), type: "button", data: data_attr) do - output = content_tag(:span, toggle_text, class: "dropdown-toggle-text") + output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}") output << icon('chevron-down') output.html_safe end diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml index 1e238811657..670c2db4795 100644 --- a/app/views/shared/issuable/_label_dropdown.html.haml +++ b/app/views/shared/issuable/_label_dropdown.html.haml @@ -18,7 +18,7 @@ = hidden_field_tag data_options[:field_name], label, id: nil .dropdown %button.dropdown-menu-toggle.js-label-select.js-multiselect{class: classes.join(' '), type: "button", data: dropdown_data} - %span.dropdown-toggle-text + %span.dropdown-toggle-text{ class: ("is-default" if selected_toggle) } = h(multi_label_name(selected_toggle || selected, "Label")) = icon('chevron-down') .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml index c19e0674246..ec1864b5536 100644 --- a/app/views/shared/issuable/_milestone_dropdown.html.haml +++ b/app/views/shared/issuable/_milestone_dropdown.html.haml @@ -1,5 +1,5 @@ - project = @target_project || @project -- selected_text = project.milestones.find(selected).try(:name) +- selected_text = project.milestones.find_by_id(selected).try(:name) - if selected.present? = hidden_field_tag(name, selected) = dropdown_tag(milestone_dropdown_label(selected_text), options: { title: "Filter by milestone", toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable",