Replace chosen with select2

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/javascripts/application.js

@@ -19,7 +19,6 @@
 //= require jquery.turbolinks
 //= require bootstrap
 //= require modernizr
-//= require chosen-jquery
 //= require select2
 //= require raphael
 //= require g.raphael-min

app/assets/javascripts/issues.js.coffee

@@ -29,12 +29,10 @@
     $('#filter_issue_search').val($('#issue_search').val())
   initSelects: ->
-    $("#update_status").chosen()
-    $("#update_assignee_id").chosen()
-    $("#update_milestone_id").chosen()
-    $("#label_name").chosen()
-    $("#assignee_id").chosen()
-    $("#milestone_id").chosen()
+    $("select#update_status").select2()
+    $("select#update_assignee_id").select2()
+    $("select#update_milestone_id").select2()
+    $("select#label_name").select2()
     $("#milestone_id, #assignee_id, #label_name").on "change", ->
       $(this).closest("form").submit()

app/assets/javascripts/main.js.coffee

@@ -67,8 +67,8 @@ $ ->
     $('.appear-data').fadeIn()
     e.preventDefault()
-  # Initialize chosen selects
-  $('select.chosen').chosen()
+  # Initialize select2 selects
+  $('select.select2').select2(width: 'resolve')
   # Initialize tooltips
   $('.has_tooltip').tooltip()
