Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(devtools): add split to the demo devtools app (#58818)

Browse source 
added split area component to demo component so that we can resize the devtools and demo app.

PR Close #58818
This commit is contained in:
Sheik Althaf 2024-11-22 14:22:26 +05:30 committed by Jessica Janiuk
parent d0cd74ace7
commit 0bf6f7602e
3 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
devtools/src/app/devtools-app/devtools-app.component.html
View file

@ -1,5 +1,10 @@
<iframe #ref src="demo-app/todos/app" id="sample-app" title="todos-app"></iframe>
<br />
<div class="devtools-wrapper">
<ng-devtools></ng-devtools>
</div>
<as-split unit="percent" [direction]="'vertical'" [gutterSize]="9">
<as-split-area size="40">
<iframe #ref src="demo-app/todos/app" id="sample-app" title="todos-app"></iframe>
</as-split-area>
<as-split-area size="60">
<div class="devtools-wrapper">
<ng-devtools></ng-devtools>
</div>
</as-split-area>
</as-split>

8
devtools/src/app/devtools-app/devtools-app.component.scss
View file

@ -1,9 +1,13 @@
iframe {
height: 339px;
height: 100%;
width: 100%;
border: 0;
}
.devtools-wrapper {
height: calc(100vh - 344px);
height: 100%;
}
:host {
display: block;
height: 100vh;
}

4
devtools/src/app/devtools-app/devtools-app.component.ts
View file

@ -10,11 +10,13 @@ import {Component, ElementRef, viewChild} from '@angular/core';
import {IFrameMessageBus} from '../../iframe-message-bus';
import {DevToolsComponent} from 'ng-devtools';
import {SplitAreaDirective} from '../../../projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive';
import {SplitComponent} from '../../../projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component';
@Component({
templateUrl: './devtools-app.component.html',
styleUrls: ['./devtools-app.component.scss'],
imports: [DevToolsComponent],
imports: [DevToolsComponent, SplitAreaDirective, SplitComponent],
})
export class AppDevToolsComponent {
messageBus: IFrameMessageBus | null = null;