Unverified Commit 8a179611 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files

Replace chosen with select2


Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent b1c48436be0b
......@@ -19,7 +19,6 @@
//= require jquery.turbolinks
//= require bootstrap
//= require modernizr
//= require chosen-jquery
//= require select2
//= require raphael
//= require g.raphael-min
......
......@@ -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()
......
......@@ -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')
......
......@@ -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()
......
......@@ -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
*/
......
/** Chosen.js selectbox style override **/
.chosen-container {
min-width: 100px;
/** Select2 selectbox style override **/
.chosen-single {
height: 26px;
background: #EEE !important;
border: 1px solid #DDD !important;
@include box-shadow(none !important);
@include border-radius(4px !important);
.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;
}
}
......
......@@ -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;
}
}
......
......@@ -95,7 +95,7 @@
font-weight: normal !important;
}
.chosen-container .chosen-single {
.select2-container .select2-single {
span {
font-weight: bold;
color: #555;
......
......@@ -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;
}
}
......
......@@ -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
......
......@@ -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"
......@@ -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.
......
......@@ -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'})
&nbsp;
= 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();
});
......@@ -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'
......
......@@ -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>")
......
......@@ -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
&nbsp;
= 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
&nbsp;
= 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'})
&nbsp;
= 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();
});
: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");
......@@ -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
......
......@@ -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"})
&nbsp;
= f.submit 'Protect', class: "btn-create btn"
- unless @branches.empty?
......
......@@ -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"
......
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