diff --git a/Globals.js b/Globals.js index 92038622b..d9a737c01 100644 --- a/Globals.js +++ b/Globals.js @@ -190,8 +190,7 @@ const MAX_PLOTABLE_DATE = maxDate; const TOP_SPACE_HEIGHT = 40 const COCKPIT_SPACE_HEIGHT = 30; -const BREAKPOINT_HEIGHT = 15; -const SIDE_PANEL_WIDTH = 450 +const SIDE_PANEL_WIDTH = 350 let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT const LAYER_STATUS = { diff --git a/SideSpace/ListItem.js b/SideSpace/ListItem.js index 6e4ec6885..98af0384e 100644 --- a/SideSpace/ListItem.js +++ b/SideSpace/ListItem.js @@ -19,6 +19,11 @@ function newListItem () { thisObject.container.isDraggeable = false thisObject.container.isWheelable = false thisObject.container.detectMouseOver = true + thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75 + thisObject.container.frame.height = SIDE_PANEL_WIDTH * 0.75 + + let name + let type return thisObject @@ -28,8 +33,9 @@ function newListItem () { thisObject.fitFunction = undefined } - function initialize () { - + function initialize (pName, pType) { + name = pName + type = pType } function getContainer (point) { @@ -47,12 +53,11 @@ function newListItem () { } function draw () { - let label1 = 'TEST NAME' - + let icon = canvas.designSpace.iconByUiObjectType.get(type) let backgroundColor = UI_COLOR.BLACK const RED_LINE_HIGHT = 4 - const OPACITY = 0.75 + const OPACITY = 1 let params = { cornerRadius: 0, @@ -66,7 +71,8 @@ function newListItem () { roundedCornersBackground(params) - drawLabel(label1, 1 / 2, 6 / 10, -5, 0, label1FontSize, thisObject.container) - drawIcon(thisObject.exchangeIcon, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container) + drawLabel(name, 1 / 2, 3.0 / 10, -5, 0, 15, thisObject.container) + drawLabel(type, 1 / 2, 7.2 / 10, -5, 0, 15, thisObject.container) + drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 80, thisObject.container) } } diff --git a/SideSpace/ListView.js b/SideSpace/ListView.js index 8c8097671..4be52f866 100644 --- a/SideSpace/ListView.js +++ b/SideSpace/ListView.js @@ -31,7 +31,7 @@ function newListView () { const LAYER_SEPARATION = 0 - let headerHeight = 40 + let headerHeight = 30 let footerHeight = 10 let listItemHeight = 70 let desiredVisibleListItems = 5 @@ -64,15 +64,15 @@ function newListView () { function initialize () { thisObject.container.name = MODULE_NAME thisObject.container.frame.containerName = thisObject.container.name - thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.80 - thisObject.container.frame.height = headerHeight + thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75 let position = { // Default position - x: SIDE_PANEL_WIDTH * 0.10, + x: SIDE_PANEL_WIDTH * 0.25 / 2, y: 20 } thisObject.container.frame.position = position + thisObject.container.frame.height = browserCanvas.height - position.x onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel) onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver) @@ -88,10 +88,11 @@ function newListView () { let workspacelist = JSON.parse(text) for (let i = 0; i < workspacelist.length; i++) { - let workspace = workspacelist[i] + let workspace = workspacelist[i].replace('.json', '') let listItem = newListItem() - listItem.initialize() + listItem.initialize(workspace, 'Workspace') listItem.container.connectToParent(thisObject.container, false, false) + listItem.container.frame.position.y = headerHeight + i * SIDE_PANEL_WIDTH * 0.75 thisObject.listItems.push(listItem) } isInitialized = true @@ -210,17 +211,22 @@ function newListView () { function draw () { if (isInitialized === false || thisObject.visible === false) { return } - drawHeader() + drawBackground() drawScrollBar() + drawChildren() } - function drawHeader () { - let label1 = 'HEADER' - - let icon1 = canvas.designSpace.iconByUiObjectType.get('Workspace') + function drawChildren () { + for (let i = 0; i < thisObject.listItems.length; i++) { + let listItem = thisObject.listItems[i] + listItem.draw() + } + } + function drawBackground () { + let label = 'Your Workspaces' + let icon = canvas.designSpace.iconByUiObjectType.get('Workspace') let backgroundColor = UI_COLOR.WHITE - let params = { cornerRadius: 5, lineWidth: 1, @@ -233,8 +239,8 @@ function newListView () { roundedCornersBackground(params) - drawLabel(label1, 1 / 2, 0, 0, 15, 9, thisObject.container, UI_COLOR.BLACK) - drawIcon(icon1, 1 / 8, 0, 0, 20, 28, thisObject.container) + drawLabel(label, 1 / 2, 0, 0, 20, 15, thisObject.container, UI_COLOR.BLACK) + // drawIcon(icon, 1 / 8, 0, 0, 20, 28, thisObject.container) } function drawScrollBar () { diff --git a/SideSpace/SidePanelTab.js b/SideSpace/SidePanelTab.js index c415b1046..ea9108b49 100644 --- a/SideSpace/SidePanelTab.js +++ b/SideSpace/SidePanelTab.js @@ -71,7 +71,7 @@ function newSidePanelTab () { if (animation === 'opening') { xOffset = xOffset + STEP thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset - if (xOffset > thisObject.container.parentContainer.frame.width) { + if (xOffset >= thisObject.container.parentContainer.frame.width) { animation = 'none' xOffset = thisObject.container.parentContainer.frame.width thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset @@ -83,7 +83,7 @@ function newSidePanelTab () { if (animation === 'closing') { xOffset = xOffset - STEP thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset - if (xOffset < 0) { + if (xOffset <= 0) { animation = 'none' xOffset = 0 thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON