refactor(dev-app): rebuild the layout and improve styles

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 },
+    ],
+  },
 ];

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

@@ -1,8 +1,6 @@
-<main>
-  <section>
-    <gui-form [config]="config" [model]="model" [form]="form"></gui-form>
-  </section>
-  <section>
-    <textarea [value]="model|json"></textarea>
-  </section>
-</main>
+<section>
+  <gui-form [config]="config" [model]="model" [form]="form"></gui-form>
+</section>
+<section>
+  <textarea [value]="model|json" readonly></textarea>
+</section>

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;
-}

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

@@ -1,2 +1 @@
-<a mat-button routerLink="/examples">Examples</a>
-<a mat-button routerLink="/playground">Playground</a>
+<p>Welcome to the development demos for GUI!</p>

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'],

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

@@ -0,0 +1,20 @@
+<mat-sidenav-container [dir]="isRtl?'rtl':'ltr'">
+  <mat-sidenav-content>
+    <mat-toolbar color="primary">
+      <div class="demo-links">
+        <a mat-button routerLink="/home">Home</a>
+        <a mat-button routerLink="/examples">Examples</a>
+        <a mat-button routerLink="/playground">Playground</a>
+      </div>
+
+      <div class="demo-config">
+        <button mat-button (click)="toggleThemeClass()">{{isDark ? 'Light' : 'Dark'}} theme</button>
+        <button mat-button (click)="toggleRtl()">{{isRtl ? 'LTR' : 'RTL'}}</button>
+      </div>
+    </mat-toolbar>
+
+    <div class="demo-content">
+      <router-outlet></router-outlet>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>

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;
+}

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';
+    }
+  }
+}

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

@@ -1,15 +1,14 @@
-<main>
-  <section>
-    <ng-monaco-editor [style]="{height:'100%',width:'100%'}"
-                      [options]="{language:'json'}"
-                      [(ngModel)]="configStr"
-                      [ngModelOptions]="{updateOn:'blur'}"
-                      (ngModelChange)="onConfigChange()"></ng-monaco-editor>
-  </section>
-  <section>
-    <gui-form [config]="config" [model]="model" [form]="form"></gui-form>
-  </section>
-  <section>
-    <textarea [value]="model|json"></textarea>
-  </section>
-</main>
+<section>
+  <ng-monaco-editor dir="ltr"
+                    [style]="{height:'100%',width:'100%'}"
+                    [options]="{language:'json'}"
+                    [(ngModel)]="configStr"
+                    [ngModelOptions]="{updateOn:'blur'}"
+                    (ngModelChange)="onConfigChange()"></ng-monaco-editor>
+</section>
+<section>
+  <gui-form [config]="config" [model]="model" [form]="form"></gui-form>
+</section>
+<section>
+  <textarea [value]="model|json" readonly></textarea>
+</section>

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;
-}

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() {

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() {}
+}

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;
+  }
+}