Side Panel with shadows

ControlsToolBox/SidePanel.js

@@ -18,6 +18,7 @@ function newSidePanel () {
   thisObject.container.initialize()
   thisObject.container.isClickeable = true
   thisObject.container.isDraggeable = false
+  thisObject.container.status = 'hidden'
 
   resize()
   return thisObject
@@ -99,11 +100,30 @@ function newSidePanel () {
 
     let opacity = 1
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT + ', ' + opacity + ''
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
     browserCanvasContext.fill()
 
     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
     browserCanvasContext.lineWidth = 0.3
     browserCanvasContext.stroke()
+
+    /* Shadow */
+
+    if (thisObject.container.status !== 'hidden') {
+      for (let i = 0; i <= 30; i++) {
+        opacity = 1 - (i / 300) - 0.95
+
+        browserCanvasContext.setLineDash([0, 0])
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point2.x + i, point2.y)
+        browserCanvasContext.lineTo(point3.x + i, point3.y)
+        browserCanvasContext.closePath()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 1
+        browserCanvasContext.stroke()
+      }
+    }
   }
 }
+

ControlsToolBox/SidePanelTab.js

@@ -8,7 +8,7 @@ function newSidePanelTab () {
     initialize: initialize
   }
 
-  const TAB_WIDTH = 20
+  const TAB_WIDTH = 25
   const TAB_HEIGHT = 60
 
   let isInitialized = false
@@ -70,6 +70,7 @@ function newSidePanelTab () {
         animation = 'none'
         xOffset = thisObject.container.parentContainer.frame.width
         thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+        thisObject.container.parentContainer.status = 'visible'
         thisObject.pointerDirection = 'right'
       }
     }
@@ -81,6 +82,7 @@ function newSidePanelTab () {
         animation = 'none'
         xOffset = 0
         thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+        thisObject.container.parentContainer.status = 'hidden'
         thisObject.pointerDirection = 'left'
       }
     }
@@ -93,33 +95,33 @@ function newSidePanelTab () {
 
     if (thisObject.pointerDirection === 'left') {
       point1 = {
-        x: TAB_WIDTH * 1 / 5,
-        y: TAB_HEIGHT * 12 / 30
+        x: TAB_WIDTH * 3.5 / 10,
+        y: TAB_HEIGHT * 12.5 / 30
       }
 
       point2 = {
-        x: TAB_WIDTH * 3 / 5,
+        x: TAB_WIDTH * 6.5 / 10,
         y: TAB_HEIGHT * 15 / 30
       }
 
       point3 = {
-        x: TAB_WIDTH * 1 / 5,
-        y: TAB_HEIGHT * 18 / 30
+        x: TAB_WIDTH * 3.5 / 10,
+        y: TAB_HEIGHT * 17.5 / 30
       }
     } else {
       point1 = {
-        x: TAB_WIDTH * 3 / 5,
-        y: TAB_HEIGHT * 12 / 30
+        x: TAB_WIDTH * 6.5 / 10,
+        y: TAB_HEIGHT * 12.5 / 30
       }
 
       point2 = {
-        x: TAB_WIDTH * 1 / 5,
+        x: TAB_WIDTH * 3.5 / 10,
         y: TAB_HEIGHT * 15 / 30
       }
 
       point3 = {
-        x: TAB_WIDTH * 3 / 5,
-        y: TAB_HEIGHT * 18 / 30
+        x: TAB_WIDTH * 6.5 / 10,
+        y: TAB_HEIGHT * 17.5 / 30
       }
     }
 
@@ -170,6 +172,28 @@ function newSidePanelTab () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    let opacity
+
+    /* Shadow */
+
+    for (let i = 0; i <= 5; i++) {
+      opacity = 1 - (i / 100) - 0.93
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(point1.x + i, point1.y + i)
+      browserCanvasContext.lineTo(point2.x + i, point2.y + i)
+      browserCanvasContext.lineTo(point3.x + i, point3.y + i)
+      browserCanvasContext.lineTo(point4.x + i, point4.y + i)
+      browserCanvasContext.lineTo(point1.x + i, point1.y + i)
+      browserCanvasContext.closePath()
+
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.stroke()
+    }
+
+    /* Background and Border */
+
     browserCanvasContext.setLineDash([0, 0])
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
@@ -179,7 +203,7 @@ function newSidePanelTab () {
     browserCanvasContext.lineTo(point1.x, point1.y)
     browserCanvasContext.closePath()
 
-    let opacity = 1
+    opacity = 1
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
     browserCanvasContext.fill()

Globals.js

@@ -17,9 +17,11 @@ const DEFAULT_MARKET = {
 
 UI_COLOR = {
     DARK: "48, 48, 54",
-    GREY: "150, 150, 150",
     LIGHT: "234, 226, 222",
+    GREY: "150, 150, 150",
+    LIGHT_GREY: "247, 247, 247",    
     WHITE: "255, 255, 255",
+    BLACK: "0, 0, 0",
     GOLDEN_ORANGE: "240, 162, 2",
     RUSTED_RED: "204, 88, 53",
     GREEN: "188, 214, 67",
@@ -152,7 +154,7 @@ let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwrit
 
 let maxDate = new Date();
 maxDate.setMilliseconds(0);
-maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that projects data into the future. 
+maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that projects data into the future.
 
 const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;