From 87de91016bc1d9066bbfa18ac4671e6257cb0241 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 16:07:59 -0400 Subject: [PATCH 1/6] Code folding (#382) --- client/modules/IDE/components/Editor.jsx | 10 +++++++++- client/styles/components/_editor.scss | 22 ++++++++++++++++++++++ webpack.config.dev.js | 4 ++++ 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 585f3772..f7940d4b 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -7,9 +7,15 @@ import 'codemirror/addon/lint/lint'; import 'codemirror/addon/lint/javascript-lint'; import 'codemirror/addon/lint/css-lint'; import 'codemirror/addon/lint/html-lint'; +import 'codemirror/addon/fold/brace-fold'; +import 'codemirror/addon/fold/comment-fold'; +import 'codemirror/addon/fold/foldcode'; +import 'codemirror/addon/fold/foldgutter'; +import 'codemirror/addon/fold/indent-fold'; import 'codemirror/addon/comment/comment'; import 'codemirror/keymap/sublime'; import 'codemirror/addon/search/jump-to-line'; +import 'codemirror/addon/fold/foldgutter.css'; import { JSHINT } from 'jshint'; import { CSSLint } from 'csslint'; import { HTMLHint } from 'htmlhint'; @@ -49,7 +55,8 @@ class Editor extends React.Component { inputStyle: 'contenteditable', lineWrapping: false, fixedGutter: false, - gutters: ['CodeMirror-lint-markers'], + foldGutter: true, + gutters: [/* 'CodeMirror-lint-markers', 'CodeMirror-linenumbers', */'CodeMirror-foldgutter'], keyMap: 'sublime', lint: { onUpdateLinting: debounce((annotations) => { @@ -71,6 +78,7 @@ class Editor extends React.Component { } }); + this._cm.setOption('extraKeys', { 'Cmd-Enter': () => null, 'Shift-Cmd-Enter': () => null, diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index ad455a00..cf2a744b 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -27,6 +27,18 @@ padding-left: #{5 / $base-font-size}rem; } +.CodeMirror-activeline-background { + background-color: rgba(0,0,0,0.025) !important; +} +.CodeMirror-linebackground { + +} + +.line-runtime-error { + background-color: #ffaaaa !important; + border-radius: 5px; +} + .CodeMirror-gutter-wrapper { right: 100%; top: 0; @@ -80,6 +92,16 @@ width: #{48 / $base-font-size}rem; } +.CodeMirror-guttermarker-subtle { + +} +.CodeMirror-foldgutter-folded { + +} +.CodeMirror-foldgutter-open { + +} + .editor-holder { height: calc(100% - #{29 / $base-font-size}rem); width: 100%; diff --git a/webpack.config.dev.js b/webpack.config.dev.js index acb9f5e0..5f5e2626 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -56,6 +56,10 @@ module.exports = { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, + { + test: /\.css$/, + loader: "style-loader!css-loader" + }, { test: /\.(svg|mp3)$/, loader: 'file' From 9647372c9ea9846033ff867202192fc8b700ca4a Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 16:15:33 -0400 Subject: [PATCH 2/6] Remove unnecessary CSS --- client/styles/components/_editor.scss | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index cf2a744b..ad455a00 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -27,18 +27,6 @@ padding-left: #{5 / $base-font-size}rem; } -.CodeMirror-activeline-background { - background-color: rgba(0,0,0,0.025) !important; -} -.CodeMirror-linebackground { - -} - -.line-runtime-error { - background-color: #ffaaaa !important; - border-radius: 5px; -} - .CodeMirror-gutter-wrapper { right: 100%; top: 0; @@ -92,16 +80,6 @@ width: #{48 / $base-font-size}rem; } -.CodeMirror-guttermarker-subtle { - -} -.CodeMirror-foldgutter-folded { - -} -.CodeMirror-foldgutter-open { - -} - .editor-holder { height: calc(100% - #{29 / $base-font-size}rem); width: 100%; From 683b71830396dd76bc505a3542234970bf511a63 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Tue, 18 Jul 2017 15:57:40 -0400 Subject: [PATCH 3/6] Fix CSS loader + Improve visual for code folding --- client/modules/IDE/components/Editor.jsx | 4 ++-- client/styles/vendors/_codemirror.scss | 28 ++++++++++++++++++++++++ static/p5-interceptor | 2 +- webpack.config.dev.js | 4 ---- 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index f7940d4b..e9d21d65 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -15,7 +15,6 @@ import 'codemirror/addon/fold/indent-fold'; import 'codemirror/addon/comment/comment'; import 'codemirror/keymap/sublime'; import 'codemirror/addon/search/jump-to-line'; -import 'codemirror/addon/fold/foldgutter.css'; import { JSHINT } from 'jshint'; import { CSSLint } from 'csslint'; import { HTMLHint } from 'htmlhint'; @@ -56,7 +55,8 @@ class Editor extends React.Component { lineWrapping: false, fixedGutter: false, foldGutter: true, - gutters: [/* 'CodeMirror-lint-markers', 'CodeMirror-linenumbers', */'CodeMirror-foldgutter'], + foldOptions: { widget: '\u2026' }, + gutters: ['CodeMirror-foldgutter'], keyMap: 'sublime', lint: { onUpdateLinting: debounce((annotations) => { diff --git a/client/styles/vendors/_codemirror.scss b/client/styles/vendors/_codemirror.scss index 1cf66a9f..593db885 100644 --- a/client/styles/vendors/_codemirror.scss +++ b/client/styles/vendors/_codemirror.scss @@ -336,3 +336,31 @@ div.CodeMirror-dragcursors { /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } + +/* CODE FOLDING (FOLDGUTTER.JS) */ + +.CodeMirror-foldmarker { + color: #FFF; + background-color: rgba(237, 34, 93, 0.42); + border-radius: 3px; + font-weight: bold; + font-family: arial; + line-height: .3; + cursor: pointer; +} +.CodeMirror-foldgutter { + width: 2.7em; +} +.CodeMirror-foldgutter-open, +.CodeMirror-foldgutter-folded { + cursor: pointer; + padding-bottom: 0.4em; + text-align: right; + line-height: 1.0; +} +.CodeMirror-foldgutter-open:after { + content: "\25BE"; +} +.CodeMirror-foldgutter-folded:after { + content: "\25B8"; +} diff --git a/static/p5-interceptor b/static/p5-interceptor index 344fedf8..0958be54 160000 --- a/static/p5-interceptor +++ b/static/p5-interceptor @@ -1 +1 @@ -Subproject commit 344fedf8d868c62adc571bf4212c6bea3cd20247 +Subproject commit 0958be54482722821159cd3e07777988ee349f37 diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 5f5e2626..acb9f5e0 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -56,10 +56,6 @@ module.exports = { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, - { - test: /\.css$/, - loader: "style-loader!css-loader" - }, { test: /\.(svg|mp3)$/, loader: 'file' From 14d77cac0b5c77558752361b6ecdd0f5e8cc0b3c Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Wed, 26 Jul 2017 14:16:50 -0400 Subject: [PATCH 4/6] Style for folded region looking better --- client/styles/vendors/_codemirror.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/styles/vendors/_codemirror.scss b/client/styles/vendors/_codemirror.scss index 593db885..8938568c 100644 --- a/client/styles/vendors/_codemirror.scss +++ b/client/styles/vendors/_codemirror.scss @@ -340,13 +340,15 @@ span.CodeMirror-selectedtext { background: none; } /* CODE FOLDING (FOLDGUTTER.JS) */ .CodeMirror-foldmarker { + text-shadow: -1px 0 #ed225d, 0 1px #ed225d, 1px 0 #ed225d, 0 -1px #ed225d; color: #FFF; - background-color: rgba(237, 34, 93, 0.42); - border-radius: 3px; + /* background-color: rgba(237, 34, 93, 0.42); */ + /* border-radius: 3px; */ font-weight: bold; font-family: arial; line-height: .3; cursor: pointer; + opacity: 0.75; } .CodeMirror-foldgutter { width: 2.7em; From dfcd080cb72a8051712095655303defb8f4941fb Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 11 Oct 2017 17:31:23 -0400 Subject: [PATCH 5/6] change fold icons and dots --- client/styles/components/_editor.scss | 36 +++++++++++++++++-- .../_p5-contrast-codemirror-theme.scss | 5 +++ .../components/_p5-dark-codemirror-theme.scss | 5 +++ .../_p5-light-codemirror-theme.scss | 5 +++ 4 files changed, 48 insertions(+), 3 deletions(-) diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 194264d0..4aaabfe8 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -13,17 +13,17 @@ .CodeMirror-linenumber { width: #{32 / $base-font-size}rem; - left: 0 !important; + left: #{-3 / $base-font-size}rem !important; @include themify() { color: getThemifyVariable('inactive-text-color'); } } .CodeMirror-lines { - padding-top: #{25 / $base-font-size}rem; + padding-top: #{25 / $base-font-size}rem; } -.CodeMirror-line { +pre.CodeMirror-line { padding-left: #{5 / $base-font-size}rem; } @@ -243,6 +243,36 @@ background: transparent url(../images/exit.svg) no-repeat; } +.CodeMirror-foldgutter-open:after { + background-image: url(../images/down-arrow.svg); +} + +.CodeMirror-foldgutter-folded:after { + background-image: url(../images/right-arrow.svg); +} + +.CodeMirror-foldgutter-folded:after, +.CodeMirror-foldgutter-open:after { + background-size: 10px 10px; + content: ""; + padding-left: 15px; + background-repeat: no-repeat; + background-position: center center; +} + +.CodeMirror-foldmarker { + text-shadow: none; + border-radius: 5px; + opacity: 1; + font-weight: normal; + display: inline-block; + vertical-align: middle; + height: 0.85em; + line-height: 0.7; + padding: 0 #{5 / $base-font-size}rem; + font-family: serif; +} + .editor-holder { height: calc(100% - #{29 / $base-font-size}rem); width: 100%; diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss index d5a2a997..6ddef26a 100644 --- a/client/styles/components/_p5-contrast-codemirror-theme.scss +++ b/client/styles/components/_p5-contrast-codemirror-theme.scss @@ -125,3 +125,8 @@ $p5-contrast-activeline: #999999; color: $p5-contrast-pink; font-weight: bold; } + +.cm-s-p5-contrast .CodeMirror-foldmarker { + background-color: white; + color: #333; +} diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss index e727b03f..275d57ff 100644 --- a/client/styles/components/_p5-dark-codemirror-theme.scss +++ b/client/styles/components/_p5-dark-codemirror-theme.scss @@ -128,3 +128,8 @@ $p5-dark-activeline: rgb(207, 207, 207); color: $p5-dark-pink; font-weight: bold; } + +.cm-s-p5-dark .CodeMirror-foldmarker { + background-color: white; + color: #333; +} diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss index 0a5fcd78..dbb72dbd 100644 --- a/client/styles/components/_p5-light-codemirror-theme.scss +++ b/client/styles/components/_p5-light-codemirror-theme.scss @@ -126,3 +126,8 @@ $p5-light-activeline: rgb(207, 207, 207); .cm-s-p5-light .cm-p5-variable { color: $p5-light-pink; } + +.cm-s-p5-light .CodeMirror-foldmarker { + background-color: #333; + color: white; +} From 2140e2bbcaff61673b90d2d42b59ba5be68287ca Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 12 Oct 2017 14:22:17 -0400 Subject: [PATCH 6/6] change colors of folding icons for dark and high contrast themes --- client/images/down-arrow-white.svg | 18 ++++++++++++++++++ client/images/right-arrow-white.svg | 16 ++++++++++++++++ client/styles/abstracts/_variables.scss | 8 +++++++- client/styles/components/_editor.scss | 8 ++++++-- 4 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 client/images/down-arrow-white.svg create mode 100644 client/images/right-arrow-white.svg diff --git a/client/images/down-arrow-white.svg b/client/images/down-arrow-white.svg new file mode 100644 index 00000000..34efd84b --- /dev/null +++ b/client/images/down-arrow-white.svg @@ -0,0 +1,18 @@ + + + + arrow-shape-copy-2 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/images/right-arrow-white.svg b/client/images/right-arrow-white.svg new file mode 100644 index 00000000..b789f93d --- /dev/null +++ b/client/images/right-arrow-white.svg @@ -0,0 +1,16 @@ + + + + arrow-shape-copy + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 69736822..d3a62a22 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -49,6 +49,8 @@ $themes: ( dropdown-color: #414141, keyboard-shortcut-color: #757575, nav-hover-color: $p5js-pink, + codefold-icon-open: url(../images/down-arrow.svg), + codefold-icon-closed: url(../images/right-arrow.svg) ), dark: ( logo-color: $p5js-pink, @@ -88,6 +90,8 @@ $themes: ( dropdown-color: #dadada, keyboard-shortcut-color: #B5B5B5, nav-hover-color: $p5js-pink, + codefold-icon-open: url(../images/down-arrow-white.svg), + codefold-icon-closed: url(../images/right-arrow-white.svg) ), contrast: ( logo-color: $yellow, @@ -125,7 +129,9 @@ $themes: ( search-background-color: $white, dropdown-color: #e1e1e1, keyboard-shortcut-color: #e1e1e1, - nav-hover-color: $yellow + nav-hover-color: $yellow, + codefold-icon-open: url(../images/down-arrow-white.svg), + codefold-icon-closed: url(../images/right-arrow-white.svg) ) ); diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss index 4aaabfe8..bf317fb0 100644 --- a/client/styles/components/_editor.scss +++ b/client/styles/components/_editor.scss @@ -244,11 +244,15 @@ pre.CodeMirror-line { } .CodeMirror-foldgutter-open:after { - background-image: url(../images/down-arrow.svg); + @include themify() { + background-image: getThemifyVariable('codefold-icon-open'); + } } .CodeMirror-foldgutter-folded:after { - background-image: url(../images/right-arrow.svg); + @include themify() { + background-image: getThemifyVariable('codefold-icon-closed'); + } } .CodeMirror-foldgutter-folded:after,