<Dialog> using SaSS
@soyjavi
parent
84b15e104c
commit
ffe3a7bfa7
|
|
@ -1,9 +1,12 @@
|
|||
/* global React */
|
||||
|
||||
import style from './style';
|
||||
import { addons } from 'react/addons';
|
||||
import Navigation from '../navigation';
|
||||
import style from './style.scss';
|
||||
|
||||
export default React.createClass({
|
||||
mixins: [addons.PureRenderMixin],
|
||||
|
||||
displayName: 'Dialog',
|
||||
|
||||
propTypes: {
|
||||
|
|
@ -17,7 +20,7 @@ export default React.createClass({
|
|||
getDefaultProps () {
|
||||
return {
|
||||
actions: [],
|
||||
className: 'normal'
|
||||
type: 'normal'
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -26,16 +29,18 @@ export default React.createClass({
|
|||
},
|
||||
|
||||
render () {
|
||||
let rootClass = style.root;
|
||||
let containerClass = `${style.container} ${this.props.className}`;
|
||||
if (this.state.active) rootClass += ' active';
|
||||
if (this.props.type) containerClass += ` ${this.props.type}`;
|
||||
let className = `${style.root} ${style[this.props.type]}`;
|
||||
if (this.state.active) className += ` ${style.active}`;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='dialog' data-flex='vertical center' className={rootClass}>
|
||||
<div className={containerClass}>
|
||||
{ this.props.title ? <h1>{this.props.title}</h1> : null }
|
||||
{ this.props.children }
|
||||
<div data-react-toolbox='dialog' className={className}>
|
||||
<div className={style.overlay} />
|
||||
<div className={style.content}>
|
||||
{ this.props.title ? <h6>{this.props.title}</h6> : null }
|
||||
<section>
|
||||
{ this.props.children }
|
||||
</section>
|
||||
{ this.props.actions.length > 0 ? <Navigation actions={this.props.actions}/> : null }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
$dialog-color-white: unquote("rgb(#{$color-white})") !default;
|
||||
$dialog-translateY: 4 * $unit;
|
||||
|
||||
.root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
> .content {
|
||||
opacity: 0;
|
||||
transform: translateY(-$dialog-translateY);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
pointer-events: all;
|
||||
.overlay {
|
||||
opacity: $color-overlay-opacity;
|
||||
}
|
||||
.content {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $color-overlay;
|
||||
opacity: 0;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
max-width: 96vw;
|
||||
max-height: 96vh;
|
||||
flex-direction: column;
|
||||
background-color: $dialog-color-white;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $zdepth-shadow-5;
|
||||
transition-delay: $animation-delay;
|
||||
transition-timing-function: $animation-curve-default;
|
||||
transition-duration: $animation-duration;
|
||||
transition-property: opacity, transform;
|
||||
> h6 {
|
||||
margin: $offset;
|
||||
}
|
||||
> *:not(section) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
> section {
|
||||
margin: 0 $offset;
|
||||
overflow-y: scroll;
|
||||
color: $color-text-secondary;
|
||||
|
||||
flex-grow: 2;
|
||||
}
|
||||
> nav {
|
||||
$offset: ($offset / 2);
|
||||
margin: $offset;
|
||||
text-align: right;
|
||||
> * {
|
||||
min-width: 0;
|
||||
padding-right: $offset;
|
||||
padding-left: $offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small > .content {
|
||||
width: 30vw;
|
||||
}
|
||||
.normal > .content {
|
||||
width: 50vw;
|
||||
}
|
||||
.large > .content {
|
||||
width: 96vw;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@import '../constants'
|
||||
|
||||
:local(.container)
|
||||
margin : SPACE
|
||||
padding : SPACE (SPACE * 1.5)
|
||||
background-color : WHITE
|
||||
border-radius : (SPACE / 5)
|
||||
box-shadow : ZDEPTH_SHADOW_5
|
||||
transition-property : opacity, transform
|
||||
transition-duration : ANIMATION_DURATION
|
||||
transition-timing-function : ANIMATION_EASE
|
||||
transition-delay : ANIMATION_DELAY
|
||||
> h1
|
||||
margin-bottom : SPACE
|
||||
> nav
|
||||
margin-top : SPACE
|
||||
text-align : right
|
||||
> .raised
|
||||
margin-left : SPACE
|
||||
|
||||
:local(.root)
|
||||
z-index : 3
|
||||
position : fixed
|
||||
left : 0
|
||||
top : 0
|
||||
width : 100vw
|
||||
height : 100vh
|
||||
background-color : rgba(0,0,0,0.5)
|
||||
transition-property : opacity
|
||||
transition-duration : (ANIMATION_DURATION / 2)
|
||||
transition-timing-function : ANIMATION_EASE
|
||||
|
||||
&:not(.active)
|
||||
pointer-events : none
|
||||
opacity : 0
|
||||
transition-delay : (ANIMATION_DELAY * 2)
|
||||
> :local(.container)
|
||||
opacity : 0
|
||||
transform : translateY(-(UNIT))
|
||||
&.active
|
||||
opacity : 1
|
||||
> :local(.container)
|
||||
opacity : 1
|
||||
transform : translateY(0%)
|
||||
|
||||
// -- Overrides
|
||||
:local(.container).small
|
||||
width : 33vw
|
||||
:local(.container).normal
|
||||
width : 50vw
|
||||
:local(.container).large
|
||||
width : 96vw
|
||||
|
|
@ -9,12 +9,13 @@ export default React.createClass({
|
|||
getInitialState () {
|
||||
return {
|
||||
actions: [{
|
||||
label: 'Cancel', style: 'transparent', onClick: this.onClose
|
||||
label: 'Close', type: 'flat', className:'primary', onClick: this.onClose
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
onClose () {
|
||||
console.log('a');
|
||||
this.refs.dialog.hide();
|
||||
},
|
||||
|
||||
|
|
@ -28,7 +29,13 @@ export default React.createClass({
|
|||
<h2>Dialog</h2>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button type='raised' label='Show Dialog' onClick={this.onShow} />
|
||||
<Dialog ref='dialog' type='profile' title='Your profile' className='small' actions={this.state.actions}>
|
||||
|
||||
<Dialog
|
||||
ref='dialog'
|
||||
type='small'
|
||||
title='Your profile'
|
||||
actions={this.state.actions}
|
||||
>
|
||||
<p>Welcome to your first Dialog</p>
|
||||
</Dialog>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue