finished mobile top bar

This commit is contained in:
Martina 2020-09-28 22:47:27 -07:00
parent c3ee809e4a
commit 9e12cb402a
4 changed files with 105 additions and 51 deletions

View File

@ -44,8 +44,8 @@ export const system = {
export const zindex = {
navigation: 1,
sidebar: 5,
alert: 4,
header: 3,
alert: 3,
header: 4,
modal: 6,
tooltip: 7,
};

View File

@ -31,11 +31,11 @@ const STYLES_ICON_ELEMENT = css`
const STYLES_APPLICATION_HEADER = css`
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
width: calc(100% - ${Constants.sizes.navigation}px);
height: 56px;
padding: 12px 48px 0 36px;
padding: 0 48px 0 36px;
pointer-events: none;
background-color: ${Constants.system.white};
@ -48,7 +48,7 @@ const STYLES_APPLICATION_HEADER = css`
}
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 12px 24px 0 12px;
padding: 0px 12px;
width: 100%;
}
`;
@ -134,13 +134,18 @@ export default class ApplicationHeader extends React.Component {
return (
<header css={STYLES_APPLICATION_HEADER}>
<div css={STYLES_LEFT}>
<span css={STYLES_MOBILE_ONLY}>
<span
css={STYLES_MOBILE_ONLY}
style={{ pointerEvents: "auto", marginLeft: 8, marginRight: 16 }}
>
<ApplicationUserControls
viewer={this.props.viewer}
onAction={this.props.onAction}
onSignOut={this.props.onSignOut}
/>
</span>
<span css={STYLES_MOBILE_HIDDEN}>
<span
css={STYLES_ICON_ELEMENT}
style={
@ -167,7 +172,6 @@ export default class ApplicationHeader extends React.Component {
<SVG.NavigationArrow height="24px" />
</span>
<span css={STYLES_MOBILE_HIDDEN}>
<span
css={this.state.isRefreshing ? STYLES_ROTATION : STYLES_STATIC}
style={{ marginLeft: 24 }}
@ -176,7 +180,6 @@ export default class ApplicationHeader extends React.Component {
<SVG.Refresh height="20px" />
</span>
</span>
</span>
<span
css={STYLES_ICON_ELEMENT}
@ -185,17 +188,57 @@ export default class ApplicationHeader extends React.Component {
>
<SVG.Search height="24px" />
</span>
</span>
</div>
{/* <div css={STYLES_MIDDLE} /> */}
<div css={STYLES_RIGHT}>
<span css={STYLES_MOBILE_HIDDEN}>
<span
css={STYLES_ICON_ELEMENT}
onClick={() =>
this.props.onAction({ type: "SIDEBAR", value: "SIDEBAR_HELP" })
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_HELP",
})
}
>
<SVG.Help height="24px" />
</span>
</span>
<span css={STYLES_MOBILE_ONLY}>
<span
css={STYLES_ICON_ELEMENT}
style={
isBackDisabled
? { cursor: "not-allowed", color: Constants.system.border }
: null
}
onClick={isBackDisabled ? () => {} : this.props.onBack}
>
<SVG.NavigationArrow
height="24px"
style={{ transform: `rotate(180deg)` }}
/>
</span>
<span
css={STYLES_ICON_ELEMENT}
style={
isForwardDisabled
? { cursor: "not-allowed", color: Constants.system.border }
: null
}
onClick={isForwardDisabled ? () => {} : this.props.onForward}
>
<SVG.NavigationArrow height="24px" />
</span>
<span
css={STYLES_ICON_ELEMENT}
style={{ marginLeft: 12 }}
onClick={this._handleCreateSearch}
>
<SVG.Search height="24px" />
</span>
</span>
</div>
</header>
);

View File

@ -66,6 +66,7 @@ const STYLES_CONTENT = css`
margin-top: ${Constants.sizes.topOffset}px;
@media (max-width: ${Constants.sizes.mobile}px) {
padding-left: 0px;
margin-top: calc(${Constants.sizes.topOffset}px + 36px);
}
`;
@ -144,6 +145,10 @@ const STYLES_SIDEBAR_HEADER = css`
const STYLES_SIDEBAR_CONTENT = css`
padding: 56px 24px 24px 24px;
padding-top: calc(56px + ${Constants.sizes.topOffset}px);
@media (max-width: ${Constants.sizes.mobile}px) {
padding-top: 8px;
}
`;
const STYLES_BLOCK = css`
@ -163,6 +168,12 @@ export default class ApplicationLayout extends React.Component {
_navigation;
_body;
_handleDismiss = (e) => {
e.stopPropagation();
e.preventDefault();
this.props.onDismissSidebar();
};
render() {
let sidebarElements = null;
if (this.props.sidebar) {
@ -175,8 +186,8 @@ export default class ApplicationLayout extends React.Component {
<div css={STYLES_SIDEBAR_HEADER}>
<div
css={STYLES_BLOCK}
onMouseUp={this.props.onDismissSidebar}
onTouchEnd={this.props.onDismissSidebar}
onMouseUp={this._handleDismiss}
onTouchEnd={this._handleDismiss}
>
<SVG.Dismiss height="24px" />
</div>
@ -242,7 +253,7 @@ export default class ApplicationLayout extends React.Component {
captureResize={false}
captureScroll={false}
enabled
onOutsideRectEvent={this.props.onDismissSidebar}
onOutsideRectEvent={this._handleDismiss}
>
<div
css={STYLES_SIDEBAR}

View File

@ -23,6 +23,7 @@ const STYLES_HEADER = css`
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 0px;
width: auto;
}
`;
@ -51,9 +52,7 @@ const STYLES_PROFILE = css`
const STYLES_PROFILE_MOBILE = css`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
@media (min-width: ${Constants.sizes.mobile}px) {
@ -76,7 +75,6 @@ const STYLES_PROFILE_IMAGE = css`
height: 24px;
width: 24px;
margin-left: 0px;
margin-bottom: 4px;
}
`;
@ -265,6 +263,8 @@ export default class ApplicationUserControls extends React.Component {
onClick={this._handleClick}
style={{
backgroundImage: `url('${this.props.viewer.data.photo}')`,
height: 28,
width: 28,
}}
/>
{/* <div onClick={this._handleClick} css={STYLES_ITEM_BOX_MOBILE}>