Web:Studio:Added SettingsPageLayout, SettingsPageMobileView components.
This commit is contained in:
parent
51039fa773
commit
1b6a7ab2ba
@ -0,0 +1,76 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
import { isSmallTablet } from "@appserver/components/utils/device";
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
.combo-button-label {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.settings-block {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.category-description {
|
||||
line-height: 20px;
|
||||
color: #657077;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-item-wrapper:not(:last-child) {
|
||||
border-bottom: 1px solid #eceef1;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.category-item-description {
|
||||
color: ${(props) => props.theme.studio.settings.common.descriptionColor};
|
||||
font-size: 12px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.category-item-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.category-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.settings-block {
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledComponent.defaultProps = { theme: Base };
|
||||
|
||||
const SettingsPageLayout = ({ children }) => {
|
||||
const [mobileView, setMobileView] = useState();
|
||||
|
||||
const checkInnerWidth = () => {
|
||||
if (isSmallTablet()) {
|
||||
setMobileView(true);
|
||||
} else {
|
||||
setMobileView(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", checkInnerWidth);
|
||||
return () => window.removeEventListener("resize", checkInnerWidth);
|
||||
}, [checkInnerWidth]);
|
||||
|
||||
//TODO: Add menu, hide along the route
|
||||
const isMobile = !!(isSmallTablet() || mobileView);
|
||||
return <>{children(isMobile)}</>;
|
||||
};
|
||||
|
||||
export default SettingsPageLayout;
|
@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
.combo-button-label {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.category-item-wrapper {
|
||||
padding-top: 20px;
|
||||
|
||||
.category-item-heading {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.category-item-description {
|
||||
color: #657077;
|
||||
font-size: 13px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.inherit-title-link {
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledComponent.defaultProps = { theme: Base };
|
||||
|
||||
const SettingsPageMobileView = ({ children }) => {
|
||||
return <StyledComponent>{children}</StyledComponent>;
|
||||
};
|
||||
|
||||
export default SettingsPageMobileView;
|
Loading…
Reference in New Issue
Block a user