Skip to content

Commit 4691144

Browse files
nzbinnzbin
committed
refactor(dev-app): improve styles
1 parent 9192fa3 commit 4691144

File tree

4 files changed

+134
-81
lines changed

4 files changed

+134
-81
lines changed

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

Lines changed: 108 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,108 @@
1-
<label>
2-
<select [(ngModel)]="theme">
3-
<option value="light">light</option>
4-
<option value="dark">dark</option>
5-
</select>
6-
</label>
7-
8-
<label>
9-
<select [(ngModel)]="setup">
10-
<option [value]="null">none</option>
11-
<option value="basic">basic</option>
12-
<option value="minimal">minimal</option>
13-
</select>
14-
</label>
15-
16-
<label>
17-
<input type="checkbox" [(ngModel)]="disabled"> disabled
18-
</label>
19-
20-
<label>
21-
<input type="checkbox" [(ngModel)]="readonly"> readonly
22-
</label>
23-
24-
<label>
25-
<input type="text" [(ngModel)]="placeholder" />
26-
</label>
27-
28-
<label>
29-
<input type="checkbox" [(ngModel)]="indentWithTab"> indentWithTab
30-
</label>
31-
32-
<label>
33-
<input type="text" [(ngModel)]="indentUnit" />
34-
</label>
35-
36-
<label>
37-
<input type="checkbox" [(ngModel)]="lineWrapping"> lineWrapping
38-
</label>
39-
40-
<label>
41-
<input type="checkbox" [(ngModel)]="highlightWhitespace"> highlightWhitespace
42-
</label>
43-
44-
<label>
45-
<select [(ngModel)]="language" (ngModelChange)="setLanguage()">
46-
<option value="html">html</option>
47-
<option value="css">css</option>
48-
<option value="js">js</option>
49-
</select>
50-
</label>
51-
52-
<code-editor #editor
53-
autoFocus
54-
[(ngModel)]="code"
55-
[ngModelOptions]="{updateOn:'blur'}"
56-
(ngModelChange)="log($event)"
57-
[theme]="theme"
58-
[setup]="setup"
59-
[disabled]="disabled"
60-
[readonly]="readonly"
61-
[placeholder]="placeholder"
62-
[indentWithTab]="indentWithTab"
63-
[indentUnit]="indentUnit"
64-
[lineWrapping]="lineWrapping"
65-
[highlightWhitespace]="highlightWhitespace"
66-
[extensions]="extensions" />
67-
68-
<pre>{{code}}</pre>
69-
70-
<label>
71-
<button (click)="editorControl.disabled?editorControl.enable():editorControl.disable()">
72-
{{editorControl.disabled?'enable':'disable'}}
73-
</button>
74-
</label>
75-
76-
<code-editor [formControl]="editorControl" />
77-
78-
<pre>{{editorControl.value}}</pre>
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>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
}
10+
}
11+
12+
.grid {
13+
display: grid;
14+
grid-template-columns: 1fr 1fr;
15+
gap: 16px;
16+
}
17+
18+
code-editor {
19+
border: 1px solid #ccc;
20+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ export class AppComponent {
2828
language = 'js';
2929
languages = [];
3030

31-
extensions: Extension[] = [];
31+
extensions: Extension[] = [javascript()];
3232

3333
code = 'console.log("Hello world")';
3434

35-
editorControl = new FormControl({ value: 'hello', disabled: true });
35+
editorControl = new FormControl({ value: this.code, disabled: false });
3636

3737
setLanguage() {
3838
if (this.language === 'html') {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8">
5-
<title>DevApp</title>
6+
<title>Codemirror6 wrapper for Angular</title>
67
<base href="/">
78
<meta name="viewport" content="width=device-width, initial-scale=1">
89
<link rel="icon" type="image/x-icon" href="favicon.ico">
910
</head>
11+
1012
<body>
1113
<app-root></app-root>
1214
</body>
15+
1316
</html>

0 commit comments

Comments
 (0)