feat: ✨ allow sidesheet draw over workspace header

equinor · Nov 22, 2023 · c505a58 · c505a58
1 parent 9b58d9f
commit c505a58
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "6.0.12",
+  "version": "6.0.13",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/workspace-react/package.json b/packages/workspace-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-react",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/workspace-react/src/lib/components/Workspace.tsx b/packages/workspace-react/src/lib/components/Workspace.tsx
@@ -39,11 +39,13 @@ export function Workspace({ tabs, defaultTab, Sidesheet = () => <></>, providers
           <EventHandler {...events}>
             <ContextProviders providers={providers}>
               <StyledSidesheetWrapper>
-                <div style={{ height: '100%', width: '100%', display: 'grid', gridTemplateRows: 'auto 1fr' }}>
+                <StyledLayoutWrapper>
                   <WorkspaceHeader />
                   <WorkspaceBody />
-                </div>
-                <Sidesheet />
+                  <StyledSurroundingSidesheet id="sidesheet-workspace-wrapper">
+                    <Sidesheet />
+                  </StyledSurroundingSidesheet>
+                </StyledLayoutWrapper>
               </StyledSidesheetWrapper>
             </ContextProviders>
           </EventHandler>
@@ -53,6 +55,20 @@ export function Workspace({ tabs, defaultTab, Sidesheet = () => <></>, providers
   );
 }
 
+const StyledSurroundingSidesheet = styled.div`
+  grid-area: 1 / 2 / span 2;
+  background: white;
+  z-index: 2;
+`;
+
+const StyledLayoutWrapper = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr auto;
+  height: 100%;
+  width: 100%;
+`;
+
 const StyledSidesheetWrapper = styled.div`
   height: 100%;
   width: 100%;

diff --git a/packages/workspace-react/src/lib/components/WorkspaceHeader/WorkspaceHeader.tsx b/packages/workspace-react/src/lib/components/WorkspaceHeader/WorkspaceHeader.tsx
@@ -18,4 +18,6 @@ const StyledWorkspaceHeader = styled.div`
   padding-top: 5px;
   overflow: hidden;
   width: 100%;
+  grid-row: 1;
+  grid-column: 1 / span 2;
 `;
diff --git a/packages/workspace-react/src/lib/components/workspaceBody/workspaceBody.styles.ts b/packages/workspace-react/src/lib/components/workspaceBody/workspaceBody.styles.ts
@@ -6,4 +6,6 @@ export const StyledWorkspaceBody = styled.div`
   flex-direction: row;
   justify-content: space-between;
   overflow: hidden;
+  grid-row: 2;
+  grid-column: 1;
 `;