From 613a8736111456bf93ae09f6f8814dca1de187ed Mon Sep 17 00:00:00 2001
From: Kacper Kula <kulak@kulak.at>
Date: Thu, 8 Jun 2017 13:46:11 +0200
Subject: [PLT-6394] [...] menu no longer hides when not hovered. (#6353)

* [PLT-6394] [...] menu no longer hides when not hovered.

* Fixed dropdown visibility to use same method as main window.
---
 webapp/components/rhs_comment.jsx   | 23 +++++++++++++++++++++--
 webapp/components/rhs_dropdown.jsx  |  7 +++++--
 webapp/components/rhs_root_post.jsx | 23 +++++++++++++++++++++--
 3 files changed, 47 insertions(+), 6 deletions(-)

(limited to 'webapp/components')

diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 85c2fc1de..b7e82d903 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -46,6 +46,7 @@ export default class RhsComment extends React.Component {
         this.unpinPost = this.unpinPost.bind(this);
         this.reactEmojiClick = this.reactEmojiClick.bind(this);
         this.emojiPickerClick = this.emojiPickerClick.bind(this);
+        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
@@ -56,7 +57,8 @@ export default class RhsComment extends React.Component {
             width: '',
             height: '',
             showReactEmojiPicker: false,
-            reactPickerOffset: 15
+            reactPickerOffset: 15,
+            dropdownOpened: false
         };
     }
 
@@ -135,6 +137,10 @@ export default class RhsComment extends React.Component {
             return true;
         }
 
+        if (this.state.dropdownOpened !== nextState.dropdownOpened) {
+            return true;
+        }
+
         return false;
     }
 
@@ -318,7 +324,10 @@ export default class RhsComment extends React.Component {
         }
 
         return (
-            <RhsDropdown dropdownContents={dropdownContents}/>
+            <RhsDropdown
+                dropdownContents={dropdownContents}
+                handleDropdownOpened={this.handleDropdownOpened}
+            />
         );
     }
 
@@ -386,9 +395,19 @@ export default class RhsComment extends React.Component {
             className += ' post--pinned';
         }
 
+        if (this.state.dropdownOpened) {
+            className += ' post--hovered';
+        }
+
         return className;
     }
 
+    handleDropdownOpened(isOpened) {
+        this.setState({
+            dropdownOpened: isOpened
+        });
+    }
+
     render() {
         const post = this.props.post;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
diff --git a/webapp/components/rhs_dropdown.jsx b/webapp/components/rhs_dropdown.jsx
index e88d2a2bd..9323e1cec 100644
--- a/webapp/components/rhs_dropdown.jsx
+++ b/webapp/components/rhs_dropdown.jsx
@@ -13,7 +13,8 @@ import * as Agent from 'utils/user_agent.jsx';
 
 export default class RhsDropdown extends Component {
     static propTypes = {
-        dropdownContents: PropTypes.array.isRequired
+        dropdownContents: PropTypes.array.isRequired,
+        handleDropdownOpened: PropTypes.func
     }
 
     constructor(props) {
@@ -26,6 +27,9 @@ export default class RhsDropdown extends Component {
 
     toggleDropdown = () => {
         const showDropdown = !this.state.showDropdown;
+        if (this.props.handleDropdownOpened) {
+            this.props.handleDropdownOpened(showDropdown);
+        }
         if (Agent.isMobile() || Agent.isMobileApp()) {
             const scroll = document.querySelector('.scrollbar--view');
             if (showDropdown) {
@@ -56,4 +60,3 @@ export default class RhsDropdown extends Component {
         );
     }
 }
-
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index f48b4e86a..c00022e9e 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -45,6 +45,7 @@ export default class RhsRootPost extends React.Component {
         this.unpinPost = this.unpinPost.bind(this);
         this.reactEmojiClick = this.reactEmojiClick.bind(this);
         this.emojiPickerClick = this.emojiPickerClick.bind(this);
+        this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
 
         this.canEdit = false;
         this.canDelete = false;
@@ -55,7 +56,8 @@ export default class RhsRootPost extends React.Component {
             width: '',
             height: '',
             showRHSEmojiPicker: false,
-            testStateObj: true
+            testStateObj: true,
+            dropdownOpened: false
         };
     }
 
@@ -121,6 +123,10 @@ export default class RhsRootPost extends React.Component {
             return true;
         }
 
+        if (this.state.dropdownOpened !== nextState.dropdownOpened) {
+            return true;
+        }
+
         return false;
     }
 
@@ -197,9 +203,19 @@ export default class RhsRootPost extends React.Component {
             className += ' post--pinned';
         }
 
+        if (this.state.dropdownOpened) {
+            className += ' post--hovered';
+        }
+
         return className;
     }
 
+    handleDropdownOpened(isOpened) {
+        this.setState({
+            dropdownOpened: isOpened
+        });
+    }
+
     render() {
         const post = this.props.post;
         const user = this.props.user;
@@ -413,7 +429,10 @@ export default class RhsRootPost extends React.Component {
         var rootOptions = '';
         if (dropdownContents.length > 0) {
             rootOptions = (
-                <RhsDropdown dropdownContents={dropdownContents}/>
+                <RhsDropdown
+                    dropdownContents={dropdownContents}
+                    handleDropdownOpened={this.handleDropdownOpened}
+                />
             );
         }
 
-- 
cgit v1.2.3-1-g7c22