forked from acouzens/open5gs
Modal and StyledIcon in Shared UI Module
This commit is contained in:
parent
4dd26437af
commit
75a390d9ce
|
@ -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 }) => (
|
|||
</Title>
|
||||
<Thumbnail onClick={onLogoutRequest}>
|
||||
<Tooltip bottom content='Logout' width="60px">
|
||||
<ThumbnailIcon size="2rem" color={oc['pink'][4]} />
|
||||
<StyledIcon size="2rem" background={oc['pink'][4]}>
|
||||
<PersonIcon/>
|
||||
</StyledIcon>
|
||||
</Tooltip>
|
||||
</Thumbnail>
|
||||
</Wrapper>
|
||||
|
|
|
@ -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} />
|
||||
<Thumbnail>
|
||||
<ThumbnailIcon size='8rem' color={oc['blue'][6]} />
|
||||
<StyledIcon size='8rem' background={oc['blue'][6]}>
|
||||
<PersonIcon/>
|
||||
</StyledIcon>
|
||||
</Thumbnail>
|
||||
<Form>
|
||||
<InputWrapper>
|
||||
|
|
|
@ -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 (
|
||||
<Modal visible={visible} onHide={onHide} width="300px">
|
||||
<Modal
|
||||
visible={visible}
|
||||
onHide={onHide}
|
||||
width="300px"
|
||||
transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
|
||||
transitionLeave={`${transitions.slideUp} .5s ease-in-out`}>
|
||||
<TitleWrapper>
|
||||
Logout
|
||||
</TitleWrapper>
|
||||
|
|
|
@ -14,36 +14,42 @@ 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) => {
|
||||
|
@ -72,10 +78,19 @@ class Modal extends Component {
|
|||
|
||||
render() {
|
||||
|
||||
const {visible, children, width} = this.props;
|
||||
const {
|
||||
visible,
|
||||
children,
|
||||
width,
|
||||
transitionEnter,
|
||||
transitionLeave
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Wrapper width={width}>
|
||||
<Wrapper
|
||||
width={width}
|
||||
transitionEnter={transitionEnter}
|
||||
transitionLeave={transitionLeave}>
|
||||
<CSSTransitionGroup
|
||||
transitionName="modal"
|
||||
transitionEnterTimeout={500}
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import oc from 'open-color';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: ${p => 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 }) => (
|
||||
<Wrapper size={size} background={background} color={color}>
|
||||
{children}
|
||||
</Wrapper>
|
||||
)
|
||||
|
||||
StyledIcon.propTypes = {
|
||||
size: PropTypes.string,
|
||||
background: PropTypes.string,
|
||||
color: PropTypes.string
|
||||
};
|
||||
|
||||
StyledIcon.defaultProps = {
|
||||
size: '4rem',
|
||||
background: '#000',
|
||||
color: 'white'
|
||||
};
|
||||
|
||||
export default StyledIcon;
|
|
@ -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}) => (
|
||||
<Wrapper size={size} color={color}>
|
||||
<Person />
|
||||
</Wrapper>
|
||||
)
|
||||
|
||||
Thumbnail.propTypes = {
|
||||
size: PropTypes.string,
|
||||
color: PropTypes.string
|
||||
};
|
||||
|
||||
Thumbnail.defaultProps = {
|
||||
size: '4rem',
|
||||
color: '#000'
|
||||
};
|
||||
|
||||
export default Thumbnail;
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue