Skip to content

GitLab

S
scratch-www
Commit 8014925c authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

Merge branch 'develop' of https://github.com/LLK/scratch-www into bugfix/GH-148 

# By Ray Schamp
# Via Andrew Sliwinski (2) and Ray Schamp (2)
* 'develop' of https://github.com/LLK/scratch-www:
  Fix GH-168: Rehabilitate the `Modal` props.style
  Fix GH-162: Show "user deletion canceled" modal
  Clean up activity item rendering logic
  Add some padding to the empty message
  Make sure boxes aren't transparent
  Add empty state for What's Happening box

# Conflicts:
#	src/components/registration/registration.jsx
parents a2327632 b09d191d
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 70 deletions
src/components/activity/activity.jsx
View file @ 8014925c
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,46 @@ var Activity = React.createClass({
className="activity"
title={formatMessage(defaultMessages.whatsHappening)}>
<ul>
{this.props.items.map(function (item) {
var actorProfileUrl = '/users/' + item.actor.username + '/';
var actionDate = new Date(item.datetime_created + 'Z');
var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
item.actor.username + '</a>' + item.message;
if (item.message.replace(/\s/g, '')) {
return (
<li key={item.pk}>
<a href={actorProfileUrl}>
<img src={item.actor.thumbnail_url} width="34" height="34" />
<p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
<p>
<span className="stamp">
<FormattedRelative value={actionDate} />
</span>
</p>
</a>
</li>
);
}
})}
</ul>
{this.props.items && this.props.items.length > 0 ? [
<ul>
{this.props.items.map(function (item) {
if (item.message.replace(/\s/g, '')) {
var actorProfileUrl = '/users/' + item.actor.username + '/';
var actionDate = new Date(item.datetime_created + 'Z');
var activityMessageHTML = (
'<a href=' + actorProfileUrl + '>' + item.actor.username + '</a>' +
item.message
);
return (
<li key={item.pk}>
<a href={actorProfileUrl}>
<img src={item.actor.thumbnail_url} width="34" height="34" />
<p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
<p>
<span className="stamp">
<FormattedRelative value={actionDate} />
</span>
</p>
</a>
</li>
);
}
})}
</ul>
] : [
<div className="empty">
<h4>
<FormattedMessage
id="activity.seeUpdates"
defaultMessage="This is where you will see updates from Scratchers you follow" />
</h4>
<a href="/studios/146521/">
<FormattedMessage
id="activity.checkOutScratchers"
defaultMessage="Check out some Scratchers you might like to follow" />
</a>
</div>
]}
</Box>
);
}
......
src/components/box/box.scss
View file @ 8014925c
......@@ -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 {
......@@ -44,4 +45,8 @@ $base-bg: $ui-white;
background-color: $base-bg;
padding: 8px 20px;
}
.empty {
margin-top: 20px;
}
}
src/components/intro/intro.jsx
View file @ 8014925c
......@@ -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}}>
<iframe
src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0"
{...omit(frameSettings, 'padding')} />
{...omit(frameProps, 'padding')} />
</Modal>
</div>
);
......
src/components/modal/modal.jsx
View file @ 8014925c
var defaults = require('lodash.defaults');
var omit = require('lodash.omit');
var clone = require('lodash.clone');
var defaultsDeep = require('lodash.defaultsdeep');
var React = require('react');
var ReactModal = require('react-modal');
require('./modal.scss');
var defaultStyle = {
overlay: {
zIndex: 100,
backgroundColor: 'rgba(0, 0, 0, .75)'
},
content: {
overflow: 'visible',
borderRadius: '6px',
width: 500,
height: 250,
padding: 0,
top: '50%',
right: 'auto',
bottom: 'auto',
left: '50%',
marginTop: -125,
marginLeft: -250
}
};
var Modal = React.createClass({
type: 'Modal',
statics: {
......@@ -12,46 +32,24 @@ var Modal = React.createClass({
},
getDefaultProps: function () {
return {
frameSettings: null,
style: {
overlay: {
zIndex: 100,
backgroundColor: 'rgba(0, 0, 0, .75)'
},
content: {
overflow: 'visible',
borderRadius: '6px'
}
}
style: defaultStyle
};
},
calculateStyle: function () {
var style = clone(this.props.style, true);
defaultsDeep(style, defaultStyle);
style.content.marginTop = (style.content.height + style.content.padding*2) / -2;
style.content.marginLeft = (style.content.width + style.content.padding*2) / -2;
return style;
},
requestClose: function () {
return this.refs.modal.portal.requestClose();
},
render: function () {
var frameSettings = this.props.frameSettings;
var style = this.props.style;
var modalProps = omit(this.props, ['frameSettings', 'style']);
if (frameSettings) {
defaults(frameSettings, {
width: 500,
height: 250,
padding: 0
});
defaults(style.content, {
top: '50%',
right: 'auto',
bottom: 'auto',
left: '50%',
marginTop: (frameSettings.height + 2*frameSettings.padding) / -2,
marginLeft: (frameSettings.width + 2*frameSettings.padding) / -2,
height: frameSettings.height,
width: frameSettings.width,
padding: frameSettings.padding
});
}
return (
<ReactModal ref="modal" style={style} {...modalProps}>
<ReactModal ref="modal"
{...this.props}
style={this.calculateStyle()}>
<div className="modal-close" onClick={this.requestClose}></div>
{this.props.children}
</ReactModal>
......
src/components/navigation/navigation.jsx
View file @ 8014925c
......@@ -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({
</li>
]}
</ul>
<Modal isOpen={this.state.canceledDeletionOpen}
onRequestClose={this.closeCanceledDeletion}
frameSettings={{padding: 15}}>
<h4>Your Account Will Not Be Deleted</h4>
<p>
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
{' '}<a href="/accounts/password_reset/">change your password</a>{' '}
to make sure your account is secure.
</p>
</Modal>
</div>
);
}
......
src/components/registration/registration.jsx
View file @ 8014925c
......@@ -36,7 +36,7 @@ var Registration = React.createClass({
this.toggleMessageListener(false);
},
render: function () {
var frameSettings = {
var frameProps = {
width: 610,
height: 438
};
......@@ -45,8 +45,8 @@ var Registration = React.createClass({
isOpen={this.props.isOpen}
onRequestClose={this.props.onRequestClose}
className="registration"
frameSettings={frameSettings}>
<iframe ref="registrationIframe" src="/accounts/standalone-registration/" {...frameSettings} />
style={{content:frameProps}}>
<iframe ref="registrationIframe" src="/accounts/standalone-registration/" {...frameProps} />
</Modal>
);
}
......
src/main.scss
View file @ 8014925c
......@@ -52,6 +52,21 @@ 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;
padding: 10px;
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;
......
src/views/components/components.jsx
View file @ 8014925c
......@@ -35,6 +35,8 @@ var Components = React.createClass({
</Box>
<h1>{'What\'s Happening??'}</h1>
<Activity />
<h1>{'Nothing!!!'}</h1>
<Activity items={[]} />
</div>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment