scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add dismissable email confirmation banner

Browse source
This commit is contained in:
Ray Schamp 2015-10-22 17:19:31 -04:00
parent af415e1bf3
commit 429aa03507
3 changed files with 127 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/banner/banner.jsx Normal file
View file

@ -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 (
<div className={'banner ' + this.props.className}>
<div className="inner">
{this.props.children}
{this.props.onRequestDismiss ? [
<a className="close" key="close" href="#" onClick={this.props.onRequestDismiss}>x</a>
] : []}
</div>
</div>
);
}
});
module.exports = Banner;

40
src/components/banner/banner.scss Normal file
View file

@ -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;
}
}

110
src/views/splash/splash.jsx
View file

@ -7,6 +7,7 @@ var Session = require('../../mixins/session.jsx');
var Activity = require('../../components/activity/activity.jsx'); var Activity = require('../../components/activity/activity.jsx');
var AdminPanel = require('../../components/adminpanel/adminpanel.jsx'); var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
var Banner = require('../../components/banner/banner.jsx');
var Box = require('../../components/box/box.jsx'); var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx'); var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx'); var Carousel = require('../../components/carousel/carousel.jsx');
@ -235,58 +236,71 @@ var Splash = injectIntl(React.createClass({
}, },
render: function () { render: function () {
var featured = this.renderHomepageRows(); 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 ( return (
<div className="inner"> <div className="splash">
{this.state.session.user ? [ {showEmailConfirmation ? [
<div key="header" className="splash-header"> <Banner key="confirmedEmail"
{this.state.session.flags.show_welcome ? [ className="warning"
<Welcome key="welcome" onDismiss={this.handleDismiss.bind(this, 'welcome')}/> onRequestDismiss={this.handleDismiss.bind(this, 'confirmed_email')}>
] : [ <a href="#" onClick={this.showConfirmEmailPopup}>Confirm your email</a> to enable sharing.{' '}
<Activity key="activity" items={this.state.activity} /> <a href="/info/faq/#accounts">Having trouble?</a>
]} </Banner>
<News items={this.state.news} /> ] : []}
</div> <div key="inner" className="inner">
] : [ {this.state.session.user ? [
<Intro projectCount={this.state.projectCount} key="intro"/> <div key="header" className="splash-header">
]} {this.state.session.flags.show_welcome ? [
<Welcome key="welcome" onDismiss={this.handleDismiss.bind(this, 'welcome')}/>
] : [
<Activity key="activity" items={this.state.activity} />
]}
<News items={this.state.news} />
</div>
] : [
<Intro projectCount={this.state.projectCount} key="intro"/>
]}
{featured} {featured}
<AdminPanel> <AdminPanel>
<dt>Tools</dt> <dt>Tools</dt>
<dd> <dd>
<ul> <ul>
<li> <li>
<a href="/scratch_admin/tickets">Ticket Queue</a> <a href="/scratch_admin/tickets">Ticket Queue</a>
</li> </li>
<li> <li>
<a href="/scratch_admin/ip-search/">IP Search</a> <a href="/scratch_admin/ip-search/">IP Search</a>
</li> </li>
<li> <li>
<a href="/scratch_admin/email-search/">Email Search</a> <a href="/scratch_admin/email-search/">Email Search</a>
</li> </li>
</ul> </ul>
</dd> </dd>
<dt>Homepage Cache</dt> <dt>Homepage Cache</dt>
<dd> <dd>
<ul className="cache-list"> <ul className="cache-list">
<li> <li>
<form <form
id="homepage-refresh-form" id="homepage-refresh-form"
method="post" method="post"
action="/scratch_admin/homepage/clear-cache/"> action="/scratch_admin/homepage/clear-cache/">
<div className="button-row"> <div className="button-row">
<span>Refresh row data:</span> <span>Refresh row data:</span>
<Button type="submit"> <Button type="submit">
<span>Refresh</span> <span>Refresh</span>
</Button> </Button>
</div> </div>
</form> </form>
</li> </li>
</ul> </ul>
</dd> </dd>
</AdminPanel> </AdminPanel>
</div>
</div> </div>
); );
} }