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

Merge pull request #1496 from mewtaylor/issue/gh-1494

Browse source 
Fix GH-1494: fix formatting for dismiss icon, unread message count
This commit is contained in:
Matthew Taylor 2017-09-01 11:15:18 -04:00 committed by GitHub
commit 63963254f9
6 changed files with 40 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/redux/messages.js
View file

@ -3,6 +3,7 @@ var keyMirror = require('keymirror');
var api = require('../lib/api');
var log = require('../lib/log');
var messageCountActions = require('./message-count.js');
module.exports.Status = keyMirror({
FETCHED: null,
@ -135,7 +136,7 @@ module.exports.clearMessageCount = function () {
};
};
module.exports.clearAdminMessage = function (messageType, messageId, adminMessages) {
module.exports.clearAdminMessage = function (messageType, messageId, messageCount, adminMessages) {
return function (dispatch) {
dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.FETCHING));
api({
@ -156,6 +157,7 @@ module.exports.clearAdminMessage = function (messageType, messageId, adminMessag
if (!body.success) {
dispatch(module.exports.setStatus('DELETE_STATUS', module.exports.Status.DELETE_ERROR));
dispatch(module.exports.setMessagesError('messages not cleared'));
return;
}
if (messageType === 'invite') {
@ -173,6 +175,7 @@ module.exports.clearAdminMessage = function (messageType, messageId, adminMessag
adminMessages.splice(toRemove, 1);
dispatch(module.exports.setAdminMessages(adminMessages));
}
dispatch(messageCountActions.setCount(messageCount - 1));
dispatch(module.exports.setStatus('DELETE_STATUS', module.exports.Status.FETCHED));
});
};

4
src/views/messages/container.jsx
View file

@ -95,7 +95,9 @@ var Messages = React.createClass({
adminMessages = this.props.adminMessages;
}
this.props.dispatch(
messageActions.clearAdminMessage(messageType, messageId, adminMessages)
messageActions.clearAdminMessage(
messageType, messageId, this.props.numNewMessages, adminMessages
)
);
},
handleLoadMoreMessages: function () {

4
src/views/messages/message-rows/admin-message.jsx
View file

@ -21,10 +21,10 @@ var AdminMessage = React.createClass({
</span>
<Button
className="mod-admin-message-dismiss"
onClick={this.props.onDismiss.bind(this, 'notification', this.props.id)}
onClick={this.props.onDismiss}
>
<img
className="mod-admin-message-icon"
className="admin-message-icon"
src="/svgs/modal/close-x.svg"
alt="close-icon"
/>

6
src/views/messages/message-rows/scratcher-invite.jsx
View file

@ -25,11 +25,7 @@ var AdminMessage = injectIntl(React.createClass({
</span>
<Button
className="mod-scratcher-invite-dismiss"
onClick={
function () {
this.props.onDismiss('invite', this.props.id);
}.bind(this)
}
onClick={this.props.onDismiss}
>
<img
className="mod-scratcher-invite-icon"

26
src/views/messages/messages.scss
View file

@ -39,6 +39,20 @@
list-style-type: none;
}
.messages-header {
display: flex;
align-items: center;
}
.messages-header-unread {
margin-left: 1rem;
border-radius: 1rem;
background-color: $ui-orange;
padding: .25rem .5rem;
line-height: 1rem;
color: $type-white;
}
.admin-message {
border: 1px solid darken($ui-gray, 10);
border-radius: 5px;
@ -51,6 +65,10 @@
align-items: center;
}
.admin-message-icon {
vertical-align: middle;
}
.admin-message-content {
margin: 0;
}
@ -70,14 +88,6 @@
}
}
.messages-social-title-unread {
margin-left: 1rem;
border-radius: 1rem;
background-color: $ui-orange;
padding: .25rem .5rem;
color: $type-white;
}
.messages-social-list {
border: 1px solid $ui-border;
border-bottom-width: 0;

24
src/views/messages/presentation.jsx
View file

@ -181,11 +181,11 @@ var SocialMessagesList = React.createClass({
<section className="messages-social">
{this.props.messages.length > 0 ? [
<div className="messages-social-title" key="messages-social-title">
<h4>
<h4 className="messages-header">
<FormattedMessage id='messages.messageTitle' />
<span className="messages-social-title-unread">
<div className="messages-header-unread">
<FormattedNumber value={this.props.numNewMessages} />
</span>
</div>
</h4>
</div>,
<ul className="messages-social-list" key="messages-social-list">
@ -270,11 +270,11 @@ var MessagesPresentation = injectIntl(React.createClass({
{this.props.adminMessages.length > 0 || Object.keys(this.props.scratcherInvite).length > 0 ? [
<section className="messages-admin">
<div className="messages-admin-title">
<h4>
<h4 className="messages-header">
<FormattedMessage id='messages.scratchTeamTitle' />
<span className="messages-social-title-unread">
<div className="messages-header-unread">
<FormattedNumber value={adminMessageLength} />
</span>
</div>
</h4>
</div>
<ul className="messages-admin-list">
@ -283,7 +283,9 @@ var MessagesPresentation = injectIntl(React.createClass({
id={this.props.scratcherInvite.id}
username={this.props.user.username}
datetimeCreated={this.props.scratcherInvite.datetime_created}
onDismiss={this.props.handleAdminDismiss}
onDismiss={function () {
this.props.handleAdminDismiss('invite', this.props.scratcherInvite.id);
}.bind(this)}
/>
] : []}
{this.props.adminMessages.map(function (item) {
@ -292,11 +294,9 @@ var MessagesPresentation = injectIntl(React.createClass({
id={item.id}
message={item.message}
datetimeCreated={item.datetime_created}
onDismiss={
function () {
this.props.handleAdminDismiss('notification', item.id);
}.bind(this)
}
onDismiss={function () {
this.props.handleAdminDismiss('notification', item.id);
}.bind(this)}
/>;
}.bind(this))}
</ul>