From b7058947e1e5aacf05be985df99a564d359600b2 Mon Sep 17 00:00:00 2001
From: Paul Chavard <git@paul.chavard.net>
Date: Tue, 12 Feb 2019 15:50:49 +0100
Subject: [PATCH] Fix buttons on screen bottom

---
 app/assets/stylesheets/new_design/_colors.scss |  1 +
 .../new_design/procedure_champs_editor.scss    | 18 +++++++++++++++---
 .../administrateur/DraggableList.vue           | 16 ++--------------
 spec/features/admin/procedure_creation_spec.rb |  2 +-
 .../new_administrateur/types_de_champ_spec.rb  |  8 ++++----
 5 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/new_design/_colors.scss b/app/assets/stylesheets/new_design/_colors.scss
index a437d8530..a31e51a75 100644
--- a/app/assets/stylesheets/new_design/_colors.scss
+++ b/app/assets/stylesheets/new_design/_colors.scss
@@ -2,6 +2,7 @@ $blue: #0069CC;
 $light-blue: #1C7EC9;
 $lighter-blue: #C3D9FF;
 $black: #333333;
+$white: #FFFFFF;
 $grey: #999999;
 $light-grey: #F8F8F8;
 $border-grey: #CCCCCC;
diff --git a/app/assets/stylesheets/new_design/procedure_champs_editor.scss b/app/assets/stylesheets/new_design/procedure_champs_editor.scss
index daa960e59..591eb48df 100644
--- a/app/assets/stylesheets/new_design/procedure_champs_editor.scss
+++ b/app/assets/stylesheets/new_design/procedure_champs_editor.scss
@@ -1,4 +1,5 @@
 @import "colors";
+@import "constants";
 
 #champs-editor {
   .spinner {
@@ -111,10 +112,21 @@
   }
 }
 
-.header,
 .footer {
+  margin-bottom: 70px;
+}
+
+.buttons {
   display: flex;
   justify-content: space-between;
-  margin-top: 30px;
-  margin-bottom: 30px;
+  margin: 0px;
+  position: fixed;
+  bottom: 0px;
+  background-color: $white;
+  max-width: $page-width;
+  width: 100%;
+  border: 1px solid $border-grey;
+  padding: 10px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
diff --git a/app/javascript/new_design/administrateur/DraggableList.vue b/app/javascript/new_design/administrateur/DraggableList.vue
index e96e3ca40..dd619994e 100644
--- a/app/javascript/new_design/administrateur/DraggableList.vue
+++ b/app/javascript/new_design/administrateur/DraggableList.vue
@@ -1,18 +1,5 @@
 <template>
   <div class="champs-editor">
-    <div v-if="state.typesDeChamp.length > 3" class="header">
-      <button class="button" v-scroll-to="'.footer'" @click.prevent="addChamp">
-        <template v-if="state.isAnnotation">
-          Ajouter une annotation
-        </template>
-        <template v-else>
-          Ajouter un champ
-        </template>
-      </button>
-
-      <button class="button primary" @click.prevent="save">Enregistrer</button>
-    </div>
-
     <Draggable :list="state.typesDeChamp" :options="{handle:'.handle'}">
       <DraggableItem
         v-for="(item, index) in state.typesDeChamp"
@@ -22,7 +9,8 @@
         :key="item.id" />
     </Draggable>
 
-    <div class="footer">
+    <div class="footer"></div>
+    <div class="buttons">
       <button class="button" v-scroll-to="'.footer'" @click.prevent="addChamp">
         <template v-if="state.isAnnotation">
           Ajouter une annotation
diff --git a/spec/features/admin/procedure_creation_spec.rb b/spec/features/admin/procedure_creation_spec.rb
index 0e0dbd5cc..26666d5fa 100644
--- a/spec/features/admin/procedure_creation_spec.rb
+++ b/spec/features/admin/procedure_creation_spec.rb
@@ -105,7 +105,7 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
         blur
         expect(page).to have_content('Formulaire enregistré')
 
-        within '.footer' do
+        within '.buttons' do
           click_on 'Ajouter un champ'
         end
         expect(page).to have_selector('#procedure_types_de_champ_attributes_1_libelle')
diff --git a/spec/features/new_administrateur/types_de_champ_spec.rb b/spec/features/new_administrateur/types_de_champ_spec.rb
index 288d4f950..1ad203998 100644
--- a/spec/features/new_administrateur/types_de_champ_spec.rb
+++ b/spec/features/new_administrateur/types_de_champ_spec.rb
@@ -13,7 +13,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
   it "Add a new champ" do
     click_on 'Supprimer'
 
-    within '.footer' do
+    within '.buttons' do
       click_on 'Ajouter un champ'
     end
     expect(page).to have_selector('#procedure_types_de_champ_attributes_0_libelle')
@@ -22,7 +22,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
     expect(page).to have_content('Formulaire enregistré')
 
     page.refresh
-    within '.footer' do
+    within '.buttons' do
       click_on 'Enregistrer'
     end
 
@@ -30,7 +30,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
   end
 
   it "Add multiple champs" do
-    within '.footer' do
+    within '.buttons' do
       click_on 'Ajouter un champ'
       click_on 'Ajouter un champ'
       click_on 'Ajouter un champ'
@@ -107,7 +107,7 @@ feature 'As an administrateur I can edit types de champ', js: true do
     expect(page).to have_content('Formulaire enregistré')
     expect(page).to have_content('Supprimer', count: 2)
 
-    within '.footer' do
+    within '.buttons' do
       click_on 'Ajouter un champ'
     end