From f121d2641f3bf01686de722476335717b9537798 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 8 Jul 2021 14:43:56 +0200 Subject: [PATCH] Tabs Improved --- Projects/Education/Icons/docs-tab.png | Bin 0 -> 4779 bytes .../UI/Spaces/Docs-Space/DocsSpace.js | 2 + .../UI/Spaces/Side-Space/SidePanelTab.js | 76 ++++++++++++++---- .../UI/Spaces/Side-Space/SideSpace.js | 2 + 4 files changed, 66 insertions(+), 14 deletions(-) create mode 100644 Projects/Education/Icons/docs-tab.png diff --git a/Projects/Education/Icons/docs-tab.png b/Projects/Education/Icons/docs-tab.png new file mode 100644 index 0000000000000000000000000000000000000000..e0c9cfaa379353c90839ddfe2fbea62c1b1add37 GIT binary patch literal 4779 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 F{C}ffYLNf{ literal 0 HcmV?d00001 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')