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

Web: Components: fixed floating button in main button mobile, added scrollbar

Browse Source
This commit is contained in:
Dmitry Sychugov 2021-11-17 17:39:18 +05:00
parent b28acbe943
commit 66dd9b1871
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/asc-web-components/main-button-mobile/index.js
View File

@ -16,6 +16,7 @@ import IconButton from "../icon-button";
import Button from "../button"; import Button from "../button";
import Text from "../text"; import Text from "../text";
import Scrollbar from "@appserver/components/scrollbar"; import Scrollbar from "@appserver/components/scrollbar";
import { isMobile, isTablet } from "react-device-detect";
const ProgressBarMobile = ({ const ProgressBarMobile = ({
label, label,
@ -102,18 +103,9 @@ const MainButtonMobile = (props) => {
? progressOptions.filter((option) => option.open) ? progressOptions.filter((option) => option.open)
: []; : [];
console.log(dropDownRef); const renderItems = () => {
const renderDropDown = () => {
return ( return (
<StyledDropDown <>
forwardedRef={dropDownRef}
open={isOpen}
clickOutsideAction={outsideClick}
manualWidth={manualWidth || "400px"}
directionY="top"
directionX="right"
>
<StyledContainerAction> <StyledContainerAction>
{actionOptions.map((option) => ( {actionOptions.map((option) => (
<StyledDropDownItem <StyledDropDownItem
@ -178,11 +170,11 @@ const MainButtonMobile = (props) => {
/> />
</StyledButtonWrapper> </StyledButtonWrapper>
)} )}
</StyledDropDown> </>
); );
}; };
const children = renderDropDown(); const children = renderItems();
return ( return (
<div ref={ref} className={className} style={style}> <div ref={ref} className={className} style={style}>
@ -190,8 +182,25 @@ const MainButtonMobile = (props) => {
icon={isOpen ? "minus" : "plus"} icon={isOpen ? "minus" : "plus"}
onClick={onMainButtonClick} onClick={onMainButtonClick}
percent={percent} percent={percent}
color={"#ed7309"}
/> />
{children} <StyledDropDown
forwardedRef={dropDownRef}
open={isOpen}
clickOutsideAction={outsideClick}
manualWidth={manualWidth || "400px"}
directionY="top"
directionX="right"
isMobile={isMobile || isTablet}
>
{isMobile || isTablet ? (
<Scrollbar scrollclass="section-scroll" stype="mediumBlack">
{children}
</Scrollbar>
) : (
children
)}
</StyledDropDown>
</div> </div>
); );
}; };

11
packages/asc-web-components/main-button-mobile/styled-main-button.js
View File

@ -5,12 +5,7 @@ import DropDownItem from "../drop-down-item";
import FloatingButton from "@appserver/common/components/FloatingButton"; import FloatingButton from "@appserver/common/components/FloatingButton";
const StyledFloatingButton = styled(FloatingButton)` const StyledFloatingButton = styled(FloatingButton)`
& + div {
}
.circle__mask + div { .circle__mask + div {
background-color: #ed7309;
svg { svg {
margin-top: 4px; margin-top: 4px;
} }
@ -38,17 +33,13 @@ const StyledFloatingButton = styled(FloatingButton)`
.circle__mask .circle__fill { .circle__mask .circle__fill {
background-color: #fff; background-color: #fff;
} }
/* .circle__mask {
transform: none !important;
clip: none !important;
} */
`; `;
const StyledDropDown = styled(DropDown)` const StyledDropDown = styled(DropDown)`
bottom: ${(props) => props.theme.mainButtonMobile.dropDown.bottom}; bottom: ${(props) => props.theme.mainButtonMobile.dropDown.bottom};
right: ${(props) => props.theme.mainButtonMobile.dropDown.right}; right: ${(props) => props.theme.mainButtonMobile.dropDown.right};
z-index: ${(props) => props.theme.mainButtonMobile.dropDown.zIndex}; z-index: ${(props) => props.theme.mainButtonMobile.dropDown.zIndex};
height: ${(props) => (props.isMobile ? "100vh" : "auto")};
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;