🚧 add icons to header

This commit is contained in:
ghalestrilo 2020-06-16 17:23:49 -03:00
commit bdedc63110
2 changed files with 24 additions and 21 deletions

View file

@ -7,6 +7,9 @@ import Google from '../images/google.svg';
import Plus from '../images/plus-icon.svg';
import Close from '../images/close.svg';
import DropdownArrow from '../images/down-filled-triangle.svg';
import Play from '../images/triangle-arrow-right.svg';
import Preferences from '../images/preferences.svg';
// HOC that adds the right web accessibility props
// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@ -49,3 +52,5 @@ export const GoogleIcon = withLabel(Google);
export const PlusIcon = withLabel(Plus);
export const CloseIcon = withLabel(Close);
export const DropdownArrowIcon = withLabel(DropdownArrow);
export const PlayIcon = withLabel(Play);
export const PreferencesIcon = withLabel(Preferences);

View file

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
// import { Link } from 'react-router';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { useState } from 'react';
@ -21,10 +21,12 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports
import Editor from '../components/Editor';
import { prop, remSize } from '../../../theme';
import CloseIcon from '../../../images/exit.svg';
import { CloseIcon } from '../../../common/Icons';
import PreferencesIcon from '../../../images/preferences.svg';
import PlayIcon from '../../../images/triangle-arrow-right.svg';
const background = prop('Button.default.background');
const textColor = prop('primaryTextColor');
@ -42,7 +44,7 @@ const Header = styled.div`
display: flex;
flex: 1;
flex-direction: row;
// justify-content: space-between;
justify-content: flex-start;
align-items: center;
`;
@ -63,12 +65,11 @@ const Content = styled.div`
margin-top: ${remSize(16)};
`;
const Icon = styled.a`
const IconButton = styled.button`
width: 3rem;
> svg {
fill: ${textColor};
color: ${textColor};
margin-left: ${remSize(16)};
align-items: center;
width: 100%;
height: auto;
}
`;
@ -95,26 +96,23 @@ const IDEViewMobile = (props) => {
return (
<Screen>
<Header>
<Link to="/" style={{ width: '3rem', marginRight: '1.25rem' }}>
<CloseIcon viewBox="20 21 60 60" aria-hidden="true" aria-label="close header" />
</Link>
<div>
<h2>{project.name}</h2>
<h3>{selectedFile.name}</h3>
</div>
<div>
<Icon href="/">
<CloseIcon focusable="false" aria-hidden="true" />
</Icon>
<Icon onClick={() => setOverlay('preferences')}>
<div style={{ marginLeft: '2rem' }}>
<IconButton onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" />
</Icon>
<Icon onClick={() => setOverlay('runSketch')}>
<PlayIcon focusable="false" aria-hidden="true" />
</Icon>
</IconButton>
<IconButton onClick={() => setOverlay('runSketch')}>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton>
</div>
</Header>
{/* <div>
{ [preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning]
.map(pr => <h5>{pr.toString()}</h5>) }
</div> */}
<Content>
<Editor