Merge pull request #3406 from betagouv/fix-3405
Fix 3405 boutons flottants
This commit is contained in:
commit
5b724ba8fb
8 changed files with 40 additions and 24 deletions
|
@ -2,6 +2,7 @@ $blue: #0069CC;
|
|||
$light-blue: #1C7EC9;
|
||||
$lighter-blue: #C3D9FF;
|
||||
$black: #333333;
|
||||
$white: #FFFFFF;
|
||||
$grey: #999999;
|
||||
$light-grey: #F8F8F8;
|
||||
$border-grey: #CCCCCC;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
12
yarn.lock
12
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"
|
||||
|
|
Loading…
Reference in a new issue