DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Améliorations d'usabilité à l'éditeur de champs 2

Browse source 
Améliorations d'usabilité à l'éditeur de champs 2
This commit is contained in:
Pierre de La Morinerie 2019-04-03 18:08:12 +02:00 committed by GitHub
commit 697eefc7a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/new_design/procedure_champs_editor.scss
View file

@ -123,21 +123,24 @@
.champs-editor { .champs-editor {
.footer { .footer {
margin-bottom: 40px; margin-bottom: 50px;
} }
.buttons { .buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0px; margin-left: -30px;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
background-color: $white; background-color: $white;
max-width: $page-width; max-width: 1100px;
width: 100%; width: 100%;
border: 1px solid $border-grey; border: 1px solid $border-grey;
padding: 10px; padding: 30px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom: none;
padding-bottom: 15px;
padding-top: 15px;
} }
} }

3
app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.js
View file

@ -1,5 +1,6 @@
import React, { useReducer, useRef } from 'react'; import React, { useReducer, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { SortableContainer, addChampLabel } from '../utils'; import { SortableContainer, addChampLabel } from '../utils';
import TypeDeChamp from './TypeDeChamp'; import TypeDeChamp from './TypeDeChamp';
@ -46,6 +47,8 @@ function TypeDeChampRepetitionOptions({
}) })
} }
> >
<FontAwesomeIcon icon="plus" size="sm" />
&nbsp;&nbsp;
{addChampLabel(state.isAnnotation)} {addChampLabel(state.isAnnotation)}
</button> </button>
</div> </div>

3
app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js
View file

@ -1,5 +1,6 @@
import React, { useReducer, useRef } from 'react'; import React, { useReducer, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { SortableContainer, addChampLabel } from '../utils'; import { SortableContainer, addChampLabel } from '../utils';
import TypeDeChamp from './TypeDeChamp'; import TypeDeChamp from './TypeDeChamp';
@ -51,6 +52,8 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
}) })
} }
> >
<FontAwesomeIcon icon="plus" size="sm" />
&nbsp;&nbsp;
{addChampLabel(state.isAnnotation)} {addChampLabel(state.isAnnotation)}
</button> </button>
<button <button

31
app/javascript/components/TypesDeChampEditor/index.js
View file

@ -5,6 +5,7 @@ import {
faArrowDown, faArrowDown,
faArrowsAltV, faArrowsAltV,
faArrowUp, faArrowUp,
faPlus,
faTrash faTrash
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
@ -12,32 +13,26 @@ import Flash from './Flash';
import OperationsQueue from './OperationsQueue'; import OperationsQueue from './OperationsQueue';
import TypeDeChamps from './components/TypeDeChamps'; import TypeDeChamps from './components/TypeDeChamps';
library.add(faArrowDown, faArrowsAltV, faArrowUp, faTrash); library.add(faArrowDown, faArrowsAltV, faArrowUp, faPlus, faTrash);
class TypesDeChampEditor extends Component { class TypesDeChampEditor extends Component {
constructor({ constructor(props) {
baseUrl, super(props);
typeDeChampsTypes,
directUploadUrl,
isAnnotation,
typeDeChamps
}) {
super({ typeDeChamps });
const defaultTypeDeChampAttributes = { const defaultTypeDeChampAttributes = {
type_champ: 'text', type_champ: 'text',
types_de_champ: [], types_de_champ: [],
private: isAnnotation, private: props.isAnnotation,
libelle: `${isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'} ${ libelle: `${
typeDeChampsTypes[0][0] props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
}` } ${props.typeDeChampsTypes[0][0]}`
}; };
this.state = { this.state = {
flash: new Flash(isAnnotation), flash: new Flash(props.isAnnotation),
queue: new OperationsQueue(baseUrl), queue: new OperationsQueue(props.baseUrl),
defaultTypeDeChampAttributes, defaultTypeDeChampAttributes,
typeDeChampsTypes, typeDeChampsTypes: props.typeDeChampsTypes,
directUploadUrl, directUploadUrl: props.directUploadUrl,
isAnnotation isAnnotation: props.isAnnotation
}; };
} }