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

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

@ -80,6 +80,15 @@
width: #{48 / $base-font-size}rem; 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 { .editor__options-button {
@include themify() { @include themify() {

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

@ -27,12 +27,6 @@
min-height: 75vh; min-height: 75vh;
} }
.editor-holder {
height: 100%;
width: 100%;
position: absolute;
}
.editor-accessibility { .editor-accessibility {
@extend %hidden-element; @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-widget {}
.CodeMirror-code { .CodeMirror-code {
margin-bottom: 1em;
outline: none; outline: none;
} }