#279 Time Improvements

NASA-AMMOS · Nov 21, 2022 · e84e29e · e84e29e
1 parent 8dc6c33
commit e84e29e
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 79 deletions.
diff --git a/config/js/config.js b/config/js/config.js
@@ -1247,7 +1247,7 @@ function makeLayerBarAndModal(d, level, options) {
         "<p>" +
 
           "<div class='row' style='margin-bottom: 0px;'>" +
-            "<div id='nameEl' class='input-field col s" + (kindEl == 'none' ? 8 : 6) + " push-s1' style='display: " + nameEl + "'>" +
+            "<div id='nameEl' class='input-field col s" + (kindEl == 'none' ? 6 : 4) + " push-s1' style='display: " + nameEl + "'>" +
               "<input id='Name" + n + "' type='text' class='validate' value='" + unescape(d.name) + "'>" +
               "<label for='Name" + n + "'>Layer Name</label>" +
             "</div>" +
@@ -1274,6 +1274,13 @@ function makeLayerBarAndModal(d, level, options) {
               "</select>" +
               "<label>Layer Type</label>" +
             "</div>" +
+            "<div id='visEl' class='input-field col s2 push-s1' style='display: " + visEl + "'>" +
+              "<select>" +
+                "<option value='true' " + visTrueSel + ">True</option>" +
+                "<option value='false' " + visFalseSel + ">False</option>" +
+              "</select>" +
+              "<label>Initial Visibility</label>" +
+            "</div>" +
           "</div>" +
 
           "<div class='row' style='margin-bottom: 0px;'>" +
@@ -1403,13 +1410,6 @@ function makeLayerBarAndModal(d, level, options) {
               "<input id='Maxz" + n + "' type='text' class='validate' value='" + d.maxZoom + "'>" +
               "<label for='Maxz" + n + "'>Maximum Zoom</label>" +
             "</div>" +
-            "<div id='visEl' class='input-field col s2 push-s1' style='display: " + visEl + "'>" +
-              "<select>" +
-                "<option value='true' " + visTrueSel + ">True</option>" +
-                "<option value='false' " + visFalseSel + ">False</option>" +
-              "</select>" +
-              "<label>Initial Visibility</label>" +
-            "</div>" +
             "<div id='initOpacEl' class='input-field col s2 push-s1' style='display: " + initOpacEl + "'>" +
               "<input id='InitialOpacity" + n + "' type='text' class='validate' value='" + ( d.initialOpacity == null ? 1 : d.initialOpacity ) + "'>" +
               "<label for='InitialOpacity" + n + "'>Initial Opacity [0 - 1]</label>" +

diff --git a/src/essence/Ancillary/TimeControl.js b/src/essence/Ancillary/TimeControl.js
@@ -182,6 +182,8 @@ var TimeControl = {
         if (typeof layer == 'string') {
             layer = L_.layersNamed[layer]
         }
+        if (L_.layersGroup[layer.name] === null) return
+
         var layerTimeFormat = d3.utcFormat(layer.time.format)
         layer.time.current = TimeControl.currentTime // keeps track of when layer was refreshed
 

diff --git a/src/essence/Ancillary/TimeUI.css b/src/essence/Ancillary/TimeUI.css
@@ -6,7 +6,7 @@
     bottom: -40px;
     left: 0px;
     margin: 0;
-    z-index: 777;
+    z-index: 77777;
     font-size: 14px;
     opacity: 0;
     pointer-events: none;
@@ -51,6 +51,7 @@
     flex: 1;
     display: flex;
     justify-content: space-between;
+    position: relative;
 }
 
 #mmgisTimeUI input {
@@ -92,9 +93,16 @@
     display: flex;
     flex: 1;
     position: relative;
-    /*cursor: ew-resize;*/
     user-select: none;
 }
+#mmgisTimeUITimelineFixedStartSlider {
+    position: absolute;
+    left: 200px;
+    width: 4px;
+    height: 40px;
+    background: var(--color-h);
+    pointer-events: none;
+}
 #mmgisTimeUITimelineSlider {
     width: 100%;
 }
@@ -105,12 +113,14 @@
 }
 #mmgisTimeUITimelineSlider .rangeSlider {
     height: 2px;
-    margin: 20px 6px 20px 8px;
+    margin: 20px 0px 20px 4px;
     background: var(--color-a2);
 }
 #mmgisTimeUITimelineSlider .rangeHandle:first-child {
     display: none;
     pointer-events: none;
+    width: 0px;
+    padding: 0px;
 }
 #mmgisTimeUITimelineSlider .rangeHandle {
     top: 0px;
@@ -162,7 +172,7 @@
     font-size: 12px;
     line-height: 22px;
     text-transform: capitalize;
-    color: var(--color-a7);
+    color: var(--color-a5);
 }
 #mmgisTimeUIStartWrapper {
 }
@@ -210,3 +220,19 @@
     height: 100%;
     transition: margin-top 0.2s ease-in-out;
 }
+
+#mmgisTimeUIRateDropdown {
+    width: 60px;
+}
+#mmgisTimeUIRateDropdown .dropy__title i {
+    color: var(--color-a5);
+}
+#mmgisTimeUIRateDropdown .dropy__title span {
+    font-size: 12px;
+    padding: 14px 0px 14px 12px;
+    color: var(--color-a5);
+}
+#mmgisTimeUIRateDropdown li a {
+    font-size: 13px;
+    padding: 5px 8px;
+}