aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
diff options
context:
space:
mode:
authorTed Humphrey <Thomas.Humphrey@att.com>2020-04-16 17:36:17 +0000
committerTed Humphrey <Thomas.Humphrey@att.com>2020-04-16 21:44:24 -0400
commitdf68db271f23561671a59b1678c39b8ee54cd8e4 (patch)
tree5873a2906c0b1bdab87587734f5fd5ea0baa0362 /ui-react/src/components/dialogs/Loop/OpenLoopModal.js
parent6e7d04895c9133f772f3d781e84dbfc7b32f2874 (diff)
Minor UI fixes for dialogues and Tosca upload feature
Issue-ID: CLAMP-587 Change-Id: I683b62fbd0b15ab5db18c7e1e941ff8cb58cb0f3 Signed-off-by: Ted Humphrey <Thomas.Humphrey@att.com>
Diffstat (limited to 'ui-react/src/components/dialogs/Loop/OpenLoopModal.js')
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.js40
1 files changed, 27 insertions, 13 deletions
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index 15a718885..c04883443 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -37,13 +37,20 @@ const ModalStyled = styled(Modal)`
const CheckBoxStyled = styled(FormCheck.Input)`
margin-left:3rem;
`
-const LoopViewSvgDivStyled = styled.div`
- overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+ overflow-x: scroll;
+ display: flex;
+ flex-direction: row;
background-color: ${props => (props.theme.loopViewerBackgroundColor)};
border-color: ${props => (props.theme.loopViewerHeaderColor)};
+ margin-top: 2em;
margin-left: auto;
margin-right:auto;
+ margin-bottom: -3em;
text-align: center;
+ align-items: center;
+ height: 100%;
+ width: 100%;
`
export default class OpenLoopModal extends React.Component {
@@ -54,6 +61,7 @@ export default class OpenLoopModal extends React.Component {
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+ this.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
this.state = {
show: true,
chosenLoopName: '',
@@ -101,28 +109,34 @@ export default class OpenLoopModal extends React.Component {
render() {
return (
- <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
<Modal.Header closeButton>
<Modal.Title>Open Model</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group as={Row} controlId="formPlaintextEmail">
- <Form.Label column sm="2">Model Name</Form.Label>
+ <Form.Label column sm="2">Model Name:</Form.Label>
<Col sm="10">
<Select onChange={this.handleDropdownListChange}
options={this.state.loopNames} />
</Col>
</Form.Group>
- <Form.Group controlId="formPlaintextEmail">
- <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
- </LoopViewSvgDivStyled>
- </Form.Group>
- <Form.Group controlId="formBasicChecbox">
- <Form.Check>
- <FormCheck.Label>Read Only</FormCheck.Label>
- <CheckBoxStyled type="checkbox" />
- </Form.Check>
+ <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+ <Form.Label column sm="2">Model Preview:</Form.Label>
+ <Col sm="10">
+ <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
+ value={this.state.content} >
+ </LoopViewSvgDivStyled>
+ </Col>
</Form.Group>
+ {this.showReadOnly === true ?
+ <Form.Group as={Row} controlId="formBasicChecbox">
+ <Form.Check>
+ <FormCheck.Label>Read Only Mode:</FormCheck.Label>
+ <CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
+ </Form.Check>
+ </Form.Group>
+ : null}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>