From 64d8ac3f032e89f392212268cb26ad446f9534fd Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 2 May 2019 09:31:17 +0200 Subject: [PATCH] Side Panel with shadows --- ControlsToolBox/SidePanel.js | 22 ++++++++++++++- ControlsToolBox/SidePanelTab.js | 48 ++++++++++++++++++++++++--------- Globals.js | 6 +++-- 3 files changed, 61 insertions(+), 15 deletions(-) diff --git a/ControlsToolBox/SidePanel.js b/ControlsToolBox/SidePanel.js index a61e1aecf..f71684bb2 100644 --- a/ControlsToolBox/SidePanel.js +++ b/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() + } + } } } + diff --git a/ControlsToolBox/SidePanelTab.js b/ControlsToolBox/SidePanelTab.js index 70182c117..8bd0bd253 100644 --- a/ControlsToolBox/SidePanelTab.js +++ b/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() diff --git a/Globals.js b/Globals.js index 55bedccba..4fa5de32a 100644 --- a/Globals.js +++ b/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;