UI Action Handler Changes, Misc Fixes

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -55,11 +55,17 @@
   height: auto !important;
 }
 
-.optionsInnerModalBody {
-  composes: innerModalBody from 'Components/Modal/ModalBody.css';
+.optionsModalBody {
+  composes: modalBody from 'Components/Modal/ModalBody.css';
 
-  padding: 0;
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+.optionsModalScroller {
+  composes: scroller from 'Components/Scroller/Scroller.css';
   border: 1px solid $inputBorderColor;
   border-radius: 4px;
   background-color: $white;

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -7,11 +7,12 @@ import TetherComponent from 'react-tether';
 import classNames from 'classnames';
 import isMobileUtil from 'Utilities/isMobile';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
-import { icons } from 'Helpers/Props';
+import { icons, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
+import Scroller from 'Components/Scroller/Scroller';
 import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
 import EnhancedSelectInputOption from './EnhancedSelectInputOption';
 import styles from './EnhancedSelectInput.css';
@@ -346,24 +347,28 @@ class EnhancedSelectInput extends Component {
               onModalClose={this.onOptionsModalClose}
             >
               <ModalBody
+                className={styles.optionsModalBody}
                 innerClassName={styles.optionsInnerModalBody}
+                scrollDirection={scrollDirections.NONE}
               >
-                {
-                  values.map((v, index) => {
-                    return (
-                      <OptionComponent
-                        key={v.key}
-                        id={v.key}
-                        isSelected={index === selectedIndex}
-                        {...v}
-                        isMobile={true}
-                        onSelect={this.onSelect}
-                      >
-                        {v.value}
-                      </OptionComponent>
-                    );
-                  })
-                }
+                <Scroller className={styles.optionsModalScroller}>
+                  {
+                    values.map((v, index) => {
+                      return (
+                        <OptionComponent
+                          key={v.key}
+                          id={v.key}
+                          isSelected={index === selectedIndex}
+                          {...v}
+                          isMobile={true}
+                          onSelect={this.onSelect}
+                        >
+                          {v.value}
+                        </OptionComponent>
+                      );
+                    })
+                  }
+                </Scroller>
               </ModalBody>
             </Modal>
         }

frontend/src/Components/Menu/FilterMenu.js

@@ -9,6 +9,7 @@ function FilterMenu(props) {
   const {
     className,
     children,
+    isDisabled,
     ...otherProps
   } = props;
 
@@ -20,6 +21,7 @@ function FilterMenu(props) {
       <ToolbarMenuButton
         iconName={icons.FILTER}
         text="Filter"
+        isDisabled={isDisabled}
       />
       {children}
     </Menu>
@@ -28,11 +30,13 @@ function FilterMenu(props) {
 
 FilterMenu.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  isDisabled: PropTypes.bool.isRequired
 };
 
 FilterMenu.defaultProps = {
-  className: styles.filterMenu
+  className: styles.filterMenu,
+  isDisabled: false
 };
 
 export default FilterMenu;

frontend/src/Components/Menu/MenuButton.css

@@ -13,3 +13,7 @@
     color: $toobarButtonHoverColor;
   }
 }
+
+.isDisabled {
+  color: $disabledColor;
+}

frontend/src/Components/Menu/MenuButton.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import Link from 'Components/Link/Link';
 import styles from './MenuButton.css';
 
@@ -12,13 +13,18 @@ class MenuButton extends Component {
     const {
       className,
       children,
+      isDisabled,
       onPress,
       ...otherProps
     } = this.props;
 
     return (
       <Link
-        className={className}
+        className={classNames(
+          className,
+          isDisabled && styles.isDisabled
+        )}
+        isDisabled={isDisabled}
         onPress={onPress}
         {...otherProps}
       >
@@ -31,11 +37,13 @@ class MenuButton extends Component {
 MenuButton.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
   onPress: PropTypes.func
 };
 
 MenuButton.defaultProps = {
-  className: styles.menuButton
+  className: styles.menuButton,
+  isDisabled: false
 };
 
 export default MenuButton;

frontend/src/Components/Menu/SortMenu.js

@@ -8,6 +8,7 @@ function SortMenu(props) {
   const {
     className,
     children,
+    isDisabled,
     ...otherProps
   } = props;
 
@@ -19,6 +20,7 @@ function SortMenu(props) {
       <ToolbarMenuButton
         iconName={icons.SORT}
         text="Sort"
+        isDisabled={isDisabled}
       />
       {children}
     </Menu>
@@ -27,7 +29,12 @@ function SortMenu(props) {
 
 SortMenu.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  isDisabled: PropTypes.bool.isRequired
+};
+
+SortMenu.defaultProps = {
+  isDisabled: false
 };
 
 export default SortMenu;

frontend/src/Components/Menu/ViewMenu.js

@@ -7,6 +7,7 @@ import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
 function ViewMenu(props) {
   const {
     children,
+    isDisabled,
     ...otherProps
   } = props;
 
@@ -17,6 +18,7 @@ function ViewMenu(props) {
       <ToolbarMenuButton
         iconName={icons.VIEW}
         text="View"
+        isDisabled={isDisabled}
       />
       {children}
     </Menu>
@@ -24,7 +26,12 @@ function ViewMenu(props) {
 }
 
 ViewMenu.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  isDisabled: PropTypes.bool.isRequired
+};
+
+ViewMenu.defaultProps = {
+  isDisabled: false
 };
 
 export default ViewMenu;

frontend/src/Components/Page/Header/ArtistSearchResult.css

@@ -6,7 +6,7 @@
 
 .poster {
   width: 35px;
-  height: 50px;
+  height: 35px;
 }
 
 .titles {

frontend/src/Components/SignalRConnector.js

@@ -72,7 +72,7 @@ class SignalRConnector extends Component {
 
     this.signalRconnectionOptions = { transport: ['webSockets', 'longPolling'] };
     this.signalRconnection = null;
-    this.retryInterval = 5;
+    this.retryInterval = 1;
     this.retryTimeoutId = null;
     this.disconnectedTime = null;
   }
@@ -107,7 +107,7 @@ class SignalRConnector extends Component {
 
     this.retryTimeoutId = setTimeout(() => {
       this.signalRconnection.start(this.signalRconnectionOptions);
-      this.retryInterval = Math.min(this.retryInterval + 5, 30);
+      this.retryInterval = Math.min(this.retryInterval + 1, 10);
     }, this.retryInterval * 1000);
   }
 
@@ -262,7 +262,7 @@ class SignalRConnector extends Component {
   }
 
   handleQueueStatus = (body) => {
-    this.props.update({ section: 'queueStatus', data: body.resource });
+    this.props.update({ section: 'queue.status', data: body.resource });
   }
 
   handleVersion = (body) => {