Skip to content

Commit 279dc8d

Browse files
nzbinnzbin
committed
refactor(dev-app): improve with material and gui-form
1 parent e13d271 commit 279dc8d

File tree

14 files changed

+1090
-169
lines changed

14 files changed

+1090
-169
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,20 @@
2424
},
2525
"private": true,
2626
"dependencies": {
27+
"@acrodata/gui": "^1.0.0",
2728
"@angular/animations": "^17.3.0",
29+
"@angular/cdk": "^17.3.0",
2830
"@angular/common": "^17.3.0",
2931
"@angular/compiler": "^17.3.0",
3032
"@angular/core": "^17.3.0",
3133
"@angular/forms": "^17.3.0",
34+
"@angular/material": "^17.3.0",
3235
"@angular/platform-browser": "^17.3.0",
3336
"@angular/platform-browser-dynamic": "^17.3.0",
3437
"@angular/router": "^17.3.0",
3538
"@codemirror/language-data": "^6.5.1",
3639
"@codemirror/theme-one-dark": "^6.1.2",
40+
"@ng-matero/extensions": "^17.3.0",
3741
"codemirror": "^6.0.1",
3842
"lodash-es": "^4.17.21",
3943
"rxjs": "~7.8.0",

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

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1 @@
1-
<header>
2-
<h1>Codemirror6 wrapper for Angular</h1>
3-
4-
<a href="https://github.com/acrodata/code-editor" target="_blank">GitHub</a>
5-
</header>
6-
7-
<main>
8-
9-
<fieldset>
10-
<legend>Options</legend>
11-
12-
<span>
13-
<label>theme:</label>
14-
<select [(ngModel)]="theme">
15-
<option value="light">light</option>
16-
<option value="dark">dark</option>
17-
</select>
18-
</span>
19-
20-
<span>
21-
<label>setup:</label>
22-
<select [(ngModel)]="setup">
23-
<option [value]="null">none</option>
24-
<option value="basic">basic</option>
25-
<option value="minimal">minimal</option>
26-
</select>
27-
</span>
28-
29-
<span>
30-
<label>language:</label>
31-
<select [(ngModel)]="language" (ngModelChange)="setLanguage()">
32-
<option value="html">html</option>
33-
<option value="css">css</option>
34-
<option value="js">js</option>
35-
</select>
36-
</span>
37-
38-
<label>
39-
<input type="checkbox" [(ngModel)]="disabled">
40-
<span>disabled</span>
41-
</label>
42-
43-
<label>
44-
<input type="checkbox" [(ngModel)]="readonly">
45-
<span>readonly</span>
46-
</label>
47-
48-
<span>
49-
<label>placeholder:</label>
50-
<input type="text" [(ngModel)]="placeholder" />
51-
</span>
52-
53-
<label>
54-
<input type="checkbox" [(ngModel)]="indentWithTab">
55-
<span>indentWithTab</span>
56-
</label>
57-
58-
<span>
59-
<label>indentUnit:</label>
60-
<input type="text" [(ngModel)]="indentUnit" />
61-
</span>
62-
63-
<label>
64-
<input type="checkbox" [(ngModel)]="lineWrapping">
65-
<span>lineWrapping</span>
66-
</label>
67-
68-
<label>
69-
<input type="checkbox" [(ngModel)]="highlightWhitespace">
70-
<span>highlightWhitespace</span>
71-
</label>
72-
</fieldset>
73-
74-
<div class="grid">
75-
<code-editor #editor [style.height.px]="200"
76-
autoFocus
77-
[(ngModel)]="code"
78-
[ngModelOptions]="{updateOn:'blur'}"
79-
(ngModelChange)="log($event)"
80-
[theme]="theme"
81-
[setup]="setup"
82-
[disabled]="disabled"
83-
[readonly]="readonly"
84-
[placeholder]="placeholder"
85-
[indentWithTab]="indentWithTab"
86-
[indentUnit]="indentUnit"
87-
[lineWrapping]="lineWrapping"
88-
[highlightWhitespace]="highlightWhitespace"
89-
[extensions]="extensions" />
90-
91-
<pre>{{code}}</pre>
92-
</div>
93-
94-
<h2>Reactive Form</h2>
95-
96-
<label>
97-
<button (click)="editorControl.disabled?editorControl.enable():editorControl.disable()">
98-
{{editorControl.disabled?'enable':'disable'}}
99-
</button>
100-
</label>
101-
102-
<div class="grid">
103-
<code-editor [style.height.px]="200" [formControl]="editorControl" />
104-
105-
<pre>{{editorControl.value}}</pre>
106-
</div>
107-
108-
</main>
1+
<router-outlet></router-outlet>

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

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
fieldset {
2-
margin: 16px 0;
3-
border: 1px solid #ccc;
4-
5-
>span,
6-
>label {
7-
display: inline-block;
8-
margin: 0 4px;
9-
}
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
105
}
116

12-
.grid {
13-
display: grid;
14-
grid-template-columns: 1fr 1fr;
15-
gap: 16px;
7+
html,
8+
body {
9+
margin: 0;
10+
height: 100%;
1611
}
1712

18-
code-editor {
19-
border: 1px solid #ccc;
13+
.spacer {
14+
flex: 1;
2015
}

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

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,12 @@
1-
import { CodeEditor, Setup, Theme } from '@acrodata/code-editor';
2-
import { Component } from '@angular/core';
3-
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
1+
import { Component, ViewEncapsulation } from '@angular/core';
42
import { RouterOutlet } from '@angular/router';
53

6-
import { css } from '@codemirror/lang-css';
7-
import { html } from '@codemirror/lang-html';
8-
import { javascript } from '@codemirror/lang-javascript';
9-
import { Extension } from '@codemirror/state';
10-
114
@Component({
125
selector: 'app-root',
136
standalone: true,
14-
imports: [RouterOutlet, CodeEditor, FormsModule, ReactiveFormsModule],
7+
imports: [RouterOutlet],
158
templateUrl: './app.component.html',
169
styleUrl: './app.component.scss',
10+
encapsulation: ViewEncapsulation.None,
1711
})
18-
export class AppComponent {
19-
theme: Theme = 'light';
20-
setup: Setup = 'basic';
21-
disabled = false;
22-
readonly = false;
23-
placeholder = 'Type your code here...';
24-
indentWithTab = false;
25-
indentUnit = '';
26-
lineWrapping = false;
27-
highlightWhitespace = false;
28-
language = 'js';
29-
languages = [];
30-
31-
extensions: Extension[] = [javascript()];
32-
33-
code = 'console.log("Hello world")';
34-
35-
editorControl = new FormControl({ value: this.code, disabled: false });
36-
37-
setLanguage() {
38-
if (this.language === 'html') {
39-
this.extensions = [html()];
40-
} else if (this.language === 'css') {
41-
this.extensions = [css()];
42-
} else if (this.language === 'js') {
43-
this.extensions = [javascript()];
44-
}
45-
}
46-
47-
log(e: any) {
48-
console.log(e);
49-
}
50-
}
12+
export class AppComponent {}

‎projects/dev-app/src/app/app.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ApplicationConfig } from '@angular/core';
2+
import { provideAnimations } from '@angular/platform-browser/animations';
23
import { provideRouter } from '@angular/router';
34

45
import { routes } from './app.routes';
56

67
export const appConfig: ApplicationConfig = {
7-
providers: [provideRouter(routes)],
8+
providers: [provideRouter(routes), provideAnimations()],
89
};

‎projects/dev-app/src/app/app.routes.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
11
import { Routes } from '@angular/router';
2+
import { LayoutComponent } from './layout/layout.component';
3+
import { HomeComponent } from './home/home.component';
24

3-
export const routes: Routes = [];
5+
export const routes: Routes = [
6+
{
7+
path: '',
8+
component: LayoutComponent,
9+
children: [
10+
{ path: '', pathMatch: 'full', redirectTo: 'home' },
11+
{ path: 'home', component: HomeComponent },
12+
],
13+
},
14+
];

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<mat-sidenav-container>
2+
<mat-sidenav-content>
3+
4+
<mtx-split [style.height]="options.height.value+options.height.unit">
5+
<mtx-split-pane>
6+
<code-editor #editor
7+
[style.height]="options.height.value+options.height.unit"
8+
[(ngModel)]="code"
9+
(ngModelChange)="log($event)"
10+
[theme]="options.theme"
11+
[setup]="options.setup"
12+
[disabled]="options.disabled"
13+
[readonly]="options.readonly"
14+
[placeholder]="options.placeholder"
15+
[indentWithTab]="options.indentWithTab"
16+
[indentUnit]="options.indentUnit"
17+
[lineWrapping]="options.lineWrapping"
18+
[highlightWhitespace]="options.highlightWhitespace"
19+
[language]="options.language"
20+
[languages]="languages" />
21+
</mtx-split-pane>
22+
23+
<mtx-split-pane>
24+
<pre>{{code}}</pre>
25+
</mtx-split-pane>
26+
</mtx-split>
27+
28+
</mat-sidenav-content>
29+
30+
<mat-sidenav mode="side" position="end" opened>
31+
<gui-form [style.width.px]="300" [config]="config" [model]="options" />
32+
</mat-sidenav>
33+
</mat-sidenav-container>

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:host ::ng-deep {
2+
mat-sidenav-container {
3+
height: calc(100% - 64px);
4+
}
5+
6+
mat-sidenav-content {
7+
padding: 16px;
8+
}
9+
10+
mtx-split {
11+
border: 1px solid var(--mat-divider-color);
12+
}
13+
14+
pre {
15+
padding: 4px;
16+
margin: 0;
17+
line-height: 1.4;
18+
}
19+
20+
.gui-form {
21+
padding: 12px 0;
22+
23+
.gui-field-label {
24+
width: 100px;
25+
}
26+
}
27+
}

0 commit comments

Comments
 (0)