From fea398483e27e3f3e92fb8eb80b6ab1d54a95d13 Mon Sep 17 00:00:00 2001 From: Aleksey Gurianov Date: Fri, 6 Jul 2018 03:08:53 +0400 Subject: [PATCH] Revert "Add: user-info in iframe Issue #98" This reverts commit bae2b8dcaa65aca726d16c63ce4147e7b3ba3518. --- 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, 18 insertions(+), 234 deletions(-) delete mode 100644 web/app/components/user-info/__avatar/_default/user-info__avatar_default.scss delete mode 100644 web/app/components/user-info/__avatar/user-info__avatar.scss delete mode 100644 web/app/components/user-info/__avatar/user-info__avatar.svg delete mode 100644 web/app/components/user-info/_iframe/user-info_iframe.scss delete mode 100644 web/app/user-info.js delete mode 100644 web/user-info.ejs 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 = ` -