From 3034abc2b4751b4bd408fec20164b9ffd40cd8fc Mon Sep 17 00:00:00 2001 From: carljbowman Date: Fri, 23 Oct 2015 13:05:48 -0400 Subject: [PATCH 01/12] Update arrow icons on Carousels Had to overwrite slick-slider's iconfont with background image for a quick fix. --- src/components/carousel/carousel.scss | 27 +++++++++++++++++++++- static/svgs/carousel/next_ui-blue.svg | 19 +++++++++++++++ static/svgs/carousel/next_ui-dark-gray.svg | 19 +++++++++++++++ static/svgs/carousel/prev_ui-blue.svg | 19 +++++++++++++++ static/svgs/carousel/prev_ui-dark-gray.svg | 19 +++++++++++++++ static/svgs/love/love_type-gray.svg | 11 +++++++++ static/svgs/remix/remix_type-gray.svg | 18 +++++++++++++++ 7 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 static/svgs/carousel/next_ui-blue.svg create mode 100644 static/svgs/carousel/next_ui-dark-gray.svg create mode 100644 static/svgs/carousel/prev_ui-blue.svg create mode 100644 static/svgs/carousel/prev_ui-dark-gray.svg create mode 100644 static/svgs/love/love_type-gray.svg create mode 100644 static/svgs/remix/remix_type-gray.svg diff --git a/src/components/carousel/carousel.scss b/src/components/carousel/carousel.scss index a828d612e..2ab231916 100644 --- a/src/components/carousel/carousel.scss +++ b/src/components/carousel/carousel.scss @@ -18,8 +18,14 @@ height: $icon-size; &:before { - color: $ui-dark-gray; + display: block; + background-repeat: no-repeat; + background-position: center center; + background-size: 70%; + width: $icon-size; + height: $icon-size; font-size: $icon-size; + content: ""; } &.slick-disabled:before { @@ -30,6 +36,16 @@ .slick-prev { left: 0; + &:before { + background-image: url("/svgs/carousel/prev_ui-dark-gray.svg"); + } + + &:hover:before { + background-image: url("/svgs/carousel/prev_ui-blue.svg"); + background-size: 90%; + } + + .box-content & { left: -$box-content-offset; } @@ -38,6 +54,15 @@ .slick-next { right: 0; + &:before { + background-image: url("/svgs/carousel/next_ui-dark-gray.svg"); + } + + &:hover:before { + background-image: url("/svgs/carousel/next_ui-blue.svg"); + background-size: 90%; + } + .box-content & { right: -$box-content-offset; } diff --git a/static/svgs/carousel/next_ui-blue.svg b/static/svgs/carousel/next_ui-blue.svg new file mode 100644 index 000000000..96b44c27b --- /dev/null +++ b/static/svgs/carousel/next_ui-blue.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/static/svgs/carousel/next_ui-dark-gray.svg b/static/svgs/carousel/next_ui-dark-gray.svg new file mode 100644 index 000000000..3853fe8f9 --- /dev/null +++ b/static/svgs/carousel/next_ui-dark-gray.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/static/svgs/carousel/prev_ui-blue.svg b/static/svgs/carousel/prev_ui-blue.svg new file mode 100644 index 000000000..62fe47270 --- /dev/null +++ b/static/svgs/carousel/prev_ui-blue.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/static/svgs/carousel/prev_ui-dark-gray.svg b/static/svgs/carousel/prev_ui-dark-gray.svg new file mode 100644 index 000000000..ad8ed4e1b --- /dev/null +++ b/static/svgs/carousel/prev_ui-dark-gray.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + diff --git a/static/svgs/love/love_type-gray.svg b/static/svgs/love/love_type-gray.svg new file mode 100644 index 000000000..f1ad8f3ff --- /dev/null +++ b/static/svgs/love/love_type-gray.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/static/svgs/remix/remix_type-gray.svg b/static/svgs/remix/remix_type-gray.svg new file mode 100644 index 000000000..8dbcff058 --- /dev/null +++ b/static/svgs/remix/remix_type-gray.svg @@ -0,0 +1,18 @@ + + + + + + + + + From 717ede8afd24f84e12559d32dd4b99342f1c8849 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Fri, 23 Oct 2015 17:07:40 -0400 Subject: [PATCH 02/12] Fix #102: Add remix and love icons --- src/components/thumbnail/thumbnail.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/thumbnail/thumbnail.scss b/src/components/thumbnail/thumbnail.scss index 3f0f34d96..ffaea2754 100644 --- a/src/components/thumbnail/thumbnail.scss +++ b/src/components/thumbnail/thumbnail.scss @@ -43,6 +43,29 @@ } } + .thumbnail-loves, + .thumbnail-remixes { + &:before { + display: inline-block; + margin-right: .1rem; + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + width: .93rem; + height: .93rem; + vertical-align: text-top; + content: ""; + } + } + + .thumbnail-loves:before { + background-image: url("/svgs/love/love_type-gray.svg"); + } + + .thumbnail-remixes:before { + background-image: url("/svgs/remix/remix_type-gray.svg"); + } + &.project { $project-width: 144px; $project-height: 108px; From 39550d805a30767dac47c3c187d5350f01fc95be Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Fri, 23 Oct 2015 17:41:50 -0400 Subject: [PATCH 03/12] Fix #152: Don't output activity without a message --- src/components/activity/activity.jsx | 29 ++++++++++++++-------------- src/views/components/components.jsx | 3 +++ 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx index d2a2dfb45..452ecfc30 100644 --- a/src/components/activity/activity.jsx +++ b/src/components/activity/activity.jsx @@ -38,20 +38,21 @@ var Activity = React.createClass({ var actionDate = new Date(item.datetime_created + 'Z'); var activityMessageHTML = '' + item.actor.username + '' + item.message; - - return ( -
  • - - -

    -

    - - - -

    -     -
    • - ); + if (item.message.replace(/\s/g, '')) { + return ( +
  • + + +

    +

    + + + +

    +     +
    • + ); + } })} diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index 998905f8d..49c6e908a 100644 --- a/src/views/components/components.jsx +++ b/src/views/components/components.jsx @@ -1,6 +1,7 @@ var React = require('react'); var render = require('../../lib/render.jsx'); +var Activity = require('../../components/activity/activity.jsx'); var Box = require('../../components/box/box.jsx'); var Button = require('../../components/forms/button.jsx'); var Carousel = require('../../components/carousel/carousel.jsx'); @@ -32,6 +33,8 @@ var Components = React.createClass({ title="Carousel component in a box!"> +

    {'What\'s Happening??'}

    + ); } From 616e99c631061d7bb65ad352a60b45723965c031 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Sat, 24 Oct 2015 12:05:18 -0400 Subject: [PATCH 04/12] Only show "Welcome" panel if user is < 2 weeks old Or if they've dismissed it. Fixes GH-153. --- src/views/splash/splash.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 1157e1d4e..1c000f8b3 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -99,6 +99,13 @@ var Splash = injectIntl(React.createClass({ if (!err) window.refreshSession(); }); }, + shouldShowWelcome: function () { + if (!this.state.session.user || !this.state.session.flags.show_welcome) return false; + return ( + new Date(this.state.session.user.dateJoined) > + new Date(new Date - 2*7*24*60*60*1000) // Two weeks ago + ); + }, renderHomepageRows: function () { var formatMessage = this.props.intl.formatMessage; @@ -244,7 +251,7 @@ var Splash = injectIntl(React.createClass({
    {this.state.session.user ? [
    - {this.state.session.flags.show_welcome ? [ + {this.shouldShowWelcome() ? [ ] : [ From 99d7055a484f5878e3a3e9b83e2931665bd7f4ab Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Sat, 24 Oct 2015 12:20:19 -0400 Subject: [PATCH 05/12] Fix GH-124: Fix studio thumbnail URLs --- src/components/carousel/carousel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx index e7dc7c382..1a0bd6711 100644 --- a/src/components/carousel/carousel.jsx +++ b/src/components/carousel/carousel.jsx @@ -38,7 +38,7 @@ var Carousel = React.createClass({ var href = ''; switch (item.type) { case 'gallery': - href = '/studio/' + item.id + '/'; + href = '/studios/' + item.id + '/'; break; case 'project': href = '/projects/' + item.id + '/'; From c8834ed2515f9e51ec7b97b6f12de1e14b551259 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Fri, 23 Oct 2015 00:36:33 -0400 Subject: [PATCH 06/12] Add empty state for What's Happening box --- src/components/activity/activity.jsx | 62 +++++++++++++++++----------- src/components/box/box.scss | 4 ++ src/main.scss | 14 +++++++ 3 files changed, 57 insertions(+), 23 deletions(-) diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx index 452ecfc30..101d34cfd 100644 --- a/src/components/activity/activity.jsx +++ b/src/components/activity/activity.jsx @@ -1,6 +1,7 @@ var React = require('react'); var ReactIntl = require('react-intl'); var defineMessages = ReactIntl.defineMessages; +var FormattedMessage = ReactIntl.FormattedMessage; var FormattedRelative = ReactIntl.FormattedRelative; var injectIntl = ReactIntl.injectIntl; @@ -32,29 +33,44 @@ var Activity = React.createClass({ className="activity" title={formatMessage(defaultMessages.whatsHappening)}> -
      - {this.props.items.map(function (item) { - var actorProfileUrl = '/users/' + item.actor.username + '/'; - var actionDate = new Date(item.datetime_created + 'Z'); - var activityMessageHTML = '' + - item.actor.username + '' + item.message; - if (item.message.replace(/\s/g, '')) { - return ( -
    • - - -

      -

      - - - -

      -       -
      • - ); - } - })} -
    + {this.props.items && this.props.items.length > 0 ? [ +
      + {this.props.items.map(function (item) { + var actorProfileUrl = '/users/' + item.actor.username + '/'; + var actionDate = new Date(item.datetime_created + 'Z'); + var activityMessageHTML = '' + + item.actor.username + '' + item.message; + if (item.message.replace(/\s/g, '')) { + return ( +
    • + + +

      +

      + + + +

      +       +
      • + ); + } + })} +
    + ] : [ +
    +

    + +

    + + + +
    + ]} ); } diff --git a/src/components/box/box.scss b/src/components/box/box.scss index 656b9fe53..99ef06dc0 100644 --- a/src/components/box/box.scss +++ b/src/components/box/box.scss @@ -44,4 +44,8 @@ $base-bg: $ui-white; background-color: $base-bg; padding: 8px 20px; } + + .empty { + margin-top: 20px; + } } diff --git a/src/main.scss b/src/main.scss index d94f141c5..8e0916cb5 100644 --- a/src/main.scss +++ b/src/main.scss @@ -52,6 +52,20 @@ a:hover { width: 942px; } +.empty { + $bg-blue: #d9edf7; + $bg-blue-accent: #bce8f1; + border: 1px solid $bg-blue-accent; + border-radius: 5px; + background-color: $bg-blue; + text-align: center; + line-height: 2rem; + color: $type-gray; + h4 { + color: $type-gray; + } +} + #view { /* NOTE: Margin should match height in navigation.scss */ margin-top: 50px; From 0b26be7036fcde04b314bbb0354c55c83716842c Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Fri, 23 Oct 2015 00:40:46 -0400 Subject: [PATCH 07/12] Make sure boxes aren't transparent --- src/components/box/box.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/box/box.scss b/src/components/box/box.scss index 99ef06dc0..c44d71a37 100644 --- a/src/components/box/box.scss +++ b/src/components/box/box.scss @@ -6,6 +6,7 @@ $base-bg: $ui-white; display: inline-block; border: 1px solid $ui-border; border-radius: 10px 10px 0 0; + background-color: $ui-white; width: 100%; .box-header { From 5865b6d6193963aa7c91653e7f37d3107b613aa4 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Sat, 24 Oct 2015 12:38:23 -0400 Subject: [PATCH 08/12] Add some padding to the empty message --- src/main.scss | 1 + src/views/components/components.jsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/main.scss b/src/main.scss index 8e0916cb5..a7889cd29 100644 --- a/src/main.scss +++ b/src/main.scss @@ -58,6 +58,7 @@ a:hover { border: 1px solid $bg-blue-accent; border-radius: 5px; background-color: $bg-blue; + padding: 10px; text-align: center; line-height: 2rem; color: $type-gray; diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index 49c6e908a..e00415db3 100644 --- a/src/views/components/components.jsx +++ b/src/views/components/components.jsx @@ -35,6 +35,8 @@ var Components = React.createClass({

    {'What\'s Happening??'}

    +

    {'Nothing!!!'}

    +
    ); } From d6de9ffe37bedc82d6a4d1f06c788e25781afa4c Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Sat, 24 Oct 2015 12:44:20 -0400 Subject: [PATCH 09/12] Clean up activity item rendering logic --- src/components/activity/activity.jsx | 40 +++++++++++++++------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx index 101d34cfd..b8d247a2e 100644 --- a/src/components/activity/activity.jsx +++ b/src/components/activity/activity.jsx @@ -36,25 +36,27 @@ var Activity = React.createClass({ {this.props.items && this.props.items.length > 0 ? [
      {this.props.items.map(function (item) { - var actorProfileUrl = '/users/' + item.actor.username + '/'; - var actionDate = new Date(item.datetime_created + 'Z'); - var activityMessageHTML = '' + - item.actor.username + '' + item.message; - if (item.message.replace(/\s/g, '')) { - return ( -
    • - - -

      -

      - - - -

      -       -
      • - ); - } + if (item.message.replace(/\s/g, '')) { + var actorProfileUrl = '/users/' + item.actor.username + '/'; + var actionDate = new Date(item.datetime_created + 'Z'); + var activityMessageHTML = ( + '' + item.actor.username + '' + + item.message + ); + return ( +
    • + + +

      +

      + + + +

      +       +
      • + ); + } })}
    ] : [ From eb38951f06644a38e4a03a70d25c3d8d1437ad38 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Sat, 24 Oct 2015 14:52:11 -0400 Subject: [PATCH 10/12] Set empty states on sign out also make state setting a bit more uniform --- src/views/splash/splash.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx index 1c000f8b3..95d3b9036 100644 --- a/src/views/splash/splash.jsx +++ b/src/views/splash/splash.jsx @@ -39,6 +39,8 @@ var Splash = injectIntl(React.createClass({ this.getNews(); } else { this.setState({featuredCustom: []}); + this.setState({activity: []}); + this.setState({news: []}); this.getProjectCount(); } } @@ -57,7 +59,7 @@ var Splash = injectIntl(React.createClass({ this.api({ uri: '/proxy/users/' + this.state.session.user.username + '/activity?limit=5' }, function (err, body) { - if (!err) this.setState({'activity': body}); + if (!err) this.setState({activity: body}); }.bind(this)); }, getFeaturedGlobal: function () { @@ -78,7 +80,7 @@ var Splash = injectIntl(React.createClass({ this.api({ uri: '/news?limit=3' }, function (err, body) { - if (!err) this.setState({'news': body}); + if (!err) this.setState({news: body}); }.bind(this)); }, getProjectCount: function () { From 02cf7d0bcbc90d2c148b5e46348b7bba50de6a7a Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Sat, 24 Oct 2015 16:06:00 -0400 Subject: [PATCH 11/12] Fix GH-162: Show "user deletion canceled" modal The look of the modals is all messed up. Will fix that separately. --- src/components/navigation/navigation.jsx | 39 ++++++++++++++++++++---- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx index b0e187ea0..c1e33087f 100644 --- a/src/components/navigation/navigation.jsx +++ b/src/components/navigation/navigation.jsx @@ -12,11 +12,14 @@ var Dropdown = require('./dropdown.jsx'); var Input = require('../forms/input.jsx'); var log = require('../../lib/log.js'); var Login = require('../login/login.jsx'); +var Modal = require('../modal/modal.jsx'); var Registration = require('../registration/registration.jsx'); var Session = require('../../mixins/session.jsx'); require('./navigation.scss'); +Modal.setAppElement(document.getElementById('view')); + var defaultMessages = defineMessages({ messages: { id: 'general.messages', @@ -36,12 +39,13 @@ var Navigation = React.createClass({ ], getInitialState: function () { return { - 'accountNavOpen': false, - 'loginOpen': false, - 'loginError': null, - 'registrationOpen': false, - 'unreadMessageCount': 0, - 'messageCountIntervalId': -1 + accountNavOpen: false, + canceledDeletionOpen: false, + loginOpen: false, + loginError: null, + registrationOpen: false, + unreadMessageCount: 0, + messageCountIntervalId: -1 }; }, componentDidMount: function () { @@ -103,6 +107,7 @@ var Navigation = React.createClass({ }, handleLogIn: function (formData) { this.setState({'loginError': null}); + formData['useMessages'] = true; this.api({ method: 'post', host: '', @@ -119,6 +124,11 @@ var Navigation = React.createClass({ this.setState({'loginError': body.msg}); } else { this.closeLogin(); + body.messages.map(function (message) { + if (message.message == 'canceled-deletion') { + this.showCanceledDeletion(); + } + }.bind(this)); window.refreshSession(); } } @@ -145,6 +155,12 @@ var Navigation = React.createClass({ closeAccountNav: function () { this.setState({'accountNavOpen': false}); }, + showCanceledDeletion: function () { + this.setState({'canceledDeletionOpen': true}); + }, + closeCanceledDeletion: function () { + this.setState({'canceledDeletionOpen': false}); + }, closeRegistration: function () { this.setState({'registrationOpen': false}); }, @@ -299,6 +315,17 @@ var Navigation = React.createClass({ ]} + +

    Your Account Will Not Be Deleted

    +

    + Your account was scheduled for deletion but you logged in. Your account has been reactivated. + If you didn’t request for your account to be deleted, you should + {' '}change your password{' '} + to make sure your account is secure. +

    +
    ); } From 14fd4c586021f4ff8a3796a5a35f8689583700a2 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Sat, 24 Oct 2015 17:11:44 -0400 Subject: [PATCH 12/12] Fix GH-168: Rehabilitate the `Modal` props.style This makes it more sane, and consistent with the way the react-modal `Modal` works. The old way made multiple modals on the page have the same `style` prop. --- package.json | 2 + src/components/intro/intro.jsx | 6 +- src/components/modal/modal.jsx | 68 ++++++++++---------- src/components/registration/registration.jsx | 6 +- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index ca62d012a..26c62f1f2 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,8 @@ "json-loader": "0.5.2", "json2po-stream": "1.0.3", "jsx-loader": "0.13.2", + "lodash.clone": "3.0.3", + "lodash.defaultsdeep": "3.10.0", "lodash.omit": "3.1.0", "minilog": "2.0.8", "node-sass": "3.3.3", diff --git a/src/components/intro/intro.jsx b/src/components/intro/intro.jsx index 0b4724729..c8930a52f 100644 --- a/src/components/intro/intro.jsx +++ b/src/components/intro/intro.jsx @@ -44,7 +44,7 @@ var Intro = React.createClass({ this.closeRegistration(); }, render: function () { - var frameSettings = { + var frameProps = { width: 570, height: 357, padding: 15 @@ -140,10 +140,10 @@ var Intro = React.createClass({ className="video-modal" isOpen={this.state.videoOpen} onRequestClose={this.closeVideo} - frameSettings={frameSettings}> + style={{content:frameProps}}>