Align the WindowTopMenu and add the selected state styling to the...

Align the WindowTopMenu and add the selected state styling to the WindowTopMenuButton when the menu is open.

__tests__/src/components/WindowTopMenuButton.test.js

@@ -10,7 +10,7 @@ function createWrapper(props) {
   return shallow(
     <WindowTopMenuButton
       windowId="xyz"
-      classes={{}}
+      classes={{ ctrlBtnSelected: 'ctrlBtnSelected' }}
       t={str => str}
       {...props}
     />,
@@ -51,4 +51,13 @@ describe('WindowTopMenuButton', () => {
     wrapper.instance().handleMenuClose();
     expect(wrapper.find(WindowTopMenu).first().props().anchorEl).toBe(null);
   });
+
+  it('the button has a class indicating that it is "selected" once it is clicked', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
+    wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 'anElement' });
+    expect(wrapper.find('.ctrlBtnSelected').length).toBe(1);
+    wrapper.find('WithStyles(IconButton)').simulate('click', {});
+    expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
+  });
 });

src/components/WindowTopMenu.js

@@ -26,6 +26,15 @@ export class WindowTopMenu extends Component {
           id={`window-menu_${windowId}`}
           container={document.querySelector(`#${containerId} .${ns('viewer')}`)}
           anchorEl={anchorEl}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          getContentAnchorEl={null}
           open={Boolean(anchorEl)}
           onClose={handleClose}
         >

src/components/WindowTopMenuButton.js

 import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVertSharp';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import WindowTopMenu from '../containers/WindowTopMenu';
 
@@ -50,7 +51,7 @@ export class WindowTopMenuButton extends Component {
         <IconButton
           color="inherit"
           aria-label={t('windowMenu')}
-          className={classes.ctrlBtn}
+          className={classNames(classes.ctrlBtn, (anchorEl ? classes.ctrlBtnSelected : null))}
           aria-haspopup="true"
           onClick={this.handleMenuClick}
           aria-owns={anchorEl ? `window-menu_${windowId}` : undefined}

src/containers/WindowTopMenuButton.js

@@ -13,6 +13,9 @@ const styles = theme => ({
   ctrlBtn: {
     margin: theme.spacing.unit,
   },
+  ctrlBtnSelected: {
+    backgroundColor: theme.palette.action.selected,
+  },
 });
 
 const enhance = compose(