From 0a60ce2098a0c658eaaa45e5a714169bcd9fc582 Mon Sep 17 00:00:00 2001
From: chgibb <chris.gibb@outlook.com>
Date: Sun, 25 Aug 2019 14:58:11 -0400
Subject: [PATCH] clip overlay drawers underneath appbar

---
 .../circularGenomeBuilderView.tsx             |  6 +-
 .../containers/overlays/overlay.tsx           | 67 +++++++------------
 .../containers/styles/appBar.ts               |  5 ++
 3 files changed, 32 insertions(+), 46 deletions(-)
 create mode 100644 src/req/renderer/views/circularGenomeBuilderView/containers/styles/appBar.ts

diff --git a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
index 63f79bc5e..7b1a66ffb 100644
--- a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
+++ b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
@@ -14,6 +14,7 @@ import { CircularGenome } from './containers/circularGenome/circularGenome';
 import { DonutLargeOutlined } from '../../components/icons/donutLargeOutlined';
 import { WavesOutlined } from '../../components/icons/wavesOutlined';
 import { FigureSelectOverlay } from './containers/overlays/figureSelectOverlay';
+import { appBar } from './containers/styles/appBar';
 
 
 export interface CircularGenomeBuilderViewState {
@@ -49,11 +50,10 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
 
     }
 
-
     public render(): JSX.Element {
         return (
             <React.Fragment>
-                <AppBar>
+                <AppBar position="fixed" className={appBar}>
                     <Toolbar>
                         <IconButton
                             edge="start"
@@ -61,7 +61,7 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
                             classes={{ colorPrimary: white }}
                             onClick={() => {
                                 this.setState({
-                                    figureSelectDrawerOpen: true
+                                    figureSelectDrawerOpen: !this.state.figureSelectDrawerOpen
                                 });
                             }}
                         >
diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx
index de08faae6..17120ecc8 100644
--- a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx
+++ b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/overlay.tsx
@@ -17,6 +17,7 @@ import { ArrowUpwardOutlined } from '../../../../components/icons/arrowUpwareOut
 import { ArrowDownwardOutlined } from '../../../../components/icons/arrowDownwardOutlined';
 import { ChevronRight } from '../../../../components/icons/chevronRight';
 import { Close } from '../../../../components/icons/close';
+import { style } from 'typestyle';
 
 
 export interface OverlayProps {
@@ -91,8 +92,12 @@ function IconKindSelect(props: {
                         onClick={props.onClose}
                     >
                         {
-                            props.kind == "drawerLeft" ?
-                                <ChevronLeft /> : props.kind == "drawerTop" ? <ArrowUpwardOutlined /> : props.kind == "drawerBottom" ? <ArrowDownwardOutlined /> : props.kind == "drawerRight" ? <ChevronRight /> : props.kind == "modal" ? <Close /> : ""
+                            props.kind == "drawerLeft" ? <ChevronLeft /> :
+                                props.kind == "drawerTop" ? <ArrowUpwardOutlined /> :
+                                    props.kind == "drawerBottom" ? <ArrowDownwardOutlined /> :
+                                        props.kind == "drawerRight" ? <ChevronRight /> :
+                                            props.kind == "modal" ? <Close /> :
+                                                ""
                         }
                     </IconButton>
                 </Grid>
@@ -101,60 +106,36 @@ function IconKindSelect(props: {
     );
 }
 
+const drawer = style({
+    marginTop: "6.5vh"
+});
+
 export function Overlay(props: OverlayProps): JSX.Element | null {
     let [kind, setKind] = React.useState(props.kind);
 
     switch (kind) {
         case "drawerLeft":
-            return (
-                <Drawer
-                    anchor="left"
-                    variant={props.open ? "permanent" : "temporary"}
-                    open={props.open}
-                >
-                    <React.Fragment>
-                        <IconKindSelect kind={kind} setOverlayKind={setKind} onClose={props.onClose} />
-                        {props.children}
-                    </React.Fragment>
-                </Drawer>
-            );
         case "drawerTop":
-            return (
-                <Drawer
-                    anchor="top"
-                    variant={props.open ? "permanent" : "temporary"}
-                    open={props.open}
-                >
-                    <React.Fragment>
-                        <IconKindSelect kind={kind} setOverlayKind={setKind} onClose={props.onClose} />
-                        {props.children}
-                    </React.Fragment>
-                </Drawer>
-            );
         case "drawerBottom":
-            return (
-                <Drawer
-                    anchor="bottom"
-                    variant={props.open ? "permanent" : "temporary"}
-                    open={props.open}
-                >
-                    <React.Fragment>
-                        <IconKindSelect kind={kind} setOverlayKind={setKind} onClose={props.onClose} />
-                        {props.children}
-                    </React.Fragment>
-                </Drawer>
-            );
         case "drawerRight":
             return (
                 <Drawer
-                    anchor="right"
+                    anchor={
+                        kind == "drawerLeft" ? "left" :
+                            kind == "drawerTop" ? "top" :
+                                kind == "drawerBottom" ? "bottom" :
+                                    kind == "drawerRight" ? "right" :
+                                        "left"
+                    }
                     variant={props.open ? "permanent" : "temporary"}
                     open={props.open}
                 >
-                    <React.Fragment>
-                        <IconKindSelect kind={kind} setOverlayKind={setKind} onClose={props.onClose} />
-                        {props.children}
-                    </React.Fragment>
+                    <div className={drawer}>
+                        <React.Fragment>
+                            <IconKindSelect kind={kind} setOverlayKind={setKind} onClose={props.onClose} />
+                            {props.children}
+                        </React.Fragment>
+                    </div>
                 </Drawer>
             );
         case "modal":
diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/styles/appBar.ts b/src/req/renderer/views/circularGenomeBuilderView/containers/styles/appBar.ts
new file mode 100644
index 000000000..fbc0cb622
--- /dev/null
+++ b/src/req/renderer/views/circularGenomeBuilderView/containers/styles/appBar.ts
@@ -0,0 +1,5 @@
+import { style } from 'typestyle';
+
+export const appBar = style({
+    zIndex: 9999
+});