💄 improve <Header /> component structure and layout
This commit is contained in:
ghalestrilo
parent
1c1ea98a0b
commit
24a72daf2c
|
|
@ -1,14 +1,16 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import { prop, remSize } from '../../theme';
|
||||
|
||||
const background = prop('Panel.default.background');
|
||||
const textColor = prop('primaryTextColor');
|
||||
|
||||
const Header = styled.div`
|
||||
|
||||
const HeaderDiv = styled.div`
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background: ${background};
|
||||
background: ${props => (props.transparent ? 'transparent' : background)};
|
||||
color: ${textColor};
|
||||
padding: ${remSize(12)};
|
||||
padding-left: ${remSize(16)};
|
||||
|
|
@ -23,8 +25,56 @@ const Header = styled.div`
|
|||
|
||||
// TODO:
|
||||
svg {
|
||||
height: 2rem;
|
||||
max-height: ${remSize(32)};
|
||||
padding: ${remSize(4)}
|
||||
}
|
||||
`;
|
||||
|
||||
const IconContainer = styled.div`
|
||||
margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))};
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
|
||||
const TitleContainer = styled.div`
|
||||
margin-left: ${remSize(4)};
|
||||
margin-right: auto;
|
||||
|
||||
${props => props.padded && `h2{
|
||||
padding-top: ${remSize(10)};
|
||||
padding-bottom: ${remSize(10)};
|
||||
}`}
|
||||
`;
|
||||
|
||||
const Header = ({
|
||||
title, subtitle, leftButton, children, transparent
|
||||
}) => (
|
||||
<HeaderDiv transparent={transparent}>
|
||||
{leftButton}
|
||||
<TitleContainer padded={subtitle === null}>
|
||||
{title && <h2>{title}</h2>}
|
||||
{subtitle && <h3>{subtitle}</h3>}
|
||||
</TitleContainer>
|
||||
<IconContainer>
|
||||
{children}
|
||||
</IconContainer>
|
||||
</HeaderDiv>
|
||||
);
|
||||
|
||||
Header.propTypes = {
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
leftButton: PropTypes.element,
|
||||
children: PropTypes.arrayOf(PropTypes.element),
|
||||
transparent: PropTypes.bool
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
title: null,
|
||||
subtitle: null,
|
||||
leftButton: null,
|
||||
children: [],
|
||||
transparent: false
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router';
|
||||
import { useState } from 'react';
|
||||
|
|
@ -30,15 +28,6 @@ import Screen from '../../../components/mobile/MobileScreen';
|
|||
import Footer from '../../../components/mobile/Footer';
|
||||
import IDEWrapper from '../../../components/mobile/IDEWrapper';
|
||||
|
||||
const IconContainer = styled.div`
|
||||
marginLeft: 2rem;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const TitleContainer = styled.div`
|
||||
|
||||
`;
|
||||
|
||||
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
|
||||
|
||||
const MobileIDEView = (props) => {
|
||||
|
|
@ -55,23 +44,21 @@ const MobileIDEView = (props) => {
|
|||
|
||||
return (
|
||||
<Screen fullscreen>
|
||||
<Header>
|
||||
<IconButton to="/mobile" aria-label="Return to original editor">
|
||||
<ExitIcon viewBox="0 0 16 16" />
|
||||
<Header
|
||||
title={project.name}
|
||||
subtitle={selectedFile.name}
|
||||
leftButton={
|
||||
<IconButton to="/mobile" aria-label="Return to original editor">
|
||||
<ExitIcon viewBox="0 0 16 16" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
|
||||
<PreferencesIcon focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
|
||||
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
<div style={{ marginLeft: '1rem' }}>
|
||||
<h2>{project.name}</h2>
|
||||
<h3>{selectedFile.name}</h3>
|
||||
</div>
|
||||
|
||||
<IconContainer>
|
||||
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
|
||||
<PreferencesIcon focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
|
||||
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
|
||||
</IconButton>
|
||||
</IconContainer>
|
||||
</Header>
|
||||
|
||||
<IDEWrapper>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,20 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link, withRouter } from 'react-router';
|
||||
import { withRouter } from 'react-router';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import * as PreferencesActions from '../IDE/actions/preferences';
|
||||
import * as IdeActions from '../IDE/actions/ide';
|
||||
|
||||
import IconButton from '../../components/mobile/IconButton';
|
||||
import Screen from '../../components/mobile/MobileScreen';
|
||||
import Header from '../../components/mobile/Header';
|
||||
import PreferencePicker from '../../components/mobile/PreferencePicker';
|
||||
import { ExitIcon } from '../../common/icons';
|
||||
import { remSize, prop } from '../../theme';
|
||||
|
||||
const IconLinkWrapper = styled(Link)`
|
||||
width: 3rem;
|
||||
margin-right: 1.25rem;
|
||||
margin-left: none;
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
z-index: 0;
|
||||
margin-top: ${remSize(68)};
|
||||
|
|
@ -32,7 +27,11 @@ const SettingsHeader = styled(Header)`
|
|||
|
||||
const SectionHeader = styled.h2`
|
||||
color: ${prop('primaryTextColor')};
|
||||
padding-top: 2rem
|
||||
padding-top: ${remSize(32)}
|
||||
`;
|
||||
|
||||
const SectionSubeader = styled.h3`
|
||||
color: ${prop('primaryTextColor')};
|
||||
`;
|
||||
|
||||
|
||||
|
|
@ -167,15 +166,11 @@ const MobilePreferences = (props) => {
|
|||
return (
|
||||
<Screen fullscreen>
|
||||
<section>
|
||||
<SettingsHeader transparent title="Settings">
|
||||
|
||||
<SettingsHeader>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div style={{ marginLeft: '2rem' }}>
|
||||
<IconLinkWrapper to="/mobile" aria-label="Return to ide view">
|
||||
<ExitIcon />
|
||||
</IconLinkWrapper>
|
||||
</div>
|
||||
<IconButton to="/mobile" aria-label="Return to ide view">
|
||||
<ExitIcon />
|
||||
</IconButton>
|
||||
</SettingsHeader>
|
||||
<section className="preferences">
|
||||
<Content>
|
||||
|
|
@ -186,7 +181,7 @@ const MobilePreferences = (props) => {
|
|||
{ accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
|
||||
|
||||
<SectionHeader>Accessible Output</SectionHeader>
|
||||
<h3>Used with screen reader</h3>
|
||||
<SectionSubeader>Used with screen reader</SectionSubeader>
|
||||
{ outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
|
||||
|
||||
</Content>
|
||||
|
|
|
|||
|
|
@ -49,15 +49,13 @@ const MobileSketchView = (props) => {
|
|||
|
||||
return (
|
||||
<Screen fullscreen>
|
||||
<Header>
|
||||
<IconButton to="/mobile" aria-label="Return to original editor">
|
||||
<ExitIcon viewBox="0 0 16 16" />
|
||||
</IconButton>
|
||||
<div style={{ marginLeft: '1rem' }}>
|
||||
<h2>{projectName}</h2>
|
||||
<h3><br /></h3>
|
||||
</div>
|
||||
</Header>
|
||||
<Header
|
||||
leftButton={
|
||||
<IconButton to="/mobile" aria-label="Return to original editor">
|
||||
<ExitIcon viewBox="0 0 16 16" />
|
||||
</IconButton>}
|
||||
title={projectName}
|
||||
/>
|
||||
<Content>
|
||||
<PreviewFrame
|
||||
htmlFile={htmlFile}
|
||||
|
|
|
|||
Loading…
Reference in New Issue