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

add play and stop button styling

Browse source
This commit is contained in:
catarak 2016-05-12 17:22:54 -04:00
parent 92444b3ea5
commit 62c4e2244b
5 changed files with 47 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
images/stop.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>stop</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-IDE-light" transform="translate(-280.000000, -69.000000)" fill="#ED225D">
<g id="IDE-CORE-+-Web-dock-&amp;-identity-zone">
<g id="IDE-CORE" transform="translate(0.000000, 45.000000)">
<g id="play-btns" transform="translate(202.000000, 0.000000)">
<g id="stop-+-stop" transform="translate(64.000000, 10.000000)">
<rect id="stop" x="14" y="14" width="16" height="16"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

1
package.json
View file

@ -38,6 +38,7 @@
"express": "^4.13.4",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-inlinesvg": "^0.4.2",
"react-redux": "^4.4.5",
"redux": "^3.5.2"
}

9
shared/components/Toolbar/Toolbar.jsx
View file

@ -1,7 +1,9 @@
import React from 'react';
var Isvg = require('react-inlinesvg');
var playUrl = require('../../../images/play.svg');
var logoUrl = require('../../../images/p5js-logo.svg');
var stopUrl = require('../../../images/stop.svg');
class Toolbar extends React.Component {
render() {
@ -9,8 +11,13 @@ class Toolbar extends React.Component {
<div className="toolbar">
<img className="toolbar__logo" src={logoUrl}/>
<div className="toolbar__play-button" onClick={this.props.toggleSketch}>
<img src={playUrl}/>
<Isvg src={playUrl} alt="Play Sketch" />
</div>
{ this.props.isPlaying ?
<div className="toolbar__stop-button">
<Isvg src={stopUrl} alt="Stop Sketch" />
</div>
: null }
</div>
);
}

13
styles/abstracts/_placeholders.scss
View file

@ -9,4 +9,17 @@
line-height: #{50 / $base-font-size}rem;
cursor: pointer;
& g {
fill: $light-toolbar-button-color;
}
&:hover {
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
& g {
fill: $light-button-hover-color;
}
}
}

5
styles/components/_toolbar.scss
View file

@ -1,5 +1,10 @@
.toolbar__play-button {
@extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem;
}
.toolbar__stop-button {
@extend %toolbar-button;
}
.toolbar__logo {