Merge pull request #19 from sgmap/clickable-links-in-champs-description

Add clickable links in champ description and use bootstrap layout for…

.byebug_history

@@ -1,4 +0,0 @@
-exit
-xit
-xtei
-cniuecniu

Gemfile

@@ -119,11 +119,8 @@ end
 
 group :development do
   # Access an IRB console on exception pages or by using <%= console %> in views
-
   gem 'web-console'
-
   gem 'rack-handlers'
-
   gem 'xray-rails'
 end
 

app/assets/javascripts/bootstrap_wysihtml5.js

@@ -3,6 +3,6 @@ $(document).on('page:load', wysihtml5_active);
 
 function wysihtml5_active (){
     $('.wysihtml5').each(function(i, elem) {
-        $(elem).wysihtml5({ toolbar:{ "fa": true, "link": false, "color": true }, "locale": "fr-FR" });
+        $(elem).wysihtml5({ toolbar:{ "fa": true, "link": false, "color": false }, "locale": "fr-FR" });
     });
 }

app/assets/javascripts/description.js

@@ -18,14 +18,6 @@ function action_type_de_champs() {
         toggleErrorClass(this, validatePhone(val));
     });
 
-    $("#liste_champs input").on('focus', function () {
-        $("#description_" + this.id).slideDown();
-    });
-
-    $("#liste_champs input").on('blur', function () {
-        $("#description_" + this.id).slideUp();
-    });
-
     address_type_init();
 }
 

app/assets/stylesheets/application.scss

@@ -144,10 +144,6 @@ textarea#description {
   max-width: 27px;
 }
 
-label {
-  font-weight: normal;
-}
-
 div.pagination {
   padding-top: 20px;
   display: block;

app/assets/stylesheets/description.scss

@@ -7,9 +7,7 @@
     .show-block {
       width: 90%;
       .body{
-        padding-left: 35px;
+        padding: 15px;
-        padding-right: 35px;
-        padding-bottom: 35px;
       }
     }
   }
@@ -134,10 +132,3 @@
     width: 160px;
   }
 }
-
-.description_div {
-  margin-top: 5px;
-  margin-left: 5px;
-  color: dimgrey;
-  display: none;
-}

app/assets/stylesheets/typeahead.scss

