Merge branch 'develop' into bugfix/sharing-panel-refactoring

This commit is contained in:
Nikita Gopienko 2020-12-10 15:07:14 +03:00
commit dff5391b68
10 changed files with 54 additions and 61 deletions

View File

@ -60,21 +60,27 @@ const { tablet, desktop } = utils.device;
const { Consumer } = utils.context;
const StyledContainer = styled.div`
@media ${desktop} {
${(props) =>
props.isHeaderVisible &&
css`
width: calc(100% + 76px);
`}
}
.header-container {
position: relative;
display: flex;
display: grid;
grid-template-columns: ${(props) =>
props.isRootFolder
? "auto auto 1fr"
: props.canCreate
? "auto auto auto auto 1fr"
: "auto auto auto 1fr"};
align-items: center;
max-width: calc(100vw - 32px);
@media ${tablet} {
grid-template-columns: ${(props) =>
props.isRootFolder
? "1fr auto"
: props.canCreate
? "auto 1fr auto auto"
: "auto 1fr auto"};
.headline-header {
margin-left: -1px;
}
@ -519,8 +525,9 @@ class SectionHeaderContent extends React.Component {
<Consumer>
{(context) => (
<StyledContainer
isHeaderVisible={isHeaderVisible}
width={context.sectionWidth}
isRootFolder={isRootFolder}
canCreate={canCreate}
>
{isHeaderVisible ? (
<div className="group-button-menu-container">

View File

@ -10,7 +10,8 @@ const { tablet, desktop } = utils.device;
const { getSettings } = store.auth.selectors;
const StyledContainer = styled.div`
display: flex;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
.arrow-button {
@ -24,14 +25,6 @@ const StyledContainer = styled.div`
}
}
@media ${desktop} {
${(props) =>
props.isHeaderVisible &&
css`
width: calc(100% + 76px);
`}
}
.group-button-menu-container {
margin: 0 -16px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@ -85,7 +78,7 @@ const SectionHeaderContent = (props) => {
};
return (
<StyledContainer isHeaderVisible={true}>
<StyledContainer>
<IconButton
iconName="ArrowPathIcon"
size="17"

View File

@ -10,7 +10,8 @@ import { setFilter } from "../../../../../store/people/actions";
import styled from "styled-components";
const Wrapper = styled.div`
display: flex;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
.arrow-button {

View File

@ -75,11 +75,15 @@ const StyledContainer = styled.div`
.header-container {
position: relative;
display: flex;
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
max-width: calc(100vw - 32px);
@media ${tablet} {
grid-template-columns: 1fr auto;
}
.action-button {
margin-left: 16px;

View File

@ -46,9 +46,16 @@ const { EmployeeStatus } = constants;
const StyledContainer = styled.div`
position: relative;
display: flex;
display: grid;
grid-template-columns: ${(props) =>
props.showContextButton ? "auto auto auto 1fr" : "auto 1fr"};
align-items: center;
@media (max-width: 1024px) {
grid-template-columns: ${(props) =>
props.showContextButton ? "auto 1fr auto" : "auto 1fr"};
}
.action-button {
margin-left: 16px;
@ -410,9 +417,12 @@ class SectionHeaderContent extends React.PureComponent {
} = this.props;
const { avatar, visibleAvatarEditor, dialogsVisible } = this.state;
const contextOptions = () => this.getUserContextOptions(profile, viewer);
const IsMe = isMe(viewer, profile.userName);
return (
<StyledContainer>
<StyledContainer
showContextButton={(isAdmin && !profile.isOwner) || IsMe}
>
<IconButton
iconName="ArrowPathIcon"
color="#A3A9AE"
@ -426,7 +436,7 @@ class SectionHeaderContent extends React.PureComponent {
{profile.displayName}
{profile.isLDAP && ` (${t("LDAPLbl")})`}
</Headline>
{((isAdmin && !profile.isOwner) || isMe(viewer, profile.userName)) && (
{((isAdmin && !profile.isOwner) || IsMe) && (
<ContextMenuButton
className="action-button"
directionX="right"

View File

@ -12,7 +12,8 @@ import {
} from "../../../../../store/people/actions";
import { resetProfile } from "../../../../../store/profile/actions";
const Wrapper = styled.div`
display: flex;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
.arrow-button {

View File

@ -7,7 +7,8 @@ import { useTranslation } from "react-i18next";
import styled from "styled-components";
const Wrapper = styled.div`
display: flex;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
.arrow-button {
@ -20,7 +21,6 @@ const Wrapper = styled.div`
const textStyle = {
marginLeft: "16px",
marginRight: "16px",
};
const SectionHeaderContent = (props) => {

View File

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

View File

@ -108,10 +108,8 @@ class PageLayoutComponent extends React.Component {
this.orientationChangeHandler
);
if(this.intervalHandler)
clearInterval(this.intervalHandler);
if(this.timeoutHandler)
clearTimeout(this.timeoutHandler);
if (this.intervalHandler) clearInterval(this.intervalHandler);
if (this.timeoutHandler) clearTimeout(this.timeoutHandler);
}
orientationChangeHandler = () => {
@ -135,13 +133,11 @@ class PageLayoutComponent extends React.Component {
let lastInnerHeight, noChangeCount;
const updateHeight = () => {
if(this.intervalHandler)
clearInterval(this.intervalHandler);
if(this.timeoutHandler)
clearTimeout(this.timeoutHandler);
if (this.intervalHandler) clearInterval(this.intervalHandler);
if (this.timeoutHandler) clearTimeout(this.timeoutHandler);
this.intervalHandler = null;
this.timeoutHandler = null;
this.intervalHandler = null;
this.timeoutHandler = null;
const vh = (window.innerHeight - 57) * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
@ -341,9 +337,7 @@ class PageLayoutComponent extends React.Component {
>
<Section widthProp={width}>
{isSectionHeaderAvailable && (
<SubSectionHeader
isArticlePinned={this.state.isArticlePinned}
>
<SubSectionHeader>
{sectionHeaderContent
? sectionHeaderContent.props.children
: null}

View File

@ -24,26 +24,10 @@ const StyledSectionHeader = styled.div`
}
.section-header {
width: calc(100% - 76px);
@media ${tablet} {
width: 100%;
padding-top: 4px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
max-width: calc(100vw - 435px);
@media ${tablet} {
max-width: ${(props) =>
props.isArticlePinned ? `calc(100vw - 320px)` : `calc(100vw - 96px)`};
}
}
}
`;
@ -55,11 +39,10 @@ class SectionHeader extends React.Component {
render() {
//console.log("PageLayout SectionHeader render");
// eslint-disable-next-line react/prop-types
const { isArticlePinned, borderBottom, ...rest } = this.props;
const { borderBottom, ...rest } = this.props;
return (
<StyledSectionHeader
isArticlePinned={isArticlePinned}
borderBottom={borderBottom}
>
<div className="section-header" {...rest} />