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

Merge branch 'master' of https://github.com/processing/p5.js-web-editor into add-readme-ko-translation

Browse source
This commit is contained in:
Minjun Kim 2020-04-09 14:26:51 +02:00
commit 31e67eed7a
22 changed files with 241 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.github/FUNDING.yml vendored Normal file
View file

@ -0,0 +1 @@
custom: https://processingfoundation.org/support

18
client/components/Nav.jsx
View file

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { Link, browserHistory } from 'react-router'; import { Link } from 'react-router';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames'; import classNames from 'classnames';
import * as IDEActions from '../modules/IDE/actions/ide'; import * as IDEActions from '../modules/IDE/actions/ide';
@ -167,8 +167,6 @@ class Nav extends React.PureComponent {
handleLogout() { handleLogout() {
this.props.logoutUser(); this.props.logoutUser();
// if you're on the settings page, probably.
browserHistory.push('/');
this.setDropdown('none'); this.setDropdown('none');
} }
@ -184,7 +182,8 @@ class Nav extends React.PureComponent {
} }
handleShare() { handleShare() {
this.props.showShareModal(); const { username } = this.props.params;
this.props.showShareModal(this.props.project.id, this.props.project.name, username);
this.setDropdown('none'); this.setDropdown('none');
} }
@ -717,6 +716,7 @@ Nav.propTypes = {
}).isRequired, }).isRequired,
project: PropTypes.shape({ project: PropTypes.shape({
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string,
owner: PropTypes.shape({ owner: PropTypes.shape({
id: PropTypes.string id: PropTypes.string
}) })
@ -742,7 +742,10 @@ Nav.propTypes = {
layout: PropTypes.oneOf(['dashboard', 'project']), layout: PropTypes.oneOf(['dashboard', 'project']),
rootFile: PropTypes.shape({ rootFile: PropTypes.shape({
id: PropTypes.string.isRequired id: PropTypes.string.isRequired
}).isRequired }).isRequired,
params: PropTypes.shape({
username: PropTypes.string
})
}; };
Nav.defaultProps = { Nav.defaultProps = {
@ -752,7 +755,10 @@ Nav.defaultProps = {
}, },
cmController: {}, cmController: {},
layout: 'project', layout: 'project',
warnIfUnsavedChanges: undefined warnIfUnsavedChanges: undefined,
params: {
username: undefined
}
}; };
function mapStateToProps(state) { function mapStateToProps(state) {

8
client/modules/App/components/loader.jsx
View file

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
const Loader = () => ( const Loader = () => (
<div className="loader"> <div className="loader-container">
<div className="loader__circle1" /> <div className="loader">
<div className="loader__circle2" /> <div className="loader__circle1" />
<div className="loader__circle2" />
</div>
</div> </div>
); );
export default Loader; export default Loader;

30
client/modules/IDE/components/CollectionList/CollectionListRow.jsx
View file

@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component {
renameOpen: false, renameOpen: false,
renameValue: '', renameValue: '',
}; };
this.renameInput = React.createRef();
} }
onFocusComponent = () => { onFocusComponent = () => {
@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component {
this.setState({ this.setState({
renameOpen: true, renameOpen: true,
renameValue: this.props.collection.name, renameValue: this.props.collection.name,
}); }, () => this.renameInput.current.focus());
} }
handleRenameChange = (e) => { handleRenameChange = (e) => {
@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component {
} }
handleRenameEnter = (e) => { handleRenameEnter = (e) => {
const isValid = this.state.renameValue !== '';
if (e.key === 'Enter') { if (e.key === 'Enter') {
if (isValid) { this.updateName();
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue });
}
// this.resetName();
this.closeAll(); this.closeAll();
} }
} }
// resetName = () => { handleRenameBlur = () => {
// this.setState({ this.updateName();
// renameValue: this.props.collection.name this.closeAll();
// }); }
// }
updateName = () => {
const isValid = this.state.renameValue.trim().length !== 0;
if (isValid) {
this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() });
}
}
renderActions = () => { renderActions = () => {
const { optionsOpen } = this.state; const { optionsOpen } = this.state;
@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component {
value={renameValue} value={renameValue}
onChange={this.handleRenameChange} onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter} onKeyUp={this.handleRenameEnter}
// onBlur={this.resetName} onBlur={this.handleRenameBlur}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
ref={this.renameInput}
/> />
} }
</React.Fragment> </React.Fragment>

