web: Added PageLayout component (first approximation)

web/ASC.Web.Components/src/components/layout/index.js

@@ -38,8 +38,8 @@ class Layout extends React.Component {
 
     this.state = {
       isBackdropOpen: props.isBackdropOpen,
-      isNavigationHoverEnabled: props.isNavigationHoverEnabled,
-      isNavigationOpen: props.isNavigationOpen,
+      isNavHoverEnabled: props.isNavHoverEnabled,
+      isNavOpen: props.isNavOpen,
       isAsideOpen: props.isAsideOpen,
 
       onLogoClick: props.onLogoClick,
@@ -62,27 +62,27 @@ class Layout extends React.Component {
   backdropClick = () => {
     this.setState({
       isBackdropOpen: false,
-      isNavigationOpen: false,
+      isNavOpen: false,
       isAsideOpen: false,
-      isNavigationHoverEnabled: !this.state.isNavigationHoverEnabled
+      isNavHoverEnabled: !this.state.isNavHoverEnabled
     });
   };
 
   showNav = () => {
     this.setState({
       isBackdropOpen: true,
-      isNavigationOpen: true,
+      isNavOpen: true,
       isAsideOpen: false,
-      isNavigationHoverEnabled: false
+      isNavHoverEnabled: false
     });
   };
 
   handleNavHover = () => {
-    if(!this.state.isNavigationHoverEnabled) return;
+    if(!this.state.isNavHoverEnabled) return;
     
     this.setState({
       isBackdropOpen: false,
-      isNavigationOpen: !this.state.isNavigationOpen,
+      isNavOpen: !this.state.isNavOpen,
       isAsideOpen: false
     });
   }
@@ -90,9 +90,9 @@ class Layout extends React.Component {
   toggleAside = () => {
     this.setState({
       isBackdropOpen: true,
-      isNavigationOpen: false,
+      isNavOpen: false,
       isAsideOpen: true,
-      isNavigationHoverEnabled: false
+      isNavHoverEnabled: false
     });
   };
 
@@ -111,12 +111,12 @@ class Layout extends React.Component {
           currentModule={this.state.currentModule}
         />
         <Nav
-          isOpen={this.state.isNavigationOpen}
+          isOpen={this.state.isNavOpen}
           onMouseEnter={this.handleNavHover}
           onMouseLeave={this.handleNavHover}
         >
           <NavLogoItem
-            isOpen={this.state.isNavigationOpen}
+            isOpen={this.state.isNavOpen}
             onClick={this.state.onLogoClick}
           />
           {
@@ -124,7 +124,7 @@ class Layout extends React.Component {
               <NavItem
                 seporator={!!item.seporator}
                 key={item.id}
-                isOpen={this.state.isNavigationOpen}
+                isOpen={this.state.isNavOpen}
                 active={item.id == this.state.currentModuleId}
                 iconName={item.iconName}
                 badgeNumber={item.notifications}
@@ -145,8 +145,8 @@ class Layout extends React.Component {
 
 Layout.propTypes = {
   isBackdropOpen: PropTypes.bool,
-  isNavigationHoverEnabled: PropTypes.bool,
-  isNavigationOpen: PropTypes.bool,
+  isNavHoverEnabled: PropTypes.bool,
+  isNavOpen: PropTypes.bool,
   isAsideOpen: PropTypes.bool,
 
   onLogoClick: PropTypes.func,
@@ -160,8 +160,8 @@ Layout.propTypes = {
 
 Layout.defaultProps = {
   isBackdropOpen: false,
-  isNavigationHoverEnabled: true,
-  isNavigationOpen: false,
+  isNavHoverEnabled: true,
+  isNavOpen: false,
   isAsideOpen: false
 }
 

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

@@ -7,6 +7,8 @@ const StyledMain = styled.main`
   padding: 0 0 0 56px;
   width: 100vw;
   z-index: 0;
+  display: flex;
+  flex-direction: row;
 
   @media ${device.tablet} {
     padding: 56px 0 0 0;

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

@@ -0,0 +1,188 @@
+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'
+
+const StyledArticle = styled.article`
+  padding: 0 16px;
+  background: #F8F9F9;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  transition: width .3s ease-in-out;
+
+  button {
+    display: none;
+  }
+
+  @media ${device.tablet} {
+    ${props => props.isOpen
+      ? props.isPinned
+          ? `
+            display: flex;
+            width: 240px;
+          `
+          : `
+            position: fixed;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: 400;
+          `
+      : `
+        display: none;
+        width: 0px;
+      `
+    }
+
+    button {
+      display: inline-block;
+    }
+  }
+`;
+
+const StyledArticleHeader = styled.div`
+  border-bottom: 1px solid #ECEEF1;
+  font-weight: bold;
+  font-size: 27px;
+  line-height: 56px;
+  height: 56px;
+
+  @media ${device.tablet} {
+    display: ${props => props.isPinned ? 'block' : 'none'};
+  }
+`;
+
+const StyledArticleBody = styled.div`
+  margin: 16px 0;
+  outline: 1px dotted;
+  flex-grow: 1;
+`;
+
+const StyledArticlePinPanel = styled.div`
+  height: 56px;
+  display: none;
+
+  @media ${device.tablet} {
+    display: block;
+  }
+
+  @media ${device.mobile} {
+    display: none;
+  }
+`;
+
+const StyledSection = styled.section`
+  padding: 0 16px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledSectionHeader = styled.div`
+  border-bottom: 1px solid #ECEEF1;
+  font-weight: bold;
+  font-size: 21px;
+  line-height: 56px;
+  height: 56px;
+`;
+
+const StyledSectionBody = styled.div`
+  margin: 16px 0;
+  outline: 1px dotted;
+  flex-grow: 1;
+`;
+
+const StyledSectionPagingPanel = styled.div`
+  height: 56px;
+  display: none;
+
+  @media ${device.tablet} {
+    display: ${props => props.isPinned ? 'none' : 'block'};
+  }
+`;
+
+class PageLayout extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isArticleOpen: props.isArticleOpen,
+      isArticlePinned: props.isArticlePinned
+    };
+  }
+
+  backdropClick = () => {
+    this.setState({
+      isBackdropOpen: false,
+      isArticleOpen: false,
+      isArticlePinned: false
+    });
+  };
+
+  pinArticle = () => {
+    this.setState({
+      isBackdropOpen: false,
+      isArticlePinned: true,
+      isArticleOpen: true 
+    });
+  };
+
+  unpinArticle = () => {
+    this.setState({
+      isBackdropOpen: true,
+      isArticlePinned: false,
+      isArticleOpen: true 
+    });
+  };
+
+  showArticle = () => {
+    this.setState({
+      isBackdropOpen: true,
+      isArticleOpen: true,
+      isArticlePinned: false
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <Backdrop isOpen={this.state.isBackdropOpen} onClick={this.backdropClick}/>
+        <StyledArticle isOpen={this.state.isArticleOpen} isPinned={this.state.isArticlePinned}>
+          <StyledArticleHeader isPinned={this.state.isArticlePinned}/>
+          <StyledArticleBody/>
+          <StyledArticlePinPanel>
+            {
+              this.state.isArticlePinned
+                ? <button onClick={this.unpinArticle}>UnpinArticleBtn</button>
+                : <button onClick={this.pinArticle}>PinArticleBtn</button>
+            }
+          </StyledArticlePinPanel>
+        </StyledArticle>
+        <StyledSection>
+          <StyledSectionHeader/>
+          <StyledSectionBody/>
+          <StyledSectionPagingPanel isPinned={this.state.isArticlePinned}>
+            <button onClick={this.showArticle}>ShowArticleBtn</button>
+          </StyledSectionPagingPanel>
+        </StyledSection>
+      </>
+    )
+  }
+}
+
+PageLayout.propTypes = {
+  isBackdropOpen: PropTypes.bool,
+  isArticleOpen: PropTypes.bool,
+  isArticlePinned: PropTypes.bool
+}
+
+PageLayout.defaultProps = {
+  isBackdropOpen: false,
+  isArticleOpen: false,
+  isArticlePinned: false
+}
+
+export default PageLayout

web/ASC.Web.Components/src/index.js

@@ -21,6 +21,7 @@ export { default as Checkbox } from './components/checkbox'
 export { Text } from './components/text'
 export { default as ModalDialog } from './components/modal-dialog'
 export { default as Layout } from './components/layout'
+export { default as PageLayout } from './components/page-layout'
 export { default as ContentRow } from './components/content-row'
 export { default as Badge } from './components/badge'
 export { default as ErrorContainer } from './components/error-container'

web/ASC.Web.Storybook/stories/layout/index.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Layout } from 'asc-web-components'
+import { Layout, PageLayout } from 'asc-web-components'
 
 const currentUser = {
   id: '00000000-0000-0000-0000-000000000000',
@@ -93,7 +93,7 @@ const pageContent = <p style={{padding: 40}}>Page Content</p>;
 storiesOf('Components|Layout', module)
   .add('Layout', () => (
     <Layout
-      isNavigationOpen={false}
+      isNavOpen={false}
       currentUser={currentUser}
       currentUserActions={currentUserActions}
       availableModules={availableModules}
@@ -101,6 +101,6 @@ storiesOf('Components|Layout', module)
       onLogoClick={onLogoClick}
       asideContent={asideContent}
     >
-      {pageContent}
+      <PageLayout/>
     </Layout>
   ));