From 1a53841499af8822b6f3691bba9aa686c4e1264b Mon Sep 17 00:00:00 2001 From: Alexey Kostenko Date: Thu, 10 Dec 2020 09:48:35 +0300 Subject: [PATCH 1/4] Web: Files/People/Common: Fixed header style --- .../pages/VersionHistory/Section/Header/index.js | 3 ++- .../pages/GroupAction/Section/Header/index.js | 3 ++- .../components/pages/Profile/Section/Header/index.js | 3 ++- .../pages/ProfileAction/Section/Header/index.js | 3 ++- .../components/pages/Reassign/Section/Header/index.js | 3 ++- .../PageLayout/sub-components/section-header.js | 10 +++++----- 6 files changed, 15 insertions(+), 10 deletions(-) diff --git a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js index 77cd0cdacf..6579d918b6 100644 --- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js @@ -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 { diff --git a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js index 7476b119af..9983ab1dfa 100644 --- a/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/GroupAction/Section/Header/index.js @@ -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 { diff --git a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js index 48915727dc..44f3aae6f7 100644 --- a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js @@ -46,7 +46,8 @@ const { EmployeeStatus } = constants; const StyledContainer = styled.div` position: relative; - display: flex; + display: grid; + grid-template-columns: auto 1fr auto auto; align-items: center; .action-button { diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js index 3c792e4d30..d0c2ec8411 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js @@ -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 { diff --git a/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js index 19a66cce5d..d8aec8fc48 100644 --- a/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Reassign/Section/Header/index.js @@ -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 { diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js index ce84f60787..0754830114 100644 --- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js +++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js @@ -24,7 +24,7 @@ const StyledSectionHeader = styled.div` } .section-header { - width: calc(100% - 76px); + //width: calc(100% - 76px); @media ${tablet} { width: 100%; @@ -37,12 +37,12 @@ const StyledSectionHeader = styled.div` h4, h5, h6 { - max-width: calc(100vw - 435px); + //max-width: calc(100vw - 435px); - @media ${tablet} { + /* @media ${tablet} { max-width: ${(props) => - props.isArticlePinned ? `calc(100vw - 320px)` : `calc(100vw - 96px)`}; - } + props.isArticlePinned ? `calc(100vw - 320px)` : `calc(100vw - 96px)`}; + }*/ } } `; From abda53a082aa527d2820910937ec7ad560059492 Mon Sep 17 00:00:00 2001 From: Alexey Kostenko Date: Thu, 10 Dec 2020 13:31:53 +0300 Subject: [PATCH 2/4] Web: Files/People/Common: Fixed header styles --- .../pages/Home/Section/Header/index.js | 27 ++++++++++++------- .../VersionHistory/Section/Header/index.js | 10 +------ .../pages/Home/Section/Header/index.js | 8 ++++-- .../pages/Profile/Section/Header/index.js | 15 ++++++++--- .../pages/Reassign/Section/Header/index.js | 1 - .../sub-components/section-header.js | 19 +------------ 6 files changed, 37 insertions(+), 43 deletions(-) diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js index a4e5379581..8696612683 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js @@ -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 { {(context) => ( {isHeaderVisible ? (
diff --git a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js index 6579d918b6..0a07fb4a82 100644 --- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js @@ -25,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); @@ -86,7 +78,7 @@ const SectionHeaderContent = (props) => { }; return ( - + + 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; @@ -411,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 ( - + - {((isAdmin && !profile.isOwner) || isMe(viewer, profile.userName)) && ( + {((isAdmin && !profile.isOwner) || IsMe) && ( { diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js index 0754830114..e06fdb4b02 100644 --- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js +++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js @@ -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 (
From ea3f287acb7518e6e4e814c67813ebce9979cb83 Mon Sep 17 00:00:00 2001 From: Alexey Kostenko Date: Thu, 10 Dec 2020 14:25:51 +0300 Subject: [PATCH 3/4] Web: Common: Removed unused prop --- .../src/components/PageLayout/index.js | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/web/ASC.Web.Common/src/components/PageLayout/index.js b/web/ASC.Web.Common/src/components/PageLayout/index.js index a7bffbe1cd..5cf321b117 100644 --- a/web/ASC.Web.Common/src/components/PageLayout/index.js +++ b/web/ASC.Web.Common/src/components/PageLayout/index.js @@ -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 { >
{isSectionHeaderAvailable && ( - + {sectionHeaderContent ? sectionHeaderContent.props.children : null} From 3e448ce90e91fb997cc406b331d41ee934e4b965 Mon Sep 17 00:00:00 2001 From: Alexey Kostenko Date: Thu, 10 Dec 2020 14:27:47 +0300 Subject: [PATCH 4/4] web: common: bump version --- web/ASC.Web.Common/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Common/package.json b/web/ASC.Web.Common/package.json index 24978e7103..2155ee732f 100644 --- a/web/ASC.Web.Common/package.json +++ b/web/ASC.Web.Common/package.json @@ -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": [