diff --git a/.gitignore b/.gitignore index 3b59ff2f5..3c51c1db4 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ dist dist/coral-admin/bundle.js .DS_Store *.iml +dump.rdb .env gaba.cfg .idea/ diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 95a6f63f3..a78b2f72c 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -19,8 +19,9 @@ import LikeButton from '../../coral-plugin-likes/LikeButton'; import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton'; import SignInContainer from '../../coral-sign-in/containers/SignInContainer'; import UserBox from '../../coral-sign-in/components/UserBox'; -import {TabBar, Tab, TabContent} from '../../coral-ui'; +import {TabBar, Tab, TabContent, Button} from '../../coral-ui'; import SettingsContainer from '../../coral-settings/containers/SettingsContainer'; +import {Icon} from 'react-mdl'; const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions; const {addNotification, clearNotification} = notificationActions; @@ -57,10 +58,15 @@ class CommentStream extends Component { super(props); this.state = { - activeTab: 0 + activeTab: 0, + closingComments: false }; this.changeTab = this.changeTab.bind(this); + this.changeCommentMessage = this.changeCommentMessage.bind(this); + this.promptCloseComments = this.promptCloseComments.bind(this); + this.cancelClosingComments = this.cancelClosingComments.bind(this); + this.submitMessage = this.submitMessage.bind(this); } changeTab (tab) { @@ -69,6 +75,26 @@ class CommentStream extends Component { }); } + changeCommentMessage (str) { + + } + + submitMessage () { + + } + + cancelClosingComments () { + this.setState({ + closingComments: false + }); + } + + promptCloseComments () { + this.setState({ + closingComments: true + }); + } + static propTypes = { items: PropTypes.object.isRequired, addItem: PropTypes.func.isRequired, @@ -136,6 +162,7 @@ class CommentStream extends Component { Settings + Configure Stream @@ -269,6 +296,17 @@ class CommentStream extends Component { + +

Close Comment Stream

+ + {this.state.closingComments ? + : null} +
: 'Loading' } @@ -276,4 +314,29 @@ class CommentStream extends Component { } } +const CloseCommentsInfo = ({ closing, onClick }) => ( +
+

+ This comment stream is currently open. By closing this comment stream, + no new comments may be submitted and all previous comments will still + be displayed. +

+ +
+) + +const CloseCommentsActions = ({ onChangeMessage, message, onCancel, onSubmitMessage }) => ( +
+

Are you sure you'd like to close this comment stream?

+

Write a message for readers to display

+ +
+ + +
+
+) + export default connect(mapStateToProps, mapDispatchToProps)(CommentStream); diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 12bdfacae..f83541527 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -193,3 +193,42 @@ hr { float: right; margin: 8px; } + +/* Close comments */ + +.close-comments-intro-wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.close-comments-intro-wrapper button { + width: 300px; + margin-left: 20px; +} + +.close-comments-intro-wrapper button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.close-comments-message { + box-sizing: border-box; + width: 100%; + height: 100px; +} + +.close-comments-confirm-wrapper { + float: right; +} + +.close-comments-alert { + background-color: #d65344; + color: white; + font-size: 16px; + padding: 5px; +} + +.close-comments-alert i.material-icons { + font-size: 16px !important; +}