gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(client): move console in multi-file editor (#49228)

Browse Source 
* fix: move the console in the multifile editor to below the preview

* fix: go back to single displayConsole, move project based / multifile
logic into the jsx

* revert: previewPane flex value

* feat: refactor to allow console to open up the preview panel and take up all the vertical space

* fix: simplify editor layout logic
This commit is contained in:
Kristofer Koishigawa
2023-02-02 23:33:54 +09:00
committed by GitHub
parent 2ded2a872b
commit b00defc9c4
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/templates/Challenges/classic/desktop-layout.tsx
+22 -7
View File
@@ -102,8 +102,13 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
const displayPreviewPane = hasPreview && showPreviewPane;
const displayPreviewPortal = hasPreview && showPreviewPortal;
const displayNotes = projectBasedChallenge ? showNotes && hasNotes : false;
const displayConsole =
projectBasedChallenge || isMultifileCertProject ? showConsole : true;
const displayEditorConsole = !(
projectBasedChallenge || isMultifileCertProject
)
? true
: false;
const displayPreviewConsole =
(projectBasedChallenge || isMultifileCertProject) && showConsole;
const {
codePane,
editorPane,
@@ -150,10 +155,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
>
{editor}
</ReflexElement>
{displayConsole && (
{displayEditorConsole && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{displayConsole && (
{displayEditorConsole && (
<ReflexElement
flex={testsPane.flex}
{...reflexProps}
@@ -172,12 +177,22 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
</ReflexElement>
)}
{displayPreviewPane && (
{(displayPreviewPane || displayPreviewConsole) && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{displayPreviewPane && (
{(displayPreviewPane || displayPreviewConsole) && (
<ReflexElement flex={previewPane.flex} {...resizeProps}>
{preview}
<ReflexContainer orientation='horizontal'>
{displayPreviewPane && <ReflexElement>{preview}</ReflexElement>}
{displayPreviewPane && displayPreviewConsole && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{displayPreviewConsole && (
<ReflexElement flex={testsPane.flex} {...resizeProps}>
{testOutput}
</ReflexElement>
)}
</ReflexContainer>
</ReflexElement>
)}
</ReflexContainer>