Merge pull request #3406 from betagouv/fix-3405

Fix 3405 boutons flottants

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;

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: 0px;
-  margin-bottom: 30px;
+  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;
 }

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" @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,8 +9,9 @@
         :key="item.id" />
     </Draggable>
 
-    <div class="footer">
+    <div class="footer"></div>
-      <button class="button" @click.prevent="addChamp">
+    <div class="buttons">
+      <button class="button" v-scroll-to="'.footer'" @click.prevent="addChamp">
         <template v-if="state.isAnnotation">
           Ajouter une annotation
         </template>

app/javascript/new_design/administrateur/champs-editor.js

@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import Draggable from 'vuedraggable';
+import VueScrollTo from 'vue-scrollto';
 
 import DraggableItem from './DraggableItem';
 import DraggableList from './DraggableList';
 
 Vue.component('Draggable', Draggable);
 Vue.component('DraggableItem', DraggableItem);
+Vue.use(VueScrollTo, { duration: 1500, easing: 'ease' });
 
 addEventListener('DOMContentLoaded', () => {
   const el = document.querySelector('#champs-editor');

package.json

@@ -19,7 +19,8 @@
     "vue": "^2.5.21",
     "vue-loader": "^15.5.1",
     "vue-template-compiler": "^2.5.21",
-    "vuedraggable": "^2.16.0"
+    "vuedraggable": "^2.16.0",
+    "vue-scrollto": "^2.13.0"
   },
   "devDependencies": {
     "eclint": "^2.8.0",

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')

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
 

yarn.lock

@@ -1363,6 +1363,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bezier-easing@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY=
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -8524,6 +8529,13 @@ vue-loader@^15.5.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-scrollto@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/vue-scrollto/-/vue-scrollto-2.13.0.tgz#fe23c9e5d684271c48154e8d504370cd40a8d6fd"
+  integrity sha512-ZjvWhY2LbEGqbtvDrBBm04AvgNfYGySJnakyHXxgv4UNlM0hRpkN1UKjKqB8J8U96YOEra+WjxmhujrBGeshbA==
+  dependencies:
+    bezier-easing "^2.0.3"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"