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

Shared:ContextMenu:Fixed incorrect styles in mobile view when resizing the window on desktop.

Browse Source
This commit is contained in:
Vlada Gazizova 2024-08-12 13:11:08 +03:00
parent 18e70b4d73
commit d0d501f0b0
1 changed files with 11 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/shared/components/context-menu/ContextMenu.styled.ts
View File

@ -26,21 +26,7 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Base, TTheme, globalColors } from "../../themes"; import { Base, TTheme, globalColors } from "../../themes";
import { mobile, isMobile, getCorrectFourValuesStyle } from "../../utils"; import { mobile, getCorrectFourValuesStyle } from "../../utils";
const styledTabletView = css<{ articleWidth: number }>`
position: fixed;
width: ${(props) => props.theme.newContextMenu.devices.tabletWidth};
max-width: ${(props) => props.theme.newContextMenu.devices.tabletWidth};
max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight};
inset-inline-start: ${(props) =>
props.articleWidth
? `${props.articleWidth}px`
: props.theme.newContextMenu.devices.left};
inset-inline-end: ${(props) => props.theme.newContextMenu.devices.right};
bottom: ${(props) => props.theme.newContextMenu.devices.bottom};
margin: ${(props) => props.theme.newContextMenu.devices.margin};
`;
const styledMobileView = css` const styledMobileView = css`
position: fixed; position: fixed;
@ -98,10 +84,6 @@ const StyledContextMenu = styled.div<{
-moz-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; -moz-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow};
-webkit-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; -webkit-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow};
@media ${mobile} {
${(props) => props.changeView && styledMobileView}
}
.scroll-body { .scroll-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -109,11 +91,6 @@ const StyledContextMenu = styled.div<{
padding-inline-end: 0 !important; padding-inline-end: 0 !important;
} }
${!isMobile() &&
css`
max-width: calc(100vw - 32px);
`}
} }
.contextmenu-header { .contextmenu-header {
@ -201,11 +178,6 @@ const StyledContextMenu = styled.div<{
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
${!isMobile() &&
css`
max-width: calc(100vw - 32px);
`}
} }
.p-contextmenu .p-submenu-list { .p-contextmenu .p-submenu-list {
@ -377,6 +349,16 @@ const StyledContextMenu = styled.div<{
opacity: 1; opacity: 1;
transition: opacity 250ms; transition: opacity 250ms;
} }
.p-contextmenu {
@media ${mobile} {
${(props) => props.changeView && styledMobileView}
}
@media not ${mobile} {
max-width: calc(100vw - 32px);
}
}
`; `;
StyledContextMenu.defaultProps = { StyledContextMenu.defaultProps = {