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 flagspull/44368/head
parent
b14c5eb21b
commit
6af8ee6528
|
@ -9,7 +9,6 @@ import {
|
|||
ResizeProps
|
||||
} from '../../../redux/prop-types';
|
||||
import ActionRow from './action-row';
|
||||
import EditorTabs from './editor-tabs';
|
||||
|
||||
const { showUpcomingChanges } = envData;
|
||||
|
||||
|
@ -82,10 +81,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||
|
||||
const challengeFile = getChallengeFile();
|
||||
const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
|
||||
const isPreviewDisplayable = projectBasedChallenge
|
||||
const displayPreview = projectBasedChallenge
|
||||
? showPreview && hasPreview
|
||||
: hasPreview;
|
||||
const isConsoleDisplayable = projectBasedChallenge ? showConsole : true;
|
||||
const displayConsole = projectBasedChallenge ? showConsole : true;
|
||||
const { codePane, editorPane, instructionPane, previewPane, testsPane } =
|
||||
layoutState;
|
||||
|
||||
|
@ -112,9 +111,6 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||
)}
|
||||
|
||||
<ReflexElement flex={editorPane.flex} {...resizeProps}>
|
||||
{challengeFile && showUpcomingChanges && !hasEditableBoundaries && (
|
||||
<EditorTabs />
|
||||
)}
|
||||
{challengeFile && (
|
||||
<ReflexContainer
|
||||
key={challengeFile.fileKey}
|
||||
|
@ -127,10 +123,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||
>
|
||||
{editor}
|
||||
</ReflexElement>
|
||||
{isConsoleDisplayable && (
|
||||
{displayConsole && (
|
||||
<ReflexSplitter propagate={true} {...resizeProps} />
|
||||
)}
|
||||
{isConsoleDisplayable && (
|
||||
{displayConsole && (
|
||||
<ReflexElement
|
||||
flex={testsPane.flex}
|
||||
{...reflexProps}
|
||||
|
@ -142,10 +138,8 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||
</ReflexContainer>
|
||||
)}
|
||||
</ReflexElement>
|
||||
{isPreviewDisplayable && (
|
||||
<ReflexSplitter propagate={true} {...resizeProps} />
|
||||
)}
|
||||
{isPreviewDisplayable && (
|
||||
{displayPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
|
||||
{displayPreview && (
|
||||
<ReflexElement flex={previewPane.flex} {...resizeProps}>
|
||||
{preview}
|
||||
</ReflexElement>
|
||||
|
|
|
@ -33,6 +33,7 @@ interface MobileLayoutProps {
|
|||
preview: JSX.Element;
|
||||
testOutput: JSX.Element;
|
||||
videoUrl: string;
|
||||
usesMultifileEditor: boolean;
|
||||
}
|
||||
class MobileLayout extends Component<MobileLayoutProps> {
|
||||
static displayName: string;
|
||||
|
@ -49,7 +50,8 @@ class MobileLayout extends Component<MobileLayoutProps> {
|
|||
hasPreview,
|
||||
preview,
|
||||
guideUrl,
|
||||
videoUrl
|
||||
videoUrl,
|
||||
usesMultifileEditor
|
||||
} = this.props;
|
||||
|
||||
const editorTabPaneProps = {
|
||||
|
@ -57,6 +59,10 @@ class MobileLayout extends Component<MobileLayoutProps> {
|
|||
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 (
|
||||
<>
|
||||
<Tabs
|
||||
|
@ -73,7 +79,7 @@ class MobileLayout extends Component<MobileLayoutProps> {
|
|||
title={i18next.t('learn.editor-tabs.code')}
|
||||
{...editorTabPaneProps}
|
||||
>
|
||||
{showUpcomingChanges && <EditorTabs />}
|
||||
{displayEditorTabs && <EditorTabs />}
|
||||
{editor}
|
||||
</TabPane>
|
||||
<TabPane
|
||||
|
|
|
@ -431,6 +431,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
|||
})}
|
||||
preview={this.renderPreview()}
|
||||
testOutput={this.renderTestOutput()}
|
||||
usesMultifileEditor={usesMultifileEditor}
|
||||
videoUrl={this.getVideoUrl()}
|
||||
/>
|
||||
</Media>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "Learn CSS Animation by Building a Ferris Wheel",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-css-animation-by-building-a-ferris-wheel",
|
||||
"order": 15,
|
||||
"time": "5 hours",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "Learn CSS Flexbox by Building a Photo Gallery",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
|
||||
"order": 20,
|
||||
"time": "5 hours",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "Learn CSS Grid by Building a Magazine",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-css-grid-by-building-a-magazine",
|
||||
"order": 16,
|
||||
"time": "5 hours",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "Learn HTML Forms by Building a Registration Form",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-html-forms-by-building-a-registration-form",
|
||||
"order": 23,
|
||||
"time": "5 hours",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "Learn Typography by Building a Nutrition Label",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-typography-by-building-a-nutrition-label",
|
||||
"order": 25,
|
||||
"time": "5 hours",
|
||||
|
|
Loading…
Reference in New Issue