scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

112
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 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 (
<div className="inner">
{this.state.session.user ? [
<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"/>
]}
<div className="splash">
{showEmailConfirmation ? [
<Banner key="confirmedEmail"
className="warning"
onRequestDismiss={this.handleDismiss.bind(this, 'confirmed_email')}>
<a href="#" onClick={this.showConfirmEmailPopup}>Confirm your email</a> to enable sharing.{' '}
<a href="/info/faq/#accounts">Having trouble?</a>
</Banner>
] : []}
<div key="inner" className="inner">
{this.state.session.user ? [
<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>
<dt>Tools</dt>
<dd>
<ul>
<li>
<a href="/scratch_admin/tickets">Ticket Queue</a>
</li>
<li>
<a href="/scratch_admin/ip-search/">IP Search</a>
</li>
<li>
<a href="/scratch_admin/email-search/">Email Search</a>
</li>
</ul>
</dd>
<dt>Homepage Cache</dt>
<dd>
<ul className="cache-list">
<li>
<form
id="homepage-refresh-form"
method="post"
action="/scratch_admin/homepage/clear-cache/">
<div className="button-row">
<span>Refresh row data:</span>
<Button type="submit">
<span>Refresh</span>
</Button>
</div>
</form>
</li>
</ul>
</dd>
</AdminPanel>
<AdminPanel>
<dt>Tools</dt>
<dd>
<ul>
<li>
<a href="/scratch_admin/tickets">Ticket Queue</a>
</li>
<li>
<a href="/scratch_admin/ip-search/">IP Search</a>
</li>
<li>
<a href="/scratch_admin/email-search/">Email Search</a>
</li>
</ul>
</dd>
<dt>Homepage Cache</dt>
<dd>
<ul className="cache-list">
<li>
<form
id="homepage-refresh-form"
method="post"
action="/scratch_admin/homepage/clear-cache/">
<div className="button-row">
<span>Refresh row data:</span>
<Button type="submit">
<span>Refresh</span>
</Button>
</div>
</form>
</li>
</ul>
</dd>
</AdminPanel>
</div>
</div>
);
}