Tabs Improved

Projects/Education/UI/Spaces/Docs-Space/DocsSpace.js

@@ -173,6 +173,8 @@ function newEducationDocSpace() {
             function setupSidePanelTab() {
                 thisObject.sidePanelTab = newSidePanelTab()
                 thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
+                thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Education', 'docs-tab')
+                thisObject.sidePanelTab.tabLabel = 'Docs'
                 thisObject.sidePanelTab.initialize('right')
                 openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', onOpening)
                 closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing)

Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js

@@ -6,6 +6,8 @@ function newSidePanelTab() {
         container: undefined,
         isOpen: false,
         isClosed: true,
+        tabIcon: undefined,
+        tabLabel: undefined,
         index: 0,
         open: open,
         close: close,
@@ -16,7 +18,7 @@ function newSidePanelTab() {
         initialize: initialize
     }
 
-    const TAB_WIDTH = 25
+    const TAB_WIDTH = 60
     const TAB_HEIGHT = TOP_SPACE_HEIGHT * 2
     const ANIMATION_STEP = 100
 
@@ -38,7 +40,7 @@ function newSidePanelTab() {
         if (index !== undefined) {
             thisObject.index = index
         }
-            
+
         switch (thisObject.screenside) {
             case 'left': {
                 thisObject.pointerDirection = 'left'
@@ -133,6 +135,8 @@ function newSidePanelTab() {
         if (isInitialized === false) { return }
         borders()
         arrow()
+        tabIcon()
+        tabLabel()
     }
 
     function animate() {
@@ -198,6 +202,7 @@ function newSidePanelTab() {
             }
         }
     }
+
     function setClosed() {
         thisObject.isClosed = true
         animation = 'none'
@@ -224,33 +229,33 @@ function newSidePanelTab() {
 
         if (thisObject.pointerDirection === 'left') {
             point1 = {
-                x: TAB_WIDTH * 3.5 / 10,
-                y: TAB_HEIGHT * 12.5 / 30
+                x: TAB_WIDTH * 4.0 / 10,
+                y: TAB_HEIGHT * 2.5 / 30
             }
 
             point2 = {
-                x: TAB_WIDTH * 6.5 / 10,
-                y: TAB_HEIGHT * 15 / 30
+                x: TAB_WIDTH * 6.0 / 10,
+                y: TAB_HEIGHT * 5 / 30
             }
 
             point3 = {
-                x: TAB_WIDTH * 3.5 / 10,
-                y: TAB_HEIGHT * 17.5 / 30
+                x: TAB_WIDTH * 4.0 / 10,
+                y: TAB_HEIGHT * 7.5 / 30
             }
         } else {
             point1 = {
-                x: TAB_WIDTH * 6.5 / 10,
-                y: TAB_HEIGHT * 12.5 / 30
+                x: TAB_WIDTH * 6.0 / 10,
+                y: TAB_HEIGHT * 2.5 / 30
             }
 
             point2 = {
-                x: TAB_WIDTH * 3.5 / 10,
-                y: TAB_HEIGHT * 15 / 30
+                x: TAB_WIDTH * 4.0 / 10,
+                y: TAB_HEIGHT * 5 / 30
             }
 
             point3 = {
-                x: TAB_WIDTH * 6.5 / 10,
-                y: TAB_HEIGHT * 17.5 / 30
+                x: TAB_WIDTH * 6.0 / 10,
+                y: TAB_HEIGHT * 7.5 / 30
             }
         }
 
@@ -343,4 +348,47 @@ function newSidePanelTab() {
         browserCanvasContext.setLineDash([]) // Resets Line Dash
         browserCanvasContext.stroke()
     }
+
+    function tabIcon() {
+        if (thisObject.tabIcon === undefined) { return }
+        if (thisObject.tabIcon.canDrawIcon !== true) { return }
+
+        let imageSize = 30
+
+        let imagePosition = {
+            x: TAB_WIDTH * 1 / 2,
+            y: TAB_HEIGHT * 1 / 2
+        }
+
+        imagePosition = thisObject.container.frame.frameThisPoint(imagePosition)
+
+        browserCanvasContext.drawImage(
+            thisObject.tabIcon,
+            imagePosition.x - imageSize / 2,
+            imagePosition.y - imageSize / 2,
+            imageSize,
+            imageSize)
+
+    }
+
+    function tabLabel() {
+
+        if (thisObject.tabLabel === undefined) { return }
+
+        let labelPosition = {
+            x: TAB_WIDTH * 1 / 2,
+            y: TAB_HEIGHT * 7 / 8
+        }
+
+        labelPosition = thisObject.container.frame.frameThisPoint(labelPosition)
+
+        browserCanvasContext.font =  12 + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', 1)'
+        browserCanvasContext.fillText(
+            thisObject.tabLabel,
+            labelPosition.x - getTextWidth(thisObject.tabLabel) / 2,
+            labelPosition.y
+        )
+        browserCanvasContext.stroke()
+    }
 }

Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js

@@ -31,6 +31,8 @@ function newFoundationsSideSpace() {
 
     function initialize() {
         thisObject.sidePanelTab = newSidePanelTab()
+        thisObject.sidePanelTab.tabIcon = UI.projects.foundations.spaces.designSpace.getIconByProjectAndName('Foundations', 'workspace')
+        thisObject.sidePanelTab.tabLabel = 'Workspaces'
         thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
         thisObject.sidePanelTab.initialize('left')