From bae2b8dcaa65aca726d16c63ce4147e7b3ba3518 Mon Sep 17 00:00:00 2001 From: Efremov Alexey Date: Tue, 26 Jun 2018 11:46:11 +0300 Subject: [PATCH] Add: user-info in iframe Issue #98 Signed-off-by: Efremov Alexey --- web/app/common/constants.js | 4 +- web/app/components/comment/comment.jsx | 17 ++--- .../_default/user-info__avatar_default.scss | 3 + .../user-info/__avatar/user-info__avatar.scss | 10 +++ .../user-info/__avatar/user-info__avatar.svg | 18 +++++ .../user-info/__close/user-info__close.scss | 3 + .../user-info/__id/user-info__id.scss | 1 + .../user-info/__title/user-info__title.scss | 1 + .../user-info/_iframe/user-info_iframe.scss | 5 ++ web/app/components/user-info/index.js | 3 + web/app/components/user-info/user-info.jsx | 11 ++- web/app/components/user-info/user-info.scss | 6 +- web/app/embed.js | 56 ++++++++++++++++ web/app/user-info.js | 67 +++++++++++++++++++ web/user-info.ejs | 41 ++++++++++++ web/webpack.config.js | 6 ++ 16 files changed, 234 insertions(+), 18 deletions(-) create mode 100644 web/app/components/user-info/__avatar/_default/user-info__avatar_default.scss create mode 100644 web/app/components/user-info/__avatar/user-info__avatar.scss create mode 100644 web/app/components/user-info/__avatar/user-info__avatar.svg create mode 100644 web/app/components/user-info/_iframe/user-info_iframe.scss create mode 100644 web/app/user-info.js create mode 100644 web/user-info.ejs diff --git a/web/app/common/constants.js b/web/app/common/constants.js index f91fbbae..06d5498c 100644 --- a/web/app/common/constants.js +++ b/web/app/common/constants.js @@ -4,6 +4,7 @@ const NODE_ID = 'remark42'; const COUNTER_NODE_CLASSNAME = 'remark42__counter'; const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-'; const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments'; +const USER_INFO_NODE_CLASSNAME = 'remark42__user-info'; const DEFAULT_LAST_COMMENTS_MAX = 15; const DEFAULT_MAX_COMMENT_SIZE = 1000; const MAX_SHOWN_ROOT_COMMENTS = 10; @@ -32,4 +33,5 @@ module.exports = { DEFAULT_SORT, LS_COLLAPSE_KEY, LS_SORT_KEY, -}; \ No newline at end of file + USER_INFO_NODE_CLASSNAME, +}; diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 39d8ede2..cdcd0ac1 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -6,7 +6,6 @@ import { url } from 'common/settings'; import store from 'common/store'; import Input from 'components/input'; -import UserInfo from 'components/user-info'; export default class Comment extends Component { constructor(props) { @@ -16,7 +15,6 @@ export default class Comment extends Component { isReplying: false, isEditing: false, isUserVerified: false, - isUserInfoShown: false, editTimeLeft: null, }; @@ -128,7 +126,11 @@ export default class Comment extends Component { } toggleUserInfoVisibility() { - this.setState({ isUserInfoShown: !this.state.isUserInfoShown }); + if (window.parent) { + const { user } = this.props.data; + const data = JSON.stringify({ isUserInfoShown: true, user }); + window.parent.postMessage(data, '*'); + } } onPinClick() { @@ -311,8 +313,7 @@ export default class Comment extends Component { isReplying, isEditing, isUserVerified, - editTimeLeft, - isUserInfoShown, + editTimeLeft }) { const { data, mods = {} } = props; const isAdmin = !guest && store.get('user').admin; @@ -583,12 +584,6 @@ export default class Comment extends Component { - { - isUserInfoShown && ( - - ) - } - { isReplying && mods.view !== 'user' && ( + + + + + + + + + + + + + + + diff --git a/web/app/components/user-info/__close/user-info__close.scss b/web/app/components/user-info/__close/user-info__close.scss index 161d270e..fab6f6e4 100644 --- a/web/app/components/user-info/__close/user-info__close.scss +++ b/web/app/components/user-info/__close/user-info__close.scss @@ -1,4 +1,7 @@ .user-info__close { + position: absolute; + top: 10px; + right: 10px; font-size: 14px; line-height: 18px; cursor: pointer; diff --git a/web/app/components/user-info/__id/user-info__id.scss b/web/app/components/user-info/__id/user-info__id.scss index a8911a86..eb32b752 100644 --- a/web/app/components/user-info/__id/user-info__id.scss +++ b/web/app/components/user-info/__id/user-info__id.scss @@ -4,4 +4,5 @@ font-weight: 400; line-height: 18px; color: #888; + padding-left: 40px; } diff --git a/web/app/components/user-info/__title/user-info__title.scss b/web/app/components/user-info/__title/user-info__title.scss index aa6123f2..24fa5666 100644 --- a/web/app/components/user-info/__title/user-info__title.scss +++ b/web/app/components/user-info/__title/user-info__title.scss @@ -3,4 +3,5 @@ font-size: 18px; font-weight: 700; line-height: 20px; + padding-left: 40px; } diff --git a/web/app/components/user-info/_iframe/user-info_iframe.scss b/web/app/components/user-info/_iframe/user-info_iframe.scss new file mode 100644 index 00000000..3771b2bb --- /dev/null +++ b/web/app/components/user-info/_iframe/user-info_iframe.scss @@ -0,0 +1,5 @@ +.user-info_iframe.user-info_iframe { + overflow: inherit; + overflow-x: hidden; + overflow-y: auto; +} diff --git a/web/app/components/user-info/index.js b/web/app/components/user-info/index.js index 7b131806..9f593c46 100644 --- a/web/app/components/user-info/index.js +++ b/web/app/components/user-info/index.js @@ -6,3 +6,6 @@ require('./__close/user-info__close.scss'); require('./__id/user-info__id.scss'); require('./__preloader/user-info__preloader.scss'); require('./__title/user-info__title.scss'); +require('./__avatar/user-info__avatar.scss'); +require('./__avatar/_default/user-info__avatar_default.scss'); +require('./_iframe/user-info_iframe.scss'); diff --git a/web/app/components/user-info/user-info.jsx b/web/app/components/user-info/user-info.jsx index ceef362a..3c9cc2c6 100644 --- a/web/app/components/user-info/user-info.jsx +++ b/web/app/components/user-info/user-info.jsx @@ -24,10 +24,15 @@ export default class UserInfo extends Component { } render(props, { comments, isLoading }) { - const { user: { name, id }, onClose } = props; + const { user: { name, id, isDefaultPicture, picture }, onClose } = props; return ( -
+
+

