Various UI Fixes and Updates

Closes #188
Closes #185
Closes #187

frontend/src/Settings/Quality/Definition/QualityDefinition.js

@@ -28,6 +28,29 @@ function getValue(value) {
 
 class QualityDefinition extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._forceUpdateTimeout = null;
+  }
+
+  componentDidMount() {
+    // A hack to deal with a bug in the slider component until a fix for it
+    // lands and an updated version is available.
+    // See: https://github.com/mpowaga/react-slider/issues/115
+
+    this._forceUpdateTimeout = setTimeout(() => this.forceUpdate(), 1);
+  }
+
+  componentWillUnmount() {
+    if (this._forceUpdateTimeout) {
+      clearTimeout(this._forceUpdateTimeout);
+    }
+  }
+
   //
   // Listeners
 
@@ -131,6 +154,8 @@ class QualityDefinition extends Component {
                 <NumberInput
                   className={styles.sizeInput}
                   name={`${id}.min`}
+                  min={slider.min}
+                  max={maxSize ? maxSize - 10 : slider.max - 10}
                   value={minSize || slider.min}
                   isFloat={true}
                   onChange={this.onMinSizeChange}
@@ -143,6 +168,7 @@ class QualityDefinition extends Component {
                 <NumberInput
                   className={styles.sizeInput}
                   name={`${id}.max`}
+                  min={minSize + 10}
                   value={maxSize || slider.max}
                   isFloat={true}
                   onChange={this.onMaxSizeChange}

frontend/src/Settings/Quality/Definition/QualityDefinitionConnector.js

@@ -40,7 +40,7 @@ class QualityDefinitionConnector extends Component {
       this.props.setQualityDefinitionValue({ id, name: 'minSize', value: minSize });
     }
 
-    if (minSize !== currentMaxSize) {
+    if (maxSize !== currentMaxSize) {
       this.props.setQualityDefinitionValue({ id, name: 'maxSize', value: maxSize });
     }
   }

frontend/src/Settings/Quality/Definition/QualityDefinitionsConnector.js

@@ -26,8 +26,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchQualityDefinitions,
-  saveQualityDefinitions
+  dispatchFetchQualityDefinitions: fetchQualityDefinitions,
+  dispatchSaveQualityDefinitions: saveQualityDefinitions
 };
 
 class QualityDefinitionsConnector extends Component {
@@ -36,26 +36,36 @@ class QualityDefinitionsConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.fetchQualityDefinitions();
+    this.props.dispatchFetchQualityDefinitions();
+
+    const {
+      dispatchFetchQualityDefinitions,
+      dispatchSaveQualityDefinitions,
+      onChildMounted
+    } = this.props;
+
+    dispatchFetchQualityDefinitions();
+    onChildMounted(dispatchSaveQualityDefinitions);
   }
 
   componentDidUpdate(prevProps) {
     const {
-      hasPendingChanges
+      hasPendingChanges,
+      isSaving,
+      onChildStateChange
     } = this.props;
 
-    if (hasPendingChanges !== prevProps.hasPendingChanges) {
-      this.props.onHasPendingChange(hasPendingChanges);
+    if (
+      prevProps.isSaving !== isSaving ||
+      prevProps.hasPendingChanges !== hasPendingChanges
+    ) {
+      onChildStateChange({
+        isSaving,
+        hasPendingChanges
+      });
     }
   }
 
-  //
-  // Control
-
-  save = () => {
-    this.props.saveQualityDefinitions();
-  }
-
   //
   // Render
 
@@ -69,10 +79,12 @@ class QualityDefinitionsConnector extends Component {
 }
 
 QualityDefinitionsConnector.propTypes = {
+  isSaving: PropTypes.bool.isRequired,
   hasPendingChanges: PropTypes.bool.isRequired,
-  fetchQualityDefinitions: PropTypes.func.isRequired,
-  saveQualityDefinitions: PropTypes.func.isRequired,
-  onHasPendingChange: PropTypes.func.isRequired
+  dispatchFetchQualityDefinitions: PropTypes.func.isRequired,
+  dispatchSaveQualityDefinitions: PropTypes.func.isRequired,
+  onChildMounted: PropTypes.func.isRequired,
+  onChildStateChange: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps, null, { withRef: true })(QualityDefinitionsConnector);

frontend/src/Settings/Quality/Quality.js

@@ -12,7 +12,10 @@ class Quality extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._saveCallback = null;
+
     this.state = {
+      isSaving: false,
       hasPendingChanges: false
     };
   }
@@ -20,35 +23,41 @@ class Quality extends Component {
   //
   // Listeners
 
-  setQualityDefinitionsRef = (ref) => {
-    this._qualityDefinitions = ref;
+  onChildMounted = (saveCallback) => {
+    this._saveCallback = saveCallback;
   }
 
-  onHasPendingChange = (hasPendingChanges) => {
-    this.setState({
-      hasPendingChanges
-    });
+  onChildStateChange = (payload) => {
+    this.setState(payload);
   }
 
   onSavePress = () => {
-    this._qualityDefinitions.getWrappedInstance().save();
+    if (this._saveCallback) {
+      this._saveCallback();
+    }
   }
 
   //
   // Render
 
   render() {
+    const {
+      isSaving,
+      hasPendingChanges
+    } = this.state;
+
     return (
       <PageContent title="Quality Settings">
         <SettingsToolbarConnector
-          hasPendingChanges={this.state.hasPendingChanges}
+          isSaving={isSaving}
+          hasPendingChanges={hasPendingChanges}
           onSavePress={this.onSavePress}
         />
 
         <PageContentBodyConnector>
           <QualityDefinitionsConnector
-            ref={this.setQualityDefinitionsRef}
-            onHasPendingChange={this.onHasPendingChange}
+            onChildMounted={this.onChildMounted}
+            onChildStateChange={this.onChildStateChange}
           />
         </PageContentBodyConnector>
       </PageContent>