Améliorations d'usabilité à l'éditeur de champs 2
Améliorations d'usabilité à l'éditeur de champs 2
This commit is contained in:
commit
697eefc7a0
4 changed files with 26 additions and 22 deletions
|
@ -123,21 +123,24 @@
|
|||
|
||||
.champs-editor {
|
||||
.footer {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0px;
|
||||
margin-left: -30px;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
background-color: $white;
|
||||
max-width: $page-width;
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
border: 1px solid $border-grey;
|
||||
padding: 10px;
|
||||
padding: 30px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom: none;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useReducer, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
import { SortableContainer, addChampLabel } from '../utils';
|
||||
import TypeDeChamp from './TypeDeChamp';
|
||||
|
@ -46,6 +47,8 @@ function TypeDeChampRepetitionOptions({
|
|||
})
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon="plus" size="sm" />
|
||||
|
||||
{addChampLabel(state.isAnnotation)}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useReducer, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
import { SortableContainer, addChampLabel } from '../utils';
|
||||
import TypeDeChamp from './TypeDeChamp';
|
||||
|
@ -51,6 +52,8 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
|
|||
})
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon="plus" size="sm" />
|
||||
|
||||
{addChampLabel(state.isAnnotation)}
|
||||
</button>
|
||||
<button
|
||||
|
|
|
@ -5,6 +5,7 @@ import {
|
|||
faArrowDown,
|
||||
faArrowsAltV,
|
||||
faArrowUp,
|
||||
faPlus,
|
||||
faTrash
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
|
@ -12,32 +13,26 @@ import Flash from './Flash';
|
|||
import OperationsQueue from './OperationsQueue';
|
||||
import TypeDeChamps from './components/TypeDeChamps';
|
||||
|
||||
library.add(faArrowDown, faArrowsAltV, faArrowUp, faTrash);
|
||||
library.add(faArrowDown, faArrowsAltV, faArrowUp, faPlus, faTrash);
|
||||
|
||||
class TypesDeChampEditor extends Component {
|
||||
constructor({
|
||||
baseUrl,
|
||||
typeDeChampsTypes,
|
||||
directUploadUrl,
|
||||
isAnnotation,
|
||||
typeDeChamps
|
||||
}) {
|
||||
super({ typeDeChamps });
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const defaultTypeDeChampAttributes = {
|
||||
type_champ: 'text',
|
||||
types_de_champ: [],
|
||||
private: isAnnotation,
|
||||
libelle: `${isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'} ${
|
||||
typeDeChampsTypes[0][0]
|
||||
}`
|
||||
private: props.isAnnotation,
|
||||
libelle: `${
|
||||
props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
|
||||
} ${props.typeDeChampsTypes[0][0]}`
|
||||
};
|
||||
this.state = {
|
||||
flash: new Flash(isAnnotation),
|
||||
queue: new OperationsQueue(baseUrl),
|
||||
flash: new Flash(props.isAnnotation),
|
||||
queue: new OperationsQueue(props.baseUrl),
|
||||
defaultTypeDeChampAttributes,
|
||||
typeDeChampsTypes,
|
||||
directUploadUrl,
|
||||
isAnnotation
|
||||
typeDeChampsTypes: props.typeDeChampsTypes,
|
||||
directUploadUrl: props.directUploadUrl,
|
||||
isAnnotation: props.isAnnotation
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue