[WIP] Set min & max limits on font-size (#716)

* Set min & max limits on font-size

Disable the font-size setting button when extremum is reached.

References #689

* handle case for user input to input field, also add min and max for indentation amount

Author: bhawesh96

client/modules/IDE/components/Preferences.jsx

@@ -25,6 +25,12 @@ class Preferences extends React.Component {
     if (Number.isNaN(value)) {
       value = 16;
     }
+    if (value > 36) {
+      value = 36;
+    }
+    if (value < 8) {
+      value = 8;
+    }
     this.props.setFontSize(value);
   }
 
@@ -33,6 +39,12 @@ class Preferences extends React.Component {
     if (Number.isNaN(value)) {
       value = 2;
     }
+    if (value > 6) {
+      value = 6;
+    }
+    if (value < 0) {
+      value = 0;
+    }
     this.props.setIndentation(value);
   }
 
@@ -106,6 +118,7 @@ class Preferences extends React.Component {
                 className="preference__minus-button"
                 onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
                 aria-label="decrease font size"
+                disabled={this.props.fontSize <= 8}
               >
                 <InlineSVG src={minusUrl} alt="Decrease Font Size" />
                 <h6 className="preference__label">Decrease</h6>
@@ -125,6 +138,7 @@ class Preferences extends React.Component {
                 className="preference__plus-button"
                 onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
                 aria-label="increase font size"
+                disabled={this.props.fontSize >= 36}
               >
                 <InlineSVG src={plusUrl} alt="Increase Font Size" />
                 <h6 className="preference__label">Increase</h6>
@@ -136,6 +150,7 @@ class Preferences extends React.Component {
                 className="preference__minus-button"
                 onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
                 aria-label="decrease indentation amount"
+                disabled={this.props.indentationAmount <= 0}
               >
                 <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
                 <h6 className="preference__label">Decrease</h6>
@@ -155,6 +170,7 @@ class Preferences extends React.Component {
                 className="preference__plus-button"
                 onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
                 aria-label="increase indentation amount"
+                disabled={this.props.indentationAmount >= 6}
               >
                 <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
                 <h6 className="preference__label">Increase</h6>

client/styles/abstracts/_placeholders.scss

@@ -128,13 +128,17 @@
 		& g {
 			fill: getThemifyVariable('modal-button-color');
 		}
-		&:hover {
+		&:enabled:hover {
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
 			& g {
 				fill: getThemifyVariable('button-hover-color');
 			}
 		}
+		&:disabled:hover {
+			cursor: not-allowed;
+			background-color: getThemifyVariable('modal-button-background-color');
+		}
 	}
 }