From 044755837efc873441555fc620692ef4251a46f4 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Mon, 11 Apr 2022 12:05:13 +0300 Subject: [PATCH] Web:Files:Components: fix displaying sharing panel, add users panel, add groups panel, change owner and embedding panel for small size devices and mobile --- .../panels/SharingPanel/StyledSharingPanel.js | 10 +- .../components/panels/SharingPanel/index.js | 3 - .../src/components/panels/StyledPanels.js | 96 +++++++++++++++---- 3 files changed, 83 insertions(+), 26 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js index 5ad674aeb0..3f381a1ea0 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js @@ -26,13 +26,19 @@ const StyledHeaderContent = styled.div` align-items: center; justify-content: space-between; - .sharing_panel-header-info { - max-width: calc(100% - 33px); + @media (max-width: 480px) { + width: calc(100vw - 32px); + max-width: calc(100vw - 32px); + } + .sharing_panel-header-info { display: flex; align-items: center; justify-content: start; + width: calc(100% - 33px); + max-width: calc(100% - 33px); + .sharing_panel-arrow { margin-right: 16px; } diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index 8a352ed628..7d871540f5 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -537,9 +537,6 @@ class SharingPanelComponent extends React.Component { if (shareGroups[shareGroups.length - 1]) { shareGroups[shareGroups.length - 1].isEndOfBlock = true; } - if (shareUsers[shareUsers.length - 1]) { - shareUsers[shareUsers.length - 1].isEndOfBlock = true; - } filteredShareDataItems.push(...owner, ...shareGroups, ...shareUsers); diff --git a/products/ASC.Files/Client/src/components/panels/StyledPanels.js b/products/ASC.Files/Client/src/components/panels/StyledPanels.js index d3c74780c0..9bb03d42ce 100644 --- a/products/ASC.Files/Client/src/components/panels/StyledPanels.js +++ b/products/ASC.Files/Client/src/components/panels/StyledPanels.js @@ -80,6 +80,7 @@ const StyledAsidePanel = styled.div` padding-top: ${isMobile ? "55px" : "48px"}; height: ${isMobile ? "calc(100vh - 55px)" : "calc(100vh - 48px)"}; } + .modal-dialog-aside { padding: 0; transform: translateX(${(props) => (props.visible ? "0" : "500px")}); @@ -99,12 +100,6 @@ const StyledAsidePanel = styled.div` overflow-y: hidden; @media (max-width: 480px) { - width: 100vw; - max-width: 100vw; - transform: translateX(${(props) => (props.visible ? "0" : "100vw")}); - } - - @media ${mobile} { position: fixed; top: 64px; bottom: 0; @@ -171,13 +166,32 @@ StyledVersionHistoryPanel.defaultProps = { theme: Base }; const StyledAddUsersPanelPanel = styled.div` .header_aside-panel { - transform: translateX(${(props) => (props.visible ? "0" : "500px")}); - width: 500px; + transition: unset; + transform: translateX(${(props) => (props.visible ? "0" : "480px")}); + width: 480px; + max-width: 480px; + overflow-y: hidden; - @media (max-width: 550px) { - width: 320px; - transform: translateX(${(props) => (props.visible ? "0" : "320px")}); + @media (max-width: 480px) { + position: fixed; + top: 64px; + bottom: 0; + left: 0; + + width: 100vw; + height: calc(100vh - 64px); } + + ${isMobileOnly && + css` + position: fixed; + top: 64px; + bottom: 0; + left: 0; + + width: 100vw; + height: calc(100vh - 64px); + `} } ${PanelStyles} .combo-button-label { @@ -187,13 +201,32 @@ const StyledAddUsersPanelPanel = styled.div` const StyledAddGroupsPanel = styled.div` .header_aside-panel { - transform: translateX(${(props) => (props.visible ? "0" : "500px")}); - width: 500px; + transition: unset; + transform: translateX(${(props) => (props.visible ? "0" : "480px")}); + width: 480px; + max-width: 480px; + overflow-y: hidden; - @media (max-width: 550px) { - width: 320px; - transform: translateX(${(props) => (props.visible ? "0" : "320px")}); + @media (max-width: 480px) { + position: fixed; + top: 64px; + bottom: 0; + left: 0; + + width: 100vw; + height: calc(100vh - 64px); } + + ${isMobileOnly && + css` + position: fixed; + top: 64px; + bottom: 0; + left: 0; + + width: 100vw; + height: calc(100vh - 64px); + `} } ${PanelStyles} .combo-button-label { @@ -203,13 +236,32 @@ const StyledAddGroupsPanel = styled.div` const StyledEmbeddingPanel = styled.div` .header_aside-panel { - transform: translateX(${(props) => (props.visible ? "0" : "500px")}); - width: 500px; + transition: unset; + transform: translateX(${(props) => (props.visible ? "0" : "480px")}); + width: 480px; + max-width: 480px; + overflow-y: hidden; - @media (max-width: 550px) { - width: 320px; - transform: translateX(${(props) => (props.visible ? "0" : "320px")}); + @media (max-width: 480px) { + position: fixed; + top: 64px; + bottom: 0; + left: 0; + + width: 100vw; + height: calc(100vh - 64px); } + + ${isMobileOnly && + css` + position: fixed; + top: 64px; + bottom: 0; + left: 0; + + width: 100vw; + height: calc(100vh - 64px); + `} } ${PanelStyles} `; @@ -383,6 +435,7 @@ const StyledBody = styled.div` .embedding-panel_inputs-container { display: flex; + margin-top: 16px; .embedding-panel_input { margin-right: 8px; @@ -391,6 +444,7 @@ const StyledBody = styled.div` } .embedding-panel_code-container { + margin-top: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }