Incorporate vertical scroll shadows to modals #1128
Conversation
sg00dwin
commented
Jan 23, 2019
sg00dwin
commented
- shared css for react-modal and patternfly-react modal
- modal-content class is now a child of modal-dialog
- pf overrides for catalog height and positioning to support scroll shadows
- button, input, tag elements have colors switched to rgba so don't overlay shadow
openshift-ci-robot
added
the
size/L
sg00dwin
force-pushed
the
modal-vertical-scroll-shadows
branch
from
399bdd5
to
a65c6bb
Compare
|
/retest |
|
/refresh |
|
/assign @rhamilto |
|
|
||
| // Modal modifications to enable vertical scrolling with shadow overlays | ||
|
|
||
| .modal-dialog { |
|
|
||
| .modal-dialog { | ||
| @media(max-width: $screen-xs-max) { | ||
| height: calc(100% - 20px); |
There was a problem hiding this comment.
Maybe add a comment explaining why 20px?
| } | ||
|
|
||
| } | ||
| .btn-default { |
There was a problem hiding this comment.
This gives me pause since it's redefining the buttons style from PatternFly. If/when those change, we will now have to update this rule as well.
|
|
||
|
|
||
| .modal.right-side-modal-pf { | ||
| top: 76px; // since PatternFly 4's masthead is taller than PatternFly 3's |
| top: 54px; | ||
| width: auto; | ||
| &.modal-body--centered { | ||
| @media(min-width: $screen-sm-min) { |
There was a problem hiding this comment.
These changes seem undesirable for short modals?
| @@ -43,7 +43,7 @@ class DeleteModal extends PromiseComponent { | |||
|
|
|||
| render() { | |||
| const {kind, resource} = this.props; | |||
| return <form onSubmit={this._submit} name="form"> | |||
| return <form onSubmit={this._submit} name="form" className="modal-content"> | |||
| <ModalTitle>Delete {kind.label}</ModalTitle> | |||
| <ModalBody className="modal-body co-delete-modal"> | |||
There was a problem hiding this comment.
Note the passing of className here overrides the default classNames in modal.tsx. As a result, this modal doesn't get the height adjustments. Is that intentional?
| @@ -28,7 +28,7 @@ class DeleteNamespaceModal extends PromiseComponent { | |||
| } | |||
|
|
|||
| render() { | |||
| return <form onSubmit={this._submit} name="form"> | |||
| return <form onSubmit={this._submit} name="form" className="modal-content"> | |||
| <ModalTitle>Delete {this.props.kind.label}</ModalTitle> | |||
| <ModalBody className="modal-body co-delete-modal"> | |||
There was a problem hiding this comment.
Note the passing of className here overrides the default classNames in modal.tsx. As a result, this modal doesn't get the height adjustments. Is that intentional?
sg00dwin
force-pushed
the
modal-vertical-scroll-shadows
branch
2 times, most recently
from
6398423
to
4190d6a
Compare
|
@rhamilto changes push. please take a look. size options |
- modal-content class is now a child of modal-dialog - shared css for react-modal and patternfly-react modal - add modal optional height classes - pf overrides for catalog height and positioning to support scroll shadows
sg00dwin
force-pushed
the
modal-vertical-scroll-shadows
branch
from
4190d6a
to
415a38c
Compare
|
/lgtm |
