diff --git a/web/app/common/constants.js b/web/app/common/constants.js index 06d5498c..f91fbbae 100644 --- a/web/app/common/constants.js +++ b/web/app/common/constants.js @@ -4,7 +4,6 @@ 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; @@ -33,5 +32,4 @@ module.exports = { DEFAULT_SORT, LS_COLLAPSE_KEY, LS_SORT_KEY, - USER_INFO_NODE_CLASSNAME, -}; +}; \ No newline at end of file diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index cdcd0ac1..39d8ede2 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -6,6 +6,7 @@ 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) { @@ -15,6 +16,7 @@ export default class Comment extends Component { isReplying: false, isEditing: false, isUserVerified: false, + isUserInfoShown: false, editTimeLeft: null, }; @@ -126,11 +128,7 @@ export default class Comment extends Component { } toggleUserInfoVisibility() { - if (window.parent) { - const { user } = this.props.data; - const data = JSON.stringify({ isUserInfoShown: true, user }); - window.parent.postMessage(data, '*'); - } + this.setState({ isUserInfoShown: !this.state.isUserInfoShown }); } onPinClick() { @@ -313,7 +311,8 @@ export default class Comment extends Component { isReplying, isEditing, isUserVerified, - editTimeLeft + editTimeLeft, + isUserInfoShown, }) { const { data, mods = {} } = props; const isAdmin = !guest && store.get('user').admin; @@ -584,6 +583,12 @@ 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 fab6f6e4..161d270e 100644 --- a/web/app/components/user-info/__close/user-info__close.scss +++ b/web/app/components/user-info/__close/user-info__close.scss @@ -1,7 +1,4 @@ .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 eb32b752..a8911a86 100644 --- a/web/app/components/user-info/__id/user-info__id.scss +++ b/web/app/components/user-info/__id/user-info__id.scss @@ -4,5 +4,4 @@ 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 24fa5666..aa6123f2 100644 --- a/web/app/components/user-info/__title/user-info__title.scss +++ b/web/app/components/user-info/__title/user-info__title.scss @@ -3,5 +3,4 @@ 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 deleted file mode 100644 index 3771b2bb..00000000 --- a/web/app/components/user-info/_iframe/user-info_iframe.scss +++ /dev/null @@ -1,5 +0,0 @@ -.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 9f593c46..7b131806 100644 --- a/web/app/components/user-info/index.js +++ b/web/app/components/user-info/index.js @@ -6,6 +6,3 @@ 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 3c9cc2c6..ceef362a 100644 --- a/web/app/components/user-info/user-info.jsx +++ b/web/app/components/user-info/user-info.jsx @@ -24,15 +24,10 @@ export default class UserInfo extends Component { } render(props, { comments, isLoading }) { - const { user: { name, id, isDefaultPicture, picture }, onClose } = props; + const { user: { name, id }, onClose } = props; return ( -
- +

Last comments by {name}

{id}

@@ -57,7 +52,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 13ed544d..a176a70e 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 8303313c..3db9101d 100644 --- a/web/app/embed.js +++ b/web/app/embed.js @@ -56,54 +56,6 @@ 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 = ` -