diff options
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 28 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_header.jsx | 2 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_info.jsx | 15 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 17 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 8 |
5 files changed, 58 insertions, 12 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 0a4840050..21d335a51 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -18,9 +18,12 @@ export default class Post extends React.Component { super(props); this.handleCommentClick = this.handleCommentClick.bind(this); + this.handleDropdownOpened = this.handleDropdownOpened.bind(this); this.forceUpdateInfo = this.forceUpdateInfo.bind(this); - this.state = {}; + this.state = { + dropdownOpened: false + }; } handleCommentClick(e) { e.preventDefault(); @@ -35,11 +38,16 @@ export default class Post extends React.Component { results: null }); } + handleDropdownOpened(opened) { + this.setState({ + dropdownOpened: opened + }); + } forceUpdateInfo() { this.refs.info.forceUpdate(); this.refs.header.forceUpdate(); } - shouldComponentUpdate(nextProps) { + shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } @@ -88,6 +96,14 @@ export default class Post extends React.Component { return true; } + if (nextProps.emojis !== this.props.emojis) { + return true; + } + + if (nextState.dropdownOpened !== this.state.dropdownOpened) { + return true; + } + return false; } render() { @@ -187,11 +203,16 @@ export default class Post extends React.Component { profilePicContainer = ''; } + let dropdownOpenedClass = ''; + if (this.state.dropdownOpened) { + dropdownOpenedClass = 'post--hovered'; + } + return ( <div> <div id={'post_' + post.id} - className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls} + className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls + ' ' + dropdownOpenedClass} > <div className={'post__content ' + centerClass}> {profilePicContainer} @@ -202,6 +223,7 @@ export default class Post extends React.Component { sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} + handleDropdownOpened={this.handleDropdownOpened} isLastComment={this.props.isLastComment} sameUser={this.props.sameUser} user={this.props.user} diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 727b005e7..e76358304 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -64,6 +64,7 @@ export default class PostHeader extends React.Component { post={post} commentCount={this.props.commentCount} handleCommentClick={this.props.handleCommentClick} + handleDropdownOpened={this.props.handleDropdownOpened} allowReply='true' isLastComment={this.props.isLastComment} sameUser={this.props.sameUser} @@ -90,6 +91,7 @@ PostHeader.propTypes = { commentCount: React.PropTypes.number.isRequired, isLastComment: React.PropTypes.bool.isRequired, handleCommentClick: React.PropTypes.func.isRequired, + handleDropdownOpened: React.PropTypes.func.isRequired, sameUser: React.PropTypes.bool.isRequired, compactDisplay: React.PropTypes.bool, displayNameType: React.PropTypes.string, diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 76d4df1cc..d74be4c72 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -18,16 +18,20 @@ export default class PostInfo extends React.Component { constructor(props) { super(props); - this.dropdownPosition = this.dropdownPosition.bind(this); + this.handleDropdownClick = this.handleDropdownClick.bind(this); this.handlePermalink = this.handlePermalink.bind(this); } - dropdownPosition(e) { + handleDropdownClick(e) { var position = $('#post-list').height() - $(e.target).offset().top; var dropdown = $(e.target).closest('.col__reply').find('.dropdown-menu'); if (position < dropdown.height()) { dropdown.addClass('bottom'); } } + componentDidMount() { + $('#post_dropdown' + this.props.post.id).on('shown.bs.dropdown', () => this.props.handleDropdownOpened(true)); + $('#post_dropdown' + this.props.post.id).on('hidden.bs.dropdown', () => this.props.handleDropdownOpened(false)); + } createDropdown() { var post = this.props.post; var isOwner = this.props.currentUser.id === post.user_id; @@ -140,14 +144,16 @@ export default class PostInfo extends React.Component { } return ( - <div> + <div + id={'post_dropdown' + this.props.post.id} + > <a href='#' className='dropdown-toggle post__dropdown theme' type='button' data-toggle='dropdown' aria-expanded='false' - onClick={this.dropdownPosition} + onClick={this.handleDropdownClick} /> <ul className='dropdown-menu' @@ -231,6 +237,7 @@ PostInfo.propTypes = { isLastComment: React.PropTypes.bool.isRequired, allowReply: React.PropTypes.string.isRequired, handleCommentClick: React.PropTypes.func.isRequired, + handleDropdownOpened: React.PropTypes.func.isRequired, sameUser: React.PropTypes.bool.isRequired, currentUser: React.PropTypes.object.isRequired, compactDisplay: React.PropTypes.bool, diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index ab7c851ea..50158ccc2 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -495,6 +495,20 @@ body.ios { } } + &.post--hovered { + .dropdown, + .comment-icon__container, + .post__reply, + .post__remove, + .permalink-icon { + visibility: visible; + } + + .post__body { + background: transparent !important; + } + } + &.post--highlight { background-color: beige; } @@ -672,7 +686,8 @@ body.ios { &.same--user { padding: 0 .5em 0 1em; - &:hover { + &:hover, + &.post--hovered { .post__time { @include opacity(.5); } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 5f88f5b73..bb17c2fdc 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -598,7 +598,7 @@ export function applyTheme(theme) { } if (theme.centerChannelBg) { - changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); @@ -619,7 +619,7 @@ export function applyTheme(theme) { if (theme.centerChannelColor) { changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); + changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); @@ -659,10 +659,10 @@ export function applyTheme(theme) { changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('.app__body .modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.app__body .post.current--user .post__body, .app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre, .app__body .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.app__body .post.current--user .post__body, .app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre, .app__body .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); - changeCss('.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.app__body .post:hover, .app__body .post.post--hovered, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08), 1); changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .suggestion--selected, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); |