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

Merge pull request #54 from ONLYOFFICE/bugfix/floating-button

Browse Source 
bugfix/floating-button
This commit is contained in:
Alexey Safronov 2023-10-24 15:26:20 +04:00 committed by GitHub
commit b7605d530a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/common/components/Section/index.js
View File

@ -43,7 +43,7 @@ const Section = (props) => {
isInfoPanelAvailable,
settingsStudio,
clearUploadedFilesHistory,
isInfoPanelVisible,
isInfoPanelScrollLocked,
isEmptyPage,
isTrashFolder,
@ -144,6 +144,8 @@ const Section = (props) => {
}, 100);
}, []);
const showTwoProgress = showPrimaryProgressBar && showSecondaryProgressBar;
return (
<>
{isSectionAvailable && (
@ -160,7 +162,7 @@ const Section = (props) => {
maintenanceExist={maintenanceExist}
isSectionHeaderAvailable={isSectionHeaderAvailable}
settingsStudio={settingsStudio}
isInfoPanelVisible={isInfoPanelVisible}
showTwoProgress={showTwoProgress}
>
{isSectionHeaderAvailable &&
currentDeviceType === DeviceType.desktop && (
@ -258,8 +260,8 @@ const Section = (props) => {
)}
{currentDeviceType === DeviceType.desktop ? (
showPrimaryProgressBar && showSecondaryProgressBar ? (
<>
showTwoProgress ? (
<div className="progress-bar_container">
<FloatingButton
className="layout-progress-bar"
icon={primaryProgressBarIcon}
@ -273,27 +275,29 @@ const Section = (props) => {
icon={secondaryProgressBarIcon}
percent={secondaryProgressBarValue}
alert={showSecondaryButtonAlert}
showTwoProgress={
showPrimaryProgressBar && showSecondaryProgressBar
}
showTwoProgress={showTwoProgress}
/>
</>
</div>
) : showPrimaryProgressBar && !showSecondaryProgressBar ? (
<FloatingButton
className="layout-progress-bar"
icon={primaryProgressBarIcon}
percent={primaryProgressBarValue}
alert={showPrimaryButtonAlert}
onClick={onOpenUploadPanel}
clearUploadedFilesHistory={clearUploadedFilesHistory}
/>
<div className="progress-bar_container">
<FloatingButton
className="layout-progress-bar"
icon={primaryProgressBarIcon}
percent={primaryProgressBarValue}
alert={showPrimaryButtonAlert}
onClick={onOpenUploadPanel}
clearUploadedFilesHistory={clearUploadedFilesHistory}
/>
</div>
) : !showPrimaryProgressBar && showSecondaryProgressBar ? (
<FloatingButton
className="layout-progress-bar"
icon={secondaryProgressBarIcon}
percent={secondaryProgressBarValue}
alert={showSecondaryButtonAlert}
/>
<div className="progress-bar_container">
<FloatingButton
className="layout-progress-bar"
icon={secondaryProgressBarIcon}
percent={secondaryProgressBarValue}
alert={showSecondaryButtonAlert}
/>
</div>
) : (
<></>
)
@ -398,10 +402,7 @@ export default inject(({ auth }) => {
currentDeviceType,
} = settingsStore;
const {
isVisible: isInfoPanelVisible,
isScrollLocked: isInfoPanelScrollLocked,
} = auth.infoPanelStore;
const { isScrollLocked: isInfoPanelScrollLocked } = auth.infoPanelStore;
return {
isTabletView,
@ -412,7 +413,6 @@ export default inject(({ auth }) => {
showText,
isInfoPanelVisible,
isInfoPanelScrollLocked,
currentDeviceType,
};

124
packages/common/components/Section/sub-components/section-container.js
View File

@ -30,7 +30,12 @@ const tabletProps = css`
}
`;
const closeIconSize = "24px";
const sizeBetweenIcons = "8px";
const StyledSectionContainer = styled.section`
position: relative;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
@ -66,89 +71,68 @@ const StyledSectionContainer = styled.section`
max-width: 100vw !important;
}
.layout-progress-bar_wrapper {
position: fixed;
.progress-bar_container {
position: absolute;
bottom: 0;
display: grid;
grid-gap: 24px;
margin-bottom: 24px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: ${(props) => (props.isInfoPanelVisible ? "424px" : "24px")};
@media ${tablet} {
left: 24px;
}
margin-left: 24px;
left: 0;
`
: css`
right: ${(props) => (props.isInfoPanelVisible ? "424px" : "24px")};
@media ${tablet} {
right: 24px;
}
`}
}
.layout-progress-bar {
position: fixed;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: ${(props) => (props.isInfoPanelVisible ? "424px" : "24px")};
@media ${tablet} {
left: 24px;
}
`
: css`
right: ${(props) => (props.isInfoPanelVisible ? "424px" : "24px")};
@media ${tablet} {
right: 24px;
}
margin-right: 24px;
right: 0;
`}
bottom: 24px;
}
.layout-progress-bar_wrapper {
position: static;
width: fit-content;
height: fit-content;
display: flex;
grid-template-columns: 1fr 1fr;
flex-direction: row-reverse;
align-items: center;
.layout-progress-bar_close-icon {
position: fixed;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: ${(props) => (props.isInfoPanelVisible ? "480px" : "80px")};
@media ${tablet} {
left: 80px;
}
`
: css`
right: ${(props) => (props.isInfoPanelVisible ? "480px" : "80px")};
@right ${tablet} {
left: 80px;
}
.layout-progress-bar,
.layout-progress-second-bar {
${(props) =>
props.showTwoProgress &&
css`
${props.theme.interfaceDirection === "rtl"
? `margin-right:calc(${closeIconSize} + ${sizeBetweenIcons}); `
: `margin-left:calc(${closeIconSize} + ${sizeBetweenIcons})`}
`}
}
bottom: 36px;
}
.layout-progress-second-bar {
position: fixed;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: ${(props) => (props.isInfoPanelVisible ? "424px" : "24px")};
.layout-progress-bar_close-icon {
position: static;
width: ${closeIconSize};
height: ${closeIconSize};
@media ${tablet} {
left: 24px;
}
`
: css`
right: ${(props) => (props.isInfoPanelVisible ? "424px" : "24px")};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: ${sizeBetweenIcons};
`
: css`
margin-right: ${sizeBetweenIcons};
`}
@media ${tablet} {
right: 24px;
}
${(props) =>
props.showTwoProgress &&
css`
${props.theme.interfaceDirection === "rtl"
? `margin-left:-${closeIconSize}`
: `margin-right:-${closeIconSize}`}
`}
bottom: 96px;
}
}
}
${(props) =>