From 7ae89109dbf93dbe3f138686c383fb47182fadf3 Mon Sep 17 00:00:00 2001 From: Florian PAUL Date: Tue, 12 Nov 2024 18:50:06 +0100 Subject: [PATCH 1/2] feat(training): resizable areas --- apps/showcase/package.json | 1 + .../src/assets/trainings/sdk/program.json | 14 +++---- .../code-editor-control.component.html | 8 +--- .../code-editor-control.component.scss | 6 --- .../code-editor-control.component.ts | 5 --- .../code-editor-view.component.html | 41 ++++++++++++------- .../code-editor-view.component.scss | 7 +--- .../code-editor-view.component.ts | 4 +- .../training-step-pres.component.html | 37 +++++++++-------- .../training-step-pres.component.ts | 3 +- .../training/training.component.html | 5 +-- .../components/training/training.component.ts | 9 ---- package.json | 1 + yarn.lock | 15 +++++++ 14 files changed, 81 insertions(+), 75 deletions(-) diff --git a/apps/showcase/package.json b/apps/showcase/package.json index 9f4262e8bc..7e77b2762f 100644 --- 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/assets/trainings/sdk/program.json b/apps/showcase/src/assets/trainings/sdk/program.json index 0e9dd75a9c..f4aa813840 100644 --- a/apps/showcase/src/assets/trainings/sdk/program.json +++ b/apps/showcase/src/assets/trainings/sdk/program.json @@ -23,7 +23,7 @@ "startingFile": "apps/tutorial-app/src/app/app.component.ts", "urls": { ".": "./shared/monorepo-template.json", - "./libs/sdk/src": "o3r/training-sdk/structure/src.json" + "./libs/sdk/src": "@o3r-training/training-sdk/structure/src.json" }, "mode": "interactive", "commands": ["npm install --legacy-peer-deps --ignore-scripts --force", "npm run ng run sdk:build", "npm run ng run tutorial-app:serve"] @@ -36,7 +36,7 @@ "name": "sdk-specification", "startingFile": "open-api.yaml", "solutionUrls": { - ".": "o3r/training-sdk/structure/spec.json" + ".": "@o3r-training/training-sdk/structure/spec.json" }, "mode": "readonly", "commands": [] @@ -49,8 +49,8 @@ "name": "generate-sdk", "startingFile": "src/api/dummy/dummy-api.ts", "solutionUrls": { - "src": "o3r/training-sdk/structure/src.json", - ".": "o3r/training-sdk/structure/spec.json" + "src": "@o3r-training/training-sdk/structure/src.json", + ".": "@o3r-training/training-sdk/structure/spec.json" }, "mode": "readonly", "commands": [] @@ -63,11 +63,11 @@ "name": "generate-date-sdk", "startingFile": "open-api.yaml", "urls": { - ".": "o3r/training-sdk/structure/spec.json" + ".": "@o3r-training/training-sdk/structure/spec.json" }, "solutionUrls": { - ".": "o3r/training-sdk/structure/spec.json", - "./src": "o3r/training-sdk/structure/src.json" + ".": "@o3r-training/training-sdk/structure/spec.json", + "./src": "@o3r-training/training-sdk/structure/src.json" }, "mode": "readonly", "commands": [] 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 index c7ee90ab00..1e5280b474 100644 --- 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 @@ - -
+
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 index 9fc2ca84a1..cbb01c7072 100644 --- 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 index 6e65584fbb..e2b603938e 100644 --- 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 index 7a22f783ad..3660686837 100644 --- 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) { -
-
- -
- - -
-
-
- @if (editorMode === 'interactive') { - - } + + +
+ + + + + + + + + +
+ + @if (editorMode === 'interactive') { + + + + } + } } @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 index 6f6f79c7a5..fdd982c30f 100644 --- 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 index f91be467e1..f8ce748561 100644 --- 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 index 6d38f98fae..a1a06a1fd6 100644 --- 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 @@ -
- @if (instructions) { -
-

{{title}}

- -
- } - @if (project) { -
- -
- } +
+ + @if (instructions) { + +
+

{{title}}

+ +
+ + } + @if (project) { + +
+ +
+ + } +
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 index 39678d0e36..6d163d88bf 100644 --- 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,6 +3,7 @@ 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'; @@ -10,7 +11,7 @@ import {CodeEditorViewComponent, EditorMode, TrainingProject} from '../code-edit 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 index 585ad4a5b8..4e950f8c64 100644 --- a/apps/showcase/src/components/training/training.component.html +++ b/apps/showcase/src/components/training/training.component.html @@ -3,9 +3,6 @@

{{title()}}

@if (currentStep.dynamicContent.project() || currentStep.dynamicContent.solutionProject()) { -