From f13b9dcbbc2da50c116013c92e55e949dc5da33b Mon Sep 17 00:00:00 2001 From: shakti97 Date: Tue, 25 Feb 2020 23:22:52 +0530 Subject: [PATCH 01/23] fix redundant search button issue --- client/modules/IDE/components/Searchbar.jsx | 8 ++------ client/styles/components/_searchbar.scss | 4 +++- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/modules/IDE/components/Searchbar.jsx b/client/modules/IDE/components/Searchbar.jsx index f3047b91..db64fe65 100644 --- a/client/modules/IDE/components/Searchbar.jsx +++ b/client/modules/IDE/components/Searchbar.jsx @@ -47,13 +47,9 @@ class Searchbar extends React.Component { const { searchValue } = this.state; return (
- +
Date: Fri, 28 Feb 2020 00:59:51 +0530 Subject: [PATCH 02/23] Fix contrast theme active button issue --- client/styles/abstracts/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 820fb05a..49be75a7 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -135,7 +135,7 @@ $themes: ( toolbar-button-color: #333333, toolbar-button-background-color: #C1C1C1, button-background-hover-color: $yellow, - button-background-active-color: #f10046, + button-background-active-color: $yellow, button-nav-inactive-color: #a0a0a0, button-hover-color: #333333, button-active-color: #333333, From ab673fe771cc688f985cf56e62ad58e847c1a9a4 Mon Sep 17 00:00:00 2001 From: nik72619c Date: Fri, 28 Feb 2020 01:57:28 +0530 Subject: [PATCH 03/23] Fix focus not coming on clicking on the rename option for a sketch, inside the Sketch Modal --- client/modules/IDE/components/SketchList.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 89d5cb10..5670c2d6 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -29,6 +29,7 @@ class SketchListRowBase extends React.Component { renameValue: props.sketch.name, isFocused: false }; + this.renameInput = React.createRef(); } onFocusComponent = () => { this.setState({ isFocused: true }); @@ -66,7 +67,7 @@ class SketchListRowBase extends React.Component { openRename = () => { this.setState({ renameOpen: true - }); + }, () => this.renameInput.current.focus()); } closeRename = () => { @@ -158,6 +159,7 @@ class SketchListRowBase extends React.Component { onKeyUp={this.handleRenameEnter} onBlur={this.resetSketchName} onClick={e => e.stopPropagation()} + ref={this.renameInput} /> } From 9a0397d1fbc764d89d1c893b97356f4b5fe4bec5 Mon Sep 17 00:00:00 2001 From: phe0 Date: Sat, 14 Mar 2020 18:04:56 -0300 Subject: [PATCH 04/23] update links to developer_docs to contributor_docs --- developer_docs/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/developer_docs/README.md b/developer_docs/README.md index e4cf46d7..6d81b47c 100644 --- a/developer_docs/README.md +++ b/developer_docs/README.md @@ -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. ## Documents to Create -* Design Principles - reference [p5.js design principles](https://github.com/processing/p5.js/edit/master/developer_docs/design_principles.md) -* Issue Labels - reference [p5.js issue labels](https://github.com/processing/p5.js/blob/master/developer_docs/issue_labels.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/contributor_docs/issue_labels.md) * File Structure - An explanation of the file structure of this application. From 8d66877e359208edd808477916f7fc93eba653a9 Mon Sep 17 00:00:00 2001 From: phe0 Date: Sat, 14 Mar 2020 18:05:18 -0300 Subject: [PATCH 05/23] fix remote upstream link --- developer_docs/preparing_a_pull_request.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/developer_docs/preparing_a_pull_request.md b/developer_docs/preparing_a_pull_request.md index c420e437..050deebd 100644 --- a/developer_docs/preparing_a_pull_request.md +++ b/developer_docs/preparing_a_pull_request.md @@ -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. - 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. From 2938c76d2d83300ad807451b7a24ce0c52596f5c Mon Sep 17 00:00:00 2001 From: Eswaraprasadp Date: Wed, 25 Mar 2020 19:03:02 +0530 Subject: [PATCH 06/23] Modify dark theme --- .../components/_p5-dark-codemirror-theme.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index f10cbad9..b76f652b 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/client/styles/components/_p5-dark-codemirror-theme.scss @@ -14,15 +14,15 @@ $p5-dark-lightbrown: #A67F59; $p5-light-green: #42F48F; $p5-dark-black: #333; $p5-dark-pink: #D9328F; -$p5-dark-gray: #A0A0A0; -$p5-dark-lightblue: #00A1D3; -$p5-dark-darkblue: #2D7BB6; +$p5-dark-gray: #999999; +$p5-dark-lightblue: #0F9DD7; +$p5-dark-darkblue: #318094; $p5-dark-white: #FDFDFD; $p5-dark-orange: #EE9900; $p5-dark-lightgray: #E0D7D1; $p5-dark-darkgray: #666666; $p5-dark-green: #58a10b; -$p5-dark-goldbrown: #b58317; +$p5-dark-goldbrown: #b58318; $p5-dark-gutter: #f4f4f4; $p5-dark-number: #b5b5b5; @@ -39,7 +39,7 @@ $p5-dark-activeline: rgb(207, 207, 207); } .cm-s-p5-dark .cm-def { - color: $p5-dark-darkblue; + color: $p5-dark-lightblue; } .cm-s-p5-dark .cm-string { @@ -75,7 +75,7 @@ $p5-dark-activeline: rgb(207, 207, 207); } .cm-s-p5-dark .cm-operator { - color: $p5-dark-lightbrown; + color: $p5-dark-white; } .cm-s-p5-dark .cm-linenumber { @@ -96,7 +96,7 @@ $p5-dark-activeline: rgb(207, 207, 207); } .cm-s-p5-dark .cm-error { - color: #f00; + color: #df3a3d; } .cm-s-p5-dark .CodeMirror-matchingbracket { @@ -115,6 +115,7 @@ $p5-dark-activeline: rgb(207, 207, 207); .cm-s-p5-dark .cm-builtin { color: $p5-dark-lightblue; + font-weight: bold; } .cm-s-p5-dark .cm-attribute { @@ -122,7 +123,8 @@ $p5-dark-activeline: rgb(207, 207, 207); } .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 { From c1d0ccec010d2f57f651312afb6aff53f568a535 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 1 Apr 2020 13:22:53 -0400 Subject: [PATCH 07/23] Additional updates to dark theme: specificity changes and reorder for proper cascade --- .../components/_p5-dark-codemirror-theme.scss | 44 ++++++++++--------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index b76f652b..bd073941 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/client/styles/components/_p5-dark-codemirror-theme.scss @@ -29,52 +29,54 @@ $p5-dark-number: #b5b5b5; $p5-dark-selected: rgba(45, 123, 182, 25); $p5-dark-activeline: rgb(207, 207, 207); +$p5-dark-error: #df3a3d; + .cm-s-p5-dark { background-color: $p5-dark-black; color: $p5-dark-white; } -.cm-s-p5-dark .cm-comment { +.cm-s-p5-dark span.cm-comment { color: $p5-dark-gray; } -.cm-s-p5-dark .cm-def { +.cm-s-p5-dark span.cm-def { color: $p5-dark-lightblue; } -.cm-s-p5-dark .cm-string { +.cm-s-p5-dark span.cm-string { color: $p5-dark-green; } -.cm-s-p5-dark .cm-string-2 { +.cm-s-p5-dark span.cm-string-2 { color: $p5-dark-orange; } -.cm-s-p5-dark .cm-number { +.cm-s-p5-dark span.cm-number { color: $p5-dark-white; } -.cm-s-p5-dark .cm-keyword { +.cm-s-p5-dark span.cm-keyword { color: $p5-dark-goldbrown; } -.cm-s-p5-dark .cm-variable { +.cm-s-p5-dark span.cm-variable { color: $p5-dark-lightblue; } -.cm-s-p5-dark .cm-variable-2 { +.cm-s-p5-dark span.cm-variable-2 { color: $p5-dark-white; } -.cm-s-p5-dark .cm-property { +.cm-s-p5-dark span.cm-property { color: $p5-dark-white; } -.cm-s-p5-dark .cm-atom { +.cm-s-p5-dark span.cm-atom { color: $p5-dark-pink; } -.cm-s-p5-dark .cm-operator { +.cm-s-p5-dark span.cm-operator { color: $p5-dark-white; } @@ -82,7 +84,7 @@ $p5-dark-activeline: rgb(207, 207, 207); color: $p5-dark-number; } -.cm-s-p5-dark .CodeMirror-selected { +.cm-s-p5-dark div.CodeMirror-selected { background-color: $p5-dark-selected; } @@ -95,30 +97,30 @@ $p5-dark-activeline: rgb(207, 207, 207); border-right: 1px solid #949494; } -.cm-s-p5-dark .cm-error { - color: #df3a3d; -} - -.cm-s-p5-dark .CodeMirror-matchingbracket { +.cm-s-p5-dark span.CodeMirror-matchingbracket { outline: 1px solid $p5-dark-gray; outline-offset: 1px; color: $p5-dark-white !important; } -.cm-s-p5-dark .cm-qualifier { +.cm-s-p5-dark span.cm-qualifier { color: $p5-dark-lightblue; } -.cm-s-p5-dark .cm-tag { +.cm-s-p5-dark span.cm-tag { color: $p5-dark-pink; } -.cm-s-p5-dark .cm-builtin { +.cm-s-p5-dark span.cm-error { + color: $p5-dark-error; +} + +.cm-s-p5-dark span.cm-builtin { color: $p5-dark-lightblue; font-weight: bold; } -.cm-s-p5-dark .cm-attribute { +.cm-s-p5-dark span.cm-attribute { color: $p5-dark-lightblue; } From eeb7e345f3220023c591d313a408a261480a54b7 Mon Sep 17 00:00:00 2001 From: Shakti Singh <30585570+shakti97@users.noreply.github.com> Date: Wed, 1 Apr 2020 23:17:08 +0530 Subject: [PATCH 08/23] Fix project name blank issue (#1271) * Fix project name blank issue * Change length check from !length to length === 0 --- client/modules/IDE/components/Toolbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx index b331e10e..35c29f7d 100644 --- a/client/modules/IDE/components/Toolbar.jsx +++ b/client/modules/IDE/components/Toolbar.jsx @@ -32,7 +32,7 @@ class Toolbar extends React.Component { } validateProjectName() { - if (this.props.project.name === '') { + if ((this.props.project.name.trim()).length === 0) { this.props.setProjectName(this.originalProjectName); } } From 68d4bddf66d0079f5d31732ac4e116e45b9a58c5 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 2 Apr 2020 13:43:34 -0400 Subject: [PATCH 09/23] Fixes #1284 - Center loader in sketch list, collection list, and asset list --- client/modules/App/components/loader.jsx | 8 +++++--- client/styles/components/_asset-list.scss | 2 +- client/styles/components/_loader.scss | 10 +++++++++- client/styles/components/_sketch-list.scss | 2 +- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/client/modules/App/components/loader.jsx b/client/modules/App/components/loader.jsx index 1561387e..37306427 100644 --- a/client/modules/App/components/loader.jsx +++ b/client/modules/App/components/loader.jsx @@ -1,9 +1,11 @@ import React from 'react'; const Loader = () => ( -
-
-
+
+
+
+
+
); export default Loader; diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss index 0a34f343..335fc7bf 100644 --- a/client/styles/components/_asset-list.scss +++ b/client/styles/components/_asset-list.scss @@ -1,7 +1,7 @@ .asset-table-container { overflow-y: auto; max-width: 100%; - min-height: #{400 / $base-font-size}rem; + min-height: 100%; } .asset-table { diff --git a/client/styles/components/_loader.scss b/client/styles/components/_loader.scss index ec52410a..b9f2a05c 100644 --- a/client/styles/components/_loader.scss +++ b/client/styles/components/_loader.scss @@ -1,9 +1,17 @@ +.loader-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + + .loader { width: #{80 / $base-font-size }rem; height: #{80 / $base-font-size}rem; position: relative; - margin: #{100 / $base-font-size}rem auto; } .loader__circle1, diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss index 76d456ab..87162305 100644 --- a/client/styles/components/_sketch-list.scss +++ b/client/styles/components/_sketch-list.scss @@ -1,7 +1,7 @@ .sketches-table-container { overflow-y: auto; max-width: 100%; - min-height: #{400 / $base-font-size}rem; + min-height: 100%; } .sketches-table { From 3122fd76a43d6e41478942d661962417396a5fd0 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 2 Apr 2020 15:54:40 -0400 Subject: [PATCH 10/23] Fixes #1290, change selector for search icon to work with div, remove unused styles --- client/styles/components/_searchbar.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss index 042f3e7e..7076f75c 100644 --- a/client/styles/components/_searchbar.scss +++ b/client/styles/components/_searchbar.scss @@ -15,7 +15,7 @@ } } -button[type="submit"].searchbar__button { +div.searchbar__button { background-color: unset; width: #{31 / $base-font-size}rem; height: #{36 / $base-font-size}rem; @@ -29,15 +29,6 @@ button[type="submit"].searchbar__button { @include themify() { 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 { @@ -46,6 +37,7 @@ button[type="submit"].searchbar__button { width: #{22 / $base-font-size}rem; height: #{27 / $base-font-size}rem; transform: scaleX(-1); + padding-top: #{3 / $base-font-size}rem; @include themify() { fill: getThemifyVariable('input-text-color'); } From 47458ae6010314bfe45780c03d89f08a5131e8a6 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 2 Apr 2020 17:27:58 -0400 Subject: [PATCH 11/23] Re-add ref in jsx removed in merge conflict --- client/modules/IDE/components/SketchList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 8cfc0af1..7f2c6082 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -258,6 +258,7 @@ class SketchListRowBase extends React.Component { onKeyUp={this.handleRenameEnter} onBlur={this.resetSketchName} onClick={e => e.stopPropagation()} + ref={this.renameInput} /> } From d348f79d2a0aafe15c2d5bc09641e42b9ac5fcf5 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 2 Apr 2020 17:52:04 -0400 Subject: [PATCH 12/23] Add ref to focus in Collection List, handle whitespace errors in renaming sketch and collection --- .../CollectionList/CollectionListRow.jsx | 30 ++++++++++--------- client/modules/IDE/components/SketchList.jsx | 23 ++++++++++---- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx index 93513511..0f7f9a53 100644 --- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx @@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component { renameOpen: false, renameValue: '', }; + this.renameInput = React.createRef(); } onFocusComponent = () => { @@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component { this.setState({ renameOpen: true, renameValue: this.props.collection.name, - }); + }, () => this.renameInput.current.focus()); } handleRenameChange = (e) => { @@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component { } handleRenameEnter = (e) => { - const isValid = this.state.renameValue !== ''; - if (e.key === 'Enter') { - if (isValid) { - this.props.editCollection(this.props.collection.id, { name: this.state.renameValue }); - } - - // this.resetName(); + this.updateName(); this.closeAll(); } } - // resetName = () => { - // this.setState({ - // renameValue: this.props.collection.name - // }); - // } + handleRenameBlur = () => { + this.updateName(); + 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 = () => { const { optionsOpen } = this.state; @@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component { value={renameValue} onChange={this.handleRenameChange} onKeyUp={this.handleRenameEnter} - // onBlur={this.resetName} + onBlur={this.handleRenameBlur} onClick={e => e.stopPropagation()} + ref={this.renameInput} /> } diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 7f2c6082..83b90c2e 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -70,7 +70,8 @@ class SketchListRowBase extends React.Component { openRename = () => { this.setState({ - renameOpen: true + renameOpen: true, + renameValue: this.props.sketch.name }, () => this.renameInput.current.focus()); } @@ -95,15 +96,27 @@ class SketchListRowBase extends React.Component { handleRenameEnter = (e) => { if (e.key === 'Enter') { - // TODO pass this func - this.props.changeProjectName(this.props.sketch.id, this.state.renameValue); + this.updateName(); 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 = () => { this.setState({ - renameValue: this.props.sketch.name + renameValue: this.props.sketch.name, + renameOpen: false }); } @@ -256,7 +269,7 @@ class SketchListRowBase extends React.Component { value={renameValue} onChange={this.handleRenameChange} onKeyUp={this.handleRenameEnter} - onBlur={this.resetSketchName} + onBlur={this.handleRenameBlur} onClick={e => e.stopPropagation()} ref={this.renameInput} /> From 21d44fa2635b98e8e06f6bf1021a8e62bac17c2d Mon Sep 17 00:00:00 2001 From: elit-altum Date: Sat, 4 Apr 2020 13:51:57 +0530 Subject: [PATCH 13/23] fix(contrast-theme): fixed failing WCAG-AAA checks --- client/styles/abstracts/_variables.scss | 13 +++---- .../_p5-contrast-codemirror-theme.scss | 36 +++++++++---------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b0fd5a69..2baee4e4 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -12,6 +12,7 @@ $dodgerblue: #1E90FF; $icon-color: #8b8b8b; $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; +$p5-contrast-lightgray: #f2f2f2; // Grays $dark: #333; @@ -186,29 +187,29 @@ $themes: ( modal-button-color: #333, heading-text-color: #e1e1e1, secondary-text-color: #e1e1e1, - inactive-text-color: #c1c1c1, + inactive-text-color: $p5-contrast-lightgray, background-color: #333, button-background-color: $white, button-color: $black, button-border-color: #979797, toolbar-button-color: #333333, - toolbar-button-background-color: #C1C1C1, + toolbar-button-background-color: $p5-contrast-lightgray, button-background-hover-color: $yellow, button-background-active-color: $yellow, button-nav-inactive-color: #a0a0a0, button-hover-color: #333333, button-active-color: #333333, modal-background-color: #444, - modal-button-background-color: #C1C1C1, + modal-button-background-color: $p5-contrast-lightgray, modal-border-color: #949494, - icon-color: #a9a9a9, + icon-color: #ddd, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: #4f4f4f, console-color: $black, console-header-background-color: #3f3f3f, - console-header-color: #b5b5b5, + console-header-color: #ddd, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, @@ -235,7 +236,7 @@ $themes: ( primary-button-background-color: $p5js-pink, table-button-color: #333, - table-button-background-color: #C1C1C1, + table-button-background-color: $p5-contrast-lightgray, table-button-active-color: #333, table-button-background-active-color: #00FFFF, table-button-hover-color: #333, diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index fd289df3..cd736d2f 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/client/styles/components/_p5-contrast-codemirror-theme.scss @@ -14,7 +14,7 @@ $p5-contrast-black: #333; $p5-contrast-gray: #A0A0A0; $p5-contrast-white: #FDFDFD; $p5-contrast-darkgray: #333333; -$p5-contrast-lightgray: #C1C1C1; +$p5-contrast-lightgray: #f2f2f2; $p5-contrast-blue: #00FFFF; $p5-contrast-green: #2DE9B6; $p5-contrast-yellow: #F5DC23; @@ -31,47 +31,47 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-comment { +.cm-s-p5-contrast span .cm-comment { color: $p5-contrast-lightgray; } -.cm-s-p5-contrast .cm-def { +.cm-s-p5-contrast span .cm-def { color: $p5-contrast-blue; } -.cm-s-p5-contrast .cm-string { +.cm-s-p5-contrast span .cm-string { color: $p5-contrast-green; } -.cm-s-p5-contrast .cm-string-2 { +.cm-s-p5-contrast span .cm-string-2 { color: $p5-contrast-green; } -.cm-s-p5-contrast .cm-number { +.cm-s-p5-contrast span .cm-number { color: $p5-contrast-pink; } -.cm-s-p5-contrast .cm-keyword { +.cm-s-p5-contrast span .cm-keyword { color: $p5-contrast-yellow; } -.cm-s-p5-contrast .cm-variable { +.cm-s-p5-contrast span .cm-variable { color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-variable-2 { +.cm-s-p5-contrast span .cm-variable-2 { color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-property { +.cm-s-p5-contrast span .cm-property { color: $p5-contrast-white; } -.cm-s-p5-contrast .cm-atom { +.cm-s-p5-contrast span .cm-atom { color: $p5-contrast-pink; } -.cm-s-p5-contrast .cm-operator { +.cm-s-p5-contrast span .cm-operator { color: $p5-contrast-lightgray; } @@ -79,7 +79,7 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-number; } -.cm-s-p5-contrast .CodeMirror-selected { +.cm-s-p5-contrast div .CodeMirror-selected { background-color: $p5-contrast-selected; } @@ -96,25 +96,25 @@ $p5-contrast-activeline: #999999; color: #f00; } -.cm-s-p5-contrast .CodeMirror-matchingbracket { +.cm-s-p5-contrast span.CodeMirror-matchingbracket { outline: 1px solid $p5-contrast-lightgray; outline-offset: 1px; color: $p5-contrast-white !important; } -.cm-s-p5-contrast .cm-qualifier { +.cm-s-p5-contrast span .cm-qualifier { color: $p5-contrast-yellow; } -.cm-s-p5-contrast .cm-tag { +.cm-s-p5-contrast span .cm-tag { color: $p5-contrast-orange; } -.cm-s-p5-contrast .cm-builtin { +.cm-s-p5-contrast span.cm-builtin { color: $p5-contrast-yellow; } -.cm-s-p5-contrast .cm-attribute { +.cm-s-p5-contrast span .cm-attribute { color: $p5-contrast-white; } From e1a3bf2583a5ee715343525117693866f0422c7d Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 6 Apr 2020 12:46:17 -0400 Subject: [PATCH 14/23] Fixes #1311 --- client/modules/IDE/components/FileNode.jsx | 1 + client/modules/IDE/components/NewFileForm.jsx | 1 + client/modules/IDE/components/NewFolderForm.jsx | 1 + 3 files changed, 3 insertions(+) diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index 12496b38..f6563706 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -160,6 +160,7 @@ export class FileNode extends React.Component { type="text" className="sidebar__file-item-input" value={this.props.name} + maxLength="128" onChange={this.handleFileNameChange} ref={(element) => { this.fileNameInput = element; }} onBlur={() => { diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx index 926a9925..1ff8bff4 100644 --- a/client/modules/IDE/components/NewFileForm.jsx +++ b/client/modules/IDE/components/NewFileForm.jsx @@ -29,6 +29,7 @@ class NewFileForm extends React.Component { id="name" type="text" placeholder="Name" + maxLength="128" {...domOnlyProps(name)} ref={(element) => { this.fileName = element; }} /> diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx index 5fa48acd..70750394 100644 --- a/client/modules/IDE/components/NewFolderForm.jsx +++ b/client/modules/IDE/components/NewFolderForm.jsx @@ -29,6 +29,7 @@ class NewFolderForm extends React.Component { className="new-folder-form__name-input" id="name" type="text" + maxLength="128" placeholder="Name" ref={(element) => { this.fileName = element; }} {...domOnlyProps(name)} From 8d453c699bb35ab94285e31d098e0d6e11cf1b88 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 6 Apr 2020 13:02:23 -0400 Subject: [PATCH 15/23] Fixes #1315 --- client/styles/base/_base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss index de49c804..c0d8a05c 100644 --- a/client/styles/base/_base.scss +++ b/client/styles/base/_base.scss @@ -79,6 +79,7 @@ h4 { } h6 { font-weight: normal; + font-size: #{12 / $base-font-size}rem; } thead { text-align: left; From 1652d9e1588a0ed78f01c7faecbb3e148f658256 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 7 Apr 2020 17:03:19 -0400 Subject: [PATCH 16/23] Fixes #1349 --- client/components/Nav.jsx | 18 ++++++++++++------ client/modules/IDE/components/SketchList.jsx | 2 +- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index 3886ccc8..4a1212c9 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; -import { Link, browserHistory } from 'react-router'; +import { Link } from 'react-router'; import InlineSVG from 'react-inlinesvg'; import classNames from 'classnames'; import * as IDEActions from '../modules/IDE/actions/ide'; @@ -167,8 +167,6 @@ class Nav extends React.PureComponent { handleLogout() { this.props.logoutUser(); - // if you're on the settings page, probably. - browserHistory.push('/'); this.setDropdown('none'); } @@ -184,7 +182,8 @@ class Nav extends React.PureComponent { } handleShare() { - this.props.showShareModal(); + const { username } = this.props.params; + this.props.showShareModal(this.props.project.id, this.props.project.name, username); this.setDropdown('none'); } @@ -717,6 +716,7 @@ Nav.propTypes = { }).isRequired, project: PropTypes.shape({ id: PropTypes.string, + name: PropTypes.string, owner: PropTypes.shape({ id: PropTypes.string }) @@ -742,7 +742,10 @@ Nav.propTypes = { layout: PropTypes.oneOf(['dashboard', 'project']), rootFile: PropTypes.shape({ id: PropTypes.string.isRequired - }).isRequired + }).isRequired, + params: PropTypes.shape({ + username: PropTypes.string + }) }; Nav.defaultProps = { @@ -752,7 +755,10 @@ Nav.defaultProps = { }, cmController: {}, layout: 'project', - warnIfUnsavedChanges: undefined + warnIfUnsavedChanges: undefined, + params: { + username: undefined + } }; function mapStateToProps(state) { diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 83b90c2e..3777de2a 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -312,7 +312,7 @@ SketchListRowBase.propTypes = { cloneProject: PropTypes.func.isRequired, exportProjectAsZip: PropTypes.func.isRequired, changeProjectName: PropTypes.func.isRequired, - onAddToCollection: PropTypes.func.isRequired, + onAddToCollection: PropTypes.func.isRequired }; function mapDispatchToPropsSketchListRow(dispatch) { From a6d39b2804b4775cd75be081b9933b8d71ef39ab Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 7 Apr 2020 17:25:45 -0400 Subject: [PATCH 17/23] Create FUNDING.yml --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..82c461c7 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +custom: https://processingfoundation.org/support From 4a64bae3768eff68f26deb9fe12f1cefe9ef0b8a Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 7 Apr 2020 19:20:29 -0400 Subject: [PATCH 18/23] Fixes #1355 - sketches overflowing on collection page --- client/modules/User/components/Collection.jsx | 78 ++++++++++--------- client/styles/components/_collection.scss | 23 +++++- 2 files changed, 59 insertions(+), 42 deletions(-) diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx index 6dec5e8c..477f1319 100644 --- a/client/modules/User/components/Collection.jsx +++ b/client/modules/User/components/Collection.jsx @@ -327,44 +327,46 @@ class Collection extends React.Component { {this._renderLoader()} {this.hasCollection() && this._renderCollectionMetadata()} -
- {this._renderEmptyTable()} - {this.hasCollectionItems() && - - - - {this._renderFieldHeader('name', 'Name')} - {this._renderFieldHeader('createdAt', 'Date Added')} - {this._renderFieldHeader('user', 'Owner')} - - - - - {this.props.collection.items.map(item => - ())} - -
- } - { - this.state.isAddingSketches && ( - } - closeOverlay={this.hideAddSketches} - isFixedHeight - > -
- -
- - ) - } +
+
+ {this._renderEmptyTable()} + {this.hasCollectionItems() && + + + + {this._renderFieldHeader('name', 'Name')} + {this._renderFieldHeader('createdAt', 'Date Added')} + {this._renderFieldHeader('user', 'Owner')} + + + + + {this.props.collection.items.map(item => + ())} + +
+ } + { + this.state.isAddingSketches && ( + } + closeOverlay={this.hideAddSketches} + isFixedHeight + > +
+ +
+ + ) + } +
); diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss index 3a98f78d..973397ef 100644 --- a/client/styles/components/_collection.scss +++ b/client/styles/components/_collection.scss @@ -1,8 +1,10 @@ .collection-container { padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem; + position: relative; flex: 1; + overflow: hidden; display: flex; - flex-direction: column; + flex-direction:column; } .collection-metadata { @@ -114,15 +116,28 @@ flex-grow: 0; } -.collection-table-wrapper { - width: #{1012 / $base-font-size}rem; - margin: 0 auto; +.collection-content { + display: flex; + flex-direction: column; flex: 1; + overflow: hidden; + max-width: #{1012 / $base-font-size}rem; + margin: 0 auto; + width: 100%; + @include themify() { 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 { display: flex; justify-content: center; From e4f180f8dfaa5da2a8d2cc9fbab36e572b4db03a Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 13:14:39 -0400 Subject: [PATCH 19/23] Add responsive width to collection metadata --- client/styles/components/_collection.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss index 973397ef..ff488192 100644 --- a/client/styles/components/_collection.scss +++ b/client/styles/components/_collection.scss @@ -8,7 +8,8 @@ } .collection-metadata { - width: #{1012 / $base-font-size}rem; + max-width: #{1012 / $base-font-size}rem; + width: 100%; margin: 0 auto; margin-bottom: #{24 / $base-font-size}rem; } From 6088783b616c6802726e3e45c5aa1ae73583603b Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 14:03:56 -0400 Subject: [PATCH 20/23] Adjust high contrast colors to design system --- client/styles/abstracts/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 2baee4e4..58eb80de 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -12,7 +12,7 @@ $dodgerblue: #1E90FF; $icon-color: #8b8b8b; $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; -$p5-contrast-lightgray: #f2f2f2; +$p5-contrast-lightgray: #f0f0f0; // Grays $dark: #333; @@ -202,14 +202,14 @@ $themes: ( modal-background-color: #444, modal-button-background-color: $p5-contrast-lightgray, modal-border-color: #949494, - icon-color: #ddd, + icon-color: #d9d9d9, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: #4f4f4f, console-color: $black, console-header-background-color: #3f3f3f, - console-header-color: #ddd, + console-header-color: #d9d9d9, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, From d4d8ba9271c31508bd13e36817087253046ce0c3 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 16:08:57 -0400 Subject: [PATCH 21/23] Revert "fix(contrast-theme): fixed failing WCAG-AAA checks" --- client/styles/abstracts/_variables.scss | 13 ++++--- .../_p5-contrast-codemirror-theme.scss | 36 +++++++++---------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 58eb80de..b0fd5a69 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -12,7 +12,6 @@ $dodgerblue: #1E90FF; $icon-color: #8b8b8b; $icon-hover-color: #333; $p5-contrast-pink: #FFA9D9; -$p5-contrast-lightgray: #f0f0f0; // Grays $dark: #333; @@ -187,29 +186,29 @@ $themes: ( modal-button-color: #333, heading-text-color: #e1e1e1, secondary-text-color: #e1e1e1, - inactive-text-color: $p5-contrast-lightgray, + inactive-text-color: #c1c1c1, background-color: #333, button-background-color: $white, button-color: $black, button-border-color: #979797, toolbar-button-color: #333333, - toolbar-button-background-color: $p5-contrast-lightgray, + toolbar-button-background-color: #C1C1C1, button-background-hover-color: $yellow, button-background-active-color: $yellow, button-nav-inactive-color: #a0a0a0, button-hover-color: #333333, button-active-color: #333333, modal-background-color: #444, - modal-button-background-color: $p5-contrast-lightgray, + modal-button-background-color: #C1C1C1, modal-border-color: #949494, - icon-color: #d9d9d9, + icon-color: #a9a9a9, icon-hover-color: $yellow, icon-toast-hover-color: $yellow, shadow-color: rgba(0, 0, 0, 0.16), console-background-color: #4f4f4f, console-color: $black, console-header-background-color: #3f3f3f, - console-header-color: #d9d9d9, + console-header-color: #b5b5b5, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, @@ -236,7 +235,7 @@ $themes: ( primary-button-background-color: $p5js-pink, table-button-color: #333, - table-button-background-color: $p5-contrast-lightgray, + table-button-background-color: #C1C1C1, table-button-active-color: #333, table-button-background-active-color: #00FFFF, table-button-hover-color: #333, diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index cd736d2f..fd289df3 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/client/styles/components/_p5-contrast-codemirror-theme.scss @@ -14,7 +14,7 @@ $p5-contrast-black: #333; $p5-contrast-gray: #A0A0A0; $p5-contrast-white: #FDFDFD; $p5-contrast-darkgray: #333333; -$p5-contrast-lightgray: #f2f2f2; +$p5-contrast-lightgray: #C1C1C1; $p5-contrast-blue: #00FFFF; $p5-contrast-green: #2DE9B6; $p5-contrast-yellow: #F5DC23; @@ -31,47 +31,47 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-white; } -.cm-s-p5-contrast span .cm-comment { +.cm-s-p5-contrast .cm-comment { color: $p5-contrast-lightgray; } -.cm-s-p5-contrast span .cm-def { +.cm-s-p5-contrast .cm-def { color: $p5-contrast-blue; } -.cm-s-p5-contrast span .cm-string { +.cm-s-p5-contrast .cm-string { color: $p5-contrast-green; } -.cm-s-p5-contrast span .cm-string-2 { +.cm-s-p5-contrast .cm-string-2 { color: $p5-contrast-green; } -.cm-s-p5-contrast span .cm-number { +.cm-s-p5-contrast .cm-number { color: $p5-contrast-pink; } -.cm-s-p5-contrast span .cm-keyword { +.cm-s-p5-contrast .cm-keyword { color: $p5-contrast-yellow; } -.cm-s-p5-contrast span .cm-variable { +.cm-s-p5-contrast .cm-variable { color: $p5-contrast-white; } -.cm-s-p5-contrast span .cm-variable-2 { +.cm-s-p5-contrast .cm-variable-2 { color: $p5-contrast-white; } -.cm-s-p5-contrast span .cm-property { +.cm-s-p5-contrast .cm-property { color: $p5-contrast-white; } -.cm-s-p5-contrast span .cm-atom { +.cm-s-p5-contrast .cm-atom { color: $p5-contrast-pink; } -.cm-s-p5-contrast span .cm-operator { +.cm-s-p5-contrast .cm-operator { color: $p5-contrast-lightgray; } @@ -79,7 +79,7 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-number; } -.cm-s-p5-contrast div .CodeMirror-selected { +.cm-s-p5-contrast .CodeMirror-selected { background-color: $p5-contrast-selected; } @@ -96,25 +96,25 @@ $p5-contrast-activeline: #999999; color: #f00; } -.cm-s-p5-contrast span.CodeMirror-matchingbracket { +.cm-s-p5-contrast .CodeMirror-matchingbracket { outline: 1px solid $p5-contrast-lightgray; outline-offset: 1px; color: $p5-contrast-white !important; } -.cm-s-p5-contrast span .cm-qualifier { +.cm-s-p5-contrast .cm-qualifier { color: $p5-contrast-yellow; } -.cm-s-p5-contrast span .cm-tag { +.cm-s-p5-contrast .cm-tag { color: $p5-contrast-orange; } -.cm-s-p5-contrast span.cm-builtin { +.cm-s-p5-contrast .cm-builtin { color: $p5-contrast-yellow; } -.cm-s-p5-contrast span .cm-attribute { +.cm-s-p5-contrast .cm-attribute { color: $p5-contrast-white; } From 31ca964bb765602b3db00e51c80df19530f0a04e Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 16:18:10 -0400 Subject: [PATCH 22/23] Fixes #1361 - upload option missing for folder --- client/modules/IDE/components/FileNode.jsx | 81 ++++++++++++---------- 1 file changed, 46 insertions(+), 35 deletions(-) diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index f6563706..079e1826 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -185,40 +185,50 @@ export class FileNode extends React.Component { {(() => { // eslint-disable-line if (this.props.fileType === 'folder') { return ( -
  • - -
    • - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.fileType === 'folder') { - return ( -
  • - -
    • + +
  • + +
    • +
  • + +
    • +
  • + +
    • + +     ); } })()} @@ -289,7 +299,8 @@ FileNode.propTypes = { newFolder: PropTypes.func.isRequired, showFolderChildren: PropTypes.func.isRequired, hideFolderChildren: PropTypes.func.isRequired, - canEdit: PropTypes.bool.isRequired + canEdit: PropTypes.bool.isRequired, + openUploadFileModal: PropTypes.func.isRequired }; FileNode.defaultProps = { From b744c9bd6d4583a3768b256f2f85efb5ec8b32fe Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 16:28:49 -0400 Subject: [PATCH 23/23] Add frane to code editor when selected folder or media file --- client/styles/components/_editor.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index e6f9f9f4..6096afa1 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -1,7 +1,4 @@ .CodeMirror { - @include themify() { - border: 1px solid getThemifyVariable('ide-border-color'); - } font-family: Inconsolata, monospace; height: 100%; } @@ -328,7 +325,10 @@ pre.CodeMirror-line { height: calc(100% - #{29 / $base-font-size}rem); width: 100%; position: absolute; - &.editor-holder--hidden { + @include themify() { + border: 1px solid getThemifyVariable('ide-border-color'); + } + &.editor-holder--hidden .CodeMirror { display: none; } }