From 87de91016bc1d9066bbfa18ac4671e6257cb0241 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Mon, 17 Jul 2017 16:07:59 -0400 Subject: [PATCH 1/4] 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/4] 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/4] 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/4] 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;