💄 improve <Header /> component structure and layout

This commit is contained in:
ghalestrilo 2020-06-30 19:11:48 -03:00
parent 1c1ea98a0b
commit 24a72daf2c
4 changed files with 87 additions and 57 deletions

View file

@ -1,14 +1,16 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import PropTypes from 'prop-types';
import { prop, remSize } from '../../theme'; import { prop, remSize } from '../../theme';
const background = prop('Panel.default.background'); const background = prop('Panel.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const Header = styled.div`
const HeaderDiv = styled.div`
position: fixed; position: fixed;
width: 100%; width: 100%;
background: ${background}; background: ${props => (props.transparent ? 'transparent' : background)};
color: ${textColor}; color: ${textColor};
padding: ${remSize(12)}; padding: ${remSize(12)};
padding-left: ${remSize(16)}; padding-left: ${remSize(16)};
@ -23,8 +25,56 @@ const Header = styled.div`
// TODO: // TODO:
svg { 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; export default Header;

View file

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link } from 'react-router';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { useState } from 'react'; import { useState } from 'react';
@ -30,15 +28,6 @@ import Screen from '../../../components/mobile/MobileScreen';
import Footer from '../../../components/mobile/Footer'; import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper'; 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 isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
@ -55,23 +44,21 @@ const MobileIDEView = (props) => {
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header> <Header
title={project.name}
subtitle={selectedFile.name}
leftButton={
<IconButton to="/mobile" aria-label="Return to original editor"> <IconButton to="/mobile" aria-label="Return to original editor">
<ExitIcon viewBox="0 0 16 16" /> <ExitIcon viewBox="0 0 16 16" />
</IconButton> </IconButton>
<div style={{ marginLeft: '1rem' }}> }
<h2>{project.name}</h2> >
<h3>{selectedFile.name}</h3>
</div>
<IconContainer>
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}> <IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" /> <PreferencesIcon focusable="false" aria-hidden="true" />
</IconButton> </IconButton>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}> <IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" /> <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton> </IconButton>
</IconContainer>
</Header> </Header>
<IDEWrapper> <IDEWrapper>

View file

@ -1,25 +1,20 @@
import React, { useEffect } from 'react'; import React from 'react';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router'; import { withRouter } from 'react-router';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import * as PreferencesActions from '../IDE/actions/preferences'; import * as PreferencesActions from '../IDE/actions/preferences';
import * as IdeActions from '../IDE/actions/ide'; import * as IdeActions from '../IDE/actions/ide';
import IconButton from '../../components/mobile/IconButton';
import Screen from '../../components/mobile/MobileScreen'; import Screen from '../../components/mobile/MobileScreen';
import Header from '../../components/mobile/Header'; import Header from '../../components/mobile/Header';
import PreferencePicker from '../../components/mobile/PreferencePicker'; import PreferencePicker from '../../components/mobile/PreferencePicker';
import { ExitIcon } from '../../common/icons'; import { ExitIcon } from '../../common/icons';
import { remSize, prop } from '../../theme'; import { remSize, prop } from '../../theme';
const IconLinkWrapper = styled(Link)`
width: 3rem;
margin-right: 1.25rem;
margin-left: none;
`;
const Content = styled.div` const Content = styled.div`
z-index: 0; z-index: 0;
margin-top: ${remSize(68)}; margin-top: ${remSize(68)};
@ -32,7 +27,11 @@ const SettingsHeader = styled(Header)`
const SectionHeader = styled.h2` const SectionHeader = styled.h2`
color: ${prop('primaryTextColor')}; 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 ( return (
<Screen fullscreen> <Screen fullscreen>
<section> <section>
<SettingsHeader transparent title="Settings">
<SettingsHeader> <IconButton to="/mobile" aria-label="Return to ide view">
<h1>Settings</h1>
<div style={{ marginLeft: '2rem' }}>
<IconLinkWrapper to="/mobile" aria-label="Return to ide view">
<ExitIcon /> <ExitIcon />
</IconLinkWrapper> </IconButton>
</div>
</SettingsHeader> </SettingsHeader>
<section className="preferences"> <section className="preferences">
<Content> <Content>
@ -186,7 +181,7 @@ const MobilePreferences = (props) => {
{ accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) } { accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
<SectionHeader>Accessible Output</SectionHeader> <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} />) } { outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
</Content> </Content>

View file

@ -49,15 +49,13 @@ const MobileSketchView = (props) => {
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header> <Header
leftButton={
<IconButton to="/mobile" aria-label="Return to original editor"> <IconButton to="/mobile" aria-label="Return to original editor">
<ExitIcon viewBox="0 0 16 16" /> <ExitIcon viewBox="0 0 16 16" />
</IconButton> </IconButton>}
<div style={{ marginLeft: '1rem' }}> title={projectName}
<h2>{projectName}</h2> />
<h3><br /></h3>
</div>
</Header>
<Content> <Content>
<PreviewFrame <PreviewFrame
htmlFile={htmlFile} htmlFile={htmlFile}