Removed useless controls + changed controls style

client/components/control/control.css

@@ -1,14 +1,13 @@
 .control-global{
-    width: 28px;
-    height: 28px;
-    border: 1px solid dimgray;
+    width: 27px;
+    height: 27px;
+    border: 1px solid #303030;
     box-sizing: border-box;
     transition: border 0.25s;
-    background-color: white;
 }
 
 .animated:hover{
-    border: 3px solid dimgray;
+    border: 3px solid #303030;
     cursor: pointer;
 }
 
@@ -40,10 +39,9 @@
     padding: 2px 0;
     border-radius: 6px;
    
-    /* Position the tooltip text - see examples below! */
     width: 130px;
     height: 20px;
-    left: 100%;
+    right: 100%;
     top:3px;
 
     position: absolute;

client/cssFiles/SEAWebClientGraphics.css

@@ -18,7 +18,6 @@
 
 #control_bar{
     height: 28px;
-    background-color: dimgray;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
     padding-left: 12px;
@@ -26,6 +25,10 @@
     display: flex;
     column-gap: 5px;
     margin-top: 2px;
+    border-left : 1px solid white;
+    border-right : 1px solid white;
+    border-top : 1px solid white;
+    box-sizing: border-box;
 }
 
 /*********************/

client/jsFiles/SEAWebClientGraphics.js

@@ -199,18 +199,9 @@ let dummyCallback = function(){
 
 // Defining keys for global controls
 
-let jumpKey = "jump-control";
 let goToNowKey = "go-to-now-control";
 
-let zoomInKey = "zoom-in-control";
-let zoomOutKey = "zoom-out-control";
-let shiftOlderKey = "shift-older-control";
-let shiftNewerKey = "shift-newer-control";
-
-
 let xyKey = "xy-control";
-let cursorKey = "cursor-control";
-let legendsKey = "legends-control";
 
 let globalControls = (function (){
     let controlsMap = {};
@@ -220,43 +211,17 @@ let globalControls = (function (){
         controlBar.id = "control_bar";
         panel.appendChild(controlBar);
 
-        let jumpControl = new Control("res/jump.png", "res/jump_blocked.png", "Jump", dummyCallback);
-        let goToNowControl = new Control("res/go_to_now.png", "res/go_to_now_blocked.png", "Go to now", graphs.gotoNow);
+        let goToNowControl = new Control("res/go_to_now_white.png", "res/go_to_now_blocked.png", "Go to now", graphs.gotoNow);
 
-        let zoomInControl = new Control("res/zoom_in.png", "res/zoom_in_blocked.png", "Zoom in (time)", graphs.zoomIn);
-        let zoomOutControl = new Control("res/zoom_out.png", "res/zoom_out_blocked.png", "Zoon out (time)", graphs.zoomOut); 
-        let shiftOlderControl = new Control("res/shift_older.png", "res/shift_older_blocked.png", "Shift to older", graphs.shiftOlder);
-        let shiftNewerControl = new Control("res/shift_newer.png", "res/shift_newer_blocked.png", "Shift to newer", graphs.shiftNewer);
-
-
-        let xyControl = new Control("res/y_direction.png", "res/x_direction.png", "Time<->Y zoom (one graph)", graphs.toggleZoomMode, graphs.toggleZoomMode);
-        let cursorControl = new Control("res/remove_cursor.png", "res/remove_cursor_blocked.png", "Remove cursor", graphs.removeCursor);
-        let legendsControl = new Control("res/display_legends.png", "res/remove_legends.png", "Legends", graphs.displayAllLegends, graphs.hideAllLegends);
-
-        controlBar.appendChild(jumpControl)
+        let xyControl = new Control("res/x_zoom_white.png", "res/y_zoom_white.png", "Time<->Y zoom (one graph)", graphs.toggleZoomMode, graphs.toggleZoomMode);
+        
         controlBar.appendChild(goToNowControl)
         goToNowControl.changeToAlt();
         controlBar.appendChild(new VerticalDivider());
-        controlBar.appendChild(zoomInControl);
-        controlBar.appendChild(zoomOutControl);
-        controlBar.appendChild(shiftOlderControl);
-        controlBar.appendChild(shiftNewerControl);
-        controlBar.appendChild(new VerticalDivider());
         controlBar.appendChild(xyControl);
-        controlBar.appendChild(cursorControl); 
-        cursorControl.changeToAlt();
-        controlBar.appendChild(legendsControl);
-        legendsControl.changeToAlt();
 
-        controlsMap[jumpKey] = jumpControl;
         controlsMap[goToNowKey] = goToNowControl;
-        controlsMap[zoomInKey] = zoomInControl; 
-        controlsMap[zoomOutKey] = zoomOutControl;
-        controlsMap[shiftOlderKey] = shiftOlderControl;
-        controlsMap[shiftNewerKey] = shiftNewerControl;
         controlsMap[xyKey] = xyControl;
-        controlsMap[cursorKey] = cursorControl;
-        controlsMap[legendsKey] = legendsControl;  
     }
 
     function getControlsMap(){
@@ -907,7 +872,6 @@ let graphs = (function (){
      */
     function gotoNow() {
         cursorLine(null);
-        globalControls.getControlsMap()[cursorKey].changeToAlt();
         if (!liveMode) {
             setMinMax(graphs.now() - (currentMaxTime - currentMinTime), graphs.now());
         }
@@ -1065,7 +1029,6 @@ let graphs = (function (){
 
     function removeCursor(evt=null) {
         graphs.cursorLine(null);
-        globalControls.getControlsMap()[cursorKey].changeToAlt();
         graphs.update();
     }
 
@@ -1106,12 +1069,10 @@ let graphs = (function (){
 
     function displayAllLegends(){
         showLegends(true, false);
-        globalControls.getControlsMap()[legendsKey].changeToAlt();
     }
 
     function hideAllLegends(){
         showLegends(false, false);
-        globalControls.getControlsMap()[legendsKey].changeToMain();
     }
 
     /**
@@ -1213,7 +1174,6 @@ let graphs = (function (){
             cursorElement.style.display = 'block';
             cursorElement.style.left = (cursorLinePos - 1) + 'px';
             cursorElement.style.height = window.innerHeight + 'px';
-            globalControls.getControlsMap()[cursorKey].changeToMain();
         }
         return cursorLinePos;
     }
@@ -1628,7 +1588,6 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
         } else {
             graphs.cursorLine(null);
             legend.style.display = 'none';
-            globalControls.getControlsMap()[legendsKey].changeToMain();
         }
     }