figbertmath

commit 74c125455aba0f112360afc1fbf9c3a4fce5b805
parent 908be298e2c0beb1cfe05776cbc84da6f232236b
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Mon,  2 Dec 2019 21:03:42 -0800

Add largeButton type 'range' for raising and lowering a provided value

For certain kinds of solutions (read: simultaneous equations) clicking a button raise a value and then eventually resetting is not convenient or easy. This new class provides an easy way to raise and lower a value as an alternative to a 'type' button.

Diffstat:
M
src/components/lowLevel/largeButton/index.js
 | 
32
+++++++++++++++++++++++++++-----
M
src/components/lowLevel/largeButton/styles.module.css
 | 
28
+++++++++++++++++++++++++++-

2 files changed, 54 insertions(+), 6 deletions(-)
diff --git a/src/components/lowLevel/largeButton/index.js b/src/components/lowLevel/largeButton/index.js
@@ -10,7 +10,7 @@ export class LargeButton extends React.Component {
             return (
                 <button
                     type='button'
-                    className={styles.button}
+                    className={styles.columnButton}
                     value={this.props.value}
                     onClick={this.props.onModeClick}
                 >
@@ -21,13 +21,35 @@ export class LargeButton extends React.Component {
             return (
                 <button
                     type='button'
-                    className={styles.button}
+                    className={styles.columnButton}
                     value={this.props.value}
                     onClick={this.props.onClick}
                 >
                     {this.props.displayValue}
                 </button>
             );
+        } else if (this.props.value === 'range') {
+            return (
+                <div className={styles.rowButton}>
+                    <button
+                        type='button'
+                        className={styles.transparentButton}
+                        value='raise'
+                        onClick={this.props.onClick}
+                    >
+                        +
+                    </button>
+                    {this.props.displayValue}
+                    <button
+                        type='button'
+                        className={styles.transparentButton}
+                        value='lower'
+                        onClick={this.props.onClick}
+                    >
+                        -
+                    </button>
+                </div>
+            );
         }
         if (canBeDisabled) {
             if (!this.props.disabledTruth) {
@@ -45,7 +67,7 @@ export class LargeButton extends React.Component {
                 );
             } else {
                 return (
-                    <button className={styles.button} value={this.props.value} onClick={this.props.onClick}>
+                    <button className={styles.columnButton} value={this.props.value} onClick={this.props.onClick}>
                         {this.props.displayValue} =
                         <input
                             type='number'
@@ -58,7 +80,7 @@ export class LargeButton extends React.Component {
             }
         } else if (acceptsInput) {
             return (
-                <div className={styles.button}>
+                <div className={styles.columnButton}>
                     {this.props.displayValue} =
                     <input
                         type='number'
@@ -72,7 +94,7 @@ export class LargeButton extends React.Component {
             return (
                 <button
                     type='button'
-                    className={styles.button}
+                    className={styles.columnButton}
                     value={this.props.value}
                     onClick={this.props.onClick}
                 >
diff --git a/src/components/lowLevel/largeButton/styles.module.css b/src/components/lowLevel/largeButton/styles.module.css
@@ -9,7 +9,7 @@ input {
     font-family: Tomorrow, -apple-system, sans-serif;
 }
 
-.button {
+.columnButton {
     background: #ac1a2d;
     color: rgba(255, 255, 255, .7);
     font-family: Tomorrow, -apple-system, sans-serif;
@@ -43,4 +43,30 @@ input {
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
+}
+
+.rowButton {
+    background: #ac1a2d;
+    color: rgba(255, 255, 255, .7);
+    font-family: Tomorrow, -apple-system, sans-serif;
+    width: 30vmax;
+    height: 5vmax;
+    margin-top: 1vmax;
+    margin-left: 1vmax;
+    margin-right: 1vmax;
+    font-size: 2vmax;
+    text-align: center;
+    border-radius: 1vmax;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.transparentButton {
+    background: transparent;
+    color: rgba(255, 255, 255, .7);
+    font-family: Tomorrow, -apple-system, sans-serif;
+    border: 0;
+    font-size: 4vmax;
 }
 \ No newline at end of file