Web: Common: added main bar
This commit is contained in:
parent
7c7263c23a
commit
dfaa34ac39
@ -22,6 +22,8 @@ import FloatingButton from "../FloatingButton";
|
|||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import Selecto from "react-selecto";
|
import Selecto from "react-selecto";
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
import { LayoutContextConsumer } from "studio/Layout/context";
|
||||||
|
import classnames from "classnames";
|
||||||
|
|
||||||
const StyledSelectoWrapper = styled.div`
|
const StyledSelectoWrapper = styled.div`
|
||||||
.selecto-selection {
|
.selecto-selection {
|
||||||
@ -31,22 +33,23 @@ const StyledSelectoWrapper = styled.div`
|
|||||||
|
|
||||||
const StyledMainBar = styled.div`
|
const StyledMainBar = styled.div`
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@media ${desktop} {
|
||||||
|
margin-left: -24px;
|
||||||
|
max-width: ${(props) => props.width + 40 + "px"};
|
||||||
|
}
|
||||||
|
|
||||||
${!isMobile
|
@media ${tablet} {
|
||||||
? css`
|
margin-left: -16px;
|
||||||
padding-right: 24px;
|
max-width: ${(props) => props.width + 36 + "px"};
|
||||||
@media ${tablet} {
|
}
|
||||||
padding-right: 16px;
|
${isMobile &&
|
||||||
}
|
css`
|
||||||
`
|
z-index: 149;
|
||||||
: css`
|
// min-width: 100%;
|
||||||
margin-top: 10px;
|
position: fixed;
|
||||||
padding-right: 0px;
|
// padding-left: 8px;
|
||||||
|
top: 48px;
|
||||||
@media ${desktop} {
|
`};
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
function ArticleHeader() {
|
function ArticleHeader() {
|
||||||
@ -239,6 +242,7 @@ class PageLayout extends React.Component {
|
|||||||
isArticlePinned,
|
isArticlePinned,
|
||||||
isDesktop,
|
isDesktop,
|
||||||
isHomepage,
|
isHomepage,
|
||||||
|
maintenanceExist,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
let articleHeaderContent = null;
|
let articleHeaderContent = null;
|
||||||
let articleMainButtonContent = null;
|
let articleMainButtonContent = null;
|
||||||
@ -370,16 +374,30 @@ class PageLayout extends React.Component {
|
|||||||
pinned={isArticlePinned}
|
pinned={isArticlePinned}
|
||||||
visible={isArticleVisible}
|
visible={isArticleVisible}
|
||||||
>
|
>
|
||||||
<div id="main-bar" style={{ marginLeft: "-24px" }}>
|
<LayoutContextConsumer>
|
||||||
<SubSectionBar>
|
{(value) => (
|
||||||
{sectionBarContent
|
<StyledMainBar
|
||||||
? sectionBarContent.props.children
|
width={width}
|
||||||
: null}
|
id="main-bar"
|
||||||
</SubSectionBar>
|
className={classnames("main-bar", {
|
||||||
</div>
|
"main-bar--hidden":
|
||||||
{/* <div style={{ padding: "0 0 0 24px" }}> */}
|
value.isVisible === undefined
|
||||||
|
? false
|
||||||
|
: !value.isVisible,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<SubSectionBar>
|
||||||
|
{sectionBarContent
|
||||||
|
? sectionBarContent.props.children
|
||||||
|
: null}
|
||||||
|
</SubSectionBar>
|
||||||
|
</StyledMainBar>
|
||||||
|
)}
|
||||||
|
</LayoutContextConsumer>
|
||||||
|
|
||||||
{isSectionHeaderAvailable && (
|
{isSectionHeaderAvailable && (
|
||||||
<SubSectionHeader
|
<SubSectionHeader
|
||||||
|
maintenanceExist={maintenanceExist}
|
||||||
isHeaderVisible={isHeaderVisible}
|
isHeaderVisible={isHeaderVisible}
|
||||||
isArticlePinned={isArticlePinned}
|
isArticlePinned={isArticlePinned}
|
||||||
viewAs={viewAs}
|
viewAs={viewAs}
|
||||||
@ -573,6 +591,7 @@ export default inject(({ auth }) => {
|
|||||||
setIsArticleVisible,
|
setIsArticleVisible,
|
||||||
setIsBackdropVisible,
|
setIsBackdropVisible,
|
||||||
isDesktopClient,
|
isDesktopClient,
|
||||||
|
maintenanceExist,
|
||||||
} = settingsStore;
|
} = settingsStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -586,6 +605,7 @@ export default inject(({ auth }) => {
|
|||||||
setIsArticleVisible,
|
setIsArticleVisible,
|
||||||
isBackdropVisible,
|
isBackdropVisible,
|
||||||
setIsBackdropVisible,
|
setIsBackdropVisible,
|
||||||
|
maintenanceExist,
|
||||||
isDesktop: isDesktopClient,
|
isDesktop: isDesktopClient,
|
||||||
};
|
};
|
||||||
})(observer(PageLayout));
|
})(observer(PageLayout));
|
||||||
|
Loading…
Reference in New Issue
Block a user