Skip to content

Commit 32087fc

Browse files
allyoucanmapallyoucanmap
committed
add portal on style editor modals to make them visible (#3709)
1 parent ed530d1 commit 32087fc

File tree

5 files changed

+56
-38
lines changed

5 files changed

+56
-38
lines changed

‎web/client/components/styleeditor/StyleTemplates.jsx‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const Filter = withLocal('filterPlaceholder')(require('../misc/Filter'));
2121
const FormControl = withLocal('placeholder')(FormControlRB);
2222

2323
const ResizableModal = require('../misc/ResizableModal');
24+
const Portal = require('../misc/Portal');
2425
const Message = require('../I18N/Message');
2526
const HTML = require('../I18N/HTML');
2627

@@ -120,35 +121,37 @@ const StyleTemplates = ({
120121
selected: styleTemplate.styleId === selectedStyle,
121122
disabled: loading
122123
}))}/>
123-
<ResizableModal
124-
show={!!add}
125-
fitContent
126-
title={<Message msgId="styleeditor.createStyleModalTitle"/>}
127-
onClose={() => onClose()}
128-
buttons={[
129-
{
130-
text: <Message msgId="save"/>,
131-
bsStyle: 'primary',
132-
disabled: !validateAlphaNumeric(styleSettings),
133-
onClick: () => onSave(styleSettings)
134-
}
135-
]}>
136-
<Form>
137-
<FormGroup controlId="styleTitle" validationState={!validateAlphaNumeric(styleSettings) && 'error'}>
138-
{formFields.map(({title, placeholder, key}) => (<span key={key}>
139-
<ControlLabel>{title}</ControlLabel>
140-
<FormControl
141-
type="text"
142-
defaultValue={styleSettings[key]}
143-
placeholder={placeholder}
144-
onChange={event => onUpdate({...styleSettings, [key]: event.target.value})}/>
145-
</span>))}
146-
</FormGroup>
147-
{!validateAlphaNumeric(styleSettings) && <Alert style={{margin: 0}} bsStyle="danger">
148-
<HTML msgId="styleeditor.titleRequired"/>
149-
</Alert>}
150-
</Form>
151-
</ResizableModal>
124+
<Portal>
125+
<ResizableModal
126+
show={!!add}
127+
fitContent
128+
title={<Message msgId="styleeditor.createStyleModalTitle"/>}
129+
onClose={() => onClose()}
130+
buttons={[
131+
{
132+
text: <Message msgId="save"/>,
133+
bsStyle: 'primary',
134+
disabled: !validateAlphaNumeric(styleSettings),
135+
onClick: () => onSave(styleSettings)
136+
}
137+
]}>
138+
<Form>
139+
<FormGroup controlId="styleTitle" validationState={!validateAlphaNumeric(styleSettings) && 'error'}>
140+
{formFields.map(({title, placeholder, key}) => (<span key={key}>
141+
<ControlLabel>{title}</ControlLabel>
142+
<FormControl
143+
type="text"
144+
defaultValue={styleSettings[key]}
145+
placeholder={placeholder}
146+
onChange={event => onUpdate({...styleSettings, [key]: event.target.value})}/>
147+
</span>))}
148+
</FormGroup>
149+
{!validateAlphaNumeric(styleSettings) && <Alert style={{margin: 0}} bsStyle="danger">
150+
<HTML msgId="styleeditor.titleRequired"/>
151+
</Alert>}
152+
</Form>
153+
</ResizableModal>
154+
</Portal>
152155
</BorderLayout>
153156
);
154157

‎web/client/components/styleeditor/StyleToolbar.jsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
const React = require('react');
1010
const Toolbar = require('../misc/toolbar/Toolbar');
1111
const ResizableModal = require('../misc/ResizableModal');
12+
const Portal = require('../misc/Portal');
1213
const Message = require('../I18N/Message');
1314
const { Alert } = require('react-bootstrap');
1415

@@ -151,14 +152,16 @@ const StyleToolbar = ({
151152
},
152153
...(!!status ? [] : buttons)
153154
]} />
154-
<ResizableModal
155-
show={showModal}
156-
fitContent
157-
title={showModal && showModal.title}
158-
onClose={() => onShowModal(null)}
159-
buttons={showModal && showModal.buttons}>
160-
{showModal && showModal.message}
161-
</ResizableModal>
155+
<Portal>
156+
<ResizableModal
157+
show={showModal}
158+
fitContent
159+
title={showModal && showModal.title}
160+
onClose={() => onShowModal(null)}
161+
buttons={showModal && showModal.buttons}>
162+
{showModal && showModal.message}
163+
</ResizableModal>
164+
</Portal>
162165
</div>
163166
);
164167

‎web/client/components/styleeditor/__tests__/StyleTemplates-test.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,10 @@ describe('test StyleTemplates module component', () => {
108108
expect(cards.length).toBe(3);
109109
TestUtils.Simulate.click(cards[0]);
110110
});
111+
112+
it('test StyleTemplates modal uses portal', () => {
113+
ReactDOM.render(<StyleTemplates add />, document.getElementById("container"));
114+
const modalContainer = document.body.children[1].querySelector('.ms-resizable-modal');
115+
expect(modalContainer).toExist();
116+
});
111117
});

‎web/client/components/styleeditor/__tests__/StyleToolbar-test.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,9 @@ describe('test StyleToolbar module component', () => {
5959
expect(buttons.length).toBe(4);
6060
});
6161

62+
it('test StyleToolbar modal uses portal', () => {
63+
ReactDOM.render(<StyleToolbar showModal />, document.getElementById("container"));
64+
const modalContainer = document.body.children[1].querySelector('.ms-resizable-modal');
65+
expect(modalContainer).toExist();
66+
});
6267
});

‎web/client/plugins/styleeditor/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,8 @@ const StyleList = compose(
170170
position: 'relative'
171171
},
172172
maskStyle: {
173-
overflowY: 'auto'
173+
overflowY: 'auto',
174+
left: 0
174175
}
175176
}
176177
)

0 commit comments

Comments
 (0)