New: Many UI Updates and Performance Tweaks

frontend/src/Components/Menu/FilterMenu.css

@@ -1,5 +1,5 @@
 .filterMenu {
-  composes: menu from './Menu.css';
+  composes: menu from '~./Menu.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Menu/Menu.js

@@ -38,6 +38,9 @@ class Menu extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._menuRef = {};
+    this._menuContentRef = {};
+
     this.state = {
       isMenuOpen: false,
       maxHeight: 0
@@ -60,7 +63,7 @@ class Menu extends Component {
       return;
     }
 
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
 
     if (!menu) {
       return;
@@ -73,9 +76,13 @@ class Menu extends Component {
   }
 
   setMaxHeight() {
-    this.setState({
-      maxHeight: this.getMaxHeight()
-    });
+    const maxHeight = this.getMaxHeight();
+
+    if (maxHeight !== this.state.maxHeight) {
+      this.setState({
+        maxHeight
+      });
+    }
   }
 
   _addListener() {
@@ -99,10 +106,10 @@ class Menu extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
-    const menuContent = ReactDOM.findDOMNode(this.refs.menuContent);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
+    const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
 
-    if (!menu) {
+    if (!menu || !menuContent) {
       return;
     }
 
@@ -116,7 +123,17 @@ class Menu extends Component {
     this.setMaxHeight();
   }
 
-  onWindowScroll = () => {
+  onWindowScroll = (event) => {
+    if (!this._menuContentRef.current) {
+      return;
+    }
+
+    const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
+
+    if (menuContent && menuContent.contains(event.target)) {
+      return;
+    }
+
     this.setMaxHeight();
   }
 
@@ -158,35 +175,46 @@ class Menu extends Component {
       }
     );
 
-    const content = React.cloneElement(
-      childrenArray[1],
-      {
-        ref: 'menuContent',
-        alignMenu,
-        maxHeight,
-        isOpen: isMenuOpen
-      }
-    );
-
     return (
       <TetherComponent
         classes={{
           element: styles.tether
         }}
         {...tetherOptions[alignMenu]}
-      >
-        <div
-          ref="menu"
-          className={className}
-        >
-          {button}
-        </div>
+        renderTarget={
+          (ref) => {
+            this._menuRef = ref;
 
-        {
-          isMenuOpen &&
-            content
+            return (
+              <div
+                ref={ref}
+                className={className}
+              >
+                {button}
+              </div>
+            );
+          }
         }
-      </TetherComponent>
+        renderElement={
+          (ref) => {
+            this._menuContentRef = ref;
+
+            if (!isMenuOpen) {
+              return null;
+            }
+
+            return React.cloneElement(
+              childrenArray[1],
+              {
+                ref,
+                alignMenu,
+                maxHeight,
+                isOpen: isMenuOpen
+              }
+            );
+          }
+        }
+      />
     );
   }
 }

frontend/src/Components/Menu/PageMenuButton.css

@@ -1,5 +1,5 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
   &:hover {
     color: #666;

frontend/src/Components/Menu/ToolbarMenuButton.css

@@ -1,11 +1,16 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
+  padding-top: 4px;
   width: $toolbarButtonWidth;
   height: $toolbarHeight;
   text-align: center;
 }
 
-.label {
-  composes: label from 'Components/Page/Toolbar/PageToolbarButton.css';
+.labelContainer {
+  composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
+}
+
+.label {
+  composes: label from '~Components/Page/Toolbar/PageToolbarButton.css';
 }

frontend/src/Components/Menu/ToolbarMenuButton.js

@@ -22,8 +22,10 @@ function ToolbarMenuButton(props) {
           size={21}
         />
 
-        <div className={styles.label}>
-          {text}
+        <div className={styles.labelContainer}>
+          <div className={styles.label}>
+            {text}
+          </div>
         </div>
       </div>
     </MenuButton>