r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

🚧 add icons to header

This commit is contained in:
ghalestrilo 2020-06-16 17:23:49 -03:00
parent 0d119aa5e7 5aa349522a
commit bdedc63110
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/common/Icons.jsx
View File

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

40
client/modules/IDE/pages/IDEViewMobile.jsx
View File

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