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

Web:Common:Navigation: move out toggle info panel button from control-btn to separate file

Browse Source
This commit is contained in:
Timofey Boyko 2022-05-06 15:11:04 +03:00
parent 60cfefce56
commit 9f74bf994b
2 changed files with 127 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/asc-web-common/components/Navigation/sub-components/control-btn.js
View File

@ -6,6 +6,7 @@ import IconButton from "@appserver/components/icon-button";
import { isMobile } from "react-device-detect";
import { tablet } from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
import ToggleInfoPanelButton from "./toggle-infopanel-btn";
const StyledContainer = styled.div`
margin-left: 20px;
@ -125,20 +126,11 @@ const ControlButtons = ({
/>
)}
{!isDesktop && (
<StyledInfoPanelToggleWrapper
<ToggleInfoPanelButton
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
>
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={toggleInfoPanelAction}
/>
</div>
</StyledInfoPanelToggleWrapper>
toggleInfoPanelAction={toggleInfoPanelAction}
/>
)}
</>
) : canCreate ? (
@ -155,20 +147,13 @@ const ControlButtons = ({
isDisabled={false}
/>
)}
<StyledInfoPanelToggleWrapper
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
>
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={toggleInfoPanelAction}
/>
</div>
</StyledInfoPanelToggleWrapper>
{!isDesktop && (
<ToggleInfoPanelButton
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
toggleInfoPanelAction={toggleInfoPanelAction}
/>
)}
</>
) : isRecycleBinFolder && !isEmptyFilesList ? (
<>
@ -179,37 +164,23 @@ const ControlButtons = ({
onClick={clearTrash}
className="trash-button"
/>
<StyledInfoPanelToggleWrapper
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
>
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={toggleInfoPanelAction}
/>
</div>
</StyledInfoPanelToggleWrapper>
{!isDesktop && (
<ToggleInfoPanelButton
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
toggleInfoPanelAction={toggleInfoPanelAction}
/>
)}
</>
) : (
<>
<StyledInfoPanelToggleWrapper
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
>
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={toggleInfoPanelAction}
/>
</div>
</StyledInfoPanelToggleWrapper>
{!isDesktop && (
<ToggleInfoPanelButton
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
toggleInfoPanelAction={toggleInfoPanelAction}
/>
)}
</>
)}
</StyledContainer>

102
packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js Normal file
View File

@ -0,0 +1,102 @@
import React from "react";
import styled, { css } from "styled-components";
import ContextMenuButton from "@appserver/components/context-menu-button";
import IconButton from "@appserver/components/icon-button";
import { isMobile } from "react-device-detect";
import { tablet } from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
const StyledContainer = styled.div`
margin-left: 20px;
display: flex;
align-items: center;
height: 32px;
.add-button {
margin-right: 16px;
min-width: 15px;
@media ${tablet} {
display: none;
}
${isMobile &&
css`
display: none;
`}
}
.option-button {
margin-right: 16px;
min-width: 15px;
}
.trash-button {
margin-right: 16px;
min-width: 15px;
}
`;
const StyledInfoPanelToggleWrapper = styled.div`
display: flex;
align-items: center;
align-self: center;
justify-content: center;
margin-left: auto;
@media ${tablet} {
margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
}
${isMobile &&
css`
margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
`}
.info-panel-toggle-bg {
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: ${(props) =>
props.isInfoPanelVisible
? props.theme.infoPanel.sectionHeaderToggleBgActive
: props.theme.infoPanel.sectionHeaderToggleBg};
path {
fill: ${(props) =>
props.isInfoPanelVisible
? props.theme.infoPanel.sectionHeaderToggleIconActive
: props.theme.infoPanel.sectionHeaderToggleIcon};
}
}
`;
StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
const ToggleInfoPanelButton = ({
isRootFolder,
isInfoPanelVisible,
toggleInfoPanelAction,
}) => {
return (
<StyledInfoPanelToggleWrapper
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}
>
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
iconName="images/panel.react.svg"
size="16"
isFill={true}
onClick={toggleInfoPanelAction}
/>
</div>
</StyledInfoPanelToggleWrapper>
);
};
export default ToggleInfoPanelButton;