From a11736bd158dc5e6b9d290f711f14ed394696c4b Mon Sep 17 00:00:00 2001 From: rishichawda Date: Sat, 29 Dec 2018 18:28:42 +0530 Subject: [PATCH 1/9] fix(modal): update modal design and animation #287 --- lib/modal/index.js | 5 ++-- lib/modal/theme.module.scss | 58 +++++++++++++++++++++++++------------ 2 files changed, 42 insertions(+), 21 deletions(-) diff --git a/lib/modal/index.js b/lib/modal/index.js index 7f49e4b4..84af2095 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( @@ -122,7 +123,7 @@ class Modal extends Component { ) || null} {this.renderModalFooter(footer)} - diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index f6a0f9b7..d17a89a8 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,18 +9,18 @@ align-items: center; justify-content: center; box-sizing: border-box; - } +} - :local(.animation) { +:local(.animation) { opacity: 0; transition: opacity 0.3s; - } - - :local(.modal) { +} + +:local(.modal) { display: none; - padding: 2%; + padding: 1%; padding-bottom: 1%; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); background: white; width: 50%; top: calc(30vh + 2em); @@ -28,17 +28,15 @@ position: fixed; flex-flow: column; box-sizing: border-box; - + border-radius: 0.5em; :local(.modal-title) { padding: 1% 0%; font-weight: bold; box-sizing: border-box; } - :local(.modal-body) { box-sizing: border-box; } - :local(.modal-footer) { width: 100%; padding: 1% 2%; @@ -46,12 +44,37 @@ } } +: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); + } + } +} + :local(.d-block) { display: flex; animation: fadein 0.3s linear; @keyframes fadein { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } } @@ -65,13 +88,10 @@ right: 0.6em; top: 0.6em; 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 From 59658b98f07874d6229d537754c896a65de3907a Mon Sep 17 00:00:00 2001 From: rishichawda Date: Sat, 29 Dec 2018 18:29:19 +0530 Subject: [PATCH 2/9] test(modal): fix broken tests --- lib/modal/tests/accessibility.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/modal/tests/accessibility.test.js b/lib/modal/tests/accessibility.test.js index 1fbfe314..cef799aa 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('svg.icon-cross') .simulate('click'); // Get the last child element, i.e, close icon. setTimeout(() => { expect(simulatedValue()).equals(expectedValueAfterClosing); From 0f230ef5f4e219b138a9cf1b5428376403752996 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 15:36:52 +0530 Subject: [PATCH 3/9] fix(modal): update modal design --- lib/globals/fonts.scss | 4 ---- lib/modal/index.js | 15 ++++++++++----- lib/modal/theme.module.scss | 30 +++++++++++++++++++++++++----- 3 files changed, 35 insertions(+), 14 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 84af2095..603a248d 100644 --- a/lib/modal/index.js +++ b/lib/modal/index.js @@ -114,7 +114,16 @@ class Modal extends Component { this.modalRef = ref; }} > - {this.renderModalTitle(title)} +
+ {this.renderModalTitle(title)} + + × + + {title &&
} +
{children || ( typeof body === 'function' @@ -123,10 +132,6 @@ class Modal extends Component { ) || null}
{this.renderModalFooter(footer)} - )} diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index d17a89a8..5f2107ae 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -16,10 +16,25 @@ transition: opacity 0.3s; } +:local(.titleWrapper) { + display: flex; + width: 100%; + position: relative; + padding: 2%; + box-sizing: border-box; + hr { + border: none; + position: absolute; + left: 0; + width: 100%; + background-color: #888282ab; + bottom: 0; + height: 1px; + } +} + :local(.modal) { display: none; - padding: 1%; - padding-bottom: 1%; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); background: white; width: 50%; @@ -36,6 +51,7 @@ } :local(.modal-body) { box-sizing: border-box; + padding: 2%; } :local(.modal-footer) { width: 100%; @@ -84,10 +100,14 @@ :local(.close) { width: fit-content; - position: absolute; - right: 0.6em; - top: 0.6em; cursor: pointer; + position: absolute; + right: 2%; + display: flex; + align-items: center; + height: fit-content; + font-size: 20px; + color: #1f1e1eab; } @media only screen and (max-width: 992px) { From 46ecd23bebab8c53b827b0ae72162ae3d1cd4138 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 15:39:20 +0530 Subject: [PATCH 4/9] test(modal): fix broken tests --- lib/modal/tests/accessibility.test.js | 2 +- lib/modal/tests/render.test.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/modal/tests/accessibility.test.js b/lib/modal/tests/accessibility.test.js index cef799aa..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('svg.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(); From 5922d1123011cdb2479ec4a27f6d6fc2ab9f19cb Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 15:41:43 +0530 Subject: [PATCH 5/9] fix(modal): reduce border-radius --- lib/modal/theme.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index 5f2107ae..f0e1c27a 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -43,7 +43,7 @@ position: fixed; flex-flow: column; box-sizing: border-box; - border-radius: 0.5em; + border-radius: 0.3em; :local(.modal-title) { padding: 1% 0%; font-weight: bold; From 8157196400770482e51541bbf3a99c432c6d8158 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 17:02:23 +0530 Subject: [PATCH 6/9] fix(modal): remove bottom margin from separator --- lib/modal/theme.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index f0e1c27a..7e350139 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -30,6 +30,7 @@ background-color: #888282ab; bottom: 0; height: 1px; + margin-bottom: 0; } } From 451cdb7cfe9ed76ef1e1e4b7ac0226e1fd3b2039 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Wed, 2 Jan 2019 10:42:46 +0530 Subject: [PATCH 7/9] fix(modal): align text, fix top position --- lib/modal/theme.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index 7e350139..ee959114 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -39,7 +39,7 @@ 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; @@ -53,6 +53,7 @@ :local(.modal-body) { box-sizing: border-box; padding: 2%; + text-align: left; } :local(.modal-footer) { width: 100%; From 2c2eafba2bd11b2219c5518c3da3a5454b296f51 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Wed, 2 Jan 2019 11:18:40 +0530 Subject: [PATCH 8/9] fix(modal): fix mobile view --- lib/modal/theme.module.scss | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index ee959114..e503cd78 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -45,20 +45,43 @@ 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; + display: flex; + + @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%; + } } } @@ -101,15 +124,16 @@ } :local(.close) { - width: fit-content; - cursor: pointer; - position: absolute; - right: 2%; display: flex; - align-items: center; + width: fit-content; height: fit-content; + position: absolute; font-size: 20px; color: #1f1e1eab; + right: 0.5em; + align-items: center; + align-self: center; + cursor: pointer; } @media only screen and (max-width: 992px) { From efc1ceeb988e53662c2e67789757eb26eef01261 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Wed, 2 Jan 2019 11:33:04 +0530 Subject: [PATCH 9/9] fix(modal): minor changes in card header and close button added text overflow on title and adjust close button pos --- lib/modal/theme.module.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/lib/modal/theme.module.scss b/lib/modal/theme.module.scss index e503cd78..ea8fc651 100644 --- a/lib/modal/theme.module.scss +++ b/lib/modal/theme.module.scss @@ -56,9 +56,14 @@ padding: 1% 0%; font-weight: bold; box-sizing: border-box; - display: flex; - - @media only screen and (max-width:500px) { + 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%; } } @@ -66,10 +71,9 @@ box-sizing: border-box; padding: 2%; text-align: left; - @media only screen and (max-width:768px) { + @media only screen and (max-width: 768px) { padding: 3%; } - @media only screen and (max-width:500px) { padding: 5%; line-height: 1.4em; @@ -79,7 +83,7 @@ width: 100%; padding: 1% 2%; box-sizing: border-box; - @media only screen and (max-width:768px) { + @media only screen and (max-width: 768px) { padding: 2% 3%; } } @@ -130,7 +134,7 @@ position: absolute; font-size: 20px; color: #1f1e1eab; - right: 0.5em; + right: 1em; align-items: center; align-self: center; cursor: pointer;