icone sur le bouton d'ajout d'amdt

Gemfile

@@ -24,6 +24,7 @@ gem "font-awesome-sass"
 gem "rails-i18n"
 gem "devise-i18n"
 gem "devise-i18n-views"
+gem 'react-rails', '~> 1.0.0.pre', github: 'reactjs/react-rails'
 
 gem "mechanize"
 

Gemfile.lock

@@ -16,6 +16,17 @@ GIT
       ransack (~> 1.3)
       sass-rails
 
+GIT
+  remote: git://github.com/reactjs/react-rails.git
+  revision: 901c8f68445df849642394cdf9859d293dc13f04
+  specs:
+    react-rails (1.0.0.pre)
+      coffee-script-source (~> 1.9)
+      connection_pool
+      execjs
+      rails (>= 3.1)
+      react-source (~> 0.12)
+
 GEM
   remote: https://rubygems.org/
   remote: https://rails-assets.org/
@@ -105,6 +116,7 @@ GEM
       execjs
     coffee-script-source (1.9.1)
     columnize (0.9.0)
+    connection_pool (2.1.2)
     countries (0.9.3)
       currencies (~> 0.4.2)
     country_select (2.1.1)
@@ -259,6 +271,7 @@ GEM
       activesupport (>= 3.0)
       i18n
       polyamorous (~> 1.1)
+    react-source (0.12.2)
     responders (2.1.0)
       railties (>= 4.2.0, < 5)
     sass (3.4.12)
@@ -332,6 +345,7 @@ DEPENDENCIES
   rails (= 4.2.0)
   rails-i18n
   rails_12factor
+  react-rails (~> 1.0.0.pre)!
   sass-rails (~> 5.0)
   simple_form
   spring

app/assets/javascripts/app/sideBoxService.js

