From ffe3a7bfa74819bbb721832cab22c6f87b57e9d2 Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Tue, 6 Oct 2015 12:21:24 +0700 Subject: [PATCH] using SaSS --- components/dialog/index.jsx | 25 ++++++---- components/dialog/style.scss | 95 ++++++++++++++++++++++++++++++++++++ components/dialog/style.styl | 52 -------------------- spec/components/dialog.jsx | 11 ++++- 4 files changed, 119 insertions(+), 64 deletions(-) create mode 100644 components/dialog/style.scss delete mode 100644 components/dialog/style.styl diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx index c31329a0..6bcdc0ba 100644 --- a/components/dialog/index.jsx +++ b/components/dialog/index.jsx @@ -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 ( -
-
- { this.props.title ?

{this.props.title}

: null } - { this.props.children } +
+
+
+ { this.props.title ?
{this.props.title}
: null } +
+ { this.props.children } +
{ this.props.actions.length > 0 ? : null }
diff --git a/components/dialog/style.scss b/components/dialog/style.scss new file mode 100644 index 00000000..ee3bd380 --- /dev/null +++ b/components/dialog/style.scss @@ -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; +} diff --git a/components/dialog/style.styl b/components/dialog/style.styl deleted file mode 100644 index eb26141c..00000000 --- a/components/dialog/style.styl +++ /dev/null @@ -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 diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx index 6fd3f6d3..5de46d58 100644 --- a/spec/components/dialog.jsx +++ b/spec/components/dialog.jsx @@ -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({

Dialog

lorem ipsum...