diff --git a/Projects/Education/Icons/docs-tab.png b/Projects/Education/Icons/docs-tab.png new file mode 100644 index 000000000..e0c9cfaa3 Binary files /dev/null and b/Projects/Education/Icons/docs-tab.png differ diff --git a/Projects/Education/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Education/UI/Spaces/Docs-Space/DocsSpace.js index 6b172e8e7..b4053b0e3 100644 --- a/Projects/Education/UI/Spaces/Docs-Space/DocsSpace.js +++ b/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) diff --git a/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js b/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js index adef2f2f9..cb6fb44ae 100644 --- a/Projects/Foundations/UI/Spaces/Side-Space/SidePanelTab.js +++ b/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() + } } diff --git a/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js b/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js index 7203ffaeb..3ea331d34 100644 --- a/Projects/Foundations/UI/Spaces/Side-Space/SideSpace.js +++ b/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')