Showing workspace list

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 = {

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)
   }
 }

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 () {

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