Skip to content

Commit f659f4a

Browse files
nzbinnzbin
committed
refactor(dev-app): rebuild playground
1 parent 80c1681 commit f659f4a

File tree

3 files changed

+102
-123
lines changed

3 files changed

+102
-123
lines changed

‎projects/dev-app/src/app/home/home.component.html‎

Lines changed: 65 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,70 @@
1-
<mat-sidenav-container>
2-
<mat-sidenav-content>
1+
<section>
2+
<aside>
3+
<div class="config-panel">
4+
<h4>Code Editor Config</h4>
5+
<gui-form [config]="config" [model]="options" [form]="form" />
6+
</div>
7+
</aside>
38

4-
<mtx-split direction="vertical">
5-
<mtx-split-pane>
9+
<div>
10+
<h4>
11+
<button mat-button (click)="showOutput=!showOutput">Toggle output</button>
12+
</h4>
13+
<div class="editor-wrap">
14+
<code-editor #editor
15+
[style.height]="'500px'"
16+
[(ngModel)]="code"
17+
(ngModelChange)="log($event)"
18+
[theme]="options.theme"
19+
[setup]="options.setup"
20+
[disabled]="options.disabled"
21+
[readonly]="options.readonly"
22+
[placeholder]="options.placeholder"
23+
[indentWithTab]="options.indentWithTab"
24+
[indentUnit]="options.indentUnit"
25+
[lineWrapping]="options.lineWrapping"
26+
[highlightWhitespace]="options.highlightWhitespace"
27+
[language]="options.language"
28+
[languages]="languages" />
629

7-
<mtx-split>
8-
<mtx-split-pane>
9-
<code-editor #editor
10-
[style.height]="options.height.value+options.height.unit"
11-
[(ngModel)]="code"
12-
(ngModelChange)="log($event)"
13-
[theme]="options.theme"
14-
[setup]="options.setup"
15-
[disabled]="options.disabled"
16-
[readonly]="options.readonly"
17-
[placeholder]="options.placeholder"
18-
[indentWithTab]="options.indentWithTab"
19-
[indentUnit]="options.indentUnit"
20-
[lineWrapping]="options.lineWrapping"
21-
[highlightWhitespace]="options.highlightWhitespace"
22-
[language]="options.language"
23-
[languages]="languages" />
24-
</mtx-split-pane>
30+
@if (showOutput) {
31+
<textarea [style.height]="'500px'" [(ngModel)]="code"></textarea>
32+
}
33+
</div>
2534

26-
<mtx-split-pane>
27-
<textarea [style.height]="options.height.value+options.height.unit"
28-
[(ngModel)]="code"></textarea>
29-
</mtx-split-pane>
30-
</mtx-split>
35+
<h4>Unified diff-editor</h4>
36+
<code-editor #editor
37+
[style.height]="'500px'"
38+
[value]="modifiedCode"
39+
[theme]="options.theme"
40+
[setup]="options.setup"
41+
[readonly]="options.readonly"
42+
[placeholder]="options.placeholder"
43+
[indentWithTab]="options.indentWithTab"
44+
[indentUnit]="options.indentUnit"
45+
[lineWrapping]="options.lineWrapping"
46+
[highlightWhitespace]="options.highlightWhitespace"
47+
[extensions]="unifiedExts" />
48+
</div>
49+
</section>
3150

32-
</mtx-split-pane>
33-
<mtx-split-pane>
51+
<section>
52+
<aside>
53+
<div class="config-panel">
54+
<h4>Diff Editor Config</h4>
55+
<gui-form [config]="config2" [model]="options2" />
56+
</div>
57+
</aside>
3458

35-
<mtx-split>
36-
<mtx-split-pane>
37-
<code-editor #editor
38-
[style.height]="options.height.value+options.height.unit"
39-
[value]="modifiedCode"
40-
[theme]="options.theme"
41-
[setup]="options.setup"
42-
[readonly]="options.readonly"
43-
[placeholder]="options.placeholder"
44-
[indentWithTab]="options.indentWithTab"
45-
[indentUnit]="options.indentUnit"
46-
[lineWrapping]="options.lineWrapping"
47-
[highlightWhitespace]="options.highlightWhitespace"
48-
[extensions]="unifiedExts" />
49-
50-
</mtx-split-pane>
51-
<mtx-split-pane>
52-
<diff-editor #editor
53-
[style.height]="options.height.value+options.height.unit"
54-
[originalValue]="originalCode"
55-
[modifiedValue]="modifiedCode"
56-
[orientation]="options2.orientation"
57-
[revertControls]="options2.revertControls"
58-
[highlightChanges]="options2.highlightChanges"
59-
[gutter]="options2.gutter" />
60-
61-
</mtx-split-pane>
62-
</mtx-split>
63-
64-
</mtx-split-pane>
65-
</mtx-split>
66-
67-
</mat-sidenav-content>
68-
69-
<mat-sidenav mode="side" position="end" opened>
70-
<h4>Code Editor</h4>
71-
<gui-form [config]="config" [model]="options" [form]="form" />
72-
<h4>Diff Editor</h4>
73-
<gui-form [config]="config2" [model]="options2" />
74-
</mat-sidenav>
75-
</mat-sidenav-container>
59+
<div>
60+
<h4>Split diff-editor</h4>
61+
<diff-editor #editor
62+
[style.height]="'100vh'"
63+
[originalValue]="originalCode"
64+
[modifiedValue]="modifiedCode"
65+
[orientation]="options2.orientation"
66+
[revertControls]="options2.revertControls"
67+
[highlightChanges]="options2.highlightChanges"
68+
[gutter]="options2.gutter" />
69+
</div>
70+
</section>

‎projects/dev-app/src/app/home/home.component.scss‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,43 @@
11
:host ::ng-deep {
2-
mat-sidenav-container {
3-
height: calc(100% - 64px);
4-
}
5-
6-
mat-sidenav-content {
7-
padding: 16px;
2+
.gui-form {
3+
.gui-field-label {
4+
width: 100px;
5+
}
86
}
97

10-
mtx-split {
8+
.cm-editor {
119
border: 1px solid var(--mat-divider-color);
1210
}
11+
}
1312

14-
textarea {
15-
width: 100%;
16-
height: 100%;
17-
line-height: 1.38;
18-
background-color: transparent;
19-
}
13+
section {
14+
display: grid;
15+
grid-template-columns: 300px 1fr;
16+
max-width: 1200px;
17+
margin: 16px auto;
18+
}
2019

21-
h4 {
22-
padding: 0 12px;
23-
margin: 16px 0 8px;
24-
}
20+
.config-panel {
21+
position: sticky;
22+
top: 0;
23+
}
2524

26-
.gui-form {
27-
.gui-field-label {
28-
width: 100px;
29-
}
25+
h4 {
26+
padding: 8px 0;
27+
margin: 0;
28+
line-height: 36px;
29+
}
30+
31+
.editor-wrap {
32+
display: flex;
33+
34+
* {
35+
flex: 1;
3036
}
3137
}
38+
39+
textarea {
40+
display: block;
41+
width: 100%;
42+
line-height: 1.38;
43+
}

‎projects/dev-app/src/app/home/home.component.ts‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { AfterViewInit, Component, DestroyRef, OnInit, inject } from '@angular/core';
22
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
33
import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
4-
import { MatSidenavModule } from '@angular/material/sidenav';
5-
import { MtxSplitModule } from '@ng-matero/extensions/split';
4+
import { MatButtonModule } from '@angular/material/button';
65

76
import { CodeEditor, DiffEditor } from '@acrodata/code-editor';
87
import { GuiFields, GuiForm } from '@acrodata/gui';
@@ -12,15 +11,7 @@ import { unifiedMergeView } from '@codemirror/merge';
1211
@Component({
1312
selector: 'app-home',
1413
standalone: true,
15-
imports: [
16-
FormsModule,
17-
ReactiveFormsModule,
18-
MatSidenavModule,
19-
MtxSplitModule,
20-
CodeEditor,
21-
DiffEditor,
22-
GuiForm,
23-
],
14+
imports: [FormsModule, ReactiveFormsModule, CodeEditor, DiffEditor, GuiForm, MatButtonModule],
2415
templateUrl: './home.component.html',
2516
styleUrl: './home.component.scss',
2617
})
@@ -84,26 +75,6 @@ export class HomeComponent implements OnInit, AfterViewInit {
8475
type: 'switch',
8576
name: 'Highlight whitespace',
8677
},
87-
height: {
88-
type: 'inline',
89-
name: 'Height',
90-
children: {
91-
value: {
92-
type: 'number',
93-
name: '',
94-
col: 70,
95-
},
96-
unit: {
97-
type: 'select',
98-
name: '',
99-
options: [
100-
{ label: 'px', value: 'px' },
101-
{ label: '%', value: '%' },
102-
],
103-
col: 30,
104-
},
105-
},
106-
},
10778
};
10879

10980
options: any = {
@@ -117,11 +88,12 @@ export class HomeComponent implements OnInit, AfterViewInit {
11788
indentUnit: '',
11889
lineWrapping: false,
11990
highlightWhitespace: false,
120-
height: { value: 100, unit: '%' },
12191
};
12292

12393
code = '';
12494

95+
showOutput = false;
96+
12597
ngOnInit(): void {
12698
this.getLangSample('javascript');
12799
}

0 commit comments

Comments
 (0)