IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: backdrop and device moved from /layout/sub-components/

Browse Source
This commit is contained in:
Andrey Savihin 2019-07-11 16:21:39 +03:00
parent fcc188c0d4
commit 151514f3d8
7 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ASC.Web.Components/src/components/layout/sub-components/backdrop.js → web/ASC.Web.Components/src/components/backdrop/index.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components'
const StyledBackdrop = styled.div`
background-color: rgba(0, 0, 0, 0.3);
display: ${props => props.isOpen ? 'block' : 'none'};
display: ${props => props.visible ? 'block' : 'none'};
height: 100vh;
position: fixed;
width: 100vw;

0
web/ASC.Web.Components/src/components/layout/sub-components/device.js → web/ASC.Web.Components/src/components/device/index.js
View File

18
web/ASC.Web.Components/src/components/layout/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import Backdrop from './sub-components/backdrop'
import Backdrop from '../backdrop'
import Header from './sub-components/header'
import Nav from './sub-components/nav'
import Aside from './sub-components/aside'
@ -37,7 +37,7 @@ class Layout extends React.Component {
}
this.state = {
isBackdropOpen: props.isBackdropOpen,
isBackdropVisible: props.isBackdropVisible,
isNavHoverEnabled: props.isNavHoverEnabled,
isNavOpen: props.isNavOpen,
isAsideOpen: props.isAsideOpen,
@ -61,7 +61,7 @@ class Layout extends React.Component {
backdropClick = () => {
this.setState({
isBackdropOpen: false,
isBackdropVisible: false,
isNavOpen: false,
isAsideOpen: false,
isNavHoverEnabled: !this.state.isNavHoverEnabled
@ -70,7 +70,7 @@ class Layout extends React.Component {
showNav = () => {
this.setState({
isBackdropOpen: true,
isBackdropVisible: true,
isNavOpen: true,
isAsideOpen: false,
isNavHoverEnabled: false
@ -81,7 +81,7 @@ class Layout extends React.Component {
if(!this.state.isNavHoverEnabled) return;
this.setState({
isBackdropOpen: false,
isBackdropVisible: false,
isNavOpen: !this.state.isNavOpen,
isAsideOpen: false
});
@ -89,7 +89,7 @@ class Layout extends React.Component {
toggleAside = () => {
this.setState({
isBackdropOpen: true,
isBackdropVisible: true,
isNavOpen: false,
isAsideOpen: true,
isNavHoverEnabled: false
@ -99,7 +99,7 @@ class Layout extends React.Component {
render() {
return (
<>
<Backdrop isOpen={this.state.isBackdropOpen} onClick={this.backdropClick}/>
<Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/>
<HeaderNav
modules={this.state.isolateModules}
user={this.state.currentUser}
@ -144,7 +144,7 @@ class Layout extends React.Component {
}
Layout.propTypes = {
isBackdropOpen: PropTypes.bool,
isBackdropVisible: PropTypes.bool,
isNavHoverEnabled: PropTypes.bool,
isNavOpen: PropTypes.bool,
isAsideOpen: PropTypes.bool,
@ -159,7 +159,7 @@ Layout.propTypes = {
}
Layout.defaultProps = {
isBackdropOpen: false,
isBackdropVisible: false,
isNavHoverEnabled: true,
isNavOpen: false,
isAsideOpen: false

2
web/ASC.Web.Components/src/components/layout/sub-components/header.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import device from './device'
import device from '../../device'
import NavItem from './nav-item'
import { Text } from '../../text'

2
web/ASC.Web.Components/src/components/layout/sub-components/main.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import device from './device'
import device from '../../device'
const StyledMain = styled.main`
height: 100vh;

2
web/ASC.Web.Components/src/components/layout/sub-components/nav.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import device from './device'
import device from '../../device'
const backgroundColor = '#0F4071';

18
web/ASC.Web.Components/src/components/page-layout/index.js
View File

@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import device from '../layout/sub-components/device'
import Backdrop from '../layout/sub-components/backdrop'
import device from '../device'
import Backdrop from '../backdrop'
const StyledArticle = styled.article`
padding: 0 16px;
@ -116,7 +116,7 @@ class PageLayout extends React.Component {
backdropClick = () => {
this.setState({
isBackdropOpen: false,
isBackdropVisible: false,
isArticleOpen: false,
isArticlePinned: false
});
@ -124,7 +124,7 @@ class PageLayout extends React.Component {
pinArticle = () => {
this.setState({
isBackdropOpen: false,
isBackdropVisible: false,
isArticlePinned: true,
isArticleOpen: true
});
@ -132,7 +132,7 @@ class PageLayout extends React.Component {
unpinArticle = () => {
this.setState({
isBackdropOpen: true,
isBackdropVisible: true,
isArticlePinned: false,
isArticleOpen: true
});
@ -140,7 +140,7 @@ class PageLayout extends React.Component {
showArticle = () => {
this.setState({
isBackdropOpen: true,
isBackdropVisible: true,
isArticleOpen: true,
isArticlePinned: false
});
@ -149,7 +149,7 @@ class PageLayout extends React.Component {
render() {
return (
<>
<Backdrop isOpen={this.state.isBackdropOpen} onClick={this.backdropClick}/>
<Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/>
<StyledArticle isOpen={this.state.isArticleOpen} isPinned={this.state.isArticlePinned}>
<StyledArticleHeader isPinned={this.state.isArticlePinned}/>
<StyledArticleBody/>
@ -174,13 +174,13 @@ class PageLayout extends React.Component {
}
PageLayout.propTypes = {
isBackdropOpen: PropTypes.bool,
isBackdropVisible: PropTypes.bool,
isArticleOpen: PropTypes.bool,
isArticlePinned: PropTypes.bool
}
PageLayout.defaultProps = {
isBackdropOpen: false,
isBackdropVisible: false,
isArticleOpen: false,
isArticlePinned: false
}