82
client/modules/IDE/components/FileNode.jsx
View file

@ -160,6 +160,7 @@ export class FileNode extends React.Component {
type="text" type="text"
className="sidebar__file-item-input" className="sidebar__file-item-input"
value={this.props.name} value={this.props.name}
maxLength="128"
onChange={this.handleFileNameChange} onChange={this.handleFileNameChange}
ref={(element) => { this.fileNameInput = element; }} ref={(element) => { this.fileNameInput = element; }}
onBlur={() => { onBlur={() => {
@ -184,40 +185,50 @@ export class FileNode extends React.Component {
{(() => { // eslint-disable-line {(() => { // eslint-disable-line
if (this.props.fileType === 'folder') { if (this.props.fileType === 'folder') {
return ( return (
<li> <React.Fragment>
<button <li>
aria-label="add file" <button
onClick={() => { aria-label="add folder"
this.props.newFile(this.props.id); onClick={() => {
setTimeout(() => this.hideFileOptions(), 0); this.props.newFolder(this.props.id);
}} setTimeout(this.hideFileOptions, 0);
onBlur={this.onBlurComponent} }}
onFocus={this.onFocusComponent} onBlur={this.onBlurComponent}
className="sidebar__file-item-option" onFocus={this.onFocusComponent}
> className="sidebar__file-item-option"
Add File >
</button> Create folder
</li> </button>
); </li>
} <li>
})()} <button
{(() => { // eslint-disable-line aria-label="add file"
if (this.props.fileType === 'folder') { onClick={() => {
return ( this.props.newFile(this.props.id);
<li> setTimeout(this.hideFileOptions, 0);
<button }}
aria-label="add folder" onBlur={this.onBlurComponent}
onClick={() => { onFocus={this.onFocusComponent}
this.props.newFolder(this.props.id); className="sidebar__file-item-option"
setTimeout(() => this.hideFileOptions(), 0); >
}} Create file
onBlur={this.onBlurComponent} </button>
onFocus={this.onFocusComponent} </li>
className="sidebar__file-item-option" <li>
> <button
Add Folder aria-label="upload file"
</button> onClick={() => {
</li> this.props.openUploadFileModal(this.props.id);
setTimeout(this.hideFileOptions, 0);
}}
onBlur={this.onBlurComponent}
onFocus={this.onFocusComponent}
>
Upload file
</button>
</li>
</React.Fragment>
); );
} }
})()} })()}
@ -288,7 +299,8 @@ FileNode.propTypes = {
newFolder: PropTypes.func.isRequired, newFolder: PropTypes.func.isRequired,
showFolderChildren: PropTypes.func.isRequired, showFolderChildren: PropTypes.func.isRequired,
hideFolderChildren: PropTypes.func.isRequired, hideFolderChildren: PropTypes.func.isRequired,
canEdit: PropTypes.bool.isRequired canEdit: PropTypes.bool.isRequired,
openUploadFileModal: PropTypes.func.isRequired
}; };
FileNode.defaultProps = { FileNode.defaultProps = {

1
client/modules/IDE/components/NewFileForm.jsx
View file

@ -29,6 +29,7 @@ class NewFileForm extends React.Component {
id="name" id="name"
type="text" type="text"
placeholder="Name" placeholder="Name"
maxLength="128"
{...domOnlyProps(name)} {...domOnlyProps(name)}
ref={(element) => { this.fileName = element; }} ref={(element) => { this.fileName = element; }}
/> />

1
client/modules/IDE/components/NewFolderForm.jsx
View file

@ -29,6 +29,7 @@ class NewFolderForm extends React.Component {
className="new-folder-form__name-input" className="new-folder-form__name-input"
id="name" id="name"
type="text" type="text"
maxLength="128"
placeholder="Name" placeholder="Name"
ref={(element) => { this.fileName = element; }} ref={(element) => { this.fileName = element; }}
{...domOnlyProps(name)} {...domOnlyProps(name)}

8
client/modules/IDE/components/Searchbar/Searchbar.jsx
View file

@ -44,13 +44,9 @@ class Searchbar extends React.Component {
const { searchValue } = this.state; const { searchValue } = this.state;
return ( return (
<div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}> <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
<button <div className="searchbar__button">
type="submit"
className="searchbar__button"
onClick={this.handleSearchEnter}
>
<InlineSVG className="searchbar__icon" src={searchIcon} /> <InlineSVG className="searchbar__icon" src={searchIcon} />
</button> </div>
<input <input
className="searchbar__input" className="searchbar__input"
type="text" type="text"

29
client/modules/IDE/components/SketchList.jsx
View file

@ -32,6 +32,7 @@ class SketchListRowBase extends React.Component {
renameValue: props.sketch.name, renameValue: props.sketch.name,
isFocused: false, isFocused: false,
}; };
this.renameInput = React.createRef();
} }
onFocusComponent = () => { onFocusComponent = () => {
@ -69,8 +70,9 @@ class SketchListRowBase extends React.Component {
openRename = () => { openRename = () => {
this.setState({ this.setState({
renameOpen: true renameOpen: true,
}); renameValue: this.props.sketch.name
}, () => this.renameInput.current.focus());
} }
closeRename = () => { closeRename = () => {
@ -94,15 +96,27 @@ class SketchListRowBase extends React.Component {
handleRenameEnter = (e) => { handleRenameEnter = (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
// TODO pass this func this.updateName();
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue);
this.closeAll(); this.closeAll();
} }
} }
handleRenameBlur = () => {
this.updateName();
this.closeAll();
}
updateName = () => {
const isValid = this.state.renameValue.trim().length !== 0;
if (isValid) {
this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim());
}
}
resetSketchName = () => { resetSketchName = () => {
this.setState({ this.setState({
renameValue: this.props.sketch.name renameValue: this.props.sketch.name,
renameOpen: false
}); });
} }
@ -255,8 +269,9 @@ class SketchListRowBase extends React.Component {
value={renameValue} value={renameValue}
onChange={this.handleRenameChange} onChange={this.handleRenameChange}
onKeyUp={this.handleRenameEnter} onKeyUp={this.handleRenameEnter}
onBlur={this.resetSketchName} onBlur={this.handleRenameBlur}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
ref={this.renameInput}
/> />
} }
</React.Fragment> </React.Fragment>
@ -297,7 +312,7 @@ SketchListRowBase.propTypes = {
cloneProject: PropTypes.func.isRequired, cloneProject: PropTypes.func.isRequired,
exportProjectAsZip: PropTypes.func.isRequired, exportProjectAsZip: PropTypes.func.isRequired,
changeProjectName: PropTypes.func.isRequired, changeProjectName: PropTypes.func.isRequired,
onAddToCollection: PropTypes.func.isRequired, onAddToCollection: PropTypes.func.isRequired
}; };
function mapDispatchToPropsSketchListRow(dispatch) { function mapDispatchToPropsSketchListRow(dispatch) {

2
client/modules/IDE/components/Toolbar.jsx
View file

@ -32,7 +32,7 @@ class Toolbar extends React.Component {
} }
validateProjectName() { validateProjectName() {
if (this.props.project.name === '') { if ((this.props.project.name.trim()).length === 0) {
this.props.setProjectName(this.originalProjectName); this.props.setProjectName(this.originalProjectName);
} }
} }

78
client/modules/User/components/Collection.jsx
View file

@ -327,44 +327,46 @@ class Collection extends React.Component {
</Helmet> </Helmet>
{this._renderLoader()} {this._renderLoader()}
{this.hasCollection() && this._renderCollectionMetadata()} {this.hasCollection() && this._renderCollectionMetadata()}
<div className="collection-table-wrapper"> <div className="collection-content">
{this._renderEmptyTable()} <div className="collection-table-wrapper">
{this.hasCollectionItems() && {this._renderEmptyTable()}
<table className="sketches-table" summary="table containing all collections"> {this.hasCollectionItems() &&
<thead> <table className="sketches-table" summary="table containing all collections">
<tr> <thead>
{this._renderFieldHeader('name', 'Name')} <tr>
{this._renderFieldHeader('createdAt', 'Date Added')} {this._renderFieldHeader('name', 'Name')}
{this._renderFieldHeader('user', 'Owner')} {this._renderFieldHeader('createdAt', 'Date Added')}
<th scope="col"></th> {this._renderFieldHeader('user', 'Owner')}
</tr> <th scope="col"></th>
</thead> </tr>
<tbody> </thead>
{this.props.collection.items.map(item => <tbody>
(<CollectionItemRow {this.props.collection.items.map(item =>
key={item.id} (<CollectionItemRow
item={item} key={item.id}
user={this.props.user} item={item}
username={this.getUsername()} user={this.props.user}
collection={this.props.collection} username={this.getUsername()}
/>))} collection={this.props.collection}
</tbody> />))}
</table> </tbody>
} </table>
{ }
this.state.isAddingSketches && ( {
<Overlay this.state.isAddingSketches && (
title="Add sketch" <Overlay
actions={<SketchSearchbar />} title="Add sketch"
closeOverlay={this.hideAddSketches} actions={<SketchSearchbar />}
isFixedHeight closeOverlay={this.hideAddSketches}
> isFixedHeight
<div className="collection-add-sketch"> >
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} /> <div className="collection-add-sketch">
</div> <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
</Overlay> </div>
) </Overlay>
} )
}
</div>
</div> </div>
</section> </section>
); );

2
client/styles/abstracts/_variables.scss
View file

@ -194,7 +194,7 @@ $themes: (
toolbar-button-color: #333333, toolbar-button-color: #333333,
toolbar-button-background-color: #C1C1C1, toolbar-button-background-color: #C1C1C1,
button-background-hover-color: $yellow, button-background-hover-color: $yellow,
button-background-active-color: #f10046, button-background-active-color: $yellow,
button-nav-inactive-color: #a0a0a0, button-nav-inactive-color: #a0a0a0,
button-hover-color: #333333, button-hover-color: #333333,
button-active-color: #333333, button-active-color: #333333,

1
client/styles/base/_base.scss
View file

@ -79,6 +79,7 @@ h4 {
} }
h6 { h6 {
font-weight: normal; font-weight: normal;
font-size: #{12 / $base-font-size}rem;
} }
thead { thead {
text-align: left; text-align: left;

2
client/styles/components/_asset-list.scss
View file

@ -1,7 +1,7 @@
.asset-table-container { .asset-table-container {
overflow-y: auto; overflow-y: auto;
max-width: 100%; max-width: 100%;
min-height: #{400 / $base-font-size}rem; min-height: 100%;
} }
.asset-table { .asset-table {

26
client/styles/components/_collection.scss
View file

@ -1,12 +1,15 @@
.collection-container { .collection-container {
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
position: relative;
flex: 1; flex: 1;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction:column;
} }
.collection-metadata { .collection-metadata {
width: #{1012 / $base-font-size}rem; max-width: #{1012 / $base-font-size}rem;
width: 100%;
margin: 0 auto; margin: 0 auto;
margin-bottom: #{24 / $base-font-size}rem; margin-bottom: #{24 / $base-font-size}rem;
} }
@ -114,15 +117,28 @@
flex-grow: 0; flex-grow: 0;
} }
.collection-table-wrapper { .collection-content {
width: #{1012 / $base-font-size}rem; display: flex;
margin: 0 auto; flex-direction: column;
flex: 1; flex: 1;
overflow: hidden;
max-width: #{1012 / $base-font-size}rem;
margin: 0 auto;
width: 100%;
@include themify() { @include themify() {
border: 1px solid getThemifyVariable('modal-border-color'); border: 1px solid getThemifyVariable('modal-border-color');
} }
} }
.collection-table-wrapper {
overflow-y: auto;
max-width: 100%;
min-height: 100%;
}
// maybe don't need this?
[data-has-items=false] .collection-table-wrapper { [data-has-items=false] .collection-table-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;

8
client/styles/components/_editor.scss
View file

@ -1,7 +1,4 @@
.CodeMirror { .CodeMirror {
@include themify() {
border: 1px solid getThemifyVariable('ide-border-color');
}
font-family: Inconsolata, monospace; font-family: Inconsolata, monospace;
height: 100%; height: 100%;
} }
@ -328,7 +325,10 @@ pre.CodeMirror-line {
height: calc(100% - #{29 / $base-font-size}rem); height: calc(100% - #{29 / $base-font-size}rem);
width: 100%; width: 100%;
position: absolute; position: absolute;
&.editor-holder--hidden { @include themify() {
border: 1px solid getThemifyVariable('ide-border-color');
}
&.editor-holder--hidden .CodeMirror {
display: none; display: none;
} }
} }

10
client/styles/components/_loader.scss
View file

@ -1,9 +1,17 @@
.loader-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loader { .loader {
width: #{80 / $base-font-size }rem; width: #{80 / $base-font-size }rem;
height: #{80 / $base-font-size}rem; height: #{80 / $base-font-size}rem;
position: relative; position: relative;
margin: #{100 / $base-font-size}rem auto;
} }
.loader__circle1, .loader__circle1,

90
client/styles/components/_p5-dark-codemirror-theme.scss
View file

@ -14,75 +14,77 @@ $p5-dark-lightbrown: #A67F59;
$p5-light-green: #42F48F; $p5-light-green: #42F48F;
$p5-dark-black: #333; $p5-dark-black: #333;
$p5-dark-pink: #D9328F; $p5-dark-pink: #D9328F;
$p5-dark-gray: #A0A0A0; $p5-dark-gray: #999999;
$p5-dark-lightblue: #00A1D3; $p5-dark-lightblue: #0F9DD7;
$p5-dark-darkblue: #2D7BB6; $p5-dark-darkblue: #318094;
$p5-dark-white: #FDFDFD; $p5-dark-white: #FDFDFD;
$p5-dark-orange: #EE9900; $p5-dark-orange: #EE9900;
$p5-dark-lightgray: #E0D7D1; $p5-dark-lightgray: #E0D7D1;
$p5-dark-darkgray: #666666; $p5-dark-darkgray: #666666;
$p5-dark-green: #58a10b; $p5-dark-green: #58a10b;
$p5-dark-goldbrown: #b58317; $p5-dark-goldbrown: #b58318;
$p5-dark-gutter: #f4f4f4; $p5-dark-gutter: #f4f4f4;
$p5-dark-number: #b5b5b5; $p5-dark-number: #b5b5b5;
$p5-dark-selected: rgba(45, 123, 182, 25); $p5-dark-selected: rgba(45, 123, 182, 25);
$p5-dark-activeline: rgb(207, 207, 207); $p5-dark-activeline: rgb(207, 207, 207);
$p5-dark-error: #df3a3d;
.cm-s-p5-dark { .cm-s-p5-dark {
background-color: $p5-dark-black; background-color: $p5-dark-black;
color: $p5-dark-white; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-comment { .cm-s-p5-dark span.cm-comment {
color: $p5-dark-gray; color: $p5-dark-gray;
} }
.cm-s-p5-dark .cm-def { .cm-s-p5-dark span.cm-def {
color: $p5-dark-darkblue;
}
.cm-s-p5-dark .cm-string {
color: $p5-dark-green;
}
.cm-s-p5-dark .cm-string-2 {
color: $p5-dark-orange;
}
.cm-s-p5-dark .cm-number {
color: $p5-dark-white;
}
.cm-s-p5-dark .cm-keyword {
color: $p5-dark-goldbrown;
}
.cm-s-p5-dark .cm-variable {
color: $p5-dark-lightblue; color: $p5-dark-lightblue;
} }
.cm-s-p5-dark .cm-variable-2 { .cm-s-p5-dark span.cm-string {
color: $p5-dark-green;
}
.cm-s-p5-dark span.cm-string-2 {
color: $p5-dark-orange;
}
.cm-s-p5-dark span.cm-number {
color: $p5-dark-white; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-property { .cm-s-p5-dark span.cm-keyword {
color: $p5-dark-goldbrown;
}
.cm-s-p5-dark span.cm-variable {
color: $p5-dark-lightblue;
}
.cm-s-p5-dark span.cm-variable-2 {
color: $p5-dark-white; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-atom { .cm-s-p5-dark span.cm-property {
color: $p5-dark-white;
}
.cm-s-p5-dark span.cm-atom {
color: $p5-dark-pink; color: $p5-dark-pink;
} }
.cm-s-p5-dark .cm-operator { .cm-s-p5-dark span.cm-operator {
color: $p5-dark-lightbrown; color: $p5-dark-white;
} }
.cm-s-p5-dark .cm-linenumber { .cm-s-p5-dark .cm-linenumber {
color: $p5-dark-number; color: $p5-dark-number;
} }
.cm-s-p5-dark .CodeMirror-selected { .cm-s-p5-dark div.CodeMirror-selected {
background-color: $p5-dark-selected; background-color: $p5-dark-selected;
} }
@ -95,34 +97,36 @@ $p5-dark-activeline: rgb(207, 207, 207);
border-right: 1px solid #949494; border-right: 1px solid #949494;
} }
.cm-s-p5-dark .cm-error { .cm-s-p5-dark span.CodeMirror-matchingbracket {
color: #f00;
}
.cm-s-p5-dark .CodeMirror-matchingbracket {
outline: 1px solid $p5-dark-gray; outline: 1px solid $p5-dark-gray;
outline-offset: 1px; outline-offset: 1px;
color: $p5-dark-white !important; color: $p5-dark-white !important;
} }
.cm-s-p5-dark .cm-qualifier { .cm-s-p5-dark span.cm-qualifier {
color: $p5-dark-lightblue; color: $p5-dark-lightblue;
} }
.cm-s-p5-dark .cm-tag { .cm-s-p5-dark span.cm-tag {
color: $p5-dark-pink; color: $p5-dark-pink;
} }
.cm-s-p5-dark .cm-builtin { .cm-s-p5-dark span.cm-error {
color: $p5-dark-lightblue; color: $p5-dark-error;
} }
.cm-s-p5-dark .cm-attribute { .cm-s-p5-dark span.cm-builtin {
color: $p5-dark-lightblue;
font-weight: bold;
}
.cm-s-p5-dark span.cm-attribute {
color: $p5-dark-lightblue; color: $p5-dark-lightblue;
} }
.cm-s-p5-dark .cm-p5-function { .cm-s-p5-dark .cm-p5-function {
color: $p5-dark-darkblue; color: $p5-dark-lightblue;
font-weight: bold !important;
} }
.cm-s-p5-dark .cm-p5-variable { .cm-s-p5-dark .cm-p5-variable {

15
client/styles/components/_searchbar.scss
View file

@ -15,26 +15,20 @@
} }
} }
button[type="submit"].searchbar__button { div.searchbar__button {
background-color: unset; background-color: unset;
width: #{31 / $base-font-size}rem; width: #{31 / $base-font-size}rem;
height: #{36 / $base-font-size}rem; height: #{36 / $base-font-size}rem;
position: absolute; position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0; padding: 0;
border: 0; border: 0;
border-right: solid 1px; border-right: solid 1px;
@include themify() { @include themify() {
border-right-color: getThemifyVariable('input-border-color'); border-right-color: getThemifyVariable('input-border-color');
} }
&:enabled:hover {
background-color: unset;
@include themify() {
border-right-color: getThemifyVariable('input-border-color');
}
& g {
fill: unset;
}
}
} }
.searchbar__icon { .searchbar__icon {
@ -43,6 +37,7 @@ button[type="submit"].searchbar__button {
width: #{22 / $base-font-size}rem; width: #{22 / $base-font-size}rem;
height: #{27 / $base-font-size}rem; height: #{27 / $base-font-size}rem;
transform: scaleX(-1); transform: scaleX(-1);
padding-top: #{3 / $base-font-size}rem;
@include themify() { @include themify() {
fill: getThemifyVariable('input-text-color'); fill: getThemifyVariable('input-text-color');
} }

2
client/styles/components/_sketch-list.scss
View file

@ -1,7 +1,7 @@
.sketches-table-container { .sketches-table-container {
overflow-y: auto; overflow-y: auto;
max-width: 100%; max-width: 100%;
min-height: #{400 / $base-font-size}rem; min-height: 100%;
} }
.sketches-table { .sketches-table {

4
developer_docs/README.md
View file

@ -9,6 +9,6 @@ This folder contains documents intended for developers of the p5.js Web Editor.
* [Deployment](deployment.md) - A guide to production deployment, and all platforms that are being used. * [Deployment](deployment.md) - A guide to production deployment, and all platforms that are being used.
## Documents to Create ## Documents to Create
* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/master/developer_docs/design_principles.md) * Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/master/contributor_docs/design_principles.md)
* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/master/developer_docs/issue_labels.md) * Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/master/contributor_docs/issue_labels.md)
* File Structure - An explanation of the file structure of this application. * File Structure - An explanation of the file structure of this application.

2
developer_docs/preparing_a_pull_request.md
View file

@ -19,7 +19,7 @@ Make sure you're tracking upstream p5.js repository.
If you see an error, you'll need to start tracking the main p5.js repo as an "upstream" remote repository. You'll only need to do this once! But, no harm is done if you run it a second time. If you see an error, you'll need to start tracking the main p5.js repo as an "upstream" remote repository. You'll only need to do this once! But, no harm is done if you run it a second time.
git remote add upstream https://github.com/processing/p5.js git remote add upstream https://github.com/processing/p5.js-web-editor
Then ask git about the latest changes. Then ask git about the latest changes.