mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 14:07:20 +03:00
finished mobile top bar
This commit is contained in:
parent
c3ee809e4a
commit
9e12cb402a
@ -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,
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user