Plt 3475 - Post control improvements (#3538)

* Adding class to post when dropdown is active. * plt-3475 - Post controls improvements
2016-07-11 18:37:42 +05:00
--- 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}
--- 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,
--- 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,
--- 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);
                }
--- 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);