Merge pull request #138 from rschamp/feature/welcome-panel

Add welcome panel component to homepage

en.json

@@ -61,5 +61,9 @@
     "splash.projectsLovedByScratchersFollowing": "Projects Loved by Scratchers I'm Following",
     "splash.projectsInStudiosFollowing": "Projects in Studios I'm Following",
     "splash.communityRemixing": "What the Community is Remixing",
-    "splash.communityLoving": "What the Community is Loving"
+    "splash.communityLoving": "What the Community is Loving",
+    "welcome.welcomeToScratch": "Welcome to Scratch!",
+    "welcome.learn": "Learn how to make a project in Scratch",
+    "welcome.tryOut": "Try out starter projects",
+    "welcome.connect": "Connect with other Scratchers"
 }

server/proxies.json

@@ -7,5 +7,6 @@
     "/login_retry/",
     "/media/",
     "/session/",
+    "/site-api",
     "/static/"
 ]

src/_colors.scss

@@ -26,3 +26,8 @@ $type-gray: hsla(0, 0, 42, 1); //#6B6B6B
 $type-white: #fff;
 
 $link-blue: $ui-blue;
+
+/* Component colors */
+$splash-green: #9c0;
+$splash-pink: #c2479d;
+$splash-blue: #199ed7;

src/components/box/box.jsx

