fix: hide file tabs on legacy challenges (#44291)
* fix: hide tabs for legacy challenges (desktop) * fix: hide tabs for legacy challenges (mobile) * fix: remove editor tabs (desktop) * refactor: update comment * fix: add missing usesMultifileEditor flags
This commit is contained in:
committed by
GitHub
parent
b14c5eb21b
commit
6af8ee6528
@ -9,7 +9,6 @@ import {
|
|||||||
ResizeProps
|
ResizeProps
|
||||||
} from '../../../redux/prop-types';
|
} from '../../../redux/prop-types';
|
||||||
import ActionRow from './action-row';
|
import ActionRow from './action-row';
|
||||||
import EditorTabs from './editor-tabs';
|
|
||||||
|
|
||||||
const { showUpcomingChanges } = envData;
|
const { showUpcomingChanges } = envData;
|
||||||
|
|
||||||
@ -82,10 +81,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||||||
|
|
||||||
const challengeFile = getChallengeFile();
|
const challengeFile = getChallengeFile();
|
||||||
const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
|
const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
|
||||||
const isPreviewDisplayable = projectBasedChallenge
|
const displayPreview = projectBasedChallenge
|
||||||
? showPreview && hasPreview
|
? showPreview && hasPreview
|
||||||
: hasPreview;
|
: hasPreview;
|
||||||
const isConsoleDisplayable = projectBasedChallenge ? showConsole : true;
|
const displayConsole = projectBasedChallenge ? showConsole : true;
|
||||||
const { codePane, editorPane, instructionPane, previewPane, testsPane } =
|
const { codePane, editorPane, instructionPane, previewPane, testsPane } =
|
||||||
layoutState;
|
layoutState;
|
||||||
|
|
||||||
@ -112,9 +111,6 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<ReflexElement flex={editorPane.flex} {...resizeProps}>
|
<ReflexElement flex={editorPane.flex} {...resizeProps}>
|
||||||
{challengeFile && showUpcomingChanges && !hasEditableBoundaries && (
|
|
||||||
<EditorTabs />
|
|
||||||
)}
|
|
||||||
{challengeFile && (
|
{challengeFile && (
|
||||||
<ReflexContainer
|
<ReflexContainer
|
||||||
key={challengeFile.fileKey}
|
key={challengeFile.fileKey}
|
||||||
@ -127,10 +123,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||||||
>
|
>
|
||||||
{editor}
|
{editor}
|
||||||
</ReflexElement>
|
</ReflexElement>
|
||||||
{isConsoleDisplayable && (
|
{displayConsole && (
|
||||||
<ReflexSplitter propagate={true} {...resizeProps} />
|
<ReflexSplitter propagate={true} {...resizeProps} />
|
||||||
)}
|
)}
|
||||||
{isConsoleDisplayable && (
|
{displayConsole && (
|
||||||
<ReflexElement
|
<ReflexElement
|
||||||
flex={testsPane.flex}
|
flex={testsPane.flex}
|
||||||
{...reflexProps}
|
{...reflexProps}
|
||||||
@ -142,10 +138,8 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||||||
</ReflexContainer>
|
</ReflexContainer>
|
||||||
)}
|
)}
|
||||||
</ReflexElement>
|
</ReflexElement>
|
||||||
{isPreviewDisplayable && (
|
{displayPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
|
||||||
<ReflexSplitter propagate={true} {...resizeProps} />
|
{displayPreview && (
|
||||||
)}
|
|
||||||
{isPreviewDisplayable && (
|
|
||||||
<ReflexElement flex={previewPane.flex} {...resizeProps}>
|
<ReflexElement flex={previewPane.flex} {...resizeProps}>
|
||||||
{preview}
|
{preview}
|
||||||
</ReflexElement>
|
</ReflexElement>
|
||||||
|
@ -33,6 +33,7 @@ interface MobileLayoutProps {
|
|||||||
preview: JSX.Element;
|
preview: JSX.Element;
|
||||||
testOutput: JSX.Element;
|
testOutput: JSX.Element;
|
||||||
videoUrl: string;
|
videoUrl: string;
|
||||||
|
usesMultifileEditor: boolean;
|
||||||
}
|
}
|
||||||
class MobileLayout extends Component<MobileLayoutProps> {
|
class MobileLayout extends Component<MobileLayoutProps> {
|
||||||
static displayName: string;
|
static displayName: string;
|
||||||
@ -49,7 +50,8 @@ class MobileLayout extends Component<MobileLayoutProps> {
|
|||||||
hasPreview,
|
hasPreview,
|
||||||
preview,
|
preview,
|
||||||
guideUrl,
|
guideUrl,
|
||||||
videoUrl
|
videoUrl,
|
||||||
|
usesMultifileEditor
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const editorTabPaneProps = {
|
const editorTabPaneProps = {
|
||||||
@ -57,6 +59,10 @@ class MobileLayout extends Component<MobileLayoutProps> {
|
|||||||
unmountOnExit: true
|
unmountOnExit: true
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Unlike the desktop layout the mobile version does not have an ActionRow,
|
||||||
|
// but still needs a way to switch between the different tabs.
|
||||||
|
const displayEditorTabs = showUpcomingChanges && usesMultifileEditor;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Tabs
|
<Tabs
|
||||||
@ -73,7 +79,7 @@ class MobileLayout extends Component<MobileLayoutProps> {
|
|||||||
title={i18next.t('learn.editor-tabs.code')}
|
title={i18next.t('learn.editor-tabs.code')}
|
||||||
{...editorTabPaneProps}
|
{...editorTabPaneProps}
|
||||||
>
|
>
|
||||||
{showUpcomingChanges && <EditorTabs />}
|
{displayEditorTabs && <EditorTabs />}
|
||||||
{editor}
|
{editor}
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane
|
<TabPane
|
||||||
|
@ -431,6 +431,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
|||||||
})}
|
})}
|
||||||
preview={this.renderPreview()}
|
preview={this.renderPreview()}
|
||||||
testOutput={this.renderTestOutput()}
|
testOutput={this.renderTestOutput()}
|
||||||
|
usesMultifileEditor={usesMultifileEditor}
|
||||||
videoUrl={this.getVideoUrl()}
|
videoUrl={this.getVideoUrl()}
|
||||||
/>
|
/>
|
||||||
</Media>
|
</Media>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Learn CSS Animation by Building a Ferris Wheel",
|
"name": "Learn CSS Animation by Building a Ferris Wheel",
|
||||||
"isUpcomingChange": true,
|
"isUpcomingChange": true,
|
||||||
|
"usesMultifileEditor": true,
|
||||||
"dashedName": "learn-css-animation-by-building-a-ferris-wheel",
|
"dashedName": "learn-css-animation-by-building-a-ferris-wheel",
|
||||||
"order": 15,
|
"order": 15,
|
||||||
"time": "5 hours",
|
"time": "5 hours",
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Learn CSS Flexbox by Building a Photo Gallery",
|
"name": "Learn CSS Flexbox by Building a Photo Gallery",
|
||||||
"isUpcomingChange": true,
|
"isUpcomingChange": true,
|
||||||
|
"usesMultifileEditor": true,
|
||||||
"dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
|
"dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
|
||||||
"order": 20,
|
"order": 20,
|
||||||
"time": "5 hours",
|
"time": "5 hours",
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Learn CSS Grid by Building a Magazine",
|
"name": "Learn CSS Grid by Building a Magazine",
|
||||||
"isUpcomingChange": true,
|
"isUpcomingChange": true,
|
||||||
|
"usesMultifileEditor": true,
|
||||||
"dashedName": "learn-css-grid-by-building-a-magazine",
|
"dashedName": "learn-css-grid-by-building-a-magazine",
|
||||||
"order": 16,
|
"order": 16,
|
||||||
"time": "5 hours",
|
"time": "5 hours",
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Learn HTML Forms by Building a Registration Form",
|
"name": "Learn HTML Forms by Building a Registration Form",
|
||||||
"isUpcomingChange": true,
|
"isUpcomingChange": true,
|
||||||
|
"usesMultifileEditor": true,
|
||||||
"dashedName": "learn-html-forms-by-building-a-registration-form",
|
"dashedName": "learn-html-forms-by-building-a-registration-form",
|
||||||
"order": 23,
|
"order": 23,
|
||||||
"time": "5 hours",
|
"time": "5 hours",
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "Learn Typography by Building a Nutrition Label",
|
"name": "Learn Typography by Building a Nutrition Label",
|
||||||
"isUpcomingChange": true,
|
"isUpcomingChange": true,
|
||||||
|
"usesMultifileEditor": true,
|
||||||
"dashedName": "learn-typography-by-building-a-nutrition-label",
|
"dashedName": "learn-typography-by-building-a-nutrition-label",
|
||||||
"order": 25,
|
"order": 25,
|
||||||
"time": "5 hours",
|
"time": "5 hours",
|
||||||
|
Reference in New Issue
Block a user