From e504692f82eb83d0860c556ca79320c0848c1277 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bulot=20Fran=C3=A7ois?= Date: Wed, 20 Sep 2023 09:45:49 +0200 Subject: [PATCH] uniformize Modal CSS --- src/constants/dictionary.js | 4 +- .../components/generic-input.jsx | 38 +++--------- src/scss/_global.scss | 32 ++++++++-- src/scss/inc/_page-questionnaire.scss | 3 +- .../external-questionnaire-dropdown.jsx | 40 ++++++------ .../visualize-dropdown.spec.js.snap | 3 + .../components/visualize-dropdown.jsx | 61 +++++++++---------- .../visualize-dropdown-container.js | 9 ++- .../visualize-dropdown.spec.js | 4 +- 9 files changed, 99 insertions(+), 95 deletions(-) diff --git a/src/constants/dictionary.js b/src/constants/dictionary.js index d33b82b58..9b58f6b58 100644 --- a/src/constants/dictionary.js +++ b/src/constants/dictionary.js @@ -753,11 +753,11 @@ const dictionary = { en: 'Current questionnaire', }, CollectedVariableType: { - fr: 'Collecté', + fr: 'Collectée', en: 'Collected', }, CalculatedVariableType: { - fr: 'Calculé', + fr: 'Calculée', en: 'Calculated', }, ExternalVariableType: { diff --git a/src/layout/generic-input/components/generic-input.jsx b/src/layout/generic-input/components/generic-input.jsx index d6cfa0a45..44e6ed1d5 100644 --- a/src/layout/generic-input/components/generic-input.jsx +++ b/src/layout/generic-input/components/generic-input.jsx @@ -34,26 +34,11 @@ export const defaultProps = { // Components -export const customModalStyles = { - content: { - display: 'absolute', - textAlign: 'center', - verticAlalign: 'middle', - top: '40%', - left: '50%', - right: 'auto', - bottom: 'auto', - marginRight: '-50%', - width: '400px', - alignItems: 'center', - transform: 'translate(-50%, -50%)', - }, -}; export const customLoopModalStyles = { content: { display: 'absolute', textAlign: 'center', - verticAlalign: 'middle', + verticalAlign: 'middle', top: '25%', left: '50%', right: 'auto', @@ -153,13 +138,13 @@ function GenericInput(props) { isOpen ariaHideApp={false} shouldCloseOnOverlayClick={false} - style={customModalStyles} + className="custom-modal" >

{Dictionary.modification}

- - @@ -286,33 +271,30 @@ function GenericInput(props) {

{Dictionary.notSaved}

-

{Dictionary.visualizationError}

-

{Dictionary.loopNotSaved}

- diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 68e43472a..aa9b06ba9 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -257,6 +257,34 @@ a { } } +.custom-modal { + @extend .container; + border: 1px solid black; + position: absolute; + text-align: center; + vertical-align: middle; + padding: 10px; + top: 40%; + left: 50%; + right: auto; + bottom: auto; + margin-right: -50%; + width: 400px; + align-items: center; + transform: translate(-50%, -50%); + background-color: white; + border-radius: 4px; +} + +.modal-button { + background-color: #15417a; + color: white; + box-shadow: none; + border: none; + padding: 5px 10px; + margin-right: 10px; +} + .alert-triangle { position: relative; background-color: red; @@ -380,10 +408,6 @@ a { margin: -50px 0px 0px -50px; } -.customLoopModalStyles { - overflow: scroll; -} - .questionnaire-element-filter { margin: 10px; width: 35%; diff --git a/src/scss/inc/_page-questionnaire.scss b/src/scss/inc/_page-questionnaire.scss index dc2be5a2b..498a5e5af 100644 --- a/src/scss/inc/_page-questionnaire.scss +++ b/src/scss/inc/_page-questionnaire.scss @@ -119,7 +119,8 @@ flex-wrap: wrap; justify-content: flex-end; align-items: center; - a, button { + a, + button { margin: 5px 5px 2px 2px; } } diff --git a/src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx b/src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx index 2552473d7..7c5108f8f 100644 --- a/src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx +++ b/src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState, useRef, useCallback } from 'react'; import PropTypes from 'prop-types'; -import classSet from 'react-classset'; +import ClassSet from 'react-classset'; import { Link } from 'react-router-dom'; import Dictionary from 'utils/dictionary/dictionary'; @@ -37,23 +37,6 @@ function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) { setDropdownOpen(!dropdownOpen); }; - const classDropDown = classSet({ - 'btn-group': true, - dropup: top, - 'flex-column': !top, - 'flex-column-reverse': top, - open: dropdownOpen, - }); - const classDropDownTrigger = classSet({ - btn: true, - 'dropdown-toggle': true, - 'btn-yellow': false, - 'btn-white': true, - disabled: disabled, - }); - const classDropDownList = classSet({ - 'dropdown-menu': true, - }); const linksQuestionnaire = [ { actionType: 'tcmRef', @@ -72,9 +55,24 @@ function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) { }, ]; return ( -
+
-
    +
      {linksQuestionnaire.map(link => { return (
    • diff --git a/src/widgets/visualize-dropdown/__snapshots__/visualize-dropdown.spec.js.snap b/src/widgets/visualize-dropdown/__snapshots__/visualize-dropdown.spec.js.snap index 6b5d2a7c2..19e9a6d7a 100644 --- a/src/widgets/visualize-dropdown/__snapshots__/visualize-dropdown.spec.js.snap +++ b/src/widgets/visualize-dropdown/__snapshots__/visualize-dropdown.spec.js.snap @@ -10,6 +10,7 @@ exports[`Visualize Dropdown Component: Should disable the button 1`] = ` className="btn dropdown-toggle btn-yellow disabled" data-toggle="dropdown" disabled={true} + id="visualize" onClick={[Function]} > Visualise @@ -90,6 +91,7 @@ exports[`Visualize Dropdown Component: Should display the dropdown on top 1`] = className="btn dropdown-toggle btn-yellow" data-toggle="dropdown" disabled={false} + id="visualize" onClick={[Function]} > Visualise @@ -170,6 +172,7 @@ exports[`Visualize Dropdown Component: Should return the right HTML 1`] = ` className="btn dropdown-toggle btn-yellow" data-toggle="dropdown" disabled={false} + id="visualize" onClick={[Function]} > Visualise diff --git a/src/widgets/visualize-dropdown/components/visualize-dropdown.jsx b/src/widgets/visualize-dropdown/components/visualize-dropdown.jsx index 6d6c952b1..30fbebcac 100644 --- a/src/widgets/visualize-dropdown/components/visualize-dropdown.jsx +++ b/src/widgets/visualize-dropdown/components/visualize-dropdown.jsx @@ -5,10 +5,6 @@ import { Link } from 'react-router-dom'; import ReactModal from 'react-modal'; import Dictionary from 'utils/dictionary/dictionary'; import { hasDuplicateVariables } from 'utils/variables/variables-utils'; -import { - customModalStyles, - /* customModalbuttonStyles, */ -} from 'layout/generic-input/components/generic-input'; /** * Component used in the actions toolbar and on each @@ -81,23 +77,6 @@ function VisualizeDropdown({ const handleCloseModal = () => setAllowDuplicateVariablesModal(false); - const classDropDown = classSet({ - 'btn-group': true, - dropup: top, - 'flex-column': !top, - 'flex-column-reverse': top, - open: dropdownOpen, - }); - const classDropDownTrigger = classSet({ - btn: true, - 'dropdown-toggle': true, - 'btn-yellow': true, - 'btn-white': false, - disabled: disabled, - }); - const classDropDownList = classSet({ - 'dropdown-menu': true, - }); const links = [ { actionType: 'html', actionLabel: Dictionary.VISUALIZE_WEB }, { @@ -111,9 +90,25 @@ function VisualizeDropdown({ { actionType: 'ddi', actionLabel: Dictionary.VISUALIZE_DDI }, ]; return ( -
      +
      -
        +
          {links.map(link => { return (
        • @@ -139,16 +134,18 @@ function VisualizeDropdown({ isOpen={ allowDuplicateVariablesModal && hasQuestionnaireDuplicateVariables } + className="custom-modal" ariaHideApp={false} - style={customModalStyles} >

          {Dictionary.duplicateVariablesComment}

          - - +
      ); @@ -172,11 +169,11 @@ VisualizeDropdown.defaultProps = { disabled: false, top: false, componentId: '', - externalVariables: undefined, - calculatedVariables: undefined, - collectedVariableByQuestion: undefined, - questionnaire: undefined, - externalQuestionnairesVariables: undefined, + externalVariables: {}, + calculatedVariables: {}, + collectedVariableByQuestion: {}, + questionnaire: {}, + externalQuestionnairesVariables: {}, }; export default VisualizeDropdown; diff --git a/src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js b/src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js index e71b9facf..fc891a08a 100644 --- a/src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js +++ b/src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js @@ -6,7 +6,6 @@ import VisualizeDropdown from '../components/visualize-dropdown'; const mapStateToProps = state => { return { questionnaire: state.appState.activeQuestionnaire, - components: state.appState.activeComponentById, calculatedVariables: state.appState.activeCalculatedVariablesById, externalVariables: state.appState.activeExternalVariablesById, collectedVariableByQuestion: state.appState.collectedVariableByQuestion, @@ -15,13 +14,13 @@ const mapStateToProps = state => { }; }; -const PageQuestionnaireContainer = connect(mapStateToProps)(VisualizeDropdown); +const VisualizeDropdownContainer = connect(mapStateToProps)(VisualizeDropdown); -PageQuestionnaireContainer.propTypes = { +VisualizeDropdownContainer.propTypes = { questionnaireId: PropTypes.string, }; -PageQuestionnaireContainer.defaultProps = { +VisualizeDropdownContainer.defaultProps = { questionnaireId: undefined, }; -export default PageQuestionnaireContainer; +export default VisualizeDropdownContainer; diff --git a/src/widgets/visualize-dropdown/visualize-dropdown.spec.js b/src/widgets/visualize-dropdown/visualize-dropdown.spec.js index f0ebab233..8aec9a508 100644 --- a/src/widgets/visualize-dropdown/visualize-dropdown.spec.js +++ b/src/widgets/visualize-dropdown/visualize-dropdown.spec.js @@ -48,11 +48,11 @@ describe('Visualize Dropdown Component: ', () => { const wrapper = shallow(); expect(wrapper.find('div').hasClass('open')).toBeFalsy(); wrapper - .find('button') + .find('button[id="visualize"]') .simulate('click', { preventDefault() {}, stopPropagation() {} }); expect(wrapper.find('div').hasClass('open')).toBeTruthy(); wrapper - .find('button') + .find('button[id="visualize"]') .simulate('click', { preventDefault() {}, stopPropagation() {} }); expect(wrapper.find('div').hasClass('open')).toBeFalsy(); });