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

✨ add console-opening button on bottom bar

Browse source
This commit is contained in:
ghalestrilo 2020-07-21 12:21:46 -03:00
parent 4ac8fa0f34
commit db5d853ff1
3 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/common/icons.jsx
View file

@ -12,6 +12,8 @@ import Exit from '../images/exit.svg';
import DropdownArrow from '../images/down-filled-triangle.svg'; import DropdownArrow from '../images/down-filled-triangle.svg';
import Preferences from '../images/preferences.svg'; import Preferences from '../images/preferences.svg';
import Play from '../images/triangle-arrow-right.svg'; import Play from '../images/triangle-arrow-right.svg';
import Code from '../images/code.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
@ -74,3 +76,4 @@ export const ExitIcon = withLabel(Exit);
export const DropdownArrowIcon = withLabel(DropdownArrow); export const DropdownArrowIcon = withLabel(DropdownArrow);
export const PreferencesIcon = withLabel(Preferences); export const PreferencesIcon = withLabel(Preferences);
export const PlayIcon = withLabel(Play); export const PlayIcon = withLabel(Play);
export const CodeIcon = withLabel(Code);

8
client/components/mobile/ActionStrip.jsx
View file

@ -4,25 +4,25 @@ import { bindActionCreators } from 'redux';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { prop, remSize } from '../../theme'; import { prop, remSize } from '../../theme';
import IconButton from './IconButton'; import IconButton from './IconButton';
import { ExitIcon } from '../../common/icons'; import { CodeIcon } from '../../common/icons';
import * as IDEActions from '../../modules/IDE/actions/ide'; import * as IDEActions from '../../modules/IDE/actions/ide';
const background = prop('MobilePanel.default.background'); const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor'); const textColor = prop('primaryTextColor');
const BottomBarContent = styled.h2` const BottomBarContent = styled.h2`
padding: ${remSize(12)}; padding: ${remSize(8)};
svg { svg {
max-height: ${remSize(32)}; max-height: ${remSize(32)};
padding: ${remSize(4)} /* padding: ${remSize(4)} */
} }
`; `;
export default () => { export default () => {
const { expandConsole } = bindActionCreators(IDEActions, useDispatch()); const { expandConsole } = bindActionCreators(IDEActions, useDispatch());
const actions = [{ icon: ExitIcon, aria: 'Say Something', action: expandConsole }]; const actions = [{ icon: CodeIcon, aria: 'Say Something', action: expandConsole }];
return ( return (
<BottomBarContent> <BottomBarContent>

13
client/images/code.svg
View file

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generated by IcoMoon.io --> <rect x="5" y="8" width="22" height="16" rx="2" fill="#333333"/>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <path d="M24 21H14V20H24V21Z" fill="#F0F0F0"/>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16" viewBox="0 0 20 16"> <path d="M10.4081 16.0231L8.3676 18.0637C8.27757 18.1537 8.15754 18.1537 8.06752 18.0637C7.97749 17.9736 7.97749 17.8536 8.06752 17.7636L9.95802 15.8731L8.06752 13.9826C7.97749 13.8926 7.97749 13.7725 8.06752 13.6675C8.15754 13.5775 8.27757 13.5775 8.3676 13.6675L10.4081 15.723C10.4532 15.753 10.4832 15.8131 10.4832 15.8731C10.4832 15.9181 10.4532 15.9781 10.4081 16.0231Z" fill="#F0F0F0"/>
<path d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path> </svg>
<path d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
<path d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 608 B