From ead66520e2784f34a77987478cfc480b1505c90d Mon Sep 17 00:00:00 2001 From: David Jay Date: Fri, 2 Dec 2016 17:01:06 -0500 Subject: [PATCH 1/2] Adjusting height of login button to match current comment. --- client/coral-embed-stream/src/CommentStream.js | 12 +++++++----- client/coral-embed-stream/style/default.css | 2 +- client/coral-framework/actions/auth.js | 2 +- client/coral-framework/reducers/auth.js | 3 ++- client/coral-plugin-flags/FlagButton.js | 3 ++- client/coral-plugin-likes/LikeButton.js | 3 ++- client/coral-sign-in/components/SignDialog.js | 10 ++++++++-- client/coral-sign-in/containers/SignInContainer.js | 3 ++- 8 files changed, 25 insertions(+), 13 deletions(-) diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 40ad72a41..1d291f1fd 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -80,10 +80,12 @@ class CommentStream extends Component { const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0]; const rootItem = this.props.items.assets && this.props.items.assets[rootItemId]; const {actions, users, comments} = this.props.items; - const {loggedIn, user, showSignInDialog} = this.props.auth; + const {loggedIn, user, showSignInDialog, signInOffset} = this.props.auth; const {activeTab} = this.state; - - return
+ const expandForLogin = showSignInDialog ? { + minHeight: document.body.scrollHeight + 150 + } : {}; + return
{ rootItem ?
@@ -110,7 +112,7 @@ class CommentStream extends Component { reply={false} author={user} /> - {!loggedIn && } + {!loggedIn && }
{ rootItem.comments && rootItem.comments.map((commentId) => { @@ -257,7 +259,7 @@ const mapDispatchToProps = (dispatch) => ({ getStream: (rootId) => dispatch(getStream(rootId)), addNotification: (type, text) => dispatch(addNotification(type, text)), clearNotification: () => dispatch(clearNotification()), - showSignInDialog: () => dispatch(showSignInDialog()), + showSignInDialog: (offset) => dispatch(showSignInDialog(offset)), postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)), deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)), appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)), diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index b6fe672cc..723dcd826 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -8,7 +8,7 @@ body { } .expandForSignin { - min-height: 550px; + min-height: 600px; } button { diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index 13a9c72bc..7ad5e4c34 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -6,7 +6,7 @@ import coralApi, {base} from '../helpers/response'; import {addItem} from './items'; // Dialog Actions -export const showSignInDialog = () => ({type: actions.SHOW_SIGNIN_DIALOG}); +export const showSignInDialog = (offset = 0) => ({type: actions.SHOW_SIGNIN_DIALOG, offset}); export const hideSignInDialog = () => ({type: actions.HIDE_SIGNIN_DIALOG}); export const changeView = view => dispatch => diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js index a4803fa96..cf5b25921 100644 --- a/client/coral-framework/reducers/auth.js +++ b/client/coral-framework/reducers/auth.js @@ -22,7 +22,8 @@ export default function auth (state = initialState, action) { switch (action.type) { case actions.SHOW_SIGNIN_DIALOG : return state - .set('showSignInDialog', true); + .set('showSignInDialog', true) + .set('signInOffset', action.offset); case actions.HIDE_SIGNIN_DIALOG : return state.merge(Map({ isLoading: false, diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index f0ab1b22f..dd5979888 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -8,7 +8,8 @@ const FlagButton = ({flag, id, postAction, deleteAction, addItem, showSignInDial const flagged = flag && flag.current_user; const onFlagClick = () => { if (!currentUser) { - showSignInDialog(); + const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75; + showSignInDialog(offset); return; } if (!flagged) { diff --git a/client/coral-plugin-likes/LikeButton.js b/client/coral-plugin-likes/LikeButton.js index b3d31fbf4..0672da071 100644 --- a/client/coral-plugin-likes/LikeButton.js +++ b/client/coral-plugin-likes/LikeButton.js @@ -8,7 +8,8 @@ const LikeButton = ({like, id, postAction, deleteAction, addItem, showSignInDial const liked = like && like.current_user; const onLikeClick = () => { if (!currentUser) { - showSignInDialog(); + const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75; + showSignInDialog(offset); return; } if (!liked) { diff --git a/client/coral-sign-in/components/SignDialog.js b/client/coral-sign-in/components/SignDialog.js index 242b7443a..68d96b910 100644 --- a/client/coral-sign-in/components/SignDialog.js +++ b/client/coral-sign-in/components/SignDialog.js @@ -6,8 +6,14 @@ import SignInContent from './SignInContent'; import SingUpContent from './SignUpContent'; import ForgotContent from './ForgotContent'; -const SignDialog = ({open, view, handleClose, ...props}) => ( - +const SignDialog = ({open, view, handleClose, offset, ...props}) => ( + × {view === 'SIGNIN' && } {view === 'SIGNUP' && } diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index c201a3863..93d3c03d0 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -129,13 +129,14 @@ class SignInContainer extends Component { } render() { - const {auth, showSignInDialog, noButton} = this.props; + const {auth, showSignInDialog, noButton, offset} = this.props; return (
{!noButton && } Date: Tue, 6 Dec 2016 16:29:40 -1000 Subject: [PATCH 2/2] restoring the scroll to comment functionality --- .../coral-embed-stream/src/CommentStream.js | 21 +++++++++++++++++-- client/coral-embed-stream/style/default.css | 1 - 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 0fda9444d..c7b7b2412 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -67,12 +67,29 @@ class CommentStream extends Component { // Set up messaging between embedded Iframe an parent component this.pym = new Pym.Child({polling: 100}); - const path = /https?\:\/\/([^?#]+)/.exec(this.pym.parentUrl); + const path = this.pym.parentUrl.split('#')[0]; - this.props.getStream(path[1] || window.location); + this.props.getStream(path || window.location); this.path = path; this.pym.sendMessage('childReady'); + + this.pym.onMessage('DOMContentLoaded', hash => { + const commentId = hash.replace('#', 'c_'); + let count = 0; + const interval = setInterval(() => { + if (document.getElementById(commentId)) { + window.clearInterval(interval); + this.pym.scrollParentToChildEl(commentId); + } + + if (++count > 100) { // ~10 seconds + // give up waiting for the comments to load. + // it would be weird for the page to jump after that long. + window.clearInterval(interval); + } + }, 100); + }); } render () { diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 59efc3dc8..688fc78f6 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -113,7 +113,6 @@ hr { /* Comment styles */ .comment { - position: relative; margin-bottom: 10px; position: relative; }