feat(training): resizable areas

fpaul-1A · Nov 13, 2024 · 3e1545b · 3e1545b
1 parent eab385a
commit 3e1545b
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 68 deletions.
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
@@ -73,6 +73,7 @@
     "@xterm/xterm": "^5.0.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "bootstrap": "5.3.3",
     "clipboard": "^2.0.11",
     "intl-messageformat": "~10.7.0",

diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
@@ -27,12 +27,6 @@
         </code-editor-terminal>
       </ng-template>
     </li>
-  <button type="button" class="btn btn-outline-secondary df-btn-icononly align-self-center ms-auto"
-          [class.fa-chevron-down]="!show"
-          [class.fa-chevron-up]="show"
-          (click)="show = !show">
-    <span class="visually-hidden">{{show ? 'Hide' : 'Show'}}</span>
-  </button>
 </ul>
-<div class="h-100 command-panel" [class.d-none]="!show" [ngbNavOutlet]="nav"></div>
+<div class="h-100 command-panel" [ngbNavOutlet]="nav"></div>
 
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
@@ -1,10 +1,4 @@
 code-editor-control {
-  transition: min-height 100ms ease;
-
-  &:has(.command-panel.d-none) {
-    min-height: 3rem;
-  }
-
   .tab-content {
     --df-tabs-content-tab-pane-padding: 0;
     overflow: hidden;

diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
@@ -48,11 +48,6 @@ export class CodeEditorControlComponent implements OnDestroy, AfterViewInit {
    */
   public readonly webContainerService = inject(WebContainerService);
 
-  /**
-   * Whether to show the panels - if set to false, hide all the panels and only display the tab bar
-   */
-  public show = true;
-
   /**
    * Current tab displayed
    */

diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
@@ -1,19 +1,32 @@
 @if (cwdTree$ | async; as tree) {
   @if (tree.length) {
-    <form [formGroup]="form" class="editor d-flex flex-fill overflow-hidden">
-      <div class="d-flex h-100 w-100 align-items-stretch">
-        <monaco-tree class="overflow-auto w-25" (clickFile)="onClickFile($event)" [tree]="tree" [currentFile]="project?.startingFile" width="fit-content" height="100%"></monaco-tree>
-        <div class="flex-fill h-100 overflow-hidden monaco-editor-wrapper">
-          <ngx-monaco-editor class="h-100 position-relative"
-            [options]="editorOptions$ | async"
-            formControlName="code">
-          </ngx-monaco-editor>
-        </div>
-      </div>
-    </form>
-    @if (editorMode === 'interactive') {
-      <code-editor-control class="d-flex flex-column" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
-    }
+    <as-split direction="vertical">
+      <as-split-area [size]="50">
+        <form [formGroup]="form" class="editor overflow-hidden h-100">
+            <as-split direction="horizontal">
+              <as-split-area [size]="25">
+                <monaco-tree (clickFile)="onClickFile($event)"
+                             [tree]="tree"
+                             [currentFile]="project?.startingFile"
+                             [width]="'auto'"
+                             [height]="'auto'"
+                             class="w-100"></monaco-tree>
+              </as-split-area>
+              <as-split-area [size]="75">
+                <ngx-monaco-editor class="h-100 position-relative"
+                                   [options]="editorOptions$ | async"
+                                   formControlName="code">
+                </ngx-monaco-editor>
+              </as-split-area>
+            </as-split>
+        </form>
+      </as-split-area>
+      @if (editorMode === 'interactive') {
+        <as-split-area [size]="50">
+          <code-editor-control class="d-flex flex-column h-100" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
+        </as-split-area>
+      }
+    </as-split>
   }
 }
 @if (!(cwdTree$ | async)?.length) {

diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
@@ -1,11 +1,12 @@
 monaco-tree {
-  max-width: 250px;
   background: #1d1d1d;
 
   .monaco-tree {
     display: flex;
     flex-direction: column;
     overflow: unset !important;
+    max-width: 100%;
+    min-height: 100%;
   }
 
   monaco-tree-icons {
@@ -23,7 +24,3 @@ ngx-monaco-editor {
     max-height: 100% !important;
   }
 }
-
-code-editor-control {
-  min-height: 50%;
-}
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {FileSystemTree} from '@webcontainer/api';
+import {AngularSplitModule} from 'angular-split';
 import {MonacoEditorModule} from 'ngx-monaco-editor-v2';
 import {MonacoTreeElement, NgxMonacoTreeComponent} from 'ngx-monaco-tree';
 import {
@@ -65,7 +66,8 @@ export interface TrainingProject {
     JsonPipe,
     MonacoEditorModule,
     NgxMonacoTreeComponent,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AngularSplitModule
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.html b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
@@ -1,17 +1,22 @@
-<div class="d-flex h-100 gap-5">
-  @if (instructions) {
-    <div class="instructions h-100 col overflow-auto">
-      <h2>{{title}}</h2>
-      <markdown clipboard [data]="instructions"></markdown>
-    </div>
-  }
-  @if (project) {
-    <div class="d-flex h-100 overflow-hidden col">
-      <code-editor-view
-        class="d-flex flex-column justify-content-stretch w-100 flex-fill"
-        [project]="project"
-        [editorMode]="editorMode"
-      ></code-editor-view>
-    </div>
-  }
+<div class="h-100">
+  <as-split direction="horizontal">
+    @if (instructions) {
+      <as-split-area [size]="50">
+        <div class="instructions h-100 overflow-auto">
+          <h2>{{title}}</h2>
+          <markdown clipboard [data]="instructions"></markdown>
+        </div>
+      </as-split-area>
+    }
+    @if (project) {
+      <as-split-area [size]="50">
+        <div class="h-100 overflow-hidden">
+          <code-editor-view
+            [project]="project"
+            [editorMode]="editorMode"
+          ></code-editor-view>
+        </div>
+      </as-split-area>
+    }
+  </as-split>
 </div>
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
@@ -3,14 +3,15 @@ import {
   Component,
   Input
 } from '@angular/core';
+import {AngularSplitModule} from 'angular-split';
 import {MarkdownModule, provideMarkdown} from 'ngx-markdown';
 import {CodeEditorViewComponent, EditorMode, TrainingProject} from '../code-editor-view';
 
 @Component({
   selector: 'o3r-training-step-pres',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CodeEditorViewComponent, MarkdownModule],
+  imports: [AngularSplitModule, CodeEditorViewComponent, MarkdownModule],
   providers: [provideMarkdown()],
   templateUrl: './training-step-pres.component.html',
   styleUrl: './training-step-pres.component.scss'

diff --git a/apps/showcase/src/components/training/training.component.html b/apps/showcase/src/components/training/training.component.html
@@ -3,9 +3,6 @@
     <h1 class="m-0 flex-grow-1">{{title()}}</h1>
     <div class="d-flex gap-3">
       @if (currentStep.dynamicContent.project() || currentStep.dynamicContent.solutionProject()) {
-        <button type="button" class="btn btn-outline-primary" (click)="toggleDisplayInstructions()">
-          {{showInstructions() ? 'Hide instructions' : 'Show instructions'}}
-        </button>
         <button type="button" class="btn btn-outline-danger"
                 (click)="toggleDisplaySolution()"
                 [disabled]="!showSolution() && !currentStep.dynamicContent.solutionProject() || showSolution() && !currentStep.dynamicContent.project()"
@@ -36,7 +33,7 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
   <o3r-training-step-pres
     class="flex-fill overflow-hidden mb-5"
     [class.constrained]="!!(currentStep.dynamicContent.solutionProject() || currentStep.dynamicContent.project())"
-    [instructions]="showInstructions() ? currentStep.dynamicContent.htmlContent() : ''"
+    [instructions]="currentStep.dynamicContent.htmlContent()"
     [title]="currentStep.description.title"
     [project]="showSolution() ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
     [editorMode]="currentStep.description.filesConfiguration?.mode">

diff --git a/apps/showcase/src/components/training/training.component.ts b/apps/showcase/src/components/training/training.component.ts
@@ -95,8 +95,6 @@ const currentStepLocationRegExp = new RegExp(/#([0-9]+)$/);
 export class TrainingComponent implements OnInit {
   /** Index of the training step to display */
   public currentStepIndex = signal(0);
-  /** Display instructions */
-  public showInstructions = signal(true);
   /** Display exercise solution */
   public showSolution = signal(false);
   /** Training steps */
@@ -251,13 +249,6 @@ export class TrainingComponent implements OnInit {
     this.showSolution.set(false);
   }
 
-  /**
-   * Update the display of instructions and the corresponding button label
-   */
-  public toggleDisplayInstructions() {
-    this.showInstructions.set(!this.showInstructions());
-  }
-
   /**
    * Update the display of the exercise solution and the corresponding button label
    */

diff --git a/package.json b/package.json
@@ -221,6 +221,7 @@
     "@yarnpkg/sdks": "^3.2.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "babel-loader": "^9.0.0",
     "bootstrap": "5.3.3",
     "bootstrap-icons": "^1.11.3",

diff --git a/yarn.lock b/yarn.lock
@@ -8985,6 +8985,7 @@ __metadata:
     "@yarnpkg/sdks": "npm:^3.2.0"
     ag-grid-angular: "npm:~32.3.0"
     ag-grid-community: "npm:~32.3.0"
+    angular-split: "npm:^18.0.0"
     babel-loader: "npm:^9.0.0"
     bootstrap: "npm:5.3.3"
     bootstrap-icons: "npm:^1.11.3"
@@ -9922,6 +9923,7 @@ __metadata:
     "@xterm/xterm": "npm:^5.0.0"
     ag-grid-angular: "npm:~32.3.0"
     ag-grid-community: "npm:~32.3.0"
+    angular-split: "npm:^18.0.0"
     bootstrap: "npm:5.3.3"
     clipboard: "npm:^2.0.11"
     concurrently: "npm:^8.0.0"
@@ -15968,6 +15970,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"angular-split@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "angular-split@npm:18.0.0"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@angular/common": ">=18.0.0"
+    "@angular/core": ">=18.0.0"
+    rxjs: ">=7.0.0"
+  checksum: 10/acafe910ff0ecf416dbeaf02f7b7c0668320a86683905fe631d3031351a0950723c3336b150a64ca3ee7404ecf76244db5a9d4db7f1c0e58bdf0fca6cf46ac84
+  languageName: node
+  linkType: hard
+
 "ansi-colors@npm:4.1.3, ansi-colors@npm:^4.1.1, ansi-colors@npm:^4.1.3":
   version: 4.1.3
   resolution: "ansi-colors@npm:4.1.3"