gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

revert(client): place tool panel at the bottom

Browse Source 
This reverts commit e6d2a9df93.
This commit is contained in:
Mrugesh Mohapatra
2019-02-17 14:47:10 +05:30
committed by Stuart Taylor
parent 71cf4495cb
commit fbc4db1e9b
5 changed files with 52 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
client/src/templates/Challenges/classic/DesktopLayout.js
View File

@ -1,4 +1,4 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'; import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -14,8 +14,7 @@ const propTypes = {
onStopResize: PropTypes.func, onStopResize: PropTypes.func,
onResize: PropTypes.func onResize: PropTypes.func
}), }),
testOutput: PropTypes.element, testOutput: PropTypes.element
toolPanel: PropTypes.element
}; };
class DesktopLayout extends Component { class DesktopLayout extends Component {
@ -27,50 +26,46 @@ class DesktopLayout extends Component {
editor, editor,
testOutput, testOutput,
hasPreview, hasPreview,
preview, preview
toolPanel
} = this.props; } = this.props;
return ( return (
<Fragment> <ReflexContainer className='desktop-layout' orientation='vertical'>
<ReflexContainer className='desktop-layout' orientation='vertical'> <ReflexElement flex={1} {...resizeProps}>
<ReflexElement flex={1} {...resizeProps}> {instructions}
{instructions} </ReflexElement>
</ReflexElement> <ReflexSplitter propagate={true} {...resizeProps} />
<ReflexSplitter propagate={true} {...resizeProps} /> <ReflexElement flex={1} {...resizeProps}>
<ReflexElement flex={1} {...resizeProps}> {challengeFile && (
{challengeFile && ( <ReflexContainer key={challengeFile.key} orientation='horizontal'>
<ReflexContainer key={challengeFile.key} orientation='horizontal'> <ReflexElement
<ReflexElement flex={1}
flex={1} propagateDimensions={true}
propagateDimensions={true} renderOnResize={true}
renderOnResize={true} renderOnResizeRate={20}
renderOnResizeRate={20} {...resizeProps}
{...resizeProps} >
> {editor}
{editor} </ReflexElement>
</ReflexElement> <ReflexSplitter propagate={true} {...resizeProps} />
<ReflexSplitter propagate={true} {...resizeProps} /> <ReflexElement
<ReflexElement flex={0.25}
flex={0.25} propagateDimensions={true}
propagateDimensions={true} renderOnResize={true}
renderOnResize={true} renderOnResizeRate={20}
renderOnResizeRate={20} {...resizeProps}
{...resizeProps} >
> {testOutput}
{testOutput} </ReflexElement>
</ReflexElement> </ReflexContainer>
</ReflexContainer>
)}
</ReflexElement>
{hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
{hasPreview && (
<ReflexElement flex={0.7} {...resizeProps}>
{preview}
</ReflexElement>
)} )}
</ReflexContainer> </ReflexElement>
{toolPanel} {hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
</Fragment> {hasPreview && (
<ReflexElement flex={0.7} {...resizeProps}>
{preview}
</ReflexElement>
)}
</ReflexContainer>
); );
} }
} }

9
client/src/templates/Challenges/classic/MobileLayout.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { TabPane, Tabs } from '@freecodecamp/react-bootstrap'; import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ToolPanel from '../components/Tool-Panel';
import { createStructuredSelector } from 'reselect'; import { createStructuredSelector } from 'reselect';
import { currentTabSelector, moveToTab } from '../redux'; import { currentTabSelector, moveToTab } from '../redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
@ -22,12 +23,13 @@ const mapDispatchToProps = dispatch =>
const propTypes = { const propTypes = {
currentTab: PropTypes.number, currentTab: PropTypes.number,
editor: PropTypes.element, editor: PropTypes.element,
guideUrl: PropTypes.string,
hasPreview: PropTypes.bool, hasPreview: PropTypes.bool,
instructions: PropTypes.element, instructions: PropTypes.element,
moveToTab: PropTypes.func, moveToTab: PropTypes.func,
preview: PropTypes.element, preview: PropTypes.element,
testOutput: PropTypes.element, testOutput: PropTypes.element,
toolPanel: PropTypes.element videoUrl: PropTypes.string
}; };
class MobileLayout extends Component { class MobileLayout extends Component {
@ -40,7 +42,8 @@ class MobileLayout extends Component {
testOutput, testOutput,
hasPreview, hasPreview,
preview, preview,
toolPanel guideUrl,
videoUrl
} = this.props; } = this.props;
const editorTabPaneProps = { const editorTabPaneProps = {
@ -71,7 +74,7 @@ class MobileLayout extends Component {
</TabPane> </TabPane>
)} )}
</Tabs> </Tabs>
{toolPanel} <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
</Fragment> </Fragment>
); );
} }

18
client/src/templates/Challenges/classic/Show.js
View File

