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

refactor placeholder to include pref button

Browse source
This commit is contained in:
mathuramg 2016-06-20 12:04:58 -04:00
parent de165bbe19
commit 0850705e34
7 changed files with 65 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
images/exit.svg Normal file
View file

@ -0,0 +1,12 @@
<?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.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="exit" stroke="#white">
<path d="M7.29289322,8 L1.14644661,1.85355339 L0.792893219,1.5 L1.5,0.792893219 L1.85355339,1.14644661 L8,7.29289322 L14.1464466,1.14644661 L14.5,0.792893219 L15.2071068,1.5 L14.8535534,1.85355339 L8.70710678,8 L14.8535534,14.1464466 L15.2071068,14.5 L14.5,15.2071068 L14.1464466,14.8535534 L8,8.70710678 L1.85355339,14.8535534 L1.5,15.2071068 L0.792893219,14.5 L1.14644661,14.1464466 L7.29289322,8 Z" id="exit"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 980 B

25
images/preferences.svg
View file

@ -1,19 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?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"> <svg width="20px" height="20px" viewBox="0 0 20 20" 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 --> <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>stop</title> <title>preferences</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs>
<path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
</defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <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="Desktop-IDE-light" fill="#ED225D">
<g id="IDE-CORE-+-Web-dock-&amp;-identity-zone"> <g id="preferences">
<g id="IDE-CORE" transform="translate(0.000000, 45.000000)"> <mask id="mask-2" fill="white">
<g id="play-btns" transform="translate(202.000000, 0.000000)"> <use xlink:href="#path-1"></use>
<g id="stop-+-stop" transform="translate(64.000000, 10.000000)"> </mask>
<rect id="stop" x="14" y="14" width="16" height="16"></rect> <use id="Combined-Shape" fill="#white" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g> </g>
</g> </g>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

6
shared/components/Preferences/Preferences.jsx
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
var Isvg = require('react-inlinesvg'); var Isvg = require('react-inlinesvg');
var preferences = require('../../../images/preferences.svg'); var exitUrl = require('../../../images/exit.svg');
var classNames = require('classnames'); var classNames = require('classnames');
class Preferences extends React.Component { class Preferences extends React.Component {
@ -11,9 +11,9 @@ class Preferences extends React.Component {
"preferences--selected": this.props.isPreferencesShowing "preferences--selected": this.props.isPreferencesShowing
}); });
return ( return (
<div className={preferencesContainerClass}> <div className={preferencesContainerClass} tabindex="0">
<button className="preferences__exit-button" onClick={this.props.closePreferences}> <button className="preferences__exit-button" onClick={this.props.closePreferences}>
X <Isvg src={exitUrl} alt="Exit Preferences" />
</button> </button>
</div> </div>
); );

6
shared/containers/App/App.jsx
View file

@ -20,6 +20,9 @@ class App extends React.Component {
openPreferences={this.props.openPreferences} openPreferences={this.props.openPreferences}
isPreferencesShowing = {this.props.preferences.isPreferencesShowing} isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
/> />
<Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
closePreferences={this.props.closePreferences}/>
<Editor <Editor
content={this.props.file.content} content={this.props.file.content}
updateFile={this.props.updateFile} /> updateFile={this.props.updateFile} />
@ -29,9 +32,6 @@ class App extends React.Component {
<link type='text/css' rel='stylesheet' href='preview-styles.css' /> <link type='text/css' rel='stylesheet' href='preview-styles.css' />
} }
isPlaying={this.props.ide.isPlaying}/> isPlaying={this.props.ide.isPlaying}/>
<Preferences
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
closePreferences={this.props.closePreferences}/>
</div> </div>
); );
} }

25
styles/abstracts/_placeholders.scss
View file

@ -1,6 +1,4 @@
%toolbar-button { %button {
background-color: $light-button-background-color;
color: $light-button-color;
display: inline-block; display: inline-block;
height: #{44 / $base-font-size}rem; height: #{44 / $base-font-size}rem;
width: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
@ -10,11 +8,15 @@
cursor: pointer; cursor: pointer;
border: none; border: none;
outline: none; outline: none;
}
%toolbar-button {
@extend %button;
background-color: $light-button-background-color;
color: $light-button-color;
& g { & g {
fill: $light-toolbar-button-color; fill: $light-toolbar-button-color;
} }
&:hover { &:hover {
background-color: $light-button-background-hover-color; background-color: $light-button-background-hover-color;
color: $light-button-hover-color; color: $light-button-hover-color;
@ -30,3 +32,18 @@
} }
} }
} }
%preferences-button {
@extend %button;
background-color: $light-preferences-button-background-color;
& g {
fill: $light-preferences-button-color;
}
&:hover {
background-color: $light-preferences-button-background-color;
& g {
fill: $light-preferences-button-hover-color;
}
}
}

7
styles/abstracts/_variables.scss
View file

@ -35,4 +35,9 @@ $dark-button-active-color: $white;
$editor-border-color: #f4f4f4; $editor-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3; $editor-selected-line-color: #f3f3f3;
$preferences-background-color: #f4f4f4; $light-preferences-background-color: #f4f4f4;
$light-preferences-button-color: #8e8e8f;
$light-preferences-button-hover-color: #333333;
$light-preferences-button-background-color: #e6e6e6;

18
styles/components/_preferences.scss
View file

@ -1,5 +1,5 @@
.preferences { .preferences {
background-color: $preferences-background-color; background-color: $light-preferences-background-color;
display: none; display: none;
&--selected { &--selected {
display: flex; display: flex;
@ -7,15 +7,11 @@
} }
.preferences__exit-button { .preferences__exit-button {
background-color: $light-button-background-color; @extend %preferences-button;
color: $light-button-color;
display: inline-block;
height: #{44 / $base-font-size}rem;
width: #{44 / $base-font-size}rem;
text-align: center;
line-height: #{50 / $base-font-size}rem;
cursor: pointer;
border: none;
outline: none;
margin-left: auto; margin-left: auto;
background-color: $light-preferences-background-color;
&:hover {
background-color: $light-preferences-background-color;
}
} }