Merge branch 'feature/redesign' of github.com:ONLYOFFICE/AppServer into feature/redesign
This commit is contained in:
commit
133ba4f715
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "asc-web-common",
|
"name": "asc-web-common",
|
||||||
"version": "1.0.75",
|
"version": "1.0.77",
|
||||||
"description": "Ascensio System SIA common components and solutions library",
|
"description": "Ascensio System SIA common components and solutions library",
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
"files": [
|
"files": [
|
||||||
|
@ -3,6 +3,7 @@ import PropTypes from "prop-types";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import NavItem from "./nav-item";
|
import NavItem from "./nav-item";
|
||||||
import Headline from "../../Headline";
|
import Headline from "../../Headline";
|
||||||
|
import { Icons } from "asc-web-components"
|
||||||
|
|
||||||
const backgroundColor = "#0F4071";
|
const backgroundColor = "#0F4071";
|
||||||
|
|
||||||
@ -13,6 +14,34 @@ const Header = styled.header`
|
|||||||
z-index: 185;
|
z-index: 185;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
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 => {
|
const HeaderComponent = React.memo(props => {
|
||||||
@ -25,7 +54,9 @@ const HeaderComponent = React.memo(props => {
|
|||||||
onClick={props.onClick}
|
onClick={props.onClick}
|
||||||
noHover={true}
|
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}
|
{props.currentModule && props.currentModule.title}
|
||||||
</Headline>
|
</Headline>
|
||||||
</Header>
|
</Header>
|
||||||
|
@ -190,11 +190,13 @@ class PageLayoutComponent extends React.PureComponent {
|
|||||||
<SectionHeader isArticlePinned={this.state.isArticlePinned}>{this.state.sectionHeaderContent}</SectionHeader>
|
<SectionHeader isArticlePinned={this.state.isArticlePinned}>{this.state.sectionHeaderContent}</SectionHeader>
|
||||||
)}
|
)}
|
||||||
{this.state.isSectionFilterAvailable && (
|
{this.state.isSectionFilterAvailable && (
|
||||||
<SectionFilter>{this.state.sectionFilterContent}</SectionFilter>
|
<SectionFilter className="section-header_filter">{this.state.sectionFilterContent}</SectionFilter>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{this.state.isSectionBodyAvailable && (
|
{this.state.isSectionBodyAvailable && (
|
||||||
<SectionBody withScroll={this.props.withBodyScroll} autoFocus={this.props.withBodyAutoFocus} pinned={this.state.isArticlePinned}>
|
<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.sectionBodyContent}
|
||||||
{this.state.isSectionPagingAvailable && (
|
{this.state.isSectionPagingAvailable && (
|
||||||
<SectionPaging>{this.state.sectionPagingContent}</SectionPaging>
|
<SectionPaging>{this.state.sectionPagingContent}</SectionPaging>
|
||||||
|
@ -4,7 +4,7 @@ import styled from "styled-components";
|
|||||||
const StyledArticleHeader = styled.div`
|
const StyledArticleHeader = styled.div`
|
||||||
border-bottom: 1px solid #eceef1;
|
border-bottom: 1px solid #eceef1;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
display: none;
|
/*display: none;*/
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ArticleHeader = React.memo(props => {
|
const ArticleHeader = React.memo(props => {
|
||||||
|
@ -15,11 +15,11 @@ const StyledSectionBody = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledSectionWrapper = styled.div`
|
const StyledSectionWrapper = styled.div`
|
||||||
padding: 0px 8px 16px 24px;
|
padding: 16px 8px 16px 24px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
padding: 0px 0 16px 24px;
|
padding: 16px 0 16px 24px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -58,7 +58,7 @@ class SectionBody extends React.Component {
|
|||||||
<StyledSectionBody withScroll={withScroll}>
|
<StyledSectionBody withScroll={withScroll}>
|
||||||
{withScroll ? (
|
{withScroll ? (
|
||||||
<Scrollbar stype="mediumBlack">
|
<Scrollbar stype="mediumBlack">
|
||||||
<StyledSectionWrapper {...focusProps}>
|
<StyledSectionWrapper className="sectionWrapper" {...focusProps}>
|
||||||
{children}
|
{children}
|
||||||
<StyledSpacer pinned={pinned}/>
|
<StyledSpacer pinned={pinned}/>
|
||||||
</StyledSectionWrapper>
|
</StyledSectionWrapper>
|
||||||
|
@ -9,8 +9,25 @@ const StyledSection = styled.section`
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.section-header_filter {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body_filter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media ${tablet} {
|
@media ${tablet} {
|
||||||
padding: 0 0 0 16px;
|
padding: 0 0 0 16px;
|
||||||
|
|
||||||
|
.section-header_filter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-body_filter {
|
||||||
|
display: block;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "asc-web-components",
|
"name": "asc-web-components",
|
||||||
"version": "1.0.349",
|
"version": "1.0.352",
|
||||||
"description": "Ascensio System SIA component library",
|
"description": "Ascensio System SIA component library",
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
"main": "dist/asc-web-components.js",
|
"main": "dist/asc-web-components.js",
|
||||||
|
@ -9,7 +9,6 @@ import ContextMenu from '../context-menu';
|
|||||||
|
|
||||||
const StyledRowContainer = styled.div`
|
const StyledRowContainer = styled.div`
|
||||||
height: ${props => props.useReactWindow ? props.manualHeight ? props.manualHeight : '100%' : 'auto'};
|
height: ${props => props.useReactWindow ? props.manualHeight ? props.manualHeight : '100%' : 'auto'};
|
||||||
margin: 16px 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -27,6 +27,10 @@ const StyledTreeMenu = styled(Tree)`
|
|||||||
}
|
}
|
||||||
.rc-tree-child-tree-open {
|
.rc-tree-child-tree-open {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
li:first-child{
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
|
.rc-tree-treenode-disabled > span:not(.rc-tree-switcher),
|
||||||
.rc-tree-treenode-disabled > a,
|
.rc-tree-treenode-disabled > a,
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user