@@ -7,7 +7,8 @@ var Box = React.createClass({
     propTypes: {
         title: React.PropTypes.string.isRequired,
         moreTitle: React.PropTypes.string,
-        moreHref: React.PropTypes.string
+        moreHref: React.PropTypes.string,
+        moreProps: React.PropTypes.object
     },
     render: function () {
         return (
@@ -15,7 +16,7 @@ var Box = React.createClass({
                 <div className="box-header">
                     <h4>{this.props.title}</h4>
                     <p>
-                        <a href={this.props.moreHref}>
+                        <a href={this.props.moreHref} {...this.props.moreProps}>
                             {this.props.moreTitle}
                         </a>
                     </p>

src/components/intro/intro.scss

@@ -95,50 +95,47 @@
             font-weight: 400;
         }
 
-        $sprite-1-bgcolor: #9c0;
-        $sprite-2-bgcolor: #c2479d;
-        $sprite-3-bgcolor: #199ed7;
 
         &.sprite-1 .circle {
-            background-color: $sprite-1-bgcolor;
+            background-color: $splash-green;
         }
 
         &.sprite-2 .circle {
-            background-color: $sprite-2-bgcolor;
+            background-color: $splash-pink;
         }
 
         &.sprite-3 .circle {
-            background-color: $sprite-3-bgcolor;
+            background-color: $splash-blue;
         }
 
         &:hover.sprite-1 .circle {
-            box-shadow: 0 0 10px 2px $sprite-1-bgcolor;
+            box-shadow: 0 0 10px 2px $splash-green;
         }
 
         &:hover.sprite-2 .circle {
-            box-shadow: 0 0 10px 2px $sprite-2-bgcolor;
+            box-shadow: 0 0 10px 2px $splash-pink;
         }
 
         &:hover.sprite-3 .circle {
-            box-shadow: 0 0 10px 2px $sprite-3-bgcolor;
+            box-shadow: 0 0 10px 2px $splash-blue;
         }
 
         &.sprite-1 .text {
             top: 60px;
             left: 50px;
-            color: $sprite-1-bgcolor;
+            color: $splash-green;
         }
 
         &.sprite-2 .text {
             top: 77px;
             left: 50px;
-            color: $sprite-2-bgcolor;
+            color: $splash-pink;
         }
 
         &.sprite-3 .text {
             top: 37px;
             left: 45px;
-            color: $sprite-3-bgcolor;
+            color: $splash-blue;
         }
 
         &.sprite-3 .subtext {

src/components/welcome/welcome.jsx

@@ -0,0 +1,70 @@
+var React = require('react');
+var ReactIntl = require('react-intl');
+
+var injectIntl = ReactIntl.injectIntl;
+var FormattedMessage = ReactIntl.FormattedMessage;
+
+var Box = require('../box/box.jsx');
+
+require('./welcome.scss');
+
+var Welcome = React.createClass({
+    type: 'Welcome',
+    propTypes: {
+        onDismiss: React.PropTypes.func
+    },
+    render: function () {
+        var formatMessage = this.props.intl.formatMessage;
+        return (
+            <Box title={formatMessage({id: 'welcome.welcomeToScratch', defaultMessage: 'Welcome to Scratch!'})}
+                 className="welcome"
+                 moreTitle="x"
+                 moreHref="#"
+                 moreProps={{
+                     className: 'close',
+                     title: 'Dismiss',
+                     onClick: this.props.onDismiss
+                 }}>
+
+                <div className="welcome-col blue">
+                    <h4>
+                        <a href="/projects/editor/?tip_bar=getStarted">
+                            <FormattedMessage
+                                id="welcome.learn"
+                                defaultMessage="Learn how to make a project in Scratch" />
+                        </a>
+                    </h4>
+                    <a href="/projects/editor/?tip_bar=getStarted">
+                        <img src="/images/welcome-learn.png" />
+                    </a>
+                </div>
+                <div className="welcome-col green">
+                    <h4>
+                        <a href="/starter_projects/">
+                            <FormattedMessage
+                                id="welcome.tryOut"
+                                defaultMessage="Try out starter projects" />
+                        </a>
+                    </h4>
+                    <a href="/starter_projects/">
+                        <img src="/images/welcome-try.png" />
+                    </a>
+                </div>
+                <div className="welcome-col pink">
+                    <h4>
+                        <a href="/studios/146521/">
+                            <FormattedMessage
+                                id="welcome.connect"
+                                defaultMessage="Connect with other Scratchers" />
+                        </a>
+                    </h4>
+                    <a href="/studios/146521/">
+                        <img src="/images/welcome-connect.png" />
+                    </a>
+                </div>
+            </Box>
+        );
+    }
+});
+
+module.exports = injectIntl(Welcome);

src/components/welcome/welcome.scss

@@ -0,0 +1,61 @@
+@import "../../colors";
+
+.welcome {
+    .box-content {
+        padding: 0;
+    }
+    .welcome-col {
+        display: inline-block;
+        margin: 10px 15px;
+        width: 150px;
+        height: 253px;
+
+        h4 {
+            margin-top: 12px;
+            padding: 0;
+            font-weight: 200;
+        }
+
+        > a {
+            display: block;
+            margin-top: 20px;
+            margin-bottom: 35px;
+            height: 100px;
+        }
+
+        $color-bars: "h4:before, > a:after";
+
+        #{$color-bars} {
+            display: block;
+            margin: 10px 0;
+            border-radius: 5px;
+            width: 100%;
+            height: 10px;
+            content: "";
+        }
+        &.blue {
+            #{$color-bars} {
+                background-color: $splash-blue;
+            }
+            a {
+                color: $splash-blue;
+            }
+        }
+        &.green {
+            #{$color-bars} {
+                background-color: $splash-green;
+            }
+            a {
+                color: $splash-green;
+            }
+        }
+        &.pink {
+            #{$color-bars} {
+                background-color: $splash-pink;
+            }
+            a {
+                color: $splash-pink;
+            }
+        }
+    }
+}

src/views/splash/splash.jsx

@@ -12,6 +12,7 @@ var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var Intro = require('../../components/intro/intro.jsx');
 var News = require('../../components/news/news.jsx');
+var Welcome = require('../../components/welcome/welcome.jsx');
 
 require('./splash.scss');
 
@@ -92,6 +93,17 @@ var Splash = injectIntl(React.createClass({
             if (!err) this.setState({projectCount: body.count});
         }.bind(this));
     },
+    handleDismiss: function (cue) {
+        this.api({
+            host: '',
+            uri: '/site-api/users/set-template-cue/',
+            method: 'post',
+            useCsrf: true,
+            json: {cue: cue, value: false}
+        }, function (err) {
+            if (!err) window.refreshSession();
+        });
+    },
     renderHomepageRows: function () {
         var formatMessage = this.props.intl.formatMessage;
         var showArrows = true;
@@ -249,7 +261,11 @@ var Splash = injectIntl(React.createClass({
             <div className="inner">
                 {this.state.session.user ? [
                     <div key="header" className="splash-header">
-                        <Activity items={this.state.activity} />
+                        {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>
                 ] : [

src/views/splash/splash.scss

@@ -5,7 +5,7 @@
         flex-wrap: nowrap;
         justify-content: space-between;
 
-        .activity {
+        .box {
             display: inline-block;
             width: calc(60% - 20px);
         }