Web:Change isFullLength to scale.
This commit is contained in:
parent
e3d777f543
commit
1e8529209a
@ -126,14 +126,14 @@ const InfoPanelHeaderContent = (props) => {
|
||||
style={{ width: "100%" }}
|
||||
data={roomsSubmenu}
|
||||
forsedActiveItemId={roomsView}
|
||||
isFullLength={true}
|
||||
scale={true}
|
||||
/>
|
||||
) : (
|
||||
<Submenu
|
||||
style={{ width: "100%" }}
|
||||
data={personalSubmenu}
|
||||
forsedActiveItemId={fileView}
|
||||
isFullLength={true}
|
||||
scale={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
@ -21,6 +21,7 @@ const Submenu = (props) => {
|
||||
startSelect = 0,
|
||||
forsedActiveItemId,
|
||||
onSelect,
|
||||
scale,
|
||||
...rest
|
||||
} = props;
|
||||
if (!data) return null;
|
||||
@ -105,7 +106,7 @@ const Submenu = (props) => {
|
||||
<div className="sticky">
|
||||
<SubmenuRoot>
|
||||
<SubmenuScrollbarSize />
|
||||
<SubmenuScroller>
|
||||
<SubmenuScroller scale={scale}>
|
||||
<StyledSubmenuItems ref={submenuItemsRef} role="list">
|
||||
{data.map((d) => {
|
||||
const isActive =
|
||||
@ -144,9 +145,10 @@ const Submenu = (props) => {
|
||||
);
|
||||
})}
|
||||
</StyledSubmenuItems>
|
||||
{!scale && <StyledSubmenuBottomLine className="bottom-line" />}
|
||||
</SubmenuScroller>
|
||||
</SubmenuRoot>
|
||||
<StyledSubmenuBottomLine className="bottom-line" />
|
||||
{scale && <StyledSubmenuBottomLine className="bottom-line" />}
|
||||
</div>
|
||||
<div className="sticky-indent"></div>
|
||||
|
||||
@ -164,8 +166,8 @@ Submenu.propTypes = {
|
||||
startSelect: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
|
||||
/** Property that allows explicitly selecting content passed through an external operation */
|
||||
forsedActiveItemId: PropTypes.any,
|
||||
/** Property means whether a full width of the bottom line is used. */
|
||||
isFullLength: PropTypes.bool,
|
||||
/** Scales the width of the bottom line to 100%. */
|
||||
scale: PropTypes.bool,
|
||||
/** Sets a callback function that is triggered when the submenu item is selected */
|
||||
onSelect: PropTypes.func,
|
||||
};
|
||||
|
@ -22,11 +22,6 @@ export const StyledSubmenu = styled.div`
|
||||
top: 0;
|
||||
background: ${(props) => props.theme.submenu.backgroundColor};
|
||||
z-index: 1;
|
||||
${(props) =>
|
||||
!props.isFullLength &&
|
||||
css`
|
||||
max-width: fit-content;
|
||||
`};
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
@ -85,12 +80,12 @@ export const StyledSubmenuItem = styled.div.attrs((props) => ({
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 17px;
|
||||
`
|
||||
: css`
|
||||
&:not(:last-child) {
|
||||
margin-right: 17px;
|
||||
}
|
||||
`
|
||||
: css`
|
||||
margin-right: 17px;
|
||||
`}
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
`;
|
||||
@ -133,6 +128,13 @@ export const SubmenuScroller = styled.div`
|
||||
}
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
${(props) =>
|
||||
!props.scale &&
|
||||
css`
|
||||
display: grid;
|
||||
flex: 0 1 auto;
|
||||
`}
|
||||
`;
|
||||
|
||||
export const SubmenuRoot = styled.div`
|
||||
|
Loading…
Reference in New Issue
Block a user