Skip to content

Commit 24a72da

Browse files
ghalestriloghalestrilo
committed
💄 improve <Header /> component structure and layout
1 parent 1c1ea98 commit 24a72da

File tree

4 files changed

+87
-57
lines changed

4 files changed

+87
-57
lines changed

‎client/components/mobile/Header.jsx

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React from 'react';
22
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
34
import { prop, remSize } from '../../theme';
45

56
const background = prop('Panel.default.background');
67
const textColor = prop('primaryTextColor');
78

8-
const Header = styled.div`
9+
10+
const HeaderDiv = styled.div`
911
position: fixed;
1012
width: 100%;
11-
background: ${background};
13+
background: ${props => (props.transparent ? 'transparent' : background)};
1214
color: ${textColor};
1315
padding: ${remSize(12)};
1416
padding-left: ${remSize(16)};
@@ -23,8 +25,56 @@ const Header = styled.div`
2325
2426
// TODO:
2527
svg {
26-
height: 2rem;
28+
max-height: ${remSize(32)};
29+
padding: ${remSize(4)}
2730
}
2831
`;
2932

33+
const IconContainer = styled.div`
34+
margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))};
35+
display: flex;
36+
`;
37+
38+
39+
const TitleContainer = styled.div`
40+
margin-left: ${remSize(4)};
41+
margin-right: auto;
42+
43+
${props => props.padded && `h2{
44+
padding-top: ${remSize(10)};
45+
padding-bottom: ${remSize(10)};
46+
}`}
47+
`;
48+
49+
const Header = ({
50+
title, subtitle, leftButton, children, transparent
51+
}) => (
52+
<HeaderDiv transparent={transparent}>
53+
{leftButton}
54+
<TitleContainer padded={subtitle === null}>
55+
{title && <h2>{title}</h2>}
56+
{subtitle && <h3>{subtitle}</h3>}
57+
</TitleContainer>
58+
<IconContainer>
59+
{children}
60+
</IconContainer>
61+
</HeaderDiv>
62+
);
63+
64+
Header.propTypes = {
65+
title: PropTypes.string,
66+
subtitle: PropTypes.string,
67+
leftButton: PropTypes.element,
68+
children: PropTypes.arrayOf(PropTypes.element),
69+
transparent: PropTypes.bool
70+
};
71+
72+
Header.defaultProps = {
73+
title: null,
74+
subtitle: null,
75+
leftButton: null,
76+
children: [],
77+
transparent: false
78+
};
79+
3080
export default Header;

‎client/modules/IDE/pages/MobileIDEView.jsx

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import styled from 'styled-components';
4-
import { Link } from 'react-router';
53
import { connect } from 'react-redux';
64
import { withRouter } from 'react-router';
75
import { useState } from 'react';
@@ -30,15 +28,6 @@ import Screen from '../../../components/mobile/MobileScreen';
3028
import Footer from '../../../components/mobile/Footer';
3129
import IDEWrapper from '../../../components/mobile/IDEWrapper';
3230

33-
const IconContainer = styled.div`
34-
marginLeft: 2rem;
35-
display: flex;
36-
`;
37-
38-
const TitleContainer = styled.div`
39-
40-
`;
41-
4231
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
4332

