diff --git a/projects/dev-app/src/app/app.routes.ts b/projects/dev-app/src/app/app.routes.ts
index db040c1..0e7a045 100644
--- a/projects/dev-app/src/app/app.routes.ts
+++ b/projects/dev-app/src/app/app.routes.ts
@@ -1,11 +1,18 @@
import { Routes } from '@angular/router';
+import { LayoutComponent } from './layout/layout.component';
import { ExamplesComponent } from './examples/examples.component';
import { HomeComponent } from './home/home.component';
import { PlaygroundComponent } from './playground/playground.component';
export const routes: Routes = [
- { path: '', pathMatch: 'full', redirectTo: 'home' },
- { path: 'home', component: HomeComponent },
- { path: 'examples', component: ExamplesComponent },
- { path: 'playground', component: PlaygroundComponent },
+ {
+ path: '',
+ component: LayoutComponent,
+ children: [
+ { path: '', pathMatch: 'full', redirectTo: 'home' },
+ { path: 'home', component: HomeComponent },
+ { path: 'examples', component: ExamplesComponent },
+ { path: 'playground', component: PlaygroundComponent },
+ ],
+ },
];
diff --git a/projects/dev-app/src/app/examples/examples.component.html b/projects/dev-app/src/app/examples/examples.component.html
index df7fbf4..7897069 100644
--- a/projects/dev-app/src/app/examples/examples.component.html
+++ b/projects/dev-app/src/app/examples/examples.component.html
@@ -1,8 +1,6 @@
-
-
-
-
+
+
diff --git a/projects/dev-app/src/app/examples/examples.component.scss b/projects/dev-app/src/app/examples/examples.component.scss
index c76aecb..84e1129 100644
--- a/projects/dev-app/src/app/examples/examples.component.scss
+++ b/projects/dev-app/src/app/examples/examples.component.scss
@@ -1,23 +1,12 @@
-main {
+:host {
display: grid;
grid-template-columns: 320px 1fr;
gap: 16px;
height: 100%;
- padding: 16px;
}
section {
position: relative;
- border: 1px solid;
+ border: 1px solid var(--mat-divider-color);
overflow: auto;
}
-
-textarea {
- display: block;
- width: 100%;
- height: 100%;
- font-size: 12px;
- border: none;
- outline: none;
- resize: vertical;
-}
diff --git a/projects/dev-app/src/app/home/home.component.html b/projects/dev-app/src/app/home/home.component.html
index 0aba742..e5aa489 100644
--- a/projects/dev-app/src/app/home/home.component.html
+++ b/projects/dev-app/src/app/home/home.component.html
@@ -1,2 +1 @@
-Examples
-Playground
+Welcome to the development demos for GUI!
diff --git a/projects/dev-app/src/app/home/home.component.ts b/projects/dev-app/src/app/home/home.component.ts
index c9a7e36..da28ff4 100644
--- a/projects/dev-app/src/app/home/home.component.ts
+++ b/projects/dev-app/src/app/home/home.component.ts
@@ -1,10 +1,8 @@
import { Component } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
@Component({
standalone: true,
- imports: [RouterModule, MatButtonModule],
+ imports: [],
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
diff --git a/projects/dev-app/src/app/layout/layout.component.html b/projects/dev-app/src/app/layout/layout.component.html
new file mode 100644
index 0000000..0bac40f
--- /dev/null
+++ b/projects/dev-app/src/app/layout/layout.component.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/dev-app/src/app/layout/layout.component.scss b/projects/dev-app/src/app/layout/layout.component.scss
new file mode 100644
index 0000000..a7f34b3
--- /dev/null
+++ b/projects/dev-app/src/app/layout/layout.component.scss
@@ -0,0 +1,12 @@
+mat-sidenav-container {
+ height: 100%;
+}
+
+mat-toolbar {
+ justify-content: space-between;
+}
+
+.demo-content {
+ height: calc(100% - 64px);
+ padding: 16px;
+}
diff --git a/projects/dev-app/src/app/layout/layout.component.ts b/projects/dev-app/src/app/layout/layout.component.ts
new file mode 100644
index 0000000..b72fe61
--- /dev/null
+++ b/projects/dev-app/src/app/layout/layout.component.ts
@@ -0,0 +1,56 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Directionality } from '@angular/cdk/bidi';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { SettingsService } from '../settings.service';
+
+@Component({
+ selector: 'app-layout',
+ standalone: true,
+ imports: [CommonModule, RouterModule, MatSidenavModule, MatToolbarModule, MatButtonModule],
+ templateUrl: './layout.component.html',
+ styleUrls: ['./layout.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class LayoutComponent implements OnInit {
+ htmlElement!: HTMLHtmlElement;
+ darkThemeClass = 'dark-theme';
+ isDark = false;
+ isRtl = false;
+
+ constructor(
+ @Inject(DOCUMENT) private document: Document,
+ private dir: Directionality,
+ private settings: SettingsService
+ ) {}
+
+ ngOnInit(): void {
+ this.htmlElement = this.document.querySelector('html')!;
+ this.isRtl = this.dir.value === 'rtl';
+ }
+
+ toggleThemeClass() {
+ this.isDark = !this.isDark;
+
+ if (this.isDark) {
+ this.htmlElement.classList.add(this.darkThemeClass);
+ } else {
+ this.htmlElement.classList.remove(this.darkThemeClass);
+ }
+
+ this.settings.themeChange.next(this.isDark ? 'dark' : 'light');
+ }
+
+ toggleRtl() {
+ this.isRtl = !this.isRtl;
+
+ if (this.isRtl) {
+ this.htmlElement.dir = 'rtl';
+ } else {
+ this.htmlElement.dir = 'ltr';
+ }
+ }
+}
diff --git a/projects/dev-app/src/app/playground/playground.component.html b/projects/dev-app/src/app/playground/playground.component.html
index dad3702..f697edd 100644
--- a/projects/dev-app/src/app/playground/playground.component.html
+++ b/projects/dev-app/src/app/playground/playground.component.html
@@ -1,15 +1,14 @@
-
-
-
-
-
+
+
+
diff --git a/projects/dev-app/src/app/playground/playground.component.scss b/projects/dev-app/src/app/playground/playground.component.scss
index a1653be..35dc74a 100644
--- a/projects/dev-app/src/app/playground/playground.component.scss
+++ b/projects/dev-app/src/app/playground/playground.component.scss
@@ -1,23 +1,12 @@
-main {
+:host {
display: grid;
grid-template-columns: 1fr 320px 1fr;
gap: 16px;
height: 100%;
- padding: 16px;
}
section {
position: relative;
- border: 1px solid;
+ border: 1px solid var(--mat-divider-color);
overflow: auto;
}
-
-textarea {
- display: block;
- width: 100%;
- height: 100%;
- font-size: 12px;
- border: none;
- outline: none;
- resize: vertical;
-}
diff --git a/projects/dev-app/src/app/playground/playground.component.ts b/projects/dev-app/src/app/playground/playground.component.ts
index 5f33b98..2d82880 100644
--- a/projects/dev-app/src/app/playground/playground.component.ts
+++ b/projects/dev-app/src/app/playground/playground.component.ts
@@ -1,8 +1,10 @@
import { GuiFields, GuiModule } from '@acrodata/gui';
import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormGroup, FormsModule } from '@angular/forms';
-import { MonacoEditorModule } from 'ng-monaco-editor';
+import { MonacoEditorModule, MonacoProviderService } from 'ng-monaco-editor';
+import { SettingsService } from '../settings.service';
@Component({
standalone: true,
@@ -50,12 +52,26 @@ export class PlaygroundComponent implements OnInit {
configStr = '';
+ constructor(
+ private destroyRef: DestroyRef,
+ private settings: SettingsService,
+ private monacoProvider: MonacoProviderService
+ ) {}
+
ngOnInit(): void {
this.configStr = JSON.stringify(this.config, null, 2);
this.form.valueChanges.subscribe(v => {
console.log(v);
});
+
+ this.settings.themeChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(theme => {
+ if (theme === 'dark') {
+ this.monacoProvider.changeTheme('vs-dark');
+ } else {
+ this.monacoProvider.changeTheme('vs');
+ }
+ });
}
onConfigChange() {
diff --git a/projects/dev-app/src/app/settings.service.ts b/projects/dev-app/src/app/settings.service.ts
new file mode 100644
index 0000000..46126d3
--- /dev/null
+++ b/projects/dev-app/src/app/settings.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class SettingsService {
+ themeChange = new Subject<'light' | 'dark'>();
+
+ constructor() {}
+}
diff --git a/projects/dev-app/src/styles.scss b/projects/dev-app/src/styles.scss
index 1379fab..f87091e 100644
--- a/projects/dev-app/src/styles.scss
+++ b/projects/dev-app/src/styles.scss
@@ -4,22 +4,45 @@
// @import '@ng-matero/extensions/prebuilt-themes/indigo-pink.css';
@use '@angular/material' as mat;
+@use '@ng-matero/extensions' as mtx;
@use '../../gui' as gui;
@include mat.core();
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$my-theme: mat.define-light-theme((
- color: (
- primary: $my-primary,
- accent: $my-accent,
- ),
- typography: mat.define-typography-config(),
- density: 0,
-));
+$my-theme: mat.define-light-theme(
+ (
+ color: (
+ primary: $my-primary,
+ accent: $my-accent,
+ ),
+ typography: mat.define-typography-config(),
+ density: 0,
+ )
+);
-@include gui.all-control-themes($my-theme);
+@include mat.all-component-themes($my-theme);
+@include mtx.all-component-themes($my-theme);
+// @include gui.all-control-themes($my-theme);
+
+.dark-theme {
+ $dark-primary: mat.define-palette(mat.$blue-grey-palette);
+ $dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
+ $dark-theme: mat.define-dark-theme(
+ (
+ color: (
+ primary: $dark-primary,
+ accent: $dark-accent,
+ ),
+ typography: mat.define-typography-config(),
+ density: 0,
+ )
+ );
+
+ @include mat.all-component-colors($dark-theme);
+ @include mtx.all-component-colors($dark-theme);
+}
*,
*::before,
@@ -32,3 +55,23 @@ body {
height: 100%;
margin: 0;
}
+
+textarea {
+ display: block;
+ width: 100%;
+ height: 100%;
+ font-size: 12px;
+ border: none;
+ outline: none;
+ resize: vertical;
+ background: transparent;
+ color: inherit;
+}
+
+.gui-form {
+ background-color: white;
+
+ .dark-theme & {
+ background-color: transparent;
+ }
+}