IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Files:Components: fix displaying sharing panel, add users panel, add groups panel, change owner and embedding panel for small size devices and mobile

Browse Source
This commit is contained in:
Timofey Boyko 2022-04-11 12:05:13 +03:00
parent 51c0411262
commit 044755837e
3 changed files with 83 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
products/ASC.Files/Client/src/components/panels/SharingPanel/StyledSharingPanel.js
View File

@ -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;
}

3
products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
View File

@ -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);

96
products/ASC.Files/Client/src/components/panels/StyledPanels.js
View File

@ -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);
}