From 9d0603b6d57bb9fe8c2328d060ea154eea1e2ae6 Mon Sep 17 00:00:00 2001 From: shakti97 Date: Mon, 24 Feb 2020 00:18:16 +0530 Subject: [PATCH 01/39] Feature sidebar toggle shortcut --- client/modules/IDE/pages/IDEView.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index d9a906d9..3750b7dd 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -156,6 +156,13 @@ class IDEView extends React.Component { } else if (e.keyCode === 49 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) && e.shiftKey) { e.preventDefault(); this.props.setAllAccessibleOutput(true); + } else if (e.keyCode === 66 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) { + e.preventDefault(); + if (!this.props.ide.sidebarIsExpanded) { + this.props.expandSidebar(); + } else { + this.props.collapseSidebar(); + } } } From 6abb97e8f5d05c9fd0a8169a0c6f5dddfc566435 Mon Sep 17 00:00:00 2001 From: Minjun Kim Date: Tue, 31 Mar 2020 17:26:17 +0200 Subject: [PATCH 02/39] add readme korean translation --- ko/README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 ko/README.md diff --git a/ko/README.md b/ko/README.md new file mode 100644 index 00000000..9be60b7a --- /dev/null +++ b/ko/README.md @@ -0,0 +1,38 @@ +# [p5.js 웹 에디터](https://editor.p5js.org) + +p5.js 웹 에디터는 예술가, 디자이너, 교육자, 초급자, 그 외에도 코딩을 배우고 싶어하는 모든 이들을 포함해 최대한 많은 사람들에게 코딩을 접근 가능하도록 만드는데에 초점을 맞춘 창의적 코딩을 위한 플랫폼입니다. 웹사이트만 열면 다운로드나 설정을 할 필요도 없이 곧바로 p5.js 스케치를 작성할 수 있습니다. 본 에디터는 제한적인 기능만을 제공하고 불필요한 장식을 없애는 등 단순함을 염두에 두고 만들어졌습니다. 우리는 이 에디터를 개발해나감에 있어서 커뮤니티의 의견에 귀 기울이고, 모든 변경 사항에 의도를 깃들일 수 있도록 노력하고 있습니다. 본 에디터는 무료이며 오픈 소스입니다. + +우리는 또한 커뮤니티에게 최대한 많은 주인 의식과 통제권을 드리고자 노력합니다. 여러분이 작성한 스케치를 다운로드해 로컬 환경에서 스케치를 편집하는 것도 가능하며, 다른 곳에 호스팅 하는 것 역시 가능합니다. 여러분은 자신만의 에디터 버전을 호스팅해 데이터에 대한 통제권을 지닐 수도 있습니다. + +## 커뮤니티 + +p5.js 커뮤니티에 처음 오셨나요? 그렇다면 먼저 저희의 [커뮤니티 성명서](https://p5js.org/community/)를 읽어주시기 바랍니다. + +## 행동 수칙 + +p5.js 웹 에디터의 모든 컨트리뷰터들은 다음의 [행동 수칙](./.github/CODE_OF_CONDUCT.md)을 따라야 합니다. 우리는 친근감 있고 안전한 커뮤니티를 만들고자 노력하고 있습니다! + +## 참여하기 + +p5.js 웹 에디터는 다수의 개인들에 의해 만들어진 협력 프로젝트이며, 여러분 역시 도움을 주실 수 있습니다. 모든 종류의 참여를 환영합니다! 더 자세한 사항을 위해서는 [기여 안내](./.github/CONTRIBUTING.md)를 확인하시기 바랍니다. + +개발자 분들은 코드 기여, 버그 수정, 문서화에 대한 세부 사항을 [개발자 문서](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/)에서 확인하시기 바랍니다. 코드 작성을 시작하기 위한 좋은 시작점은 [개발 안내](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md)를 살펴보는 것입니다. + +## 이슈 + +p5.js 웹 에디터에서 버그를 발견하셨다면, [“이슈” 탭](https://github.com/processing/p5.js-web-editor/issues)에 해당 문제를 보고하실 수 있습니다. + +버그와 기능 요청은 각각에 알맞은 저장소에 보고해주시기 바랍니다: + +* p5.js 라이브러리와 p5.dom: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues) +* p5.accessibility: [https://github.com/processing/p5.accessibility/issues](https://github.com/processing/p5.accessibility/issues) +* p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues) +* p5.js 웹사이트: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues) + +## 감사의 말 + +본 프로젝트는 [프로세싱 재단](https://processingfoundation.org/), [뉴욕대 ITP](https://tisch.nyu.edu/itp), [뉴욕시 교육부의 CS4All](http://cs4all.nyc/)에서 후원해주셨습니다. + +호스팅과 기술적 지원은 다음 단체들에서 해주셨습니다:
+ + From 21d44fa2635b98e8e06f6bf1021a8e62bac17c2d Mon Sep 17 00:00:00 2001 From: elit-altum Date: Sat, 4 Apr 2020 13:51:57 +0530 Subject: [PATCH 03/39] 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 a8c4cf66b09a82abacfe73274e6eeaf459b28f59 Mon Sep 17 00:00:00 2001 From: shakti97 Date: Sun, 5 Apr 2020 13:41:24 +0530 Subject: [PATCH 04/39] Added Sidebar toggle shortcut in keyboard shortcut overlay --- client/modules/IDE/components/KeyboardShortcutModal.jsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx index fbb180b9..7a8e8b58 100644 --- a/client/modules/IDE/components/KeyboardShortcutModal.jsx +++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx @@ -74,6 +74,12 @@ function KeyboardShortcutModal() { Turn off Accessible Output +
  • + + {metaKeyName} + B + + Toggle Sidebar +
    • ); } From 1d1aaccc8e8232f201b56aff180ec40167862566 Mon Sep 17 00:00:00 2001 From: elit-altum Date: Mon, 6 Apr 2020 20:24:39 +0530 Subject: [PATCH 05/39] fix(toolbar): centered the toolbar icons --- client/styles/components/_toolbar.scss | 30 ++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss index 86dec1b2..e4157d8e 100644 --- a/client/styles/components/_toolbar.scss +++ b/client/styles/components/_toolbar.scss @@ -1,6 +1,9 @@ .toolbar__play-button { @include themify() { @extend %toolbar-button; + display: flex; + justify-content: center; + align-items: center; &--selected { @extend %toolbar-button--selected; } @@ -18,8 +21,13 @@ } } margin-right: #{15 / $base-font-size}rem; - & span { - padding-left: #{3 / $base-font-size}rem; + span { + padding-left: #{4 / $base-font-size}rem; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; } } @@ -30,16 +38,29 @@ .toolbar__stop-button { @include themify() { @extend %toolbar-button; + display: flex; + justify-content: center; + align-items: center; margin-right: #{15 / $base-font-size}rem; &--selected { @extend %toolbar-button--selected; } } + span { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + } } .toolbar__preferences-button { @include themify() { @extend %toolbar-button; + display: flex; + justify-content: center; + align-items: center; line-height: #{52 / $base-font-size}rem; &--selected { @extend %toolbar-button--selected; @@ -50,6 +71,11 @@ margin-left: auto; & span { padding-left: #{1 / $base-font-size}rem; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; } } From e4f180f8dfaa5da2a8d2cc9fbab36e572b4db03a Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 8 Apr 2020 13:14:39 -0400 Subject: [PATCH 06/39] 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 07/39] 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 08/39] 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 09/39] 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 10/39] 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; } } From 97f02fda55761a04a43936580fbffe3e3962c777 Mon Sep 17 00:00:00 2001 From: elit-altum Date: Thu, 9 Apr 2020 02:33:48 +0530 Subject: [PATCH 11/39] fix(high-contrast-theme): fixed failing WCAG AAA checks --- client/styles/abstracts/_variables.scss | 6 ++-- .../_p5-contrast-codemirror-theme.scss | 34 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index b0fd5a69..05dfcf6e 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -186,7 +186,7 @@ $themes: ( modal-button-color: #333, heading-text-color: #e1e1e1, secondary-text-color: #e1e1e1, - inactive-text-color: #c1c1c1, + inactive-text-color: #f2f2f2, background-color: #333, button-background-color: $white, button-color: $black, @@ -201,14 +201,14 @@ $themes: ( modal-background-color: #444, modal-button-background-color: #C1C1C1, modal-border-color: #949494, - icon-color: #a9a9a9, + 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: #b5b5b5, + console-header-color: #d9d9d9, console-info-background-color: $lightsteelblue, console-warn-background-color: $orange, console-debug-background-color: $dodgerblue, diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index fd289df3..0ad29dc3 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/client/styles/components/_p5-contrast-codemirror-theme.scss @@ -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 24e034808c147e0cd0953d773fffa51a63240c0b Mon Sep 17 00:00:00 2001 From: David Date: Wed, 8 Apr 2020 17:11:53 -0500 Subject: [PATCH 12/39] resolve path present assets #1268 --- server/routes/asset.routes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/server/routes/asset.routes.js b/server/routes/asset.routes.js index 4e236e7d..db593b6d 100644 --- a/server/routes/asset.routes.js +++ b/server/routes/asset.routes.js @@ -9,6 +9,7 @@ router.get('/full/:project_id/*', getProjectAsset); router.get('/:username/full/:project_id/*', getProjectAsset); router.get('/embed/:project_id/*', getProjectAsset); router.get('/:username/embed/:project_id/*', getProjectAsset); +router.get('/:username/present/:project_id/*', getProjectAsset); router.get('/sketches/:project_id/assets/*?', getFileContent); From a85068b25e0439573f54bd17ae7cb928ffce5e0b Mon Sep 17 00:00:00 2001 From: David Date: Wed, 8 Apr 2020 23:03:59 -0500 Subject: [PATCH 13/39] remove title from nav --- client/components/Nav.jsx | 4 ++-- client/components/NavBasic.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index 4a1212c9..8e9cde7a 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -227,7 +227,7 @@ class Nav extends React.PureComponent { renderDashboardMenu(navDropdownState) { return ( -
      +
        • @@ -245,7 +245,7 @@ class Nav extends React.PureComponent { renderProjectMenu(navDropdownState) { return ( -
          +
            • diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx index 92913add..88c9f313 100644 --- a/client/components/NavBasic.jsx +++ b/client/components/NavBasic.jsx @@ -13,7 +13,7 @@ class NavBasic extends React.PureComponent { render() { return (