-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
View-Only Sketches and Major Main/Editor Refactoring (#219)
Wow, it's a relief to finally write out this PR! In sum, this is the PR that implements all the necessary work for a View-Only page for each sketch (which works whether or not the user is logged in). It required a lot of code motion and refactoring, and likely has lots of side effects (so I'd prefer some semi-rigorous testing and multiple reviewers). Many thanks to @jamieliu386 and @emmyc for the solid (and gruelling) work they put into this feature! (this supersedes #103) Here's a semi-detailed list of what we did: * moves the logic that combines `Editor`, `Output`, and `SplitPane` out of `Main` to new component `EditorAndOutput`; similarly moves requisite props/state and `CodeDownloader` work. necessary to remove code duplication * creates `ViewOnly` and accompanying `ViewOnlyContainer` for view-only programs. this component manages fetching the program from the pid, handling errors, and passing down the relevant props to `EditorAndOutput` * creates app route of `/p/:pid` for users to visit view-only sketches - directs to `ViewOnly` * adds custom props `this.props.viewOnly`, `this.props.vLanguage` to `Output`, to process props differently depending on program state * makes `Editor` banner behaviour (e.g. Dropdown vs. text, save button) dependent on view-only mode * adjusts `ProfilePanel` behaviour to have Create User and Login buttons when the user isn't logged in; maintains themeing capabilities * adjusts tests for profile panel for new behaviour (TODO: test non-logged in profile panel)
- Loading branch information
Showing
16 changed files
with
496 additions
and
188 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from "react"; | ||
| import SplitPane from "react-split-pane"; | ||
| import OutputContainer from "../Output/OutputContainer.js"; | ||
| import TextEditorContainer from "../TextEditor/containers/TextEditorContainer.js"; | ||
|
|
||
| import { EDITOR_WIDTH_BREAKPOINT, CODE_ONLY, OUTPUT_ONLY, PANEL_SIZE } from "../../constants"; | ||
| import CodeDownloader from "../../util/languages/CodeDownloader"; | ||
|
|
||
| import "codemirror/lib/codemirror.css"; | ||
| import "codemirror/theme/material.css"; | ||
| import "codemirror/theme/duotone-light.css"; | ||
| import "styles/CustomCM.scss"; | ||
| import "styles/Resizer.scss"; | ||
| import "styles/Editor.scss"; | ||
|
|
||
| class EditorAndOutput extends React.Component { | ||
| handleDownload = () => { | ||
| CodeDownloader.download(this.props.sketchName, this.props.language, this.props.code); | ||
| }; | ||
|
|
||
| renderCodeAndOutput = () => ( | ||
| <SplitPane | ||
| resizerStyle={{ | ||
| height: "67px", | ||
| borderLeft: "2px solid #333", | ||
| borderRight: "2px solid #333", | ||
| width: "10px", | ||
| }} | ||
| pane1Style={this.props.pane1Style} | ||
| //functions called when you start and finish a drag | ||
| //removes and re-addsthe transition effect on the first panel when manually resizing | ||
| onDragStarted={() => this.props.changePane1Style({ pane1Style: {} })} | ||
| onDragFinished={() => | ||
| this.props.changePane1Style({ pane1Style: { transition: "width .5s ease" } }) | ||
| } | ||
| split="vertical" //the resizer is a vertical line (horizontal means resizer is a horizontal bar) | ||
| minSize={ | ||
| (this.props.panelOpen ? this.props.screenWidth - PANEL_SIZE : this.props.screenWidth) * 0.33 | ||
| } //minimum size of code is 33% of the remaining screen size | ||
| maxSize={ | ||
| (this.props.panelOpen ? this.props.screenWidth - PANEL_SIZE : this.props.screenWidth) * 0.75 | ||
| } //max size of code is 75% of the remaining screen size | ||
| size={ | ||
| ((this.props.panelOpen ? this.props.screenWidth - PANEL_SIZE : this.props.screenWidth) / | ||
| 5) * | ||
| 3 | ||
| } //the initial size of the text editor section | ||
| allowResize={true} | ||
| > | ||
| {this.renderCode()} | ||
| {this.renderOutput()} | ||
| </SplitPane> | ||
| ); | ||
|
|
||
| renderCode = () => ( | ||
| <TextEditorContainer | ||
| key={this.props.mostRecentProgram} | ||
| viewMode={this.props.viewMode} | ||
| updateViewMode={this.props.updateViewMode} | ||
| screenHeight={this.props.screenHeight} | ||
| screenWidth={this.props.screenWidth} | ||
| theme={this.props.theme} | ||
| viewOnly={this.props.viewOnly} | ||
| program={this.props.programid} | ||
| sketchName={this.props.sketchName} | ||
| language={this.props.language} | ||
| handleDownload={this.handleDownload} | ||
| handleSave={this.props.handleSave} | ||
| saveText={this.props.saveText} | ||
| thumbnail={this.props.thumbnail} | ||
| /> | ||
| ); | ||
|
|
||
| renderOutput = () => ( | ||
| <OutputContainer | ||
| viewMode={this.props.viewMode} | ||
| updateViewMode={this.props.updateViewMode} | ||
| isSmall={this.props.screenWidth <= EDITOR_WIDTH_BREAKPOINT} | ||
| viewOnly={this.props.viewOnly} | ||
| vLanguage={this.props.language} | ||
| code={this.props.code} | ||
| /> | ||
| ); | ||
| render = () => { | ||
| const codeStyle = { | ||
| width: this.props.screenWidth - (this.props.left || 0), | ||
| height: this.props.screenHeight, | ||
| }; | ||
|
|
||
| switch (this.props.viewMode) { | ||
| case CODE_ONLY: | ||
| return <div style={codeStyle}>{this.renderCode()}</div>; | ||
| case OUTPUT_ONLY: | ||
| return <div style={codeStyle}>{this.renderOutput()}</div>; | ||
| default: | ||
| return this.renderCodeAndOutput(); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| export default EditorAndOutput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.