From 75a390d9ce7f48a9bd597fd3f9d643286a9e8b0f Mon Sep 17 00:00:00 2001 From: Sukchan Lee Date: Sat, 24 Jun 2017 10:14:31 +0900 Subject: [PATCH] Modal and StyledIcon in Shared UI Module --- webui/src/components/Base/Header.js | 7 +++- webui/src/components/Base/Login.js | 7 +++- webui/src/components/Base/Logout.js | 10 ++++- webui/src/components/Shared/Modal.js | 35 +++++++++++----- webui/src/components/Shared/StyledIcon.js | 44 ++++++++++++++++++++ webui/src/components/Shared/ThumbnailIcon.js | 42 ------------------- webui/src/components/index.js | 4 +- 7 files changed, 90 insertions(+), 59 deletions(-) create mode 100644 webui/src/components/Shared/StyledIcon.js delete mode 100644 webui/src/components/Shared/ThumbnailIcon.js diff --git a/webui/src/components/Base/Header.js b/webui/src/components/Base/Header.js index e3b1ce405..f4a94092d 100644 --- a/webui/src/components/Base/Header.js +++ b/webui/src/components/Base/Header.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import oc from 'open-color'; +import { StyledIcon, Tooltip } from 'components'; import MenuIcon from 'react-icons/lib/md/menu'; -import { ThumbnailIcon, Tooltip } from 'components'; +import PersonIcon from 'react-icons/lib/md/person'; const Wrapper = styled.div` display: flex; @@ -55,7 +56,9 @@ const Header = ({ onSidebarToggle, onLogoutRequest }) => ( - + + + diff --git a/webui/src/components/Base/Login.js b/webui/src/components/Base/Login.js index f84b72a01..cd319f88b 100644 --- a/webui/src/components/Base/Login.js +++ b/webui/src/components/Base/Login.js @@ -6,7 +6,8 @@ import styled from 'styled-components'; import oc from 'open-color'; import { media } from 'helpers/style-utils'; -import {ThumbnailIcon} from 'components'; +import { StyledIcon } from 'components'; +import PersonIcon from 'react-icons/lib/md/person'; import CloseIcon from 'react-icons/lib/md/close'; const Wrapper = styled.div` @@ -175,7 +176,9 @@ const Login = ({ message={error && error.message} onClose={onErrorReset} /> - + + +
diff --git a/webui/src/components/Base/Logout.js b/webui/src/components/Base/Logout.js index 831b86b85..d1dd6ee38 100644 --- a/webui/src/components/Base/Logout.js +++ b/webui/src/components/Base/Logout.js @@ -5,6 +5,9 @@ import styled from 'styled-components'; import oc from 'open-color'; import { Modal } from 'components'; +import { transitions } from 'helpers/style-utils'; + +import PersonIcon from 'react-icons/lib/md/person'; const TitleWrapper = styled.div` padding-left: 1rem; @@ -88,7 +91,12 @@ class Logout extends Component { } = this.props; return ( - + Logout diff --git a/webui/src/components/Shared/Modal.js b/webui/src/components/Shared/Modal.js index 49bf42655..31bc71686 100644 --- a/webui/src/components/Shared/Modal.js +++ b/webui/src/components/Shared/Modal.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import onClickOutside from 'react-onclickoutside'; import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; -import {media, transitions} from 'helpers/style-utils'; +import { media, transitions } from 'helpers/style-utils'; const Wrapper = styled.div` position: fixed; @@ -14,42 +14,48 @@ const Wrapper = styled.div` z-index: 10; - width: ${ props => props.width }; + width: ${p => p.width}; ${media.mobile` width: calc(100% - 2rem); `} .modal-enter { - animation: ${transitions.slideDown} .5s ease-in-out; + animation: ${p => p.transitionEnter}; animation-fill-mode: forwards; } .modal-leave { - animation: ${transitions.slideUp} .5s ease-in-out; + animation: ${p => p.transitionLeave}; animation-fill-mode: forwards; } `; Wrapper.propTypes = { - width: PropTypes.string + width: PropTypes.string, + transitionEnter: PropTypes.string, + transitionLeave: PropTypes.string }; class Modal extends Component { static propTypes = { visible: PropTypes.bool, onHide: PropTypes.func, - width: PropTypes.string + width: PropTypes.string, + transitionEnter: PropTypes.string, + transitionLeave: PropTypes.string } static defaultProps = { - width: '400px' + width: '400px', + transitionEnter: `${transitions.stretchOut} .3s ease-in`, + transitionLeave: `${transitions.shrinkIn} .3s ease-in` } handleClickOutside = (e) => { const { visible, onHide } = this.props; - if(!visible) return null; + if (!visible) return null; onHide(); } @@ -72,10 +78,19 @@ class Modal extends Component { render() { - const {visible, children, width} = this.props; + const { + visible, + children, + width, + transitionEnter, + transitionLeave + } = this.props; return ( - + p.size}; + height: ${p => p.size}; + display: flex; + align-items: center; + justify-content: center; + + border-radius: calc(${p => p.size} * 0.5 ); + font-size: calc(${p => p.size} * 0.75); + + background: ${p => p.background}; + color: ${p => p.color}; +`; + +Wrapper.propTypes = { + size: PropTypes.string, + background: PropTypes.string, + color: PropTypes.string +}; + +const StyledIcon = ({ children, size, background, color }) => ( + + {children} + +) + +StyledIcon.propTypes = { + size: PropTypes.string, + background: PropTypes.string, + color: PropTypes.string +}; + +StyledIcon.defaultProps = { + size: '4rem', + background: '#000', + color: 'white' +}; + +export default StyledIcon; \ No newline at end of file diff --git a/webui/src/components/Shared/ThumbnailIcon.js b/webui/src/components/Shared/ThumbnailIcon.js deleted file mode 100644 index df6888ae2..000000000 --- a/webui/src/components/Shared/ThumbnailIcon.js +++ /dev/null @@ -1,42 +0,0 @@ -import PropTypes from 'prop-types'; - -import styled from 'styled-components'; -import Person from 'react-icons/lib/md/person'; -import oc from 'open-color'; - -const Wrapper = styled.div` - width: ${props => props.size}; - height: ${props => props.size}; - display: flex; - align-items: center; - justify-content: center; - - border-radius: calc(${props => props.size} * 0.5 ); - font-size: calc(${props => props.size} * 0.75); - - background: ${props => props.color}; - color: white; -`; - -Wrapper.propTypes = { - size: PropTypes.string, - color: PropTypes.string -}; - -const Thumbnail = ({size, color}) => ( - - - -) - -Thumbnail.propTypes = { - size: PropTypes.string, - color: PropTypes.string -}; - -Thumbnail.defaultProps = { - size: '4rem', - color: '#000' -}; - -export default Thumbnail; \ No newline at end of file diff --git a/webui/src/components/index.js b/webui/src/components/index.js index 411340b84..cddf740bc 100644 --- a/webui/src/components/index.js +++ b/webui/src/components/index.js @@ -5,7 +5,7 @@ import Login from './Base/Login'; import Logout from './Base/Logout'; import Modal from './Shared/Modal'; -import ThumbnailIcon from './Shared/ThumbnailIcon'; +import StyledIcon from './Shared/StyledIcon'; import Dimmed from './Shared/Dimmed'; import Spinner from './Shared/Spinner'; import FloatingButton from './Shared/FloatingButton'; @@ -23,7 +23,7 @@ export { Logout, Modal, - ThumbnailIcon, + StyledIcon, Dimmed, Spinner, FloatingButton,