@@ -9,7 +9,8 @@ $(document).ready(function() {
 
     if ($('.bg-active').length) { // si il y a déjà un amendement displayed
       if (that.hasClass('active')) { // si on click sur le l'amendment déjà display
-        // il ne se passe rien car c'est déjà display ;)
+        $('.active').removeClass('active');
+        $('.bg-active').removeClass('bg-active').addClass('hidden') // on reclique et la box se ferme
       } else {
         $('.active').removeClass('active'); // sinon, on remove l'état actif des éléments actifs
         $('.bg-active').removeClass('bg-active').addClass('hidden'); // on enlève l'amendement précédent de la box
@@ -31,6 +32,9 @@ $(document).ready(function() {
 
 // mode edition d'un amendement
 $(document).on('click', '.btn-edition', function(){ // enter edition mode
+console.log("je ferme toutes les box actives de lecture d'amendement")
+  $('.active').removeClass('active'); // ferme les boxes d'amendement
+  $('.bg-active').removeClass('bg-active').addClass('hidden')
   console.log("j'édite")
   $(this).removeClass('btn-edition').addClass('btn-edition-close') // btn pour js
   makeEditable()
@@ -48,7 +52,8 @@ $(document).on('click', '.btn-edition-close', function(){ // escape edition mode
 function editionMode() {
   $(document).on('mouseup', '.editable', function(){
     if (window.getSelection().toString().length != 0) {
-      $('.initial-selection h3 span').text(window.getSelection().toString())
+      $('.initial-selection p span').text(window.getSelection().toString())
+      $('.btn-text-replace').removeClass('hidden')
 
       // TODO : remove hidden class on add box
       $('.new-amendment').removeClass('hidden');
@@ -69,9 +74,9 @@ function editionMode() {
 function textIncrementation() {
   var selection = window.getSelection().toString()
   var selectionToMatch = $("<a class='editable-amendment'>").text(window.getSelection().toString())[0].outerHTML
-  var textToReplace = $('.article-area p').html()
+  var textToReplace = $('.article-area article').html()
   var newText = textToReplace.replace(selection, selectionToMatch)
-  $('.article-area p').html(newText)
+  $('.article-area article').html(newText)
   $('.editable-amendment').after("<a class='new-text'></a>")
 
 
@@ -84,6 +89,13 @@ function textIncrementation() {
   })
 }
 
+//annuler saisie et sortir du formulaire
+$('.cancel').on('click', function(){
+  $('.active').removeClass('active'); // sinon, on remove l'état actif des éléments actifs
+  $('.form-container').addClass('hidden'); // on enlève l'amendement précédent de la box
+}
+  )
+
 function makeEditable() {
   $('.article-area').addClass('editable');
 }

app/assets/javascripts/application.js

@@ -2,6 +2,9 @@
 //= require jquery_ujs
 //= require bootstrap-sprockets
 
+//= require react
+//= require react_ujs
+//= require components
 //= require_tree ./app
 
 

app/assets/javascripts/components.js

@@ -0,0 +1 @@
+//= require_tree ./components

app/assets/javascripts/components/EditableMode.js.jsx

@@ -0,0 +1,46 @@
+var EditableMode = React.createClass({
+  render: function() {
+    return (
+        <div className="new-amendment col-xs-5 hidden">
+          <div className="initial-selection">
+            <p><span></span></p>
+          </div>
+          <a className= 'btn btn-text-replace btn-success'>
+            <i className="fa fa-download"></i> Déposer un amendement
+          </a>
+            <div className="form-container">
+              <form novalidate="novalidate" className="simple_form new_amendment" id="new_amendment" action="/amendments" accept-charset="UTF-8" method="post">
+              <input name="utf8" type="hidden" value="✓" />
+              <input type="hidden" name="authenticity_token" value="e72uc6wgasjr/yRWKQs5Mc0I+1BUb6XFpW0mFW8q3xrPP9J/JvUjynPhRxNQ1TjjHHVjdnYVIDvXM+Twk7Ybzw==" />
+              <div className="form-group text required amendment_content">
+                <label className="text required control-label" for="amendment_content">
+                  Est remplacé par :
+                </label>
+
+                <textarea className="text required form-control" name="amendment[content]" id="amendment_content">
+                </textarea>
+              </div>
+
+                <div className="form-group text required amendment_object">
+                  <label className="text required control-label" for="amendment_object">
+                    Exposé des motifs :
+                  </label>
+                  <textarea className="text required form-control" name="amendment[object]" id="amendment_object">
+                  </textarea>
+                </div>
+
+                <ul className="list-inline text-center">
+                  <li>
+                    <input type="submit" name="commit" value="Enregistrer" className="btn btn-default center-block btn btn-success" />
+                  </li>
+
+                  <li>
+                    <button name="button" type="reset" className="cancel center-block btn btn-danger">Annuler</button>
+                  </li>
+                </ul>
+              </form>
+          </div>
+        </div>
+    )
+  }
+})

app/assets/stylesheets/pages/_law.scss

@@ -1,8 +1,8 @@
 .list-article {
   font-size: 20px;
   font-style: italic;
-  color: #29A4AB;
+  color: $red-parol;
   &:hover {
-    color: #024462;
+    color: $red-parol-hover;
   }
-}
+}

app/views/amendments/edit.html.erb

@@ -1,21 +1,21 @@
-<div class="container">
+<!-- <div class="container">
   <div class="row">
-    <!-- <div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-4"> -->
-      <div class="amendment">
-        <h4 class="text-center">Modifier un Amendment</h4>
-        <%= simple_form_for(@amendment) do |f| %>
-          <%= f.error_notification %>
-          <%= f.input :chamber, label: "Chambre :" %> <!-- menu déroulant : Gvt, AN, Sénat  -->
-          <%= f.input :author, label: "Auteur(s) :" %>
-          <%= f.input :amendment_number, label: "N° Amendement :" %>
-          <%= f.input :content, label: "Contenu :" %>
-          <%= f.input :object, label: "Exposé des motifs :" %>
-          <%= f.input :date, label: "Date de vote :", placeholder: "12/02/2015" %>
-          <%= f.input :status, label: "Statut :" %> <!-- menu déroulant : adopté...  -->
+    <div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-4"> -->
+      <!-- <div class="amendment">
+        <h4 class="text-center">Modifier un Amendment</h4> -->
+        <%#= simple_form_for(@amendment) do |f| %>
+          <%#= f.error_notification %>
+          <%#= f.input :chamber, label: "Chambre :" %> <!-- menu déroulant : Gvt, AN, Sénat  -->
+          <%#= f.input :author, label: "Auteur(s) :" %>
+          <%#= f.input :amendment_number, label: "N° Amendement :" %>
+          <%#= f.input :content, label: "Contenu :" %>
+          <%#= f.input :object, label: "Exposé des motifs :" %>
+          <%#= f.input :date, label: "Date de vote :", placeholder: "12/02/2015" %>
+          <%#= f.input :status, label: "Statut :" %> <!-- menu déroulant : adopté...  -->
           <%#= f.string :porteur %>
-          <%= f.button :submit, value: "Mettre à jour", class:"center-block btn btn-success" %>
-        <% end %>
-      </div>
+          <%#= f.button :submit, value: "Mettre à jour", class:"center-block btn btn-success" %>
+        <%# end %>
+      <!-- </div>
     </div>
   </div>
-</div>
+</div> -->

app/views/amendments/new.html.erb

@@ -1,21 +1,21 @@
-<div class="container">
+<!-- <div class="container">
   <div class="row">
     <div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-4">
       <div class="amendment">
-        <h4 class="text-center">Créer un Amendment</h4>
-        <%= simple_form_for(@amendment) do |f| %>
-          <%= f.error_notification %>
-          <%= f.input :chamber, label: "Chambre :" %> <!-- menu déroulant : Gvt, AN, Sénat  -->
-          <%= f.input :author, label: "Auteur(s) :" %>
-          <%= f.input :amendment_number, label: "N° Amendement :" %>
-          <%= f.input :content, label: "Contenu :" %>
-          <%= f.input :object, label: "Exposé des motifs :" %>
-          <%= f.input :date, label: "Date de vote :", placeholder: "12/02/2015" %>
-          <%= f.input :status, label: "Statut :" %> <!-- menu déroulant : adopté...  -->
+        <h4 class="text-center">Créer un Amendment</h4> -->
+        <%#= simple_form_for(@amendment) do |f| %>
+          <%#= f.error_notification %>
+          <%#= f.input :chamber, label: "Chambre :" %> <!-- menu déroulant : Gvt, AN, Sénat  -->
+          <%#= f.input :author, label: "Auteur(s) :" %>
+          <%#= f.input :amendment_number, label: "N° Amendement :" %>
+          <%#= f.input :content, label: "Contenu :" %>
+          <%#= f.input :object, label: "Exposé des motifs :" %>
+          <%#= f.input :date, label: "Date de vote :", placeholder: "12/02/2015" %>
+          <%#= f.input :status, label: "Statut :" %> <!-- menu déroulant : adopté...  -->
           <%#= f.string :porteur %>
-          <%= f.button :submit, value: "Enregistrer", class:"center-block btn btn-success" %>
-        <% end %>
-      </div>
+          <%#= f.button :submit, value: "Enregistrer", class:"center-block btn btn-success" %>
+        <%# end %>
+      <!-- </div>
     </div>
   </div>
-</div>
+</div> -->

app/views/code_article/index.html.erb

@@ -27,8 +27,8 @@
    <div class="row">
     <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
       <ul class="list-inline">
-        <li><%= link_to 'Retour au Code', code_path(@code), class: 'btn btn-primary' %></li>
-        <li><%= link_to 'Retour à la liste', codes_path, class: 'btn btn-success' %></li>
+        <li><%= link_to 'Retour au code', code_path(@code), class: 'btn btn-default' %></li>
+        <li><%= link_to 'Retour à la liste', codes_path, class: 'btn btn-default' %></li>
       </ul>
     </div>
    </div>

app/views/codes/index.html.erb

@@ -6,14 +6,14 @@
     <div class="row">
       <div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2">
 
-        <h1>Les codes de Loi</h1>
+        <h1>Les codes de loi</h1>
         <br>
         <ul>
           <% @codes.each do |code| %>
           <li>
             <h4><%= code.title %></h4>
             <p><%= code.description %></p>
-            <p><%= link_to 'Details', code_path(code) %></p>
+            <p><%= link_to 'Details', code_path(code), class: 'btn btn-default' %></p>
           </li>
           <% end %>
         </ul>

app/views/codes/show.html.erb

@@ -17,15 +17,15 @@
         <% @code.code_articles.each do |code_article| %>
            <ul>
              <li>
-               <%= link_to code_code_article_index_path(@code, path: code_article.article_path) do %>
+               <%= link_to code_code_article_index_path(@code, path: code_article.article_path), class: 'list-article' do %>
                 <%= code_article.article_number %>
                <% end %>
             </li>
            </ul>
         <% end %>
           <%#= link_to amendment.title, law_amendment_path%>
         <br>
-        <p><%= link_to 'Retour à la liste', codes_path, class: 'btn btn-primary' %>
+        <p><%= link_to 'Retour à la liste', codes_path, class: 'btn btn-default' %>
         </p>
       </div>
     </div>

app/views/law_articles/show.html.erb

@@ -1,6 +1,5 @@
 <div class="container">
   <div class="row">
-
     <div class="col-xs-11">
       <ul class='list-inline'>
         <li>
@@ -29,11 +28,13 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row">  </p>
     <div class="col-xs-7 article-area">
       <h2><%= @law.title %> - <%= @article.article_number %></h2>
       <h4><%= @article.object %> :</h4>
-      <%= format_article_content(@article) %>
+      <article>
+        <%= format_article_content(@article) %>
+      </article>
       <!-- texte en dur -->
       <!-- <h2>Loi éducation 2013 - Article 2</h2>
       <h4>Modifie l'article L.111-1 du Code de l'éducation :</h4>
@@ -67,35 +68,39 @@
     <!-- <div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-4"> -->
       <div class="new-amendment col-xs-5 hidden">
         <div class="initial-selection">
-          <h3><span></span></h3>
+          <p><span></span></p>
         </div>
-        <a class='btn btn-text-replace btn-success'>Déposer un amendement</a>
-        <div class="form-container hidden">
+        <!-- <a class='btn btn-text-replace btn-success'>Déposer un amendement</a> -->
+        <%= link_to "#", class: 'btn btn-text-replace btn-success' do %>
+          <i class="fa fa-download"></i>&nbsp;Déposer un amendement
+          <!-- <i class="fa fa-file-text-o"></i> -->
+        <% end %>
 
-          <%= simple_form_for(@amendment) do |f| %>
-            <%= f.error_notification %>
-            <%#= f.input :initial_text, label: "Texte initial :" %>
-            <%= f.input :content, label: "Est remplacé par :" %>
-            <%= f.input :object, label: "Exposé des motifs :" %>
-            <%#= f.input :amendment_number, label: "N° Amendement :" %>
-            <%#= f.input :author, label: "Auteur(s) :" %>
-            <%#= f.input :chamber, label: "Chambre :" %> <!-- menu déroulant : Gvt, AN, Sénat  -->
-            <%#= f.select :category, [['French','french'],['Belgian','belgian'],['Italian','italian'],['Chinese','chinese'],['Japanese','japanese']] %>
-            <%#= f.input :date, label: "Date de vote :", placeholder: "12/02/2015" %>
-            <%#= f.input :status, label: "Statut :" %> <!-- menu déroulant : adopté...  -->
-            <%#= f.string :porteur %>
-            <ul class="list-inline text-center">
-              <li><%#= f.button :submit, value: "Enregistrer", class: "center-block btn btn-success" %>
-              <!-- <i class="fa fa-floppy-o"></i> -->
-
-              <%= f.button :submit, class: "center-block btn btn-success" do %>
-                <i class="fa fa-floppy-o"></i>&nbsp; Enregistrer
-              <% end %></li>
+        <div class="form-container hidden">
+         <%= simple_form_for(@amendment) do |f| %>
+                     <%= f.error_notification %>
+                     <%#= f.input :initial_text, label: "Texte initial :" %>
+                     <%= f.input :content, label: "Est remplacé par :" %>
+                     <%= f.input :object, label: "Exposé des motifs :" %>
+                     <%#= f.input :amendment_number, label: "N° Amendement :" %>
+                     <%#= f.input :author, label: "Auteur(s) :" %>
+                     <%#= f.input :chamber, label: "Chambre :" %> <!-- menu déroulant : Gvt, AN, Sénat  -->
+                     <%#= f.select :category, [['French','french'],['Belgian','belgian'],['Italian','italian'],['Chinese','chinese'],['Japanese','japanese']] %>
+                     <%#= f.input :date, label: "Date de vote :", placeholder: "12/02/2015" %>
+                     <%#= f.input :status, label: "Statut :" %> <!-- menu déroulant : adopté...  -->
+                     <%#= f.string :porteur %>
+                     <ul class="list-inline text-center">
+                       <li><%= f.button :submit, value: "Enregistrer", class: "center-block btn btn-success" %>
+                       <!-- <i class="fa fa-floppy-o"></i> -->
 
+                       <%#= f.button :submit, class: "center-block btn btn-success" do %>
+                         <!-- <i class="fa fa-floppy-o"></i>&nbsp; Enregistrer -->
+                       <%# end %></li>
 
-              <li><%= f.button :submit, value: "Annuler", class:"center-block btn btn-danger" %></li>
-            </ul>
-          <% end %>
+                       <li><%#= f.button :type => 'reset', value: "Annuler", class:"center-block btn btn-danger" %>
+                       <%= button_tag "Annuler", :type => 'reset', class:"cancel center-block btn btn-danger" %></li>
+                     </ul>
+                   <% end %>
         </div>
       </div>