Fix css for typeahead and formtastic and tokeninput and bootstrap Refs #0026847

11 files changed, 95 insertions, 76 deletions

diff --git a/.ruby-version b/.ruby-version
index 8e1735244..c82eec79e 100644
--- a/.ruby-version
+++ b/.ruby-version
@@ -1 +1 @@
-ruby-1.9.3-p448
+1.9.3-p448
diff --git a/Gemfile b/Gemfile
index 984c9b675..5d122925b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,4 +1,5 @@
 source 'http://rubygems.org'
+source 'https://rails-assets.org'
 
 gem 'rails', '3.2.18'
 
@@ -34,6 +35,13 @@ gem 'cocoon', "1.1.2"
 gem 'formtastic'
 gem 'RedCloth'
 
+# some views use coffee script
+gem 'coffee-rails', '~> 3.2.1'
+gem 'coffee-script-source'
+
+gem 'sass-rails',   '~> 3.2.3'
+gem 'uglifier', '>= 1.0.3'
+
 # Javascript
 gem 'jquery-rails', '2.2.1'
 gem 'jquery-ui-sass-rails'
@@ -42,15 +50,15 @@ gem 'morrisjs-rails'
 gem 'raphael-rails'
 
 # Use twitter bootstrap resources
-gem 'bootstrap-sass', '~> 3.1.1'
-gem 'bootswatch-rails'
+gem 'rails-assets-bootstrap-sass-official', '~> 3.1.1'
 gem 'font-awesome-sass'
 gem 'will_paginate-bootstrap'
 gem 'simple_form'
-gem 'tagmanager-rails', '~> 3.0.1.0'
-gem 'typeahead-rails', '~> 0.10.5'
+gem 'rails-assets-tagmanager', '~> 3.0.1.0'
+gem 'rails-assets-typeahead.js', '~> 0.10.5'
 gem "breadcrumbs_on_rails"
 gem 'bootstrap-timepicker-rails'
+gem 'rails-assets-typeahead.js-bootstrap3.less'
 
 # Format Output
 gem 'json'
@@ -66,7 +74,6 @@ gem 'will_paginate', '~> 3.0'
 gem 'ransack'
 gem 'squeel'
 gem 'ninoxe', :git => 'https://github.com/afimb/ninoxe.git', :branch => :sismo
-#gem 'ninoxe',:path => '~/projects/ninoxe'
 #gem 'ninoxe',:path => '~/workspace/chouette/ninoxe'
 #gem 'ninoxe', '~> 1.0.3'
 
@@ -79,13 +86,6 @@ gem 'rabl'
 gem 'delayed_job_active_record'
 gem 'dr-apartment', :require => "apartment"
 
-# some views use coffee script
-gem 'coffee-rails', '~> 3.2.1'
-gem 'coffee-script-source'
-
-gem 'sass-rails',   '~> 3.2.3'
-gem 'uglifier', '>= 1.0.3'
-
 group :development do
   gem 'capistrano'
   gem 'capistrano-ext'
diff --git a/Gemfile.lock b/Gemfile.lock
index 033631a1c..f31ac8296 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -14,6 +14,7 @@ GIT
 
 GEM
   remote: http://rubygems.org/
+  remote: https://rails-assets.org/
   specs:
     RedCloth (4.2.9)
     RedCloth (4.2.9-java)
@@ -63,12 +64,8 @@ GEM
     arel (3.0.3)
     bcrypt-ruby (3.0.1)
     bcrypt-ruby (3.0.1-java)
-    bootstrap-sass (3.1.1.1)
-      sass (~> 3.2)
     bootstrap-timepicker-rails (0.1.3)
       railties (>= 3.0)
-    bootswatch-rails (3.1.1.1)
-      railties (>= 3.1)
     bouncy-castle-java (1.5.0146.1)
     breadcrumbs_on_rails (2.3.0)
     builder (3.0.4)
@@ -243,6 +240,17 @@ GEM
       activesupport (= 3.2.18)
       bundler (~> 1.0)
       railties (= 3.2.18)
+    rails-assets-bootstrap (3.1.1)
+      rails-assets-jquery (>= 1.9.0)
+    rails-assets-bootstrap-sass-official (3.1.1.2)
+    rails-assets-jquery (2.1.1)
+    rails-assets-tagmanager (3.0.1)
+      rails-assets-jquery (>= 1.0.0)
+    rails-assets-typeahead.js (0.10.5)
+      rails-assets-jquery (>= 1.7)
+    rails-assets-typeahead.js-bootstrap3.less (0.2.3)
+      rails-assets-bootstrap (~> 3.1.0)
+      rails-assets-typeahead.js (~> 0.10.0)
     rails-erd (1.1.0)
       activerecord (>= 3.0)
       activesupport (>= 3.0)