Last comments by {name}

{id}

@@ -52,7 +57,7 @@ export default class UserInfo extends Component { ) } -
Close
+ ✖
); } diff --git a/web/app/components/user-info/user-info.scss b/web/app/components/user-info/user-info.scss index a176a70e..13ed544d 100644 --- a/web/app/components/user-info/user-info.scss +++ b/web/app/components/user-info/user-info.scss @@ -1,7 +1,7 @@ .user-info { - padding: 10px 20px; - overflow: hidden; - background: #fafafa; border: 1px solid #efefef; border-radius: 2px; + position: absolute; + top: 0; + bottom: 0; } diff --git a/web/app/embed.js b/web/app/embed.js index 3db9101d..8303313c 100644 --- a/web/app/embed.js +++ b/web/app/embed.js @@ -56,6 +56,54 @@ function init() { setTimeout(postHashToIframe, 1000); + const userInfo = { + node: null, + back: null, + init(user) { + if (!this.node) { + this.node = document.createElement('div'); + this.node.style = `position: fixed; top: 0; right: 0; bottom: 0;width: 400px; transform: translate(400px, 0); transition: transform 0.4s ease-out;`; + } + if (!this.back) { + this.back = document.createElement('div'); + this.back.style = `position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7);opacity: 0;transition: opacity 0.4s ease-out;`; + this.back.onclick = () => this.close(); + } + const queryUserInfo = query + + `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`; + this.node.innerHTML = ` +