@@ -126,12 +126,6 @@ $ ->
     $(@).remove()
 (($) ->
-  _chosen = $.fn.chosen
-  $.fn.extend chosen: (options) ->
-    default_options = search_contains: "true"
-    $.extend default_options, options
-    _chosen.apply @, [default_options]
-
   # Disable an element and add the 'disabled' Bootstrap class
   $.fn.extend disable: ->
     $(@).attr('disabled', 'disabled').addClass('disabled')

app/assets/javascripts/merge_requests.js.coffee

@@ -2,8 +2,8 @@
 # * Filter merge requests
 #
 @merge_requestsPage = ->
-  $('#assignee_id').chosen()
-  $('#milestone_id').chosen()
+  $('#assignee_id').select2()
+  $('#milestone_id').select2()
   $('#milestone_id, #assignee_id').on 'change', ->
     $(this).closest('form').submit()

app/assets/stylesheets/application.scss

@@ -4,7 +4,6 @@
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require jquery.ui.gitlab
  *= require jquery.atwho
- *= require chosen
  *= require select2
  *= require_self
 */

app/assets/stylesheets/generic/selects.scss

-/** Chosen.js selectbox style override **/
-.chosen-container {
-  min-width: 100px;
-  .chosen-single {
-    height: 26px;
-    background: #EEE !important;
-    border: 1px solid #DDD !important;
-    @include box-shadow(none !important);
-    @include border-radius(4px !important);
+/** Select2 selectbox style override **/
+.select2-container {
+  .select2-choice {
+    background: #EEE;
+    border-color: #BBB;
   }
-
-  .chosen-results li.highlighted {
-    background: #29b;
-  }
-
-  .chosen-drop {
-    margin-top: 10px;
-    border: 1px solid #DDD !important;
-    @include border-radius(4px !important);
-  }
-
-  .chosen-search input {
-    border: 1px solid #CCC !important;
-    @include box-shadow(none !important);
-  }
-}
-
-/** Select2 styling **/
-.select2-container .select2-choice {
-  @include bg-light-gray-gradient;
-}
-
-.select2-container .select2-choice div {
-  border: none;
-  background: none;
-}
-
-.select2-drop {
-  padding-top: 8px;
-}
-
-.select2-no-results, .select2-searching {
-  padding: 7px;
-  color: #666;
-}
-
-.chosen-container .chosen-single div b {
-  background-position-y: 0px !important;
-}
-
-.chosen-container .chosen-drop .chosen-search input {
-  background-position-y: -24px !important;
-}
-
-.chosen-compact {
-  max-width: 170px !important;
 }
 select {
-  &.chosen {
+  &.select2 {
     width: 100px;
   }
-  &.chosen-sm {
+  &.select2-sm {
     width: 100px;
   }
 }
 @media (min-width: $screen-sm-min) {
   select {
-    &.chosen {
+    &.select2 {
       width: 150px;
     }
-    &.chosen-sm {
+    &.select2-sm {
       width: 120px;
     }
   }
@@ -81,10 +31,10 @@ select {
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: $screen-md-min) {
   select {
-    &.chosen {
+    &.select2 {
       width: 170px;
     }
-    &.chosen-sm {
+    &.select2-sm {
       width: 140px;
     }
   }
@@ -93,10 +43,10 @@ select {
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: $screen-lg-min) {
   select {
-    &.chosen {
+    &.select2 {
       width: 200px;
     }
-    &.chosen-sm {
+    &.select2-sm {
       width: 150px;
     }
   }

app/assets/stylesheets/sections/issues.scss

@@ -77,8 +77,8 @@ input.check_all_issues {
 @media (min-width: 800px)  { .issues_filters select { width: 160px; }  }
 @media (min-width: 1200px) { .issues_filters select { width: 220px; }  }
-@media (min-width: 800px)  { .issues_bulk_update .chosen-container { min-width: 120px; }  }
-@media (min-width: 1200px) { .issues_bulk_update .chosen-container { min-width: 160px; }  }
+@media (min-width: 800px)  { .issues_bulk_update .select2-container { min-width: 120px; }  }
+@media (min-width: 1200px) { .issues_bulk_update .select2-container { min-width: 160px; }  }
 .issues-holder {
   .issues_filters {
@@ -105,7 +105,7 @@ input.check_all_issues {
 }
 .issues_bulk_update {
-  .chosen-container {
+  .select2-container {
     text-shadow: none;
   }
 }

app/assets/stylesheets/sections/merge_requests.scss

@@ -95,7 +95,7 @@
     font-weight: normal !important;
   }
-  .chosen-container .chosen-single {
+  .select2-container .select2-single {
     span {
       font-weight: bold;
       color: #555;

app/assets/stylesheets/sections/projects.scss

@@ -230,7 +230,7 @@ ul.nav.nav-projects-tabs {
   }
 }
-.transfer-project .chosen-container {
+.transfer-project .select2-container {
   min-width: 200px;
 }
@@ -245,23 +245,23 @@ ul.nav.nav-projects-tabs {
   }
 }
-.project-refs-form .chosen-container {
+.project-refs-form .select2-container {
   position: relative;
   top: 0;
   left: 0;
   margin-right: 10px;
-  .chosen-single span {
+  .select2-single span {
     font-weight: bold;
     color: #555;
   }
-  &.chosen-container-active {
-    .chosen-drop {
+  &.select2-container-active {
+    .select2-drop {
       min-width: 400px;
     }
-    .chosen-results {
+    .select2-results {
       max-height: 400px;
     }
   }

app/views/admin/groups/show.html.haml

@@ -57,7 +57,7 @@
           %div
             = users_select_tag(:user_ids, multiple: true)
           %div.prepend-top-10
-            = select_tag :group_access, options_for_select(UsersGroup.group_access_roles), class: "project-access-select chosen"
+            = select_tag :group_access, options_for_select(UsersGroup.group_access_roles), class: "project-access-select select2"
           %hr
           = submit_tag 'Add users into group', class: "btn btn-create"
     .ui-box

app/views/groups/_new_group_member.html.haml

@@ -12,7 +12,7 @@
   %p 2. Set access level for them
   .form-group
     = f.label :group_access, "Group Access", class: 'control-label'
-    .col-sm-10= select_tag :group_access, options_for_select(UsersGroup.group_access_roles, @users_group.group_access), class: "project-access-select chosen"
+    .col-sm-10= select_tag :group_access, options_for_select(UsersGroup.group_access_roles, @users_group.group_access), class: "project-access-select select2"
   .form-actions
     = f.submit 'Add users into group', class: "btn btn-create"

app/views/projects/edit.html.haml

@@ -26,7 +26,7 @@
             - if @project.repository.exists? && @project.repository.branch_names.any?
               .form-group
                 = f.label :default_branch, "Default Branch", class: 'control-label'
-                .col-sm-10= f.select(:default_branch, @repository.branch_names, {}, {class: 'chosen select-wide'})
+                .col-sm-10= f.select(:default_branch, @repository.branch_names, {}, {class: 'select2 select-wide'})
           = render "visibility_level", f: f, visibility_level: @project.visibility_level, can_change_visibility_level: can?(current_user, :change_visibility_level, @project)
@@ -145,7 +145,7 @@
                   %span Namespace
                 .col-sm-10
                   .form-group
-                    = f.select :namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace' }, { class: 'chosen' }
+                    = f.select :namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace' }, { class: 'select2' }
                   %ul
                     %li Be careful. Changing the project's namespace can have unintended side effects.
                     %li You can only transfer the project to namespaces you manage.

app/views/projects/issues/_form.html.haml

@@ -24,7 +24,7 @@
           %i.icon-user
           Assign to
         .col-sm-10
-          = f.select(:assignee_id, assignee_options(@issue), { include_blank: "Select a user" }, {class: 'chosen'})
+          = f.select(:assignee_id, assignee_options(@issue), { include_blank: "Select a user" }, {class: 'select2'})
            
           = link_to 'Assign to me', '#', class: 'btn btn-small assign-to-me-link'
     .form-group
@@ -32,7 +32,7 @@
         = f.label :milestone_id, class: 'control-label' do
           %i.icon-time
           Milestone
-        .col-sm-10= f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'chosen'})
+        .col-sm-10= f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2'})
     .form-group
       = f.label :label_list, class: 'control-label' do
@@ -87,6 +87,6 @@
     });
   $('.assign-to-me-link').on('click', function(e){
-    $('#issue_assignee_id').val("#{current_user.id}").trigger("chosen:updated");
+    $('#issue_assignee_id').val("#{current_user.id}").trigger("change");
     e.preventDefault();
   });

app/views/projects/issues/_issue_context.html.haml

@@ -6,7 +6,7 @@
   - if can?(current_user, :modify_issue, @issue)
     = link_to profile_path(issue.assignee) do
       = image_tag(avatar_icon(issue.assignee.email), class: 'avatar avatar-inline s16 assignee') if issue.assignee
-    = f.select(:assignee_id, assignee_options(@issue), { include_blank: "Assign to user (none):" }, {class: 'chosen'})
+    = f.select(:assignee_id, assignee_options(@issue), { include_blank: "Assign to user (none):" }, {class: 'select2'})
   - elsif issue.assignee
     = link_to_member(@project, @issue.assignee)
@@ -17,7 +17,7 @@
       %cite.cgray Attached to milestone
     - if can?(current_user, :modify_issue, @issue)
-      = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'chosen chosen-compact'})
+      = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})
       = hidden_field_tag :issue_context
       = f.submit class: 'btn'

app/views/projects/issues/update.js.haml

@@ -5,7 +5,7 @@
 - elsif params[:issue_context]
   $('.issue-box .context').html("#{escape_javascript(render partial: 'issue_context', locals: { issue: @issue })}");
   $('.issue-box .context').effect('highlight');
-  $('.chosen').chosen();
+  $('.select2').select2();
   $('.edit-issue.inline-update input[type="submit"]').hide();
   - if @issue.milestone
     $('.milestone-nav-link').replaceWith("<span class='milestone-nav-link'>| <span class='light'>Milestone</span> #{escape_javascript(link_to @issue.milestone.title, project_milestone_path(@issue.project, @issue.milestone))}</span>")

app/views/projects/merge_requests/_form.html.haml

@@ -10,10 +10,10 @@
       .col-md-5
         .clearfix
           .pull-left
-            = f.select(:source_project_id, [[@merge_request.source_project_path,@merge_request.source_project.id]] , {}, { class: 'source_project chosen span3', disabled: @merge_request.persisted? })
+            = f.select(:source_project_id, [[@merge_request.source_project_path,@merge_request.source_project.id]] , {}, { class: 'source_project select2 span3', disabled: @merge_request.persisted? })
           .pull-left
              
-            = f.select(:source_branch, @merge_request.source_project.repository.branch_names, { include_blank: "Select branch" }, {class: 'source_branch chosen span2'})
+            = f.select(:source_branch, @merge_request.source_project.repository.branch_names, { include_blank: "Select branch" }, {class: 'source_branch select2 span2'})
         .mr_source_commit.prepend-top-10
       .col-md-2
         .merge-request-angle
@@ -22,10 +22,10 @@
         .clearfix
           .pull-left
             - projects =  @project.forked_from_project.nil? ? [@project] : [ @project,@project.forked_from_project]
-            = f.select(:target_project_id, options_from_collection_for_select(projects, 'id', 'path_with_namespace'), {}, { class: 'target_project chosen span3', disabled: @merge_request.persisted? })
+            = f.select(:target_project_id, options_from_collection_for_select(projects, 'id', 'path_with_namespace'), {}, { class: 'target_project select2 span3', disabled: @merge_request.persisted? })
           .pull-left
              
-            = f.select(:target_branch, @target_branches, { include_blank: "Select branch" }, {class: 'target_branch chosen span2'})
+            = f.select(:target_branch, @target_branches, { include_blank: "Select branch" }, {class: 'target_branch select2 span2'})
         .mr_target_commit.prepend-top-10
   %hr
@@ -47,7 +47,7 @@
           %i.icon-user
           Assign to
         .col-sm-10
-          = f.select(:assignee_id, assignee_options(@merge_request), { include_blank: "Select a user" }, {class: 'chosen'})
+          = f.select(:assignee_id, assignee_options(@merge_request), { include_blank: "Select a user" }, {class: 'select2'})
            
           = link_to 'Assign to me', '#', class: 'btn btn-small assign-to-me-link'
     .form-group
@@ -55,7 +55,7 @@
         = f.label :milestone_id, class: 'control-label' do
           %i.icon-time
           Milestone
-        .col-sm-10= f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'chosen'})
+        .col-sm-10= f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2'})
   .form-actions
@@ -90,6 +90,6 @@
     $.get("#{branch_to_project_merge_requests_path(@source_project)}", {target_project_id: target_project.val(),ref: $(this).val() });
   });
   $('.assign-to-me-link').on('click', function(e){
-    $('#merge_request_assignee_id').val("#{current_user.id}").trigger("chosen:updated");
+    $('#merge_request_assignee_id').val("#{current_user.id}").trigger("select2:updated");
     e.preventDefault();
   });

app/views/projects/merge_requests/update_branches.js.haml

 :plain
   $(".target_branch").html("#{escape_javascript(options_for_select(@target_branches))}");
-  $(".target_branch").trigger("chosen:updated");
+  $(".target_branch").trigger("select2:updated");
   $(".mr_target_commit").html("");
   $(".target_branch").trigger("change");

app/views/projects/new.html.haml

@@ -27,7 +27,7 @@
           = f.label :namespace_id, class: 'control-label' do
             %span Namespace
           .col-sm-10
-            = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user), {}, {class: 'chosen', tabindex: 2}
+            = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user), {}, {class: 'select2', tabindex: 2}
       .form-group
         .col-sm-2

app/views/projects/protected_branches/index.html.haml

@@ -22,7 +22,7 @@
         .entry.clearfix
           = f.label :name, "Branch"
           .col-md-3
-            = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: "Select branch"}, {class: "chosen span3"})
+            = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: "Select branch"}, {class: "select2 span3"})
            
           = f.submit 'Protect', class: "btn-create btn"
     - unless @branches.empty?

app/views/projects/snippets/_form.html.haml

@@ -14,7 +14,7 @@
       .col-sm-10= f.text_field :title, placeholder: "Example Snippet", class: 'form-control', required: true
     .form-group
       = f.label "Lifetime"
-      .col-sm-10= f.select :expires_at, lifetime_select_options, {}, {class: 'chosen span2'}
+      .col-sm-10= f.select :expires_at, lifetime_select_options, {}, {class: 'select2 span2'}
     .form-group
       .file-editor
         = f.label :file_name, "File"