@@ -1,3 +1,6 @@
+.twitter-typeahead {
+    width: 100%; // http://stackoverflow.com/questions/17957513/extending-the-width-of-bootstrap-typeahead-to-match-input-field
+}
 
 .tt-menu {
   padding: 8px 0;

app/decorators/champ_decorator.rb

@@ -7,4 +7,9 @@ class ChampDecorator < Draper::Decorator
     end
     object.value
   end
+
+  def description_with_links
+    description.gsub(URI.regexp, '<a target="_blank" href="\0">\0</a>').html_safe if description
+  end
+
 end

app/views/users/description/_show.html.haml

@@ -15,7 +15,7 @@
     = @dossier.procedure.libelle
 
   -#TODO use form_for
-  = form_tag(url_for({controller: 'users/description', action: :create, dossier_id: @dossier.id}), class: 'form-inline', method: 'POST', multipart: true) do
+  = form_tag(url_for({controller: 'users/description', action: :create, dossier_id: @dossier.id}), class: 'form', method: 'POST', multipart: true) do
     -unless @champs.nil?
       #liste_champs
         =render partial: 'users/description/champs', locals:{private: false}

app/views/users/description/champs/_checkbox.html.haml

@@ -1,6 +1,2 @@
-%h4{style:'margin-left:15px;'}
+%input{type: 'hidden', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", value: ''}
-  = champ.libelle
+%input{type: 'checkbox', style:'margin-left: 15px;', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", checked: ('checked' if champ.value == 'on')}
-  - if champ.mandatory?
-    = '*'
-  %input{type: 'hidden', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", value: ''}
-  %input{type: 'checkbox', style:'margin-left: 15px;', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", checked: ('checked' if champ.value == 'on')}

app/views/users/description/champs/_civilite.html.haml

@@ -1,7 +1,8 @@
-%label.radio-inline
+%div
+  %label.radio-inline
     = radio_button_tag "champs['#{champ.id}']", "M.", champ.value == 'Mme' ? false : true
     Monsieur
 
-%label.radio-inline
+  %label.radio-inline
     = radio_button_tag "champs['#{champ.id}']", "Mme", champ.value == 'Mme'
     Madame

app/views/users/description/champs/_engagement.html.haml

@@ -1,8 +1,2 @@
-%h4{style:'margin-left:15px;'}
+%input{type: 'hidden', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", value: ''}
-  = champ.libelle
+%input{type: 'checkbox', style:'margin-left: 15px;', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", checked: ('checked' if champ.value == 'on')}
-  - if champ.mandatory?
-    = '*'
-  %input{type: 'hidden', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", value: ''}
-  %input{type: 'checkbox', style:'margin-left: 15px;', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", checked: ('checked' if champ.value == 'on')}
-%div{style:'margin-left: 5%; margin-right: 5%; text-align: justify; text-justify: inter-word;'}
-  = champ.description.gsub(/\r\n/, '<br>').html_safe

app/views/users/description/champs/_render_list_champs.html.haml

@@ -1,54 +1,55 @@
--champs.each do |champ|
+- champs.decorate.each do |champ|
   - if champ.order_place > order_place
     - if champ.type_champ == 'header_section'
       - break
 
-    - unless champ.type_champ == 'checkbox' || champ.type_champ == 'engagement'
+    .row
-      %h4
+      %div{ class: if champ.type_champ == 'textarea' || champ.type_champ == 'engagement' then 'col-md-12' else 'col-md-6' end }
+        .form-group
+          %label{ for: "champs_#{ champ.id }"}
             = champ.libelle
             - if champ.mandatory?
-          = '*'
+              *
 
-    -if champ.type_champ == 'textarea'
+          - if champ.type_champ == 'textarea'
-      =render partial: 'users/description/champs/textarea', locals: {champ: champ}
+            = render partial: 'users/description/champs/textarea', locals: { champ: champ }
 
-    -elsif champ.type_champ == 'checkbox'
+          - elsif champ.type_champ == 'checkbox'
-      = render partial: 'users/description/champs/checkbox', locals: {champ: champ}
+            = render partial: 'users/description/champs/checkbox', locals: { champ: champ }
 
-    -elsif champ.type_champ == 'civilite'
+          - elsif champ.type_champ == 'civilite'
-      =render partial: 'users/description/champs/civilite', locals: {champ: champ}
+            = render partial: 'users/description/champs/civilite', locals: { champ: champ }
 
           - elsif champ.type_champ == 'datetime'
-      =render partial: 'users/description/champs/datetime', locals: {champ: champ}
+            = render partial: 'users/description/champs/datetime', locals: { champ: champ }
 
           - elsif champ.type_champ == 'yes_no'
-      =render partial: 'users/description/champs/yes_no', locals: {champ: champ}
+            = render partial: 'users/description/champs/yes_no', locals: { champ: champ }
 
           - elsif champ.type_champ == 'drop_down_list'
-      =render partial: 'users/description/champs/drop_down_list', locals: {champ: champ}
+            = render partial: 'users/description/champs/drop_down_list', locals: { champ: champ }
 
           - elsif champ.type_champ == 'pays'
-      =render partial: 'users/description/champs/pays', locals: {champ: champ}
+            = render partial: 'users/description/champs/pays', locals: { champ: champ }
 
           - elsif champ.type_champ == 'regions'
-      =render partial: 'users/description/champs/regions', locals: {champ: champ}
+            = render partial: 'users/description/champs/regions', locals: { champ: champ }
 
           - elsif champ.type_champ == 'engagement'
-      =render partial: 'users/description/champs/engagement', locals: {champ: champ}
+            = render partial: 'users/description/champs/engagement', locals: { champ: champ }
 
           - elsif champ.type_champ == 'departements'
-      =render partial: 'users/description/champs/departements', locals: {champ: champ}
+            = render partial: 'users/description/champs/departements', locals: { champ: champ }
 
-    -else
+          - else
-      %input.form-control{name:"champs['#{champ.id}']",
+            %input.form-control{name:"champs['#{ champ.id }']",
                             placeholder: champ.libelle,
-                      id: "champs_#{champ.id}",
+                            id: "champs_#{ champ.id }",
                             value: champ.value,
                             type: champ.type_champ,
                             'data-provide' => champ.data_provide,
                             'data-date-format' => champ.data_date_format}
 
-  - unless champ.description.empty? || champ.type_champ == 'engagement'
+          - unless champ.description.empty?
-    .row
+            %div{ id:"description_champs_#{ champ.id }", class: ('help-block' unless champ.type_champ == 'engagement') }
-      .col-lg-8.col-md-8.col-sm-8.col-xs-8{class: 'description_div', id:"description_champs_#{champ.id}"}
+              = champ.description_with_links
-        = champ.description

app/views/users/description/champs/_textarea.html.haml

@@ -2,4 +2,4 @@
                   placeholder: champ.description,
                   id: "champs_#{champ.id}",
                   row: '6'}
-  =champ.value
+  = champ.value

app/views/users/description/champs/_yes_no.html.haml

@@ -1,7 +1,8 @@
-%label.radio-inline
+%div
+  %label.radio-inline
     = radio_button_tag "champs['#{champ.id}']", "true", champ.value == 'true'
     Oui
 
-%label.radio-inline
+  %label.radio-inline
     = radio_button_tag "champs['#{champ.id}']", "false", champ.value == 'false'
     Non