From 429aa03507acd57ab378c8d2d656030b19c5618d Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Thu, 22 Oct 2015 17:19:31 -0400 Subject: [PATCH 1/7] Add dismissable email confirmation banner --- src/components/banner/banner.jsx | 24 +++++++ src/components/banner/banner.scss | 40 +++++++++++ src/views/splash/splash.jsx | 112 +++++++++++++++++------------- 3 files changed, 127 insertions(+), 49 deletions(-) create mode 100644 src/components/banner/banner.jsx create mode 100644 src/components/banner/banner.scss diff --git a/src/components/banner/banner.jsx b/src/components/banner/banner.jsx new file mode 100644 index 000000000..be5f74361 --- /dev/null +++ b/src/components/banner/banner.jsx @@ -0,0 +1,24 @@ +var React = require('react'); + +require('./banner.scss'); + +var Banner = React.createClass({ + type: 'Banner', + propTypes: { + onRequestDismiss: React.PropTypes.func + }, + render: function () { + return ( +
+
+ {this.props.children} + {this.props.onRequestDismiss ? [ + x + ] : []} +
+
+ ); + } +}); + +module.exports = Banner; diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss new file mode 100644 index 000000000..1ca057263 --- /dev/null +++ b/src/components/banner/banner.scss @@ -0,0 +1,40 @@ +@import "../../colors"; + +$navigation-height: 50px; + +.banner { + position: fixed; + top: $navigation-height; + box-shadow: 0 1px 1px $ui-dark-gray; + background-color: $ui-orange; + width: 100%; + overflow: hidden; + text-align: center; + line-height: $navigation-height; + + &, a { + color: $ui-white; + } + + a { + text-decoration: underline; + } + + .close { + float: right; + margin-top: $navigation-height/4; + border-radius: $navigation-height/4; + background-color: $box-shadow-gray; + width: $navigation-height/2; + height: $navigation-height/2; + text-decoration: none; + text-shadow: none; + line-height: $navigation-height/2; + color: $ui-white; + font-weight: normal; + } + + &.warning { + background-color: $ui-orange; + } +} diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index f87ddeb97..f2be323b1 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -7,6 +7,7 @@ var Session = require('../../mixins/session.jsx'); var Activity = require('../../components/activity/activity.jsx'); var AdminPanel = require('../../components/adminpanel/adminpanel.jsx'); +var Banner = require('../../components/banner/banner.jsx'); var Box = require('../../components/box/box.jsx'); var Button = require('../../components/forms/button.jsx'); var Carousel = require('../../components/carousel/carousel.jsx'); @@ -235,58 +236,71 @@ var Splash = injectIntl(React.createClass({ }, render: function () { var featured = this.renderHomepageRows(); + var showEmailConfirmation = true;( + this.state.session.user && this.state.session.flags.has_outstanding_email_confirmation && + this.state.session.flags.confirm_email_banner); return ( -
- {this.state.session.user ? [ -
- {this.state.session.flags.show_welcome ? [ - - ] : [ - - ]} - -
- ] : [ - - ]} +
+ {showEmailConfirmation ? [ + + Confirm your email to enable sharing.{' '} + Having trouble? + + ] : []} +
+ {this.state.session.user ? [ +
+ {this.state.session.flags.show_welcome ? [ + + ] : [ + + ]} + +
+ ] : [ + + ]} - {featured} + {featured} - -
Tools
-
- -
-
Homepage Cache
-
-
    -
  • -
    - -
    - Refresh row data: - -
    -
    -
    • -
-
- + +
Tools
+
+ +
+
Homepage Cache
+
+
    +
  • +
    + +
    + Refresh row data: + +
    +
    +
    • +
+
+ +
); } From b6a6b7faadd6e3baffd2324e426631fa047378de Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Thu, 22 Oct 2015 18:40:04 -0400 Subject: [PATCH 2/7] WIP --- src/components/modal/modal.jsx | 13 +++++++------ src/views/splash/splash.jsx | 24 +++++++++++++++++++++--- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx index 819f55a6f..fd3dd83af 100644 --- a/src/components/modal/modal.jsx +++ b/src/components/modal/modal.jsx @@ -8,7 +8,12 @@ require('./modal.scss'); var Modal = React.createClass({ type: 'Modal', statics: { - setAppElement: ReactModal.setAppElement + setAppElement: ReactModal.setAppElement, + defaultFrameSettings: { + width: 500, + height: 250, + padding: 0 + } }, getDefaultProps: function () { return { @@ -33,11 +38,7 @@ var Modal = React.createClass({ var style = this.props.style; var modalProps = omit(this.props, ['frameSettings', 'style']); if (frameSettings) { - defaults(frameSettings, { - width: 500, - height: 250, - padding: 0 - }); + defaults(frameSettings, Modal.defaultFrameSettings); defaults(style.content, { top: '50%', right: 'auto', diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index f2be323b1..ea400dea8 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -1,4 +1,5 @@ var injectIntl = require('react-intl').injectIntl; +var omit = require('lodash.omit'); var React = require('react'); var render = require('../../lib/render.jsx'); @@ -12,6 +13,7 @@ var Box = require('../../components/box/box.jsx'); var Button = require('../../components/forms/button.jsx'); var Carousel = require('../../components/carousel/carousel.jsx'); var Intro = require('../../components/intro/intro.jsx'); +var Modal = require('../../components/modal/modal.jsx'); var News = require('../../components/news/news.jsx'); var Welcome = require('../../components/welcome/welcome.jsx'); @@ -29,7 +31,8 @@ var Splash = injectIntl(React.createClass({ activity: [], news: [], featuredCustom: {}, - featuredGlobal: {} + featuredGlobal: {}, + showEmailConfirmationModal: false }; }, componentDidUpdate: function (prevProps, prevState) { @@ -89,6 +92,12 @@ var Splash = injectIntl(React.createClass({ if (!err) this.setState({projectCount: body.count}); }.bind(this)); }, + showEmailConfirmationModal: function () { + this.setState({showEmailConfirmationModal: true}); + }, + hideEmailConfirmationModal: function () { + this.setState({showEmailConfirmationModal: false}); + }, handleDismiss: function (cue) { this.api({ host: '', @@ -245,9 +254,18 @@ var Splash = injectIntl(React.createClass({ - Confirm your email to enable sharing.{' '} + Confirm your email + to enable sharing.{' '} Having trouble? - + , + +