Skip to content

Commit

Permalink
Added close button to modals
Browse files Browse the repository at this point in the history
  • Loading branch information
rquazi committed Jul 18, 2024
1 parent cce9d3f commit f522372
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 63 deletions.
14 changes: 12 additions & 2 deletions mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
NodeMapping,
} from '@app/common/interfaces/crosswalk-connection.interface';
import validateMapping from '@app/modules/crosswalk-editor/mapping-validator';
import {Dropdown, IconPlus, Textarea, TextInput} from 'suomifi-ui-components';
import {Dropdown, IconClose, IconPlus, Textarea, TextInput} from 'suomifi-ui-components';
import {DropdownItem} from 'suomifi-ui-components';
import {useEffect, useState} from 'react';
import {
Expand Down Expand Up @@ -230,7 +230,17 @@ export default function NodeMappings(props: {
className="row bg-white edit-mapping-modal"
>
<ModalContent className="edit-mapping-modal-content">
<ModalTitle>{props.isJointPatchOperation ? 'Edit mapping' : 'Add mapping'}</ModalTitle>
<div className='row'>
<div className='col-8'>
<ModalTitle>{props.isJointPatchOperation ? 'Edit mapping' : 'Add mapping'}</ModalTitle>
</div>
<div className="col-4">
<Button style={{ float: 'right' }} variant="secondaryNoBorder"
icon={<IconClose />} aria-label="t('cancel')" onClick={() => closeModal()}></Button>
</div>
</div>


<div className="col flex-column d-flex justify-content-between">
<div className="row bg-white">
{/* SOURCE OPERATIONS */}
Expand Down
123 changes: 62 additions & 61 deletions mscr-ui/src/modules/form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as React from 'react';
import { useCallback, useEffect, useState } from 'react';
import {
Button,
IconClose,
InlineAlert,
Modal,
ModalContent,
Expand Down Expand Up @@ -543,7 +544,8 @@ export default function FormModal({
}

return (
<Modal
<>
<Modal
appElementId="__next"
visible={visible}
onEscKeyDown={() => handleClose()}
Expand All @@ -566,69 +568,67 @@ export default function FormModal({
? SpinnerType.CrosswalkRegistrationModal
: modalType == ModalType.RegisterNewMscr
? SpinnerType.CrosswalkCreationModal
: SpinnerType.CrosswalkRevisionModal
}
: SpinnerType.CrosswalkRevisionModal}
></SpinnerOverlay>
)}
</>
<div id={'modalTop'}></div>
<ModalTitle>
{contentType == Type.Schema
? modalType == ModalType.RegisterNewFull
? t('content-form.title.schema-register')
: modalType == ModalType.McsrCopy
? t('content-form.title.schema-mscr-copy')
: t('content-form.title.schema-revision')
: modalType == ModalType.RegisterNewFull
? t('content-form.title.crosswalk-register')
: modalType == ModalType.RegisterNewMscr
? t('content-form.title.crosswalk-create')
: modalType == ModalType.McsrCopy
? t('content-form.title.crosswalk-mscr-copy')
: t('content-form.title.crosswalk-revision')}
</ModalTitle>

{(modalType == ModalType.RegisterNewFull ||
modalType == ModalType.RevisionFull) &&
renderFileDropArea()}
<div id={'modalTop'}></div>

<div className="row">
<div className="col-8">
<ModalTitle>
{contentType == Type.Schema
? modalType == ModalType.RegisterNewFull
? t('content-form.title.schema-register')
: modalType == ModalType.McsrCopy
? t('content-form.title.schema-mscr-copy')
: t('content-form.title.schema-revision')
: modalType == ModalType.RegisterNewFull
? t('content-form.title.crosswalk-register')
: modalType == ModalType.RegisterNewMscr
? t('content-form.title.crosswalk-create')
: modalType == ModalType.McsrCopy
? t('content-form.title.crosswalk-mscr-copy')
: t('content-form.title.crosswalk-revision')}
</ModalTitle>
</div>
<div className="col-4">
<Button style={{ float: 'right' }} variant="secondaryNoBorder"
icon={<IconClose />} aria-label="t('cancel')" onClick={() => handleClose()}></Button>
</div>
</div>

{(modalType == ModalType.RegisterNewFull ||
modalType == ModalType.RevisionFull) &&
renderFileDropArea()}

{contentType == Type.Schema && (
<SchemaFormFields
formData={formData}
setFormData={setFormData}
userPosted={userPosted}
disabled={
(authenticatedUser && authenticatedUser.anonymous) ||
submitAnimationVisible
}
errors={userPosted ? errors : undefined}
hasInitialData={
modalType == ModalType.RevisionMscr ||
modalType == ModalType.RevisionFull ||
modalType == ModalType.McsrCopy
}
/>
)}
{contentType == Type.Crosswalk && (
<CrosswalkForm
formData={formData}
setFormData={setFormData}
createNew={modalType == ModalType.RegisterNewMscr}
hasInitialData={
modalType == ModalType.RevisionMscr ||
modalType == ModalType.RevisionFull ||
modalType == ModalType.McsrCopy
}
userPosted={userPosted}
disabled={
(authenticatedUser && authenticatedUser.anonymous) ||
submitAnimationVisible
}
errors={userPosted ? errors : undefined}
groupWorkspacePid={undefined}
/>
)}
<Separator></Separator>
{contentType == Type.Schema && (
<SchemaFormFields
formData={formData}
setFormData={setFormData}
userPosted={userPosted}
disabled={(authenticatedUser && authenticatedUser.anonymous) ||
submitAnimationVisible}
errors={userPosted ? errors : undefined}
hasInitialData={modalType == ModalType.RevisionMscr ||
modalType == ModalType.RevisionFull ||
modalType == ModalType.McsrCopy} />
)}
{contentType == Type.Crosswalk && (
<CrosswalkForm
formData={formData}
setFormData={setFormData}
createNew={modalType == ModalType.RegisterNewMscr}
hasInitialData={modalType == ModalType.RevisionMscr ||
modalType == ModalType.RevisionFull ||
modalType == ModalType.McsrCopy}
userPosted={userPosted}
disabled={(authenticatedUser && authenticatedUser.anonymous) ||
submitAnimationVisible}
errors={userPosted ? errors : undefined}
groupWorkspacePid={undefined} />
)}
<Separator></Separator>
</ModalContent>
<ModalFooter>
{renderErrorAlerts()}
Expand All @@ -654,6 +654,7 @@ export default function FormModal({
{t('cancel')}
</Button>
</ModalFooter>
</Modal>
</Modal>
</>
);
}

0 comments on commit f522372

Please sign in to comment.