From 7726d28932161a5d3baf4e8dddd07363883f62ab Mon Sep 17 00:00:00 2001 From: Rishi Kumar Chawda Date: Wed, 2 Jan 2019 12:09:56 +0530 Subject: [PATCH] fix(modal): update modal design (#295) * fix(modal): update modal design and animation #287 * fix(modal): update modal design --- lib/globals/fonts.scss | 4 - lib/modal/index.js | 18 ++-- lib/modal/tests/accessibility.test.js | 2 +- lib/modal/tests/render.test.js | 3 +- lib/modal/theme.module.scss | 116 +++++++++++++++++++++----- 5 files changed, 108 insertions(+), 35 deletions(-) diff --git a/lib/globals/fonts.scss b/lib/globals/fonts.scss index b84fc9ca..dfc7562e 100644 --- a/lib/globals/fonts.scss +++ b/lib/globals/fonts.scss @@ -27,10 +27,6 @@ content: "\e802"; } -.icon-cross:before { - content: "\e807"; -} - .icon-menu:before { content: '\e800'; } diff --git a/lib/modal/index.js b/lib/modal/index.js index 7f49e4b4..603a248d 100644 --- a/lib/modal/index.js +++ b/lib/modal/index.js @@ -3,6 +3,7 @@ import { findDOMNode } from 'react-dom'; import PropTypes from 'prop-types'; import { themr } from 'react-css-themr'; import cx from 'classnames'; +import { MdClose } from 'react-icons/md'; import { transitionEndEventName } from '../globals/helper'; import defaultTheme from './theme.module.scss'; import '../globals/fonts.scss'; @@ -87,7 +88,7 @@ class Modal extends Component { const { open } = this.state; const classes = cx( theme.modal, - open ? theme['d-block'] : theme['d-none'], + open ? theme['d-block-modal'] : theme['d-none'], className, ); const backdrop = cx( @@ -113,7 +114,16 @@ class Modal extends Component { this.modalRef = ref; }} > - {this.renderModalTitle(title)} +
+ {this.renderModalTitle(title)} + + × + + {title &&
} +
{children || ( typeof body === 'function' @@ -122,10 +132,6 @@ class Modal extends Component { ) || null}
{this.renderModalFooter(footer)} - )} diff --git a/lib/modal/tests/accessibility.test.js b/lib/modal/tests/accessibility.test.js index 1fbfe314..7fb5f390 100644 --- a/lib/modal/tests/accessibility.test.js +++ b/lib/modal/tests/accessibility.test.js @@ -83,7 +83,7 @@ describe('Modal accessibility tests', () => { toggleModal(); expect(simulatedValue()).equals(expectedValueBeforeClosing); wrappedComponent - .find('i.icon-cross') + .find('span.icon-cross') .simulate('click'); // Get the last child element, i.e, close icon. setTimeout(() => { expect(simulatedValue()).equals(expectedValueAfterClosing); diff --git a/lib/modal/tests/render.test.js b/lib/modal/tests/render.test.js index a59c9ae4..2f06bf08 100644 --- a/lib/modal/tests/render.test.js +++ b/lib/modal/tests/render.test.js @@ -65,6 +65,7 @@ describe('Modal render tests', () => { const expectedValue = 'card-header'; const simulatedValue = () => wrappedComponent .find('#modal') + .childAt(0) .childAt(0); toggleModal(); @@ -75,7 +76,7 @@ describe('Modal render tests', () => { const expectedValue = 'card-footer'; const simulatedValue = () => { const { length } = wrappedComponent.find('#modal').children(); - return wrappedComponent.find('#modal').childAt(length - 2); + return wrappedComponent.find('#modal').childAt(length - 1); }; toggleModal(); diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index f6a0f9b7..ea8fc651 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -1,5 +1,5 @@ :local(.modal-backdrop) { - background: rgba(0,0,0,0.51); + background: rgba(0, 0, 0, 0.51); position: fixed; top: 0; left: 0; @@ -9,40 +9,104 @@ align-items: center; justify-content: center; box-sizing: border-box; - } +} - :local(.animation) { +:local(.animation) { opacity: 0; transition: opacity 0.3s; - } - - :local(.modal) { - display: none; +} + +:local(.titleWrapper) { + display: flex; + width: 100%; + position: relative; padding: 2%; - padding-bottom: 1%; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-sizing: border-box; + hr { + border: none; + position: absolute; + left: 0; + width: 100%; + background-color: #888282ab; + bottom: 0; + height: 1px; + margin-bottom: 0; + } +} + +:local(.modal) { + display: none; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); background: white; width: 50%; - top: calc(30vh + 2em); + top: calc(20vh + 2em); height: fit-content; position: fixed; flex-flow: column; box-sizing: border-box; - + border-radius: 0.3em; + font-variant-ligatures: none; + -webkit-font-variant-ligatures: none; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + font-smooth: antialiased; + -webkit-font-smoothing: antialiased; + text-shadow: rgba(0, 0, 0, .01) 0 0 1px; :local(.modal-title) { padding: 1% 0%; font-weight: bold; box-sizing: border-box; + width: 80%; + text-overflow: ellipsis; + overflow-x: hidden; + white-space: nowrap; + display: inline-block; + text-align: start; + + @media only screen and (max-width: 500px) { + padding: 3%; + } } - :local(.modal-body) { box-sizing: border-box; + padding: 2%; + text-align: left; + @media only screen and (max-width: 768px) { + padding: 3%; + } + @media only screen and (max-width:500px) { + padding: 5%; + line-height: 1.4em; + } } - :local(.modal-footer) { width: 100%; padding: 1% 2%; box-sizing: border-box; + @media only screen and (max-width: 768px) { + padding: 2% 3%; + } + } +} + +:local(.d-block-modal) { + display: flex; + animation: anim 0.3s linear; + @keyframes anim { + 0% { + opacity: 0; + -webkit-transform: scale(0.1); + -moz-transform: scale(0.1); + -ms-transform: scale(0.1); + transform: scale(0.1); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } } } @@ -50,8 +114,12 @@ display: flex; animation: fadein 0.3s linear; @keyframes fadein { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } } @@ -60,18 +128,20 @@ } :local(.close) { + display: flex; width: fit-content; + height: fit-content; position: absolute; - right: 0.6em; - top: 0.6em; + font-size: 20px; + color: #1f1e1eab; + right: 1em; + align-items: center; + align-self: center; cursor: pointer; - font-size: 0.7rem; - background-color: black; - color: white; } @media only screen and (max-width: 992px) { - :local(.modal) { - width: 75%; - } + :local(.modal) { + width: 75%; + } } \ No newline at end of file