Merge pull request #40 from concord-consortium/188162665-text-inputs

Update style of text inputs, disable square lat/long buttons when necessary
concord-consortium · Aug 28, 2024 · c0924fd · c0924fd
2 parents 67c9445 + ea4d70e
commit c0924fd
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 21 deletions.
diff --git a/src/components/location-tab.scss b/src/components/location-tab.scss
@@ -39,11 +39,11 @@
       margin-right: 10px;
     }
     input {
-      width: 236px;
-      padding: 7px 8px;
-      border-radius: $input-border-radius;
-      box-sizing: border-box;
-      border: $input-border;
+      @include text-input;
+      & {
+        width: 220px;
+        padding-left: 8px;
+      }
     }
   }
 

diff --git a/src/components/square-button.scss b/src/components/square-button.scss
@@ -18,4 +18,8 @@
   &:active {
     background-color: $teal-light-50;
   }
+  &:disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
 }
diff --git a/src/components/square-button.tsx b/src/components/square-button.tsx
@@ -5,12 +5,13 @@ import "./square-button.scss";
 interface ISquareButtonProps {
   onClick?: () => void;
   children?: React.ReactNode;
+  disabled?: boolean;
 }
 
 export const SquareButton = (props: ISquareButtonProps) => {
-  const { children, onClick } = props;
+  const { children, onClick, disabled } = props;
   return (
-    <button onClick={onClick} className="square-button">
+    <button onClick={onClick} className="square-button" disabled={disabled}>
       { children }
     </button>
   );

diff --git a/src/components/vars.scss b/src/components/vars.scss
@@ -45,3 +45,22 @@ $input-border: solid 1px rgba(23, 121, 145, 0.75);
     pointer-events: none;
   }
 }
+
+@mixin text-input {
+  color: $text-color;
+  font-family: $font-family;
+  font-size: 12px;
+  border-radius: $input-border-radius;
+  border: $input-border;
+  background-color: #fff;
+  height: 24px;
+  padding: 3px 6px;
+  outline: none;
+
+  &:hover {
+    background-color: $teal-light-12;
+  }
+  &:active, &:focus {
+    background-color: $teal-light-25;
+  }
+}
diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
@@ -167,11 +167,7 @@
         margin-bottom: 17px;
 
         .lat-input, .long-input {
-          border-radius: 3px;
-          border: solid 1px rgba(23, 121, 145, 0.75);
-          background-color: #fff;
-          height: 24px;
-          padding: 3px 6px;
+          @include text-input;
         }
 
         .lat-input {

diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect, useRef, ChangeEvent, useCallback } from "react";
 import Slider from "./slider/slider";
-import { changeMonthOfDayOfYear, formatLatLongNumber, getSolarNoonIntensity, isValidLatitude, isValidLongitude } from "../../utils/daylight-utils";
+import {
+  changeMonthOfDayOfYear, formatLatLongNumber, getSolarNoonIntensity, isValidLatitude, isValidLongitude,
+  limitLatitude, limitLongitude
+} from "../../utils/daylight-utils";
 import InfiniteDaySlider from "./slider/infinite-day-slider";
 import { Dropdown } from "../../components/dropdown";
 import MyLocations from "./my-locations";
@@ -209,8 +212,8 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
   }
 
   const handleLatIncrement = (increment: number) => () => {
-    setSimState(prevState => ({ ...prevState, lat: prevState.lat + increment }));
-    setLatitude(formatLatLongNumber(simState.lat + increment));
+    setSimState(prevState => ({ ...prevState, lat: limitLatitude(prevState.lat + increment) }));
+    setLatitude(formatLatLongNumber(limitLatitude(simState.lat + increment)));
     setLocationSearch("");
   }
 
@@ -226,8 +229,8 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
   }
 
   const handleLongIncrement = (increment: number) => () => {
-    setSimState(prevState => ({ ...prevState, long: prevState.long + increment }));
-    setLongitude(formatLatLongNumber(simState.long + increment));
+    setSimState(prevState => ({ ...prevState, long: limitLongitude(prevState.long + increment) }));
+    setLongitude(formatLatLongNumber(limitLongitude(simState.long + increment)));
     setLocationSearch("");
   }
 
@@ -352,10 +355,10 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
         <div className="long-lat-sliders">
           <div className="slider-container">
             <div className="top-row">
-              <SquareButton onClick={handleLatIncrement(-5)}><ForwardBackIcon /></SquareButton>
+              <SquareButton onClick={handleLatIncrement(-5)} disabled={simState.lat <= -90}><ForwardBackIcon /></SquareButton>
               <label>{ t("~LATITUDE", simLang) }</label>
               <input className="lat-input" type="text" value={latitude} onChange={handleLatInputChange} />
-              <SquareButton onClick={handleLatIncrement(5)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+              <SquareButton onClick={handleLatIncrement(5)} disabled={simState.lat >= 90}><ForwardBackIcon style={{transform: "rotate(180deg"}}/></SquareButton>
             </div>
           <Slider
             value={simState.lat}
@@ -369,10 +372,10 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
           </div>
           <div className="slider-container">
             <div className="top-row">
-              <SquareButton onClick={handleLongIncrement(-5)}><ForwardBackIcon /></SquareButton>
+              <SquareButton onClick={handleLongIncrement(-5)} disabled={simState.long <= -180}><ForwardBackIcon /></SquareButton>
               <label>{ t("~LONGITUDE", simLang) }</label>
               <input className="long-input" type="text" value={longitude} onChange={handleLongInputChange} />
-              <SquareButton onClick={handleLongIncrement(5)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+              <SquareButton onClick={handleLongIncrement(5)} disabled={simState.long >= 180}><ForwardBackIcon style={{transform: "rotate(180deg"}}/></SquareButton>
             </div>
             <Slider
               value={simState.long}

diff --git a/src/utils/daylight-utils.ts b/src/utils/daylight-utils.ts
@@ -194,6 +194,14 @@ export function formatLatLongNumber(value: number | string) {
   return Number(value).toFixed(2).replace(/\.?0+$/, "");
 }
 
+export function limitLatitude(value: number): number {
+  return Math.min(90, Math.max(-90, value));
+}
+
+export function limitLongitude(value: number): number {
+  return Math.min(180, Math.max(-180, value));
+}
+
 export function changeMonthOfDayOfYear(dayOfYearIndex: number, monthsToAdd: number): number {
   if (dayOfYearIndex < 0 || dayOfYearIndex >= 365) {
       throw new Error("dayOfYearIndex must be between 0 and 364");