From 3ecb93365a287bc5bea1933864c82f2baa07ce3b Mon Sep 17 00:00:00 2001 From: David Jay Date: Fri, 3 Mar 2017 12:50:39 -0500 Subject: [PATCH 1/7] Correcting bug in keyboard shortcut next and previous. --- .../src/containers/ModerationQueue/ModerationContainer.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 25a7a9511..a82c052d5 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -32,8 +32,12 @@ class ModerationContainer extends Component { key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); - key('j', () => this.setState({selectedIndex: selectedIndex + 1})); - key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex})); + key('j', () => this.setState(prevState => + ({...prevState, selectedIndex: prevState.selectedIndex + 1})) + ); + key('k', () => this.setState(prevState => + ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex + 1 : selectedIndex})) + ); key('r', () => this.moderate(false)); key('t', () => this.moderate(true)); } From 45208b096fa13658aa284dcbbfcb6908b55f74c7 Mon Sep 17 00:00:00 2001 From: David Jay Date: Fri, 3 Mar 2017 12:52:20 -0500 Subject: [PATCH 2/7] Correcting bug in prev keyboard shortcut. --- .../src/containers/ModerationQueue/ModerationContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index a82c052d5..d503335b8 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -36,7 +36,7 @@ class ModerationContainer extends Component { ({...prevState, selectedIndex: prevState.selectedIndex + 1})) ); key('k', () => this.setState(prevState => - ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex + 1 : selectedIndex})) + ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex - 1 : selectedIndex})) ); key('r', () => this.moderate(false)); key('t', () => this.moderate(true)); From dc96b550a6ae86edd9aba30f5ee2e1e242a930c8 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 7 Mar 2017 14:56:28 -0500 Subject: [PATCH 3/7] Button should inherit font --- client/coral-ui/components/Button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css index 9a2611630..14ed64aa2 100644 --- a/client/coral-ui/components/Button.css +++ b/client/coral-ui/components/Button.css @@ -9,7 +9,7 @@ min-width: 64px; padding: 0 8px; display: inline-block; - font-family: 'Roboto','Helvetica','Arial',sans-serif; + font-family: inherit; font-size: 14px; overflow: hidden; will-change: box-shadow,transform; From ee30f549a136fb7092ac69861e0f44148f589200 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 7 Mar 2017 15:04:35 -0500 Subject: [PATCH 4/7] Lato all the things --- client/coral-embed-stream/style/default.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 009246963..bb5b98d33 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -1,10 +1,16 @@ +* { + font-weight: inherit; + font-family: inherit; + font-style: inherit; + font-size: 100%; +} + html, body { width:auto; height:auto; } body { - font-family: 'Open Sans', sans-serif; font-family: 'Lato', sans-serif; width: 100%; font-size: 14px; @@ -324,14 +330,14 @@ button.comment__action-button[disabled], } .coral-plugin-flags-popup-counter { - float: left; - margin-top: 21px; - color: #999; + float: left; + margin-top: 21px; + color: #999; } .coral-plugin-flags-popup-button { - float: right; - margin-top: 10px; + float: right; + margin-top: 10px; } .coral-plugin-flags-reason-text { From eb06f3892d1b2f0dff651a66e91bf9baa1c4e96a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 7 Mar 2017 15:27:43 -0500 Subject: [PATCH 5/7] changes --- client/coral-embed-stream/style/default.css | 5 +++++ client/coral-plugin-commentbox/translations.json | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index bb5b98d33..5b1b69752 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -87,6 +87,7 @@ hr { margin-bottom: 10px; display: block; box-sizing: border-box; + border-radius: 2px; } /* Question Box Styles */ @@ -134,6 +135,8 @@ hr { flex: 1; padding: 5px; min-height: 100px; + margin-top: 10px; + font-size: 14px; } .coral-plugin-commentbox-button-container { @@ -393,6 +396,8 @@ button.coral-load-more { color: #FFF; background-color: #2376D8; cursor: pointer; + padding: 10px; + border-radius: 2px; } button.coral-load-more:hover { diff --git a/client/coral-plugin-commentbox/translations.json b/client/coral-plugin-commentbox/translations.json index 83ed974e4..0f77fc334 100644 --- a/client/coral-plugin-commentbox/translations.json +++ b/client/coral-plugin-commentbox/translations.json @@ -3,7 +3,7 @@ "post": "Post", "cancel": "Cancel", "reply": "Reply", - "comment": "Comment", + "comment": "Post a Comment", "name": "Name", "comment-post-notif": "Your comment has been posted.", "comment-post-notif-premod": "Thank you for posting. Our moderation team will review your comment shortly.", @@ -14,7 +14,7 @@ "post": "Publicar", "cancel": "Cancelar", "reply": "Respuesta", - "comment": "Comentario", + "comment": "Escribe un Comentario", "name": "Nombre", "comment-post-notif": "Tu comentario ha sido publicado.", "comment-post-notif-premod": "Gracias por comentar. Nuestro equipo de moderación va a revisarlo muy pronto.", From d1119604e05ca9759175c83708818c5a7c64c80f Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 7 Mar 2017 15:59:05 -0500 Subject: [PATCH 6/7] =?UTF-8?q?=C3=ADcon=20styling=20for=20infobox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/coral-embed-stream/style/default.css | 43 +++++++++++++++---- .../coral-plugin-questionbox/QuestionBox.js | 8 ++-- 2 files changed, 40 insertions(+), 11 deletions(-) diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 5b1b69752..68bac3110 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -90,6 +90,14 @@ hr { border-radius: 2px; } + +.commentStream .material-icons { + vertical-align: middle; + width: 1em; + font-size: 1em; + overflow: hidden; +} + /* Question Box Styles */ .coral-plugin-questionbox-info { top: 0; @@ -103,15 +111,41 @@ hr { font-weight: bold; font-size: 14px; display: block; + overflow: hidden; + height: 50px; } -.coral-plugin-questionbox-icon { +.coral-plugin-questionbox-icon.bubble{ + position: absolute; + top: 11px; + left: 15px; + color: #949393; + font-size: 20px; + z-index: 0; +} + +.coral-plugin-questionbox-icon.person{ + z-index: 2; + top: 20px; + left: 20px; + position: absolute; + font-size: 24px; + color: white; +} + +.coral-plugin-questionbox-box { + position: relative; border: 0; background: black; color: white; padding: 20px; margin-left: 0px !important; margin-right: 10px; + display: inline-block; + width: 15px; + height: 100%; + padding: 3px 20px; + vertical-align: middle; } .hidden { @@ -247,13 +281,6 @@ button.comment__action-button[disabled], white-space: nowrap; } -.commentStream .material-icons { - vertical-align: middle; - width: 1em; - font-size: 1em; - overflow: hidden; -} - .likedButton { color: rgb(0,134,227); } diff --git a/client/coral-plugin-questionbox/QuestionBox.js b/client/coral-plugin-questionbox/QuestionBox.js index 542cb8790..3c2410d44 100644 --- a/client/coral-plugin-questionbox/QuestionBox.js +++ b/client/coral-plugin-questionbox/QuestionBox.js @@ -2,9 +2,11 @@ import React from 'react'; const packagename = 'coral-plugin-questionbox'; const QuestionBox = ({enable, content}) => -
- chat_bubble person +
+
+ chat_bubble + person +
{content}
; From 15193e97a88def11eb147638957b2c158caa785b Mon Sep 17 00:00:00 2001 From: David Jay Date: Wed, 8 Mar 2017 13:01:37 -0500 Subject: [PATCH 7/7] Preventing keys from scrolling past the end of the comment queue. --- .../ModerationQueue/ModerationContainer.js | 45 +++++++++++++------ 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index d503335b8..2f43911b1 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -26,27 +26,21 @@ class ModerationContainer extends Component { componentWillMount() { const {toggleModal, singleView} = this.props; - const {selectedIndex} = this.state; - + this.props.fetchSettings(); key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); - key('j', () => this.setState(prevState => - ({...prevState, selectedIndex: prevState.selectedIndex + 1})) - ); - key('k', () => this.setState(prevState => - ({...prevState, selectedIndex: prevState.selectedIndex > 0 ? prevState.selectedIndex - 1 : selectedIndex})) - ); - key('r', () => this.moderate(false)); - key('t', () => this.moderate(true)); + key('j', this.select(true)); + key('k', this.select(false)); + key('r', this.moderate(false)); + key('t', this.moderate(true)); } - moderate = (accept) => { - const {data, route, acceptComment, rejectComment} = this.props; + moderate = (accept) => () => { + const {acceptComment, rejectComment} = this.props; const {selectedIndex} = this.state; - const activeTab = route.path === ':id' ? 'premod' : route.path; - const comments = data[activeTab]; + const comments = this.getComments(); const commentId = {commentId: comments[selectedIndex].id}; if (accept) { @@ -54,7 +48,30 @@ class ModerationContainer extends Component { } else { rejectComment(commentId); } + } + getComments = () => { + const {data, route} = this.props; + const activeTab = route.path === ':id' ? 'premod' : route.path; + return data[activeTab]; + } + + select = (next) => () => { + if (next) { + this.setState(prevState => + ({ + ...prevState, + selectedIndex: prevState.selectedIndex < this.getComments().length - 1 + ? prevState.selectedIndex + 1 : prevState.selectedIndex + })); + } else { + this.setState(prevState => + ({ + ...prevState, + selectedIndex: prevState.selectedIndex > 0 ? + prevState.selectedIndex - 1 : prevState.selectedIndex + })); + } } componentWillUnmount() {