@ -19,7 +19,6 @@ import VideoModal from '../components/VideoModal';
import ResetModal from '../components/ResetModal'; import ResetModal from '../components/ResetModal';
import MobileLayout from './MobileLayout'; import MobileLayout from './MobileLayout';
import DesktopLayout from './DesktopLayout'; import DesktopLayout from './DesktopLayout';
import ToolPanel from '../components/Tool-Panel';
import { createGuideUrl } from '../utils'; import { createGuideUrl } from '../utils';
import { challengeTypes } from '../../../../utils/challengeTypes'; import { challengeTypes } from '../../../../utils/challengeTypes';
@ -244,17 +243,6 @@ class ShowClassic extends Component {
); );
} }
renderToolPanel(isMobile) {
return (
<ToolPanel
className='classic-tool-panel'
guideUrl={this.getGuideUrl()}
isMobile={isMobile}
videoUrl={this.getVideoUrl()}
/>
);
}
render() { render() {
return ( return (
<LearnLayout> <LearnLayout>
@ -266,13 +254,14 @@ class ShowClassic extends Component {
matches ? ( matches ? (
<MobileLayout <MobileLayout
editor={this.renderEditor()} editor={this.renderEditor()}
guideUrl={this.getGuideUrl()}
hasPreview={this.hasPreview()} hasPreview={this.hasPreview()}
instructions={this.renderInstructionsPanel({ instructions={this.renderInstructionsPanel({
showToolPanel: false showToolPanel: false
})} })}
preview={this.renderPreview()} preview={this.renderPreview()}
testOutput={this.renderTestOutput()} testOutput={this.renderTestOutput()}
toolPanel={this.renderToolPanel(true)} videoUrl={this.getVideoUrl()}
/> />
) : ( ) : (
<DesktopLayout <DesktopLayout
@ -280,12 +269,11 @@ class ShowClassic extends Component {
editor={this.renderEditor()} editor={this.renderEditor()}
hasPreview={this.hasPreview()} hasPreview={this.hasPreview()}
instructions={this.renderInstructionsPanel({ instructions={this.renderInstructionsPanel({
showToolPanel: false showToolPanel: true
})} })}
preview={this.renderPreview()} preview={this.renderPreview()}
resizeProps={this.resizeProps} resizeProps={this.resizeProps}
testOutput={this.renderTestOutput()} testOutput={this.renderTestOutput()}
toolPanel={this.renderToolPanel(false)}
/> />
) )
} }

12
client/src/templates/Challenges/classic/classic.css
View File

@ -3,7 +3,7 @@
} }
.desktop-layout { .desktop-layout {
height: calc(100vh - var(--header-height) - 42px); height: calc(100vh - var(--header-height));
} }
.monaco-menu .action-label { .monaco-menu .action-label {
@ -34,13 +34,3 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.classic-tool-panel.tool-panel-group {
display: flex;
flex-direction: row-reverse;
padding: 0 2px;
}
.classic-tool-panel.tool-panel-group .btn-block + .btn-block {
margin: 0 2px 0 0;
}

13
client/src/templates/Challenges/components/Tool-Panel.js
View File

@ -21,7 +21,6 @@ const mapDispatchToProps = dispatch =>
); );
const propTypes = { const propTypes = {
className: PropTypes.string,
executeChallenge: PropTypes.func.isRequired, executeChallenge: PropTypes.func.isRequired,
guideUrl: PropTypes.string, guideUrl: PropTypes.string,
isMobile: PropTypes.bool, isMobile: PropTypes.bool,
@ -32,7 +31,6 @@ const propTypes = {
}; };
function ToolPanel({ function ToolPanel({
className,
executeChallenge, executeChallenge,
isMobile, isMobile,
openHelpModal, openHelpModal,
@ -43,11 +41,9 @@ function ToolPanel({
}) { }) {
return ( return (
<Fragment> <Fragment>
<div <div className={`tool-panel-group ${
className={`tool-panel-group ${
isMobile ? 'tool-panel-group-mobile' : '' isMobile ? 'tool-panel-group-mobile' : ''
} ${className}`} }`}>
>
<Button block={true} bsStyle='primary' onClick={executeChallenge}> <Button block={true} bsStyle='primary' onClick={executeChallenge}>
{isMobile ? 'Run' : 'Run the Tests'} {isMobile ? 'Run' : 'Run the Tests'}
</Button> </Button>
@ -96,10 +92,7 @@ function ToolPanel({
ToolPanel.displayName = 'ToolPanel'; ToolPanel.displayName = 'ToolPanel';
ToolPanel.propTypes = propTypes; ToolPanel.propTypes = propTypes;
export default connect( export default connect(mapStateToProps, mapDispatchToProps)(ToolPanel);
mapStateToProps,
mapDispatchToProps
)(ToolPanel);
/* /*
<Button <Button