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",
|
||||
"version": "1.0.75",
|
||||
"version": "1.0.77",
|
||||
"description": "Ascensio System SIA common components and solutions library",
|
||||
"license": "AGPL-3.0",
|
||||
"files": [
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 => {
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
`;
|
||||
|
||||
|
@ -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,
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user