@@ -330,8 +338,6 @@ GEM
       activerecord (~> 3.0)
       activesupport (~> 3.0)
       polyamorous (~> 0.5.0)
-    tagmanager-rails (3.0.1.0)
-      railties (>= 3.0, < 5.0)
     therubyracer (0.10.2)
       libv8 (~> 3.3.10)
     therubyrhino (2.0.1)
@@ -342,7 +348,6 @@ GEM
     treetop (1.4.15)
       polyglot
       polyglot (>= 0.3.1)
-    typeahead-rails (0.10.5)
     tzinfo (0.3.41)
     uglifier (1.2.7)
       execjs (>= 0.3.0)
@@ -372,9 +377,7 @@ DEPENDENCIES
   activerecord-jdbcpostgresql-adapter (~> 1.3.3)
   acts_as_list (= 0.1.6)
   acts_as_tree-1.8 (= 1.1.0)
-  bootstrap-sass (~> 3.1.1)
   bootstrap-timepicker-rails
-  bootswatch-rails
   breadcrumbs_on_rails
   calendar_helper (= 0.2.5)
   capistrano
@@ -413,6 +416,10 @@ DEPENDENCIES
   pg (~> 0.11.0)
   rabl
   rails (= 3.2.18)
+  rails-assets-bootstrap-sass-official (~> 3.1.1)
+  rails-assets-tagmanager (~> 3.0.1.0)
+  rails-assets-typeahead.js (~> 0.10.5)
+  rails-assets-typeahead.js-bootstrap3.less
   rails-erd
   ransack
   raphael-rails
@@ -428,10 +435,8 @@ DEPENDENCIES
   simple_form
   sqlite3
   squeel
-  tagmanager-rails (~> 3.0.1.0)
   therubyracer (~> 0.10.2)
   therubyrhino
-  typeahead-rails (~> 0.10.5)
   uglifier (>= 1.0.3)
   warbler
   will_paginate (~> 3.0)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 5b03dce78..e2d7f11d9 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -11,8 +11,8 @@
 //= require cocoon
 //= require raphael
 //= require morris
-//= require bootstrap
-//= require typeahead.min
+//= require bootstrap-sass-official
+//= require typeahead.js
 //= require bootstrap-timepicker
 //= require tagmanager
 //= require_directory ./plugins
diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
index 8708d53c4..3f493856b 100644
--- a/app/assets/stylesheets/application.css.scss.erb
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -1,15 +1,11 @@
 // First import journal variables
-// @import "bootswatch/cerulean/variables";
 $brand-primary: <%= ChouetteIhm::Application.config.company_theme %>;
 $navbar-default-bg: $brand-primary;
 $navbar-default-link-color: white;
 $body-bg: #eee;
 
 // Then bootstrap itself
-@import "bootstrap";
-
-// And finally bootswatch style itself
-// @import "bootswatch/cerulean/bootswatch";
+@import "bootstrap-sass-official";
 
 // Whatever application styles you have go last
 // Modules and Variables
@@ -20,12 +16,11 @@ $body-bg: #eee;
 @import "partials/footer";
 
 // Third-party
-@import "tagmanager";
+@import "tagmanager/tagmanager.scss";
 @import "font-awesome";
 @import "jquery.ui.all";
 @import "morris";
 @import "formtastic";
-@import "typeahead-rails";
 @import "bootstrap-timepicker";
 
 @import "vendor/openlayers_style";
@@ -36,6 +31,7 @@ $body-bg: #eee;
 @import "vendor/pagination";
 @import "vendor/map_layers";
 @import "vendor/token-input.css";
+@import "vendor/typeahead";
 
 // Main css
 @import "main/*";
diff --git a/app/assets/stylesheets/main/time_tables.css.scss b/app/assets/stylesheets/main/time_tables.css.scss
index 0989b5745..2202a66d1 100644
--- a/app/assets/stylesheets/main/time_tables.css.scss
+++ b/app/assets/stylesheets/main/time_tables.css.scss
@@ -95,6 +95,14 @@
 
 #workspace.time_tables.edit,#workspace.time_tables.new,#workspace.time_tables.create,#workspace.time_tables.update
 {
+    fieldset.inputs{
+        overflow: visible !important;
+
+        .tags{
+            overflow: visible !important;
+        }
+    }
+
     h3 {
         .dates {
             cursor: pointer;
diff --git a/app/assets/stylesheets/vendor/formtastic_changes.css.scss b/app/assets/stylesheets/vendor/formtastic_changes.css.scss
index 4e7ea0d37..8de2a9bd1 100644
--- a/app/assets/stylesheets/vendor/formtastic_changes.css.scss
+++ b/app/assets/stylesheets/vendor/formtastic_changes.css.scss
@@ -1,8 +1,4 @@
 .formtastic{
-     
-    .input.typeahead_wrapper{
-        overflow: inherit !important;
-    }
 
     .label{
         white-space: normal;
diff --git a/app/assets/stylesheets/vendor/token-input.css b/app/assets/stylesheets/vendor/token-input.css
index cb883729a..50676f980 100644
--- a/app/assets/stylesheets/vendor/token-input.css
+++ b/app/assets/stylesheets/vendor/token-input.css
@@ -8,7 +8,7 @@ ul.token-input-list {
     cursor: text;
     font-size: 12px;
     font-family: Verdana, sans-serif;
-    z-index: 999;
+    z-index: 1061;
     margin: 0;
     padding: 0;
     background-color: #fff;
@@ -88,7 +88,7 @@ div.token-input-dropdown {
     cursor: default;
     font-size: 12px;
     font-family: Verdana, sans-serif;
-    z-index: 1;
+    z-index: 1061;
 }
 
 div.token-input-dropdown p {
diff --git a/app/assets/stylesheets/vendor/typeahead.css.scss b/app/assets/stylesheets/vendor/typeahead.css.scss
new file mode 100644
index 000000000..56653de9d
--- /dev/null
+++ b/app/assets/stylesheets/vendor/typeahead.css.scss
@@ -0,0 +1,49 @@
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+
+.tt-dropdown-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+  color: #fff;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/app/inputs/tags_input.rb b/app/inputs/tags_input.rb
index cee5a8312..4fbf0465f 100644
--- a/app/inputs/tags_input.rb
+++ b/app/inputs/tags_input.rb
@@ -14,6 +14,6 @@ class TagsInput < Formtastic::Inputs::StringInput
                   :autofocus         => nil,
                   :class             => 'tm-input',
                 })
-  end 
+  end
   
 end
diff --git a/app/views/time_table_combinations/_combine_form.html.erb b/app/views/time_table_combinations/_combine_form.html.erb
index a2124d9dc..aad31a218 100644
--- a/app/views/time_table_combinations/_combine_form.html.erb
+++ b/app/views/time_table_combinations/_combine_form.html.erb
@@ -3,8 +3,7 @@
   <%= render "shared/flash_messages" %>
   <%= form.inputs do %>
     <%= form.input :operation, :as => :radio, :collection => Hash[TimeTableCombination.operations.map {|b| [t( b, :scope => "time_table_combinations.operations"),b]}] %>
-    <%= form.input :combined_name, :class =>  "typeahead", :input_html => { :class => "form-control" } %>
-    <%= form.input :combined_id, :as => :hidden  %>
+    <%= form.input :combined_id, :label => t('.time_tables'), :as => :search_time_table, :json => referential_time_tables_path(@referential, :format => :json), :hint_text => t('search_hint'), :no_result_text => t('no_result_text'), :searching_text => t('searching_term'), :tokenLimit => 1 %>
   <% end %>
   </div>
   <div class="modal-footer">
@@ -12,38 +11,4 @@
     <%= form.action :submit, :as => :button , :label => t('time_tables.show.combine') %>
   <% end %>
   </div>
-
-<script>
-	$(function() {
-		var timeTableSuggestion = new Bloodhound({
-        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        limit: 12,
-        remote: {
-          url: '<%= referential_time_tables_path(@referential, :format => :json) %>?q[comment_cont]=%QUERY',
-          },
-        });
-
-      timeTableSuggestion.initialize();
-
-      $('#time_table_combination_combined_name').typeahead(
-        {
-          hint: true,
-          highlight: true,
-          minLength: 1
-        },
-        {
-          name: 'comment',
-          displayKey: 'comment',
-          source: timeTableSuggestion.ttAdapter()
-        }
-      );
-
-  $('#time_table_combination_combined_name').on('typeahead:selected', function($e, datum)
-  {
-    $('input[name="time_table_combination[combined_id]"]').val(datum.id);
-  })
-
-	});
-</script>
 <% end %>