From 61dd0bb4d0b220f57667e8e60fce187dd6964d67 Mon Sep 17 00:00:00 2001
From: Bhawesh Bhansali <bhansalibhawesh85@gmail.com>
Date: Sat, 3 Nov 2018 01:25:06 +0530
Subject: [PATCH] [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 https://github.com/processing/p5.js-web-editor/issues/689

* handle case for user input to input field, also add min and max for indentation amount
---
 client/modules/IDE/components/Preferences.jsx | 16 ++++++++++++++++
 client/styles/abstracts/_placeholders.scss    |  6 +++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index f809452e..27eddd7d 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/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>
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 9f3a2038..317a0330 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/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');
+		}
 	}
 }