feat: add support for vertical slider and add Tilt Slider (non functi…

…onal for now) [PT-188086293]
concord-consortium · Aug 8, 2024 · 0d7c8a7 · 0d7c8a7
1 parent c258948
commit 0d7c8a7
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -11,7 +11,7 @@ import { Header } from "./header";
 import "../assets/scss/App.scss";
 
 export const App: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"location" | "simulation">("location");
+  const [activeTab, setActiveTab] = useState<"location" | "simulation">("simulation");
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [dayOfYear, setDayOfYear] = useState<string>("280");

diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
@@ -49,6 +49,24 @@ body {
       }
     }
 
+    .tilt-slider {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      width: 36px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+
+      .slider-container {
+        height: 90px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+      }
+    }
+
     .view-type-dropdown {
       position: absolute;
       top: 10px;

diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
@@ -194,6 +194,9 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
     setLocationSearch("");
   };
 
+  const handleTiltSliderChange = (event: any, ui: any) => {
+  };
+
   const handleMyLocationChange = (lat: number, long: number, name: string) => {
     const rot = -long * Math.PI / 180;
     setSimState(prevState => ({ ...prevState, lat, long, earthRotation: rot }));
@@ -242,6 +245,21 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
               { t("~DAILY_ROTATION", simLang) }
             </label>
           </div>
+          <div className="tilt-slider">
+            <label>{ t("~TILT_VIEW", simLang) }</label>
+            <div className="slider-container">
+              <Slider
+                orientation="vertical"
+                value={0}
+                min={0}
+                max={90}
+                step={1}
+                slide={handleTiltSliderChange}
+                log={log}
+                logId="Tilt"
+              />
+            </div>
+          </div>
         </div>
         <div className="day">
           <label>{ t("~DAY", simLang) }:</label>

diff --git a/src/grasp-seasons/components/slider/slider.scss b/src/grasp-seasons/components/slider/slider.scss
@@ -31,4 +31,16 @@
   .ui-slider-tick-label {
     margin-top: 15px;
   }
+
+  &.ui-slider-vertical {
+    width: 8px;
+    height: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+
+    .ui-slider-handle {
+      margin-left: -10px;
+      margin-bottom: -15px;
+    }
+  }
 }
diff --git a/src/grasp-seasons/components/slider/slider.tsx b/src/grasp-seasons/components/slider/slider.tsx
@@ -15,6 +15,7 @@ interface IProps {
   log: ((action: string, data: any) => void) | null;
   start?: (event: any, ui: any) => void;
   stop?: (event: any, ui: any) => void;
+  orientation?: "horizontal" | "vertical";
 }
 interface IOptions extends IProps {
   _slideStart: number;