Merge pull request #3406 from betagouv/fix-3405

Fix 3405 boutons flottants
This commit is contained in:
Paul Chavard 2019-02-12 15:35:49 +00:00 committed by GitHub
commit 5b724ba8fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 40 additions and 24 deletions

View file

@ -2,6 +2,7 @@ $blue: #0069CC;
$light-blue: #1C7EC9;
$lighter-blue: #C3D9FF;
$black: #333333;
$white: #FFFFFF;
$grey: #999999;
$light-grey: #F8F8F8;
$border-grey: #CCCCCC;

View file

@ -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;
}

View file

@ -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">
<button class="button" @click.prevent="addChamp">
<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
</template>

View file

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

View file

@ -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",

View file

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

View file

@ -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

View file

@ -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"