2020-04-09 00:29:13 +03:00
import * as React from "react" ;
import * as Constants from "~/common/constants" ;
2020-09-05 02:15:29 +03:00
import * as SVG from "~/common/svg" ;
2020-04-09 00:29:13 +03:00
import { css } from "@emotion/react" ;
2020-08-12 22:41:56 +03:00
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip" ;
2020-08-26 07:13:02 +03:00
import { Boundary } from "~/components/system/components/fragments/Boundary" ;
2020-09-11 06:57:17 +03:00
import { Alert } from "~/components/core/Alert" ;
2020-04-09 00:29:13 +03:00
2020-08-09 01:04:17 +03:00
const STYLES _SCROLL = css `
overflow - y : scroll ;
scrollbar - width : none ;
2020-09-08 09:05:16 +03:00
- webkit - overflow - scrolling : touch ;
2020-08-09 01:04:17 +03:00
- ms - overflow - style : - ms - autohiding - scrollbar ;
2020-09-08 09:05:16 +03:00
2020-08-09 01:04:17 +03:00
: : - webkit - scrollbar {
2020-09-13 03:00:58 +03:00
width : 4 px ;
2020-08-09 01:04:17 +03:00
}
: : - webkit - scrollbar - track {
background : $ { Constants . system . foreground } ;
}
: : - webkit - scrollbar - thumb {
background : $ { Constants . system . darkGray } ;
}
` ;
2020-04-09 00:29:13 +03:00
2020-08-14 11:29:29 +03:00
const STYLES _NO _VISIBLE _SCROLL = css `
overflow - y : scroll ;
scrollbar - width : none ;
2020-09-08 09:05:16 +03:00
- webkit - overflow - scrolling : touch ;
2020-08-14 11:29:29 +03:00
- ms - overflow - style : - ms - autohiding - scrollbar ;
2020-09-08 09:05:16 +03:00
2020-08-14 11:29:29 +03:00
: : - webkit - scrollbar {
width : 0 px ;
display : none ;
}
: : - webkit - scrollbar - track {
background : $ { Constants . system . foreground } ;
}
: : - webkit - scrollbar - thumb {
background : $ { Constants . system . darkGray } ;
}
` ;
2020-04-09 00:29:13 +03:00
const STYLES _HEADER = css `
z - index : $ { Constants . zindex . header } ;
height : $ { Constants . sizes . header } px ;
2020-08-08 03:10:28 +03:00
pointer - events : none ;
width : 100 % ;
2020-09-08 09:05:16 +03:00
position : fixed ;
left : $ { Constants . sizes . navigation } px ;
2020-04-09 00:29:13 +03:00
right : 0 ;
2020-08-08 03:10:28 +03:00
top : 0 ;
2020-08-09 01:38:09 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2020-09-29 07:39:05 +03:00
left : 0 ;
2020-08-09 01:38:09 +03:00
}
2020-08-08 03:10:28 +03:00
` ;
const STYLES _CONTENT = css `
background : $ { Constants . system . white } ;
width : 100 % ;
min - width : 10 % ;
2020-09-08 09:05:16 +03:00
min - height : 100 vh ;
2020-08-08 03:10:28 +03:00
position : relative ;
2020-09-08 09:05:16 +03:00
padding - left : $ { Constants . sizes . navigation } px ;
2020-09-29 01:38:35 +03:00
margin - top : $ { Constants . sizes . topOffset } px ;
2020-09-08 09:05:16 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2020-09-29 07:39:05 +03:00
padding - left : 0 px ;
2020-09-29 08:47:27 +03:00
margin - top : calc ( $ { Constants . sizes . topOffset } px + 36 px ) ;
2020-09-08 09:05:16 +03:00
}
2020-08-08 03:10:28 +03:00
` ;
2020-08-09 01:04:17 +03:00
const STYLES _BODY _WEB = css `
display : block ;
2020-08-08 03:10:28 +03:00
width : 100 % ;
2020-09-08 09:05:16 +03:00
2020-08-09 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
display : none ;
2020-08-08 03:10:28 +03:00
}
2020-08-09 01:04:17 +03:00
` ;
2020-08-08 03:10:28 +03:00
2020-08-09 01:04:17 +03:00
const STYLES _BODY _MOBILE = css `
display : none ;
width : 100 % ;
2020-08-22 08:54:00 +03:00
padding : 0 px 0 px 88 px 0 px ;
2020-09-08 09:05:16 +03:00
2020-08-09 01:04:17 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
display : block ;
2020-08-08 03:10:28 +03:00
}
2020-04-09 00:29:13 +03:00
` ;
const STYLES _NAVIGATION = css `
2020-09-08 09:05:16 +03:00
position : fixed ;
top : 0 ;
left : 0 ;
bottom : 0 ;
2020-08-14 11:29:29 +03:00
z - index : 1 ;
2020-08-08 03:10:28 +03:00
flex - shrink : 0 ;
height : 100 vh ;
2020-04-09 00:29:13 +03:00
z - index : $ { Constants . zindex . navigation } ;
width : $ { Constants . sizes . navigation } px ;
2020-09-08 09:05:16 +03:00
background - color : $ { Constants . system . foreground } ;
2020-09-29 01:38:35 +03:00
$ { "" /* ${STYLES_NO_VISIBLE_SCROLL} NOTE(martina): removed for now b/c unnecessary (now that there's no slates dropdown) and b/c caused user menu to be cut off on mobile*/ }
2020-08-09 01:38:09 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2020-09-29 07:39:05 +03:00
top : auto ;
bottom : 0 ;
left : 0 ;
right : 0 ;
width : 100 % ;
height : 56 px ;
2020-08-08 03:10:28 +03:00
}
2020-08-09 01:04:17 +03:00
` ;
2020-08-08 03:10:28 +03:00
2020-09-13 02:23:54 +03:00
const STYLES _SIDEBAR = css `
2020-08-26 07:13:02 +03:00
z - index : $ { Constants . zindex . sidebar } ;
2020-08-08 03:10:28 +03:00
height : 100 vh ;
2020-04-09 00:29:13 +03:00
width : $ { Constants . sizes . sidebar } px ;
padding : 0 ;
flex - shrink : 0 ;
2020-09-11 00:03:51 +03:00
position : fixed ;
2020-09-10 06:39:56 +03:00
background - color : rgba ( 247 , 247 , 247 , 1 ) ;
2020-08-26 07:13:02 +03:00
top : 0 ;
right : 0 ;
2020-09-13 03:00:58 +03:00
$ { STYLES _NO _VISIBLE _SCROLL }
2020-09-10 06:39:56 +03:00
2020-08-09 01:38:09 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
2020-09-13 02:23:54 +03:00
width : 100 % ;
2020-04-09 00:29:13 +03:00
}
2020-09-10 06:39:56 +03:00
@ supports (
( - webkit - backdrop - filter : blur ( 25 px ) ) or ( backdrop - filter : blur ( 25 px ) )
) {
2020-09-14 08:22:19 +03:00
- webkit - backdrop - filter : blur ( 25 px ) ;
2020-09-10 06:39:56 +03:00
backdrop - filter : blur ( 25 px ) ;
background - color : rgba ( 247 , 247 , 247 , 0.75 ) ;
}
2020-04-09 00:29:13 +03:00
` ;
const STYLES _SIDEBAR _HEADER = css `
display : flex ;
justify - content : flex - end ;
2020-08-22 08:54:00 +03:00
margin - bottom : 8 px ;
2020-04-09 00:29:13 +03:00
` ;
2020-08-09 06:52:22 +03:00
const STYLES _SIDEBAR _CONTENT = css `
2020-09-29 01:38:35 +03:00
padding : 56 px 24 px 24 px 24 px ;
padding - top : calc ( 56 px + $ { Constants . sizes . topOffset } px ) ;
2020-09-29 08:47:27 +03:00
@ media ( max - width : $ { Constants . sizes . mobile } px ) {
padding - top : 8 px ;
}
2020-08-09 06:52:22 +03:00
` ;
2020-04-09 00:29:13 +03:00
const STYLES _BLOCK = css `
2020-09-10 06:28:48 +03:00
margin - top : 8 px ;
2020-04-09 00:29:13 +03:00
height : 56 px ;
width : 56 px ;
display : inline - flex ;
align - items : center ;
justify - content : center ;
transition : 200 ms ease all ;
cursor : pointer ;
2020-09-08 02:28:50 +03:00
color : rgba ( 0 , 0 , 0 , 0.25 ) ;
2020-04-09 00:29:13 +03:00
` ;
export default class ApplicationLayout extends React . Component {
2020-08-12 22:41:56 +03:00
_sidebar ;
_navigation ;
_body ;
2020-09-29 08:47:27 +03:00
_handleDismiss = ( e ) => {
e . stopPropagation ( ) ;
e . preventDefault ( ) ;
this . props . onDismissSidebar ( ) ;
} ;
2020-04-09 00:29:13 +03:00
render ( ) {
2020-08-09 01:04:17 +03:00
let sidebarElements = null ;
if ( this . props . sidebar ) {
sidebarElements = (
< React . Fragment >
2020-08-20 08:45:43 +03:00
< GlobalTooltip
elementRef = { this . _sidebar }
allowedTypes = { [ "sidebar" ] }
/ >
2020-08-09 01:04:17 +03:00
< div css = { STYLES _SIDEBAR _HEADER } >
2020-08-27 07:27:50 +03:00
< div
css = { STYLES _BLOCK }
2020-09-29 08:47:27 +03:00
onMouseUp = { this . _handleDismiss }
onTouchEnd = { this . _handleDismiss }
2020-08-27 07:27:50 +03:00
>
2020-08-09 01:04:17 +03:00
< SVG . Dismiss height = "24px" / >
< / d i v >
< / d i v >
< div css = { STYLES _SIDEBAR _CONTENT } > { this . props . sidebar } < / d i v >
< / R e a c t . F r a g m e n t >
) ;
}
2020-04-09 00:29:13 +03:00
return (
2020-09-08 09:05:16 +03:00
< React . Fragment >
2020-08-12 22:41:56 +03:00
< div
css = { STYLES _NAVIGATION }
ref = { ( c ) => {
this . _navigation = c ;
2020-08-20 08:45:43 +03:00
} }
>
2020-09-13 01:08:36 +03:00
< GlobalTooltip
elementRef = { this . _navigation }
allowedTypes = { [ "navigation" ] }
/ >
2020-08-12 22:41:56 +03:00
{ this . props . navigation }
< / d i v >
2020-09-08 09:05:16 +03:00
2020-08-08 03:10:28 +03:00
< div css = { STYLES _CONTENT } >
2020-08-14 11:29:29 +03:00
< GlobalTooltip elementRef = { this . _body } allowedTypes = { [ "body" ] } / >
2020-08-08 03:10:28 +03:00
< div css = { STYLES _HEADER } > { this . props . header } < / d i v >
2020-08-12 22:41:56 +03:00
< div
css = { STYLES _BODY _WEB }
ref = { ( c ) => {
this . _body = c ;
2020-08-20 08:45:43 +03:00
} }
2020-08-26 07:13:02 +03:00
id = "slate-client-body"
2020-08-20 08:45:43 +03:00
>
2020-09-13 01:08:36 +03:00
< Alert
2020-09-25 06:16:10 +03:00
fileLoading = { this . props . fileLoading }
onAction = { this . props . onAction }
2020-09-25 10:08:08 +03:00
filecoin = { this . props . filecoin }
2020-09-13 01:08:36 +03:00
style = { {
paddingRight : this . props . sidebar
? ` calc( ${ Constants . sizes . sidebar } px + 48px `
: "auto" ,
} }
/ >
2020-08-12 22:41:56 +03:00
{ this . props . children }
< / d i v >
2020-08-20 08:45:43 +03:00
< div css = { STYLES _BODY _MOBILE } >
2020-09-13 01:08:36 +03:00
< Alert
2020-09-25 06:16:10 +03:00
fileLoading = { this . props . fileLoading }
onAction = { this . props . onAction }
2020-09-13 01:08:36 +03:00
style = { {
top : 0 ,
left : 0 ,
width : "100%" ,
zIndex : Constants . zindex . modal ,
} }
/ >
{ this . props . children }
2020-08-20 08:45:43 +03:00
< / d i v >
2020-08-08 03:10:28 +03:00
< / d i v >
2020-09-08 09:05:16 +03:00
2020-08-12 22:41:56 +03:00
{ this . props . sidebar ? (
2020-09-13 02:23:54 +03:00
< Boundary
captureResize = { false }
captureScroll = { false }
enabled
2020-09-29 08:47:27 +03:00
onOutsideRectEvent = { this . _handleDismiss }
2020-08-27 02:24:43 +03:00
>
2020-09-13 02:23:54 +03:00
< div
css = { STYLES _SIDEBAR }
ref = { ( c ) => {
this . _sidebar = c ;
} }
>
{ sidebarElements }
< / d i v >
< / B o u n d a r y >
2020-08-12 22:41:56 +03:00
) : null }
2020-09-08 09:05:16 +03:00
< / R e a c t . F r a g m e n t >
2020-04-09 00:29:13 +03:00
) ;
}
}