4433
const MobileIDEView = (props) => {
@@ -55,23 +44,21 @@ const MobileIDEView = (props) => {
5544

5645
return (
5746
<Screen fullscreen>
58-
<Header>
59-
<IconButton to="/mobile" aria-label="Return to original editor">
60-
<ExitIcon viewBox="0 0 16 16" />
61-
</IconButton>
62-
<div style={{ marginLeft: '1rem' }}>
63-
<h2>{project.name}</h2>
64-
<h3>{selectedFile.name}</h3>
65-
</div>
66-
67-
<IconContainer>
68-
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
69-
<PreferencesIcon focusable="false" aria-hidden="true" />
47+
<Header
48+
title={project.name}
49+
subtitle={selectedFile.name}
50+
leftButton={
51+
<IconButton to="/mobile" aria-label="Return to original editor">
52+
<ExitIcon viewBox="0 0 16 16" />
7053
</IconButton>
71-
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
72-
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
73-
</IconButton>
74-
</IconContainer>
54+
}
55+
>
56+
<IconButton to="/mobile/preferences" onClick={() => setOverlay('preferences')}>
57+
<PreferencesIcon focusable="false" aria-hidden="true" />
58+
</IconButton>
59+
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
60+
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
61+
</IconButton>
7562
</Header>
7663

7764
<IDEWrapper>

‎client/modules/Mobile/MobilePreferences.jsx

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import React, { useEffect } from 'react';
1+
import React from 'react';
22
import { bindActionCreators } from 'redux';
33
import { connect } from 'react-redux';
4-
import { Link, withRouter } from 'react-router';
4+
import { withRouter } from 'react-router';
55
import PropTypes from 'prop-types';
66
import styled from 'styled-components';
77

88
import * as PreferencesActions from '../IDE/actions/preferences';
99
import * as IdeActions from '../IDE/actions/ide';
1010

11+
import IconButton from '../../components/mobile/IconButton';
1112
import Screen from '../../components/mobile/MobileScreen';
1213
import Header from '../../components/mobile/Header';
1314
import PreferencePicker from '../../components/mobile/PreferencePicker';
1415
import { ExitIcon } from '../../common/icons';
1516
import { remSize, prop } from '../../theme';
1617

17-
const IconLinkWrapper = styled(Link)`
18-
width: 3rem;
19-
margin-right: 1.25rem;
20-
margin-left: none;
21-
`;
22-
2318
const Content = styled.div`
2419
z-index: 0;
2520
margin-top: ${remSize(68)};
@@ -32,7 +27,11 @@ const SettingsHeader = styled(Header)`
3227

3328
const SectionHeader = styled.h2`
3429
color: ${prop('primaryTextColor')};
35-
padding-top: 2rem
30+
padding-top: ${remSize(32)}
31+
`;
32+
33+
const SectionSubeader = styled.h3`
34+
color: ${prop('primaryTextColor')};
3635
`;
3736

3837

@@ -167,15 +166,11 @@ const MobilePreferences = (props) => {
167166
return (
168167
<Screen fullscreen>
169168
<section>
169+
<SettingsHeader transparent title="Settings">
170170

171-
<SettingsHeader>
172-
<h1>Settings</h1>
173-
174-
<div style={{ marginLeft: '2rem' }}>
175-
<IconLinkWrapper to="/mobile" aria-label="Return to ide view">
176-
<ExitIcon />
177-
</IconLinkWrapper>
178-
</div>
171+
<IconButton to="/mobile" aria-label="Return to ide view">
172+
<ExitIcon />
173+
</IconButton>
179174
</SettingsHeader>
180175
<section className="preferences">
181176
<Content>
@@ -186,7 +181,7 @@ const MobilePreferences = (props) => {
186181
{ accessibilitySettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
187182

188183
<SectionHeader>Accessible Output</SectionHeader>
189-
<h3>Used with screen reader</h3>
184+
<SectionSubeader>Used with screen reader</SectionSubeader>
190185
{ outputSettings.map(option => <PreferencePicker key={`${option.title}wrapper`} {...option} />) }
191186

192187
</Content>

‎client/modules/Mobile/MobileSketchView.jsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,13 @@ const MobileSketchView = (props) => {
4949

5050
return (
5151
<Screen fullscreen>
52-
<Header>
53-
<IconButton to="/mobile" aria-label="Return to original editor">
54-
<ExitIcon viewBox="0 0 16 16" />
55-
</IconButton>
56-
<div style={{ marginLeft: '1rem' }}>
57-
<h2>{projectName}</h2>
58-
<h3><br /></h3>
59-
</div>
60-
</Header>
52+
<Header
53+
leftButton={
54+
<IconButton to="/mobile" aria-label="Return to original editor">
55+
<ExitIcon viewBox="0 0 16 16" />
56+
</IconButton>}
57+
title={projectName}
58+
/>
6159
<Content>
6260
<PreviewFrame
6361
htmlFile={htmlFile}

0 commit comments

Comments
 (0)