Merge branch 'develop' into bugfix/sharing-panel-refactoring
This commit is contained in:
commit
dff5391b68
@ -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">
|
||||
|
@ -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"
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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 {
|
||||
|
@ -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) => {
|
||||
|
@ -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": [
|
||||
|
@ -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}
|
||||
|
@ -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} />
|
||||
|
Loading…
Reference in New Issue
Block a user