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

fixes #241

Browse source
This commit is contained in:
Cassie Tarakajian 2017-01-05 14:40:04 -05:00
parent 7219ca2f66
commit 3ba03d709a
4 changed files with 53 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -191,48 +191,50 @@ class Editor extends React.Component {
role="main"
className={editorSectionClass}
>
<button
aria-label="collapse file navigation"
className="sidebar__contract"
onClick={this.props.collapseSidebar}
>
<InlineSVG src={leftArrowUrl} />
</button>
<button
aria-label="expand file navigation"
className="sidebar__expand"
onClick={this.props.expandSidebar}
>
<InlineSVG src={rightArrowUrl} />
</button>
<div className="editor__file-name">
<span>{this.props.file.name}
{this.props.unsavedChanges ? '*' : null}</span>
<Timer
projectSavedTime={this.props.projectSavedTime}
/>
</div>
<button
className="editor__options-button"
aria-label="editor options"
tabIndex="0"
ref="optionsButton"
onClick={() => {
this.refs.optionsButton.focus();
this.props.showEditorOptions();
}}
onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
>
<InlineSVG src={downArrowUrl} />
</button>
<ul className="editor__options" title="editor options">
<li>
<a onClick={this.tidyCode}>Tidy</a>
</li>
<li>
<a onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</a>
</li>
</ul>
<header className="editor__header">
<button
aria-label="collapse file navigation"
className="sidebar__contract"
onClick={this.props.collapseSidebar}
>
<InlineSVG src={leftArrowUrl} />
</button>
<button
aria-label="expand file navigation"
className="sidebar__expand"
onClick={this.props.expandSidebar}
>
<InlineSVG src={rightArrowUrl} />
</button>
<div className="editor__file-name">
<span>{this.props.file.name}
{this.props.unsavedChanges ? '*' : null}</span>
<Timer
projectSavedTime={this.props.projectSavedTime}
/>
</div>
<button
className="editor__options-button"
aria-label="editor options"
tabIndex="0"
ref="optionsButton"
onClick={() => {
this.refs.optionsButton.focus();
this.props.showEditorOptions();
}}
onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
>
<InlineSVG src={downArrowUrl} />
</button>
<ul className="editor__options" title="editor options">
<li>
<a onClick={this.tidyCode}>Tidy</a>
</li>
<li>
<a onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</a>
</li>
</ul>
</header>
<div ref="container" className="editor-holder" tabIndex="0">
</div>
<EditorAccessibility

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

@ -80,6 +80,15 @@
width: #{48 / $base-font-size}rem;
}
.editor-holder {
height: calc(100% - #{29 / $base-font-size}rem);
width: 100%;
position: absolute;
}
.editor__header {
height: #{29 / $base-font-size}rem;
}
.editor__options-button {
@include themify() {

6
client/styles/layout/_ide.scss
View file

@ -27,12 +27,6 @@
min-height: 75vh;
}
.editor-holder {
height: 100%;
width: 100%;
position: absolute;
}
.editor-accessibility {
@extend %hidden-element;
}

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

@ -270,7 +270,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-widget {}
.CodeMirror-code {
margin-bottom: 1em;
outline: none;
}