Merge branch 'feature/redesign' of github.com:ONLYOFFICE/AppServer into feature/redesign

web/ASC.Web.Common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-common",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "Ascensio System SIA common components and solutions library",
   "license": "AGPL-3.0",
   "files": [

web/ASC.Web.Common/src/components/Layout/sub-components/header.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import NavItem from "./nav-item";
 import Headline from "../../Headline";
+import { Icons } from "asc-web-components"
 
 const backgroundColor = "#0F4071";
 
@@ -13,6 +14,34 @@ const Header = styled.header`
   z-index: 185;
   position: absolute;
   width: 100vw;
+
+  .header-module-title {
+    display: block;
+    font-size: 21px;
+
+    @media(min-width: 1024px) {
+      display: none;
+    }
+   }
+
+  .header-logo-min_icon {
+    display: none;
+
+    @media(max-width: 620px) {
+      padding: 0 12px 0 0px;
+      display: block;
+    }
+  }
+
+  .header-logo-icon {
+    width: 160px;
+    position: relative;
+    padding: 0 12px 0 0px;
+
+    @media(max-width: 620px) {
+      display: none;
+    }
+  }
 `;
 
 const HeaderComponent = React.memo(props => {
@@ -25,7 +54,9 @@ const HeaderComponent = React.memo(props => {
         onClick={props.onClick}
         noHover={true}
       />
-      <Headline type="header" color="#FFFFFF">
+      <Icons.NavLogoIcon className="header-logo-min_icon" />
+      <Icons.NavLogoOpenedIcon className="header-logo-icon" />
+      <Headline className="header-module-title" type="header" color="#FFFFFF">
         {props.currentModule && props.currentModule.title}
       </Headline>
     </Header>

web/ASC.Web.Common/src/components/PageLayout/index.js

@@ -190,11 +190,13 @@ class PageLayoutComponent extends React.PureComponent {
               <SectionHeader isArticlePinned={this.state.isArticlePinned}>{this.state.sectionHeaderContent}</SectionHeader>
             )}
             {this.state.isSectionFilterAvailable && (
-              <SectionFilter>{this.state.sectionFilterContent}</SectionFilter>
+              <SectionFilter className="section-header_filter">{this.state.sectionFilterContent}</SectionFilter>
             )}
-
             {this.state.isSectionBodyAvailable && (
               <SectionBody withScroll={this.props.withBodyScroll} autoFocus={this.props.withBodyAutoFocus} pinned={this.state.isArticlePinned}>
+                {this.state.isSectionFilterAvailable && (
+              <SectionFilter className="section-body_filter">{this.state.sectionFilterContent}</SectionFilter>
+            )}
                 {this.state.sectionBodyContent}
                 {this.state.isSectionPagingAvailable && (
                   <SectionPaging>{this.state.sectionPagingContent}</SectionPaging>

web/ASC.Web.Common/src/components/PageLayout/sub-components/article-header.js

@@ -4,7 +4,7 @@ import styled from "styled-components";
 const StyledArticleHeader = styled.div`
   border-bottom: 1px solid #eceef1;
   height: 56px;
-  display: none;
+  /*display: none;*/
 `;
 
 const ArticleHeader = React.memo(props => {

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js

@@ -15,11 +15,11 @@ const StyledSectionBody = styled.div`
 `;
 
 const StyledSectionWrapper = styled.div`
-  padding: 0px 8px 16px 24px;
+  padding: 16px 8px 16px 24px;
   outline: none;
 
   @media ${tablet} {
-    padding: 0px 0 16px 24px;
+    padding: 16px 0 16px 24px;
   }
 `;
 
@@ -58,7 +58,7 @@ class SectionBody extends React.Component {
       <StyledSectionBody withScroll={withScroll}>
         {withScroll ? (
           <Scrollbar stype="mediumBlack">
-            <StyledSectionWrapper {...focusProps}>
+            <StyledSectionWrapper className="sectionWrapper" {...focusProps}>
               {children}
               <StyledSpacer pinned={pinned}/>
             </StyledSectionWrapper>

web/ASC.Web.Common/src/components/PageLayout/sub-components/section.js

@@ -9,8 +9,25 @@ const StyledSection = styled.section`
   display: flex;
   flex-direction: column;
 
+  .section-header_filter {
+      display: block;
+    }
+
+    .section-body_filter {
+      display: none;
+    }
+
   @media ${tablet} {
     padding: 0 0 0 16px;
+
+    .section-header_filter {
+      display: none;
+    }
+
+    .section-body_filter {
+      display: block;
+      margin: 0 0 16px;
+    }
   }
 `;
 

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.349",
+  "version": "1.0.352",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",

web/ASC.Web.Components/src/components/row-container/index.js

@@ -9,7 +9,6 @@ import ContextMenu from '../context-menu';
 
 const StyledRowContainer = styled.div`
   height: ${props => props.useReactWindow ? props.manualHeight ? props.manualHeight : '100%' : 'auto'};
-  margin: 16px 0;
   position: relative;
 `;
 

web/ASC.Web.Components/src/components/tree-menu/index.js

@@ -27,6 +27,10 @@ const StyledTreeMenu = styled(Tree)`
     }
     .rc-tree-child-tree-open {
         display: block;
+
+        li:first-child{
+            margin-top: 12px;
+        }
     }
     .rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
     .rc-tree-treenode-disabled > a,