r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge branch 'zrispo-feature-code-folding'

Browse source
This commit is contained in:
Cassie Tarakajian 2017-10-12 14:23:11 -04:00
commit f0970031f9
9 changed files with 132 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/images/down-arrow-white.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
<title>arrow-shape-copy-2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="down-arrow" fill-rule="nonzero" fill="#FFFFFF">
<g id="IDEs">
<g id="p5js-IDE-styles-foundation-pt-2">
<g id="Icons">
<polygon id="arrow-shape-copy-2" transform="translate(7.000000, 4.198314) rotate(-180.000000) translate(-7.000000, -4.198314) " points="8.4 1.396628 14 6.996628 12.6 8.396628 7 2.796628 1.4 8.396628 0 6.996628 5.6 1.396628 6.996628 -2.84217094e-14"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

16
client/images/right-arrow-white.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
<title>arrow-shape-copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="right-arrow" fill-rule="nonzero" fill="#FFFFFF">
<g id="IDEs">
<g id="p5js-IDE-styles-foundation-pt-2">
<polygon id="arrow-shape-copy" transform="translate(4.999999, 7.198314) rotate(90.000000) translate(-4.999999, -7.198314) " points="6.399999 4.396629 11.999999 9.996629 10.599999 11.396629 4.999999 5.796629 -0.600001 11.396629 -2.000001 9.996629 3.599999 4.396629 4.996627 2.999999"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,005 B

10
client/modules/IDE/components/Editor.jsx
View file

@ -7,6 +7,11 @@ 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/searchcursor';
@ -62,7 +67,9 @@ class Editor extends React.Component {
inputStyle: 'contenteditable',
lineWrapping: false,
fixedGutter: false,
gutters: ['CodeMirror-lint-markers'],
foldGutter: true,
foldOptions: { widget: '\u2026' },
gutters: ['CodeMirror-foldgutter'],
keyMap: 'sublime',
highlightSelectionMatches: true, // highlight current search match
lint: {
@ -86,6 +93,7 @@ class Editor extends React.Component {
}
});
this._cm.setOption('extraKeys', {
[`${metaKey}-Enter`]: () => null,
[`Shift-${metaKey}-Enter`]: () => null,

8
client/styles/abstracts/_variables.scss
View file

@ -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)
)
);

40
client/styles/components/_editor.scss
View file

@ -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,40 @@
background: transparent url(../images/exit.svg) no-repeat;
}
.CodeMirror-foldgutter-open:after {
@include themify() {
background-image: getThemifyVariable('codefold-icon-open');
}
}
.CodeMirror-foldgutter-folded:after {
@include themify() {
background-image: getThemifyVariable('codefold-icon-closed');
}
}
.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%;

5
client/styles/components/_p5-contrast-codemirror-theme.scss
View file

@ -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;
}

5
client/styles/components/_p5-dark-codemirror-theme.scss
View file

@ -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;
}

5
client/styles/components/_p5-light-codemirror-theme.scss
View file

@ -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;
}

30
client/styles/vendors/_codemirror.scss vendored
View file

@ -336,3 +336,33 @@ div.CodeMirror-dragcursors {
/* Help users use markselection to safely style text background */
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; */
font-weight: bold;
font-family: arial;
line-height: .3;
cursor: pointer;
opacity: 0.75;
}
.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";
}