From 55e70dfbec1f6cb0456c81f841239757cc6e543e Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 10 Jul 2017 22:13:04 +0700 Subject: [PATCH 1/2] Fix perma view live updates --- client/coral-embed-stream/src/graphql/utils.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js index 03d9fe02a..523cc571f 100644 --- a/client/coral-embed-stream/src/graphql/utils.js +++ b/client/coral-embed-stream/src/graphql/utils.js @@ -1,10 +1,18 @@ import update from 'immutability-helper'; -import {THREADING_LEVEL} from '../constants/stream'; +function determineCommentDepth(comment) { + let depth = 0; + let cur = comment; + while (cur.parent) { + cur = cur.parent; + depth++; + } + return depth; +} function applyToCommentsOrigin(root, callback) { if (root.comment) { let comment = root.comment; - for (let depth = 0; depth <= THREADING_LEVEL; depth++) { + for (let depth = 0; depth <= determineCommentDepth(comment); depth++) { let changes = {$apply: (node) => node ? callback(node) : node}; for (let i = 0; i < depth; i++) { changes = {parent: changes}; From a2dabcac0e5e63cbd4a66a966cf69f2a6a4ce26c Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 11 Jul 2017 01:26:25 +0700 Subject: [PATCH 2/2] Hide action labels on mobile --- client/coral-embed-stream/style/default.css | 11 ----------- client/coral-plugin-replies/ReplyButton.css | 5 +++++ client/coral-plugin-replies/ReplyButton.js | 9 ++++++--- plugins/coral-plugin-like/client/LikeButton.js | 4 +++- plugins/coral-plugin-like/client/styles.css | 6 ++++++ plugins/coral-plugin-love/client/LoveButton.js | 4 +++- plugins/coral-plugin-love/client/styles.css | 6 ++++++ plugins/coral-plugin-respect/client/RespectButton.js | 4 ++-- plugins/coral-plugin-respect/client/styles.css | 6 ++++++ 9 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 client/coral-plugin-replies/ReplyButton.css diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index bd56cb748..3038e0da4 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -459,14 +459,3 @@ button.comment__action-button[disabled], width: initial; } - -@media (min-device-width : 300px) and (max-device-width : 420px) { - .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button { - visibility: collapse; - margin-left: -30px; - } - - .commentActionsLeft.comment__action-container .coral-plugin-replies-reply-button .coral-plugin-replies-icon { - visibility: visible; - } -} diff --git a/client/coral-plugin-replies/ReplyButton.css b/client/coral-plugin-replies/ReplyButton.css new file mode 100644 index 000000000..4f71e6630 --- /dev/null +++ b/client/coral-plugin-replies/ReplyButton.css @@ -0,0 +1,5 @@ +@media (max-width: 425px) { + .label { + display: none; + } +} diff --git a/client/coral-plugin-replies/ReplyButton.js b/client/coral-plugin-replies/ReplyButton.js index a66e3c156..4641ae02d 100644 --- a/client/coral-plugin-replies/ReplyButton.js +++ b/client/coral-plugin-replies/ReplyButton.js @@ -2,16 +2,19 @@ import React, {PropTypes} from 'react'; import t from 'coral-framework/services/i18n'; -import classnames from 'classnames'; +import cn from 'classnames'; +import styles from './ReplyButton.css'; const name = 'coral-plugin-replies'; const ReplyButton = ({onClick}) => { return ( diff --git a/plugins/coral-plugin-like/client/LikeButton.js b/plugins/coral-plugin-like/client/LikeButton.js index 7d17ef056..34b5e40f2 100644 --- a/plugins/coral-plugin-like/client/LikeButton.js +++ b/plugins/coral-plugin-like/client/LikeButton.js @@ -45,7 +45,9 @@ class LikeButton extends React.Component { className={cn(styles.button, {[styles.liked]: alreadyReacted}, `${plugin}-button`)} onClick={this.handleClick} > - {t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')} + + {t(alreadyReacted ? 'coral-plugin-like.liked' : 'coral-plugin-like.like')} + {count > 0 && count} diff --git a/plugins/coral-plugin-like/client/styles.css b/plugins/coral-plugin-like/client/styles.css index cb372fa47..b44c170e3 100644 --- a/plugins/coral-plugin-like/client/styles.css +++ b/plugins/coral-plugin-like/client/styles.css @@ -23,3 +23,9 @@ } } } + +@media (max-width: 425px) { + .label { + display: none; + } +} diff --git a/plugins/coral-plugin-love/client/LoveButton.js b/plugins/coral-plugin-love/client/LoveButton.js index 7450ad668..d67160773 100644 --- a/plugins/coral-plugin-love/client/LoveButton.js +++ b/plugins/coral-plugin-love/client/LoveButton.js @@ -45,7 +45,9 @@ class LoveButton extends React.Component { className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)} onClick={this.handleClick} > - {t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')} + + {t(alreadyReacted ? 'coral-plugin-love.loved' : 'coral-plugin-love.love')} + {count > 0 && count} diff --git a/plugins/coral-plugin-love/client/styles.css b/plugins/coral-plugin-love/client/styles.css index e16e17ca4..ac5a86370 100644 --- a/plugins/coral-plugin-love/client/styles.css +++ b/plugins/coral-plugin-love/client/styles.css @@ -23,3 +23,9 @@ } } } + +@media (max-width: 425px) { + .label { + display: none; + } +} diff --git a/plugins/coral-plugin-respect/client/RespectButton.js b/plugins/coral-plugin-respect/client/RespectButton.js index 9bc556b67..878525051 100644 --- a/plugins/coral-plugin-respect/client/RespectButton.js +++ b/plugins/coral-plugin-respect/client/RespectButton.js @@ -45,11 +45,11 @@ class RespectButton extends React.Component { className={cn(styles.button, {[styles.respected]: alreadyReacted}, `${plugin}-button`)} onClick={this.handleClick} > - + {t(alreadyReacted ? 'coral-plugin-respect.respected' : 'coral-plugin-respect.respect')} - {count > 0 && count} + {count > 0 && count} ); diff --git a/plugins/coral-plugin-respect/client/styles.css b/plugins/coral-plugin-respect/client/styles.css index f0b780b86..d08d648c3 100644 --- a/plugins/coral-plugin-respect/client/styles.css +++ b/plugins/coral-plugin-respect/client/styles.css @@ -28,3 +28,9 @@ .icon { padding: 0 5px; } + +@media (max-width: 425px) { + .label { + display: none; + } +}