diff --git a/client/components/control/control.css b/client/components/control/control.css index 1cdf07f..454335a 100644 --- a/client/components/control/control.css +++ b/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; diff --git a/client/cssFiles/SEAWebClientGraphics.css b/client/cssFiles/SEAWebClientGraphics.css index 9f89a91..e8d4710 100644 --- a/client/cssFiles/SEAWebClientGraphics.css +++ b/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; } /*********************/ diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index a92b1f3..2ca1aeb 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/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(); } } diff --git a/client/res/go_to_now_white.png b/client/res/go_to_now_white.png new file mode 100644 index 0000000..b8b7f21 Binary files /dev/null and b/client/res/go_to_now_white.png differ diff --git a/client/res/x_zoom_white.png b/client/res/x_zoom_white.png new file mode 100644 index 0000000..e625f72 Binary files /dev/null and b/client/res/x_zoom_white.png differ diff --git a/client/res/y_zoom_white.png b/client/res/y_zoom_white.png new file mode 100644 index 0000000..939f5dd Binary files /dev/null and b/client/res/y_zoom_white.png differ