Skip to content

Commit bf28506

Browse files
raclimAryan1982
raclim
authored and
Aryan1982
committed
Mer request processing#2011 from 3ru/fix/light-mode-color-improvement
Improved visibility of selections on the settings
2 parents c6f2936 + 801954f commit bf28506

File tree

28 files changed

+5156
-3335
lines changed

28 files changed

+5156
-3335
lines changed

‎README.md‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
# [p5.js Editor](https://editor.p5js.org)
22

3-
4-
Documentation is also available in the following languages:
5-
6-
[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
7-
83
## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
94

105
The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything. It is designed with beginners in mind, limiting features and frills. The editor is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

‎client/components/Nav.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,26 @@ class Nav extends React.PureComponent {
667667
हिन्दी
668668
</button>
669669
</li>
670+
<li className="nav__dropdown-item">
671+
<button
672+
onFocus={this.handleFocusForLang}
673+
onBlur={this.handleBlur}
674+
value="ko"
675+
onClick={(e) => this.handleLangSelection(e)}
676+
>
677+
한국어
678+
</button>
679+
</li>
680+
<li className="nav__dropdown-item">
681+
<button
682+
onFocus={this.handleFocusForLang}
683+
onBlur={this.handleBlur}
684+
value="it"
685+
onClick={(e) => this.handleLangSelection(e)}
686+
>
687+
Italiano
688+
</button>
689+
</li>
670690
<li className="nav__dropdown-item">
671691
<button
672692
onFocus={this.handleFocusForLang}

‎client/components/__snapshots__/Nav.unit.test.jsx.snap‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ exports[`Nav renders correctly 1`] = `
2222
<li
2323
class="nav__item"
2424
>
25-
<button>
25+
<button
26+
title="File"
27+
>
2628
<span
2729
class="nav__item-header"
2830
/>
@@ -65,7 +67,9 @@ exports[`Nav renders correctly 1`] = `
6567
<li
6668
class="nav__item"
6769
>
68-
<button>
70+
<button
71+
title="Edit"
72+
>
6973
<span
7074
class="nav__item-header"
7175
/>
@@ -116,7 +120,9 @@ exports[`Nav renders correctly 1`] = `
116120
<li
117121
class="nav__item"
118122
>
119-
<button>
123+
<button
124+
title="Sketch"
125+
>
120126
<span
121127
class="nav__item-header"
122128
/>
@@ -166,7 +172,9 @@ exports[`Nav renders correctly 1`] = `
166172
<li
167173
class="nav__item"
168174
>
169-
<button>
175+
<button
176+
title="Help"
177+
>
170178
<span
171179
class="nav__item-header"
172180
/>

‎client/i18n.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import i18n from 'i18next';
22
import { initReactI18next } from 'react-i18next';
33
import Backend from 'i18next-http-backend';
4+
45
import {
56
enUS,
67
es,
78
ja,
89
hi,
10+
it,
11+
ko,
912
ptBR,
1013
de,
1114
frCA,
@@ -22,7 +25,9 @@ const availableLanguages = [
2225
'es-419',
2326
'fr-CA',
2427
'hi',
28+
'it',
2529
'ja',
30+
'ko',
2631
'pt-BR',
2732
'sv',
2833
'uk-UA',
@@ -37,7 +42,9 @@ export function languageKeyToLabel(lang) {
3742
'es-419': 'Español',
3843
'fr-CA': 'Français',
3944
hi: 'हिन्दी',
45+
it: 'Italiano',
4046
ja: '日本語',
47+
ko: '한국어',
4148
'pt-BR': 'Português',
4249
sv: 'Svenska',
4350
'uk-UA': 'Українська',
@@ -54,7 +61,9 @@ export function languageKeyToDateLocale(lang) {
5461
'es-419': es,
5562
'fr-CA': frCA,
5663
hi,
64+
it,
5765
ja,
66+
ko,
5867
'pt-BR': ptBR,
5968
sv,
6069
'uk-UA': uk,

‎client/modules/IDE/reducers/files.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ function draw() {
1212
const defaultHTML = `<!DOCTYPE html>
1313
<html lang="en">
1414
<head>
15-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
1717
<link rel="stylesheet" type="text/css" href="style.css">
1818
<meta charset="utf-8" />
1919

‎client/styles/components/_preferences.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ input[type="number"]::-webkit-outer-spin-button {
237237
@include themify() {
238238
//for some reason this won't work for getThemifyVariable
239239
color: map-get($theme-map, "heavy-text-color");
240+
font-weight: bold;
240241
}
241242
}
242243

‎client/styles/components/_sidebar.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
white-space: nowrap;
116116
text-overflow: ellipsis;
117117
min-width: #{7 / $base-font-size}rem;
118+
white-space: pre;
118119
}
119120

120121
.sidebar__file-item-name-text {

‎client/testData/testReduxStore.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const initialTestState = {
6868
},
6969
{
7070
name: 'index.html',
71-
content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> </main> <script src="sketch.js"></script> </body> </html>`,
71+
content: `<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> </main> <script src="sketch.js"></script> </body> </html>`,
7272
id: '606fc1c46045e19ca2ee2646',
7373
_id: '606fc1c46045e19ca2ee2646',
7474
fileType: 'file',

‎contributor_docs/accessibility.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
## Accessibility Guidelines
22

3-
Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
3+
Here is a guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
44

55
The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues.
66

77
**Code Structure**
88

9-
* Screen Readers are an assistive technology for vision loss which helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
9+
* Screen Readers are an assistive technology for vision loss that helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader-friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
1010
* All buttons/links/windows need to be accessible by the keyboard ( By tabbing, pressing space etc.)
11-
* In cases where tags are not screen reader friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
11+
* In cases where tags are not screen reader-friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
1212
* When opening a new window or pop up window, ensure the keyboard focus also moves to the new window. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/NewFileForm.jsx#L16)
1313

1414
**Labeling**

‎contributor_docs/deployment.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ WIP.
1717

1818
These are the steps that happen when you deploy the application.
1919

20-
1. Push to `develop` branch, or merge in a pull request to the `develop` branch.
20+
1. Push to the `develop` branch, or merge in a pull request to the `develop` branch.
2121
2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
2222
3. Travis CI builds a (development) Docker image of the whole application.
2323
4. Travis CI runs some tests, which in this case, is just `npm run lint`. This could be updated in the future to include more extensive tests. If the tests fail, the build stops here.
@@ -47,7 +47,7 @@ If you are interested in hosting and deploying your own p5.js Web Editor instanc
4747

4848
1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
4949
2. Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/processing/p5.js-web-editor/tree/develop)
50-
3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
50+
3. Enter a unique *App name*, this will become part of the URL (i.e. https://app-name.herokuapp.com/)
5151
4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
5252
5. Click on the "Deploy app" button
5353
6. When complete, click on the "View app" button

0 commit comments

Comments
 (0)