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

Web: Common: Article: fix jumping

Browse Source
This commit is contained in:
Viktor Fomin 2022-07-23 00:53:40 +03:00
parent 466d36a52d
commit 3735ca16b3
2 changed files with 71 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/asc-web-common/components/Article/styled-article.js
View File

@ -87,7 +87,7 @@ const StyledArticle = styled.article`
padding: 0 20px;
@media ${tablet} {
height: calc(100% - 120px);
height: calc(100% - 150px);
padding: 0 8px;
}
@ -156,13 +156,13 @@ const StyledHeading = styled.div`
@media ${tablet} {
display: ${(props) => (props.showText ? "block" : "none")};
margin-left: ${(props) => props.showText && "12px"};
margin-left: 9px;
}
${isTablet &&
css`
display: ${(props) => (props.showText ? "block" : "none")};
margin-left: ${(props) => props.showText && "12px"};
margin-left: 1px !important;
`}
@media ${mobile} {
@ -256,68 +256,19 @@ const StyledCrossIcon = styled(CrossIcon)`
StyledCrossIcon.defaultProps = { theme: Base };
const StyledArticleProfile = styled.div`
position: fixed;
z-index: 301;
bottom: 0;
padding: 16px 0;
padding: 16px 20px;
height: 40px !important;
display: flex;
align-items: center;
width: ${(props) =>
!props.tablet
? "211px"
: props.tablet && props.showText
? "211px"
: "44px"};
${(props) =>
props.tablet &&
css`
padding: 14px 6px;
justify-content: ${(props) => !props.showText && "center"};
`}
padding-left: 20px;
margin-left: -20px;
padding-right: 20px;
margin-right: -20px;
@media ${tablet} {
padding-left: 8px;
margin-left: -8px;
padding-right: 8px;
margin-right: -8px;
${(props) =>
props.showText &&
css`
padding-left: 24px;
margin-left: -24px;
padding-right: 24px;
margin-right: -24px;
`}
}
${(props) =>
props.tablet &&
css`
padding-left: 8px;
margin-left: -8px;
padding-right: 8px;
margin-right: -8px;
${(props) =>
props.showText &&
css`
padding-left: 24px;
margin-left: -24px;
padding-right: 24px;
margin-right: -24px;
`}
`}
justify-content: center;
border-top: ${(props) => props.theme.catalog.profile.borderTop};
background-color: ${(props) => props.theme.catalog.profile.background};
@media ${tablet} {
padding: 16px 14px;
}
.option-button {
margin-left: auto;
height: 32px;
@ -344,7 +295,15 @@ const StyledUserName = styled.div`
max-width: 131px;
min-width: 131px;
padding-left: 12px;
padding-right: 4px;
`;
const StyledProfileWrapper = styled.div`
z-index: 301;
min-width: ${(props) => (props.showText ? "243px" : "60px")};
max-width: ${(props) => (props.showText ? "243px" : "60px")};
position: fixed;
bottom: 0;
left: 0;
`;
export {
@ -358,4 +317,5 @@ export {
StyledCrossIcon,
StyledArticleProfile,
StyledUserName,
StyledProfileWrapper,
};

97
packages/asc-web-common/components/Article/sub-components/article-profile.js
View File

@ -8,7 +8,11 @@ import ContextMenuButton from "@appserver/components/context-menu-button";
import ContextMenu from "@appserver/components/context-menu";
import { isTablet as isTabletUtils } from "@appserver/components/utils/device";
import { isTablet, isMobileOnly } from "react-device-detect";
import { StyledArticleProfile, StyledUserName } from "../styled-article";
import {
StyledArticleProfile,
StyledUserName,
StyledProfileWrapper,
} from "../styled-article";
const ArticleProfile = (props) => {
const { user, showText, getUserRole, getActions } = props;
@ -38,52 +42,53 @@ const ArticleProfile = (props) => {
const username = user.displayName.split(" ");
return (
<StyledArticleProfile showText={showText} tablet={isTabletView}>
<div ref={ref}>
<Avatar
size={avatarSize}
role={userRole}
source={user.avatar}
userName={user.displayName}
onClick={onAvatarClick}
/>
<ContextMenu
model={model}
containerRef={ref}
ref={menuRef}
onHide={onHide}
scaled={false}
leftOffset={-50}
/>
</div>
{(!isTabletView || showText) && (
<>
<StyledUserName length={user.displayName.length}>
<Text fontWeight={600} noSelect truncate>
{username[0]}
&nbsp;
</Text>
<Text fontWeight={600} noSelect truncate>
{username[1]}
</Text>
</StyledUserName>
<ContextMenuButton
className="option-button"
iconClassName="option-button-icon"
zIndex={402}
directionX="left"
directionY="top"
iconName="/static/images/vertical-dots.react.svg"
size={32}
isFill
getData={() => getActions(t)}
isDisabled={false}
usePortal={true}
<StyledProfileWrapper showText={showText}>
<StyledArticleProfile showText={showText} tablet={isTabletView}>
<div ref={ref}>
<Avatar
size={avatarSize}
role={userRole}
source={user.avatar}
userName={user.displayName}
onClick={onAvatarClick}
/>
</>
)}
</StyledArticleProfile>
<ContextMenu
model={model}
containerRef={ref}
ref={menuRef}
onHide={onHide}
scaled={false}
leftOffset={-50}
/>
</div>
{(!isTabletView || showText) && (
<>
<StyledUserName length={user.displayName.length}>
<Text fontWeight={600} noSelect truncate>
{username[0]}
&nbsp;
</Text>
<Text fontWeight={600} noSelect truncate>
{username[1]}
</Text>
</StyledUserName>
<ContextMenuButton
className="option-button"
iconClassName="option-button-icon"
zIndex={402}
directionX="left"
directionY="top"
iconName="/static/images/vertical-dots.react.svg"
size={32}
isFill
getData={() => getActions(t)}
isDisabled={false}
usePortal={true}
/>
</>
)}
</StyledArticleProfile>
</StyledProfileWrapper>
);
};