clip overlay drawers underneath appbar

chgibb · Aug 25, 2019 · 0a60ce2 · 0a60ce2
1 parent e38f0fe
commit 0a60ce2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 46 deletions.
diff --git 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,19 +50,18 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
 
     }
 
-
     public render(): JSX.Element {
         return (
             <React.Fragment>
-                <AppBar>
+                <AppBar position="fixed" className={appBar}>
                     <Toolbar>
                         <IconButton
                             edge="start"
                             color="primary"
                             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
@@ -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
@@ -0,0 +1,5 @@
+import { style } from 'typestyle';
+
+export const appBar = style({
+    zIndex: 9999
+});