Refs #2799: updating select2 on form-filters

3 files changed, 27 insertions, 10 deletions

diff --git a/app/assets/stylesheets/components/_forms.sass b/app/assets/stylesheets/components/_forms.sass
index 9ee7e85ce..95d699c71 100644
--- a/app/assets/stylesheets/components/_forms.sass
+++ b/app/assets/stylesheets/components/_forms.sass
@@ -373,21 +373,25 @@ table, .table
     vertical-align: top
     border-right: 1px solid #fff
     margin: 0
-    min-height: 44px
+    min-height: 41px
     padding: 5px 15px
 
     .control-label
       font-weight: 700
       color: $darkgrey
-      line-height: 34px
+      line-height: 31px
       margin: 0
       padding: 0 10px 0 0
       vertical-align: middle
 
-    > .form-control, > .form-group.date
+    > .form-control, > .form-group.date, > .form-group.select2ed
       display: inline-block
       width: auto
       vertical-align: top
+      margin-bottom: 0
+
+    > .form-group.select2ed
+      width: 300px
 
   > .actions
     position: absolute
@@ -422,7 +426,7 @@ table, .table
     position: relative
 
     &.togglable
-      padding: 7px 44px 7px 15px
+      padding: 5px 44px 6px 15px
       cursor: pointer
 
       > .control-label
@@ -451,11 +455,11 @@ table, .table
         position: absolute
         right: 15px
         top: 0
-        height: 44px
+        height: 41px
         width: 15px
         color: $blue
         text-align: center
-        line-height: 44px
+        line-height: 41px
 
       &.open:before
         content: '\f077'
diff --git a/app/assets/stylesheets/components/_select2.sass b/app/assets/stylesheets/components/_select2.sass
index 1eb6d01a8..5e3741bf0 100644
--- a/app/assets/stylesheets/components/_select2.sass
+++ b/app/assets/stylesheets/components/_select2.sass
@@ -2,6 +2,10 @@
 // Select2 Customisation //
 //-----------------------//
 
+.select2-selection__placeholder
+  color: rgba($grey, 0.65)
+  font-style: italic
+
 // With Font Awesome adjusts.
 .select2-selection__rendered
   position: relative
@@ -43,3 +47,12 @@
 
       &:hover
         color: #fff
+
+.form-filter
+  .form-group.select2ed
+    .select2-container--bootstrap .select2-selection--single
+      height: 31px
+      padding: 4px 24px 5px 12px
+
+    .select2-container--bootstrap .select2-selection
+      border-color: rgba($grey, 0.3)
diff --git a/app/views/workbenches/_filters.html.slim b/app/views/workbenches/_filters.html.slim
index 1233d5c30..5abf8a8ea 100644
--- a/app/views/workbenches/_filters.html.slim
+++ b/app/views/workbenches/_filters.html.slim
@@ -1,16 +1,16 @@
 = search_form_for @q, url: workbench_path(@workbench.id), builder: SimpleForm::FormBuilder, class: 'form form-filter' do |f|
   .ffg-row
     .input-group.search_bar
-      = f.search_field :name_cont, class: 'form-control', placeholder: 'Indiquez un nom de référentiel'
+      = f.search_field :name_cont, class: 'form-control', placeholder: 'Indiquez un nom de référentiel...'
       span.input-group-btn
         button.btn.btn-default type='submit'
           span.fa.fa-search
 
-    .input-group.search_bar
+  .ffg-row
+    .form-group
       = f.label 'Ligne', required: false, class: 'control-label'
-      = f.input :associated_lines_id_eq, as: :select, collection: @workbench.lines.order(:name).map{|l| [l.name, l.id]}, input_html: {'data-select2ed': 'true'}, label: false
+      = f.input :associated_lines_id_eq, as: :select, collection: @workbench.lines.order(:name).map{|l| [l.name, l.id]}, input_html: { 'data-select2ed': 'true', 'data-select2ed-placeholder': 'Indiquez une ligne...' }, label: false, wrapper_html: { class: 'select2ed'}
 
-  .ffg-row
     .form-group.togglable
       = f.label @wbench_refs.human_attribute_name(:status), required: false, class: 'control-label'
       = f.input :archived_at_not_null, label: ("<span>Conservé<span class='fa fa-archive'></span></span>").html_safe, as: :boolean, wrapper_html: { class: 'checkbox_list' }, input_html: { class: 'check_boxes' }