fontastic 0.1.3 → 0.2.0

package/src/app/shared/components/waterfall/waterfall.component.html

@@ -0,0 +1,119 @@
+<div class="panel">
+  <div class="h-full scrollbox-y flex flex-col">
+    <div
+      class="flex items-center justify-between px-4 py-1.5 shrink-0"
+      [style.border-bottom]="'1px solid var(--border-subtle)'"
+      [style.background-color]="'var(--surface-2)'"
+    >
+      <div class="flex items-center gap-2">
+        <input
+          type="number"
+          class="w-10 px-1.5 py-0.5 rounded text-[11px] text-center outline-none"
+          [style.background-color]="'var(--surface-1)'"
+          [style.border]="'1px solid var(--border-default)'"
+          [style.color]="'var(--text-primary)'"
+          [value]="baseFontSize()"
+          (change)="onBaseFontSizeChange($event)"
+          title="Base font size (px)"
+        />
+        <select
+          class="px-1.5 py-0.5 rounded text-[11px] outline-none cursor-pointer"
+          [style.background-color]="'var(--surface-1)'"
+          [style.border]="'1px solid var(--border-default)'"
+          [style.color]="'var(--text-primary)'"
+          [value]="scaleRatio()"
+          (change)="onScaleRatioChange($event)"
+          title="Type scale ratio"
+        >
+          @for (opt of scaleOptions; track opt.size) {
+            <option [value]="opt.size">{{ opt.label }}</option>
+          }
+        </select>
+        <div class="flex items-center">
+          <button
+            class="px-0.5 py-0.5 rounded cursor-pointer transition-colors"
+            [style.color]="'var(--text-secondary)'"
+            (click)="addHighScale()"
+            title="Add high scale step"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >add_circle</span
+            >
+          </button>
+          <button
+            class="px-0.5 py-0.5 rounded cursor-pointer transition-colors"
+            [style.color]="'var(--text-secondary)'"
+            (click)="addLowScale()"
+            title="Add low scale step"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >remove_circle</span
+            >
+          </button>
+        </div>
+        <button
+          class="px-2 py-0.5 rounded cursor-pointer text-[10px] transition-colors"
+          [style.color]="'var(--text-secondary)'"
+          [style.border]="'1px solid var(--border-default)'"
+          [style.background-color]="'transparent'"
+          (mouseenter)="$any($event.currentTarget).style.backgroundColor = 'var(--hover-bg)'"
+          (mouseleave)="$any($event.currentTarget).style.backgroundColor = 'transparent'"
+          (click)="resetScale()"
+          title="Reset scale"
+        >
+          Reset
+        </button>
+      </div>
+      <div class="text-[11px]" [style.color]="'var(--text-muted)'">
+        @if (db.store(); as store) {
+          {{ store.full_name || store.file_name }}
+        } @else {
+          No font selected
+        }
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-auto">
+      @if (fontFamily()) {
+        @for (item of typeScale(); track item.label) {
+          <div
+            class="flex items-stretch w-full"
+            [style.border-bottom]="'1px solid var(--border-subtle)'"
+            [style.background-color]="item.active ? 'var(--selected-bg)' : 'transparent'"
+          >
+            <div
+              class="flex items-center min-w-[140px] px-5 py-3 whitespace-nowrap shrink-0"
+              [style.border-right]="'1px solid var(--border-subtle)'"
+            >
+              <span class="text-[10px]" [style.color]="'var(--text-muted)'">{{ item.label }}</span>
+            </div>
+            <div class="flex items-center justify-start w-full px-5 py-3 overflow-hidden">
+              <span
+                class="leading-tight whitespace-nowrap"
+                [style.color]="presentation.fontColor() || 'var(--text-primary)'"
+                [style.font-family]="fontFamily()"
+                [style.font-size]="item.size"
+              >
+                {{ displayText() }}
+              </span>
+            </div>
+          </div>
+        }
+      } @else {
+        <p class="text-center py-8 text-xs" [style.color]="'var(--text-muted)'">Select a font to view type scale</p>
+      }
+    </div>
+  </div>
+</div>

package/src/app/shared/components/waterfall/waterfall.component.ts

@@ -0,0 +1,119 @@
+import { Component, inject, computed, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatabaseService, PresentationService } from '../../../core/services';
+import { fontTypeScale } from '@main/config/system';
+
+interface ScaleItem {
+  em: number;
+  px: string;
+  label: string;
+  size: string;
+  active: boolean;
+}
+
+@Component({
+  selector: 'app-waterfall',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './waterfall.component.html',
+})
+export class WaterfallComponent {
+  readonly db = inject(DatabaseService);
+  readonly presentation = inject(PresentationService);
+
+  readonly scaleOptions = fontTypeScale;
+
+  readonly baseFontSize = signal(16);
+  readonly scaleRatio = signal(1.067);
+  readonly highScaleLength = signal(6);
+  readonly lowScaleLength = signal(3);
+
+  readonly fontFamily = computed(() => {
+    const store = this.db.store();
+    return store ? store.full_name || store.font_family || '' : '';
+  });
+
+  readonly displayText = computed(() => this.presentation.displayText());
+
+  readonly typeScale = computed(() => {
+    const ratio = this.scaleRatio();
+    const baseMultiplier = this.baseFontSize() / 16;
+    const highLen = this.highScaleLength();
+    const lowLen = this.lowScaleLength();
+
+    const high = this.buildHighScale(ratio, baseMultiplier, highLen);
+    const low = this.buildLowScale(ratio, baseMultiplier, lowLen);
+
+    return [...high.reverse(), ...low];
+  });
+
+  private buildHighScale(ratio: number, baseMultiplier: number, length: number): ScaleItem[] {
+    let baseSize = 1;
+    let result = 1;
+    const items: ScaleItem[] = [];
+
+    for (let i = 0; i < length; i++) {
+      const em = Math.round(result * 1000) / 1000;
+      const px = (baseMultiplier * 16 * result).toFixed(2);
+      items.push({
+        em,
+        px,
+        label: em + 'rem/' + px + 'px',
+        size: px + 'px',
+        active: i === 0,
+      });
+      result = baseSize * ratio;
+      baseSize = result;
+    }
+
+    return items;
+  }
+
+  private buildLowScale(ratio: number, baseMultiplier: number, length: number): ScaleItem[] {
+    let baseSize = 1;
+    let result = 1;
+    const items: ScaleItem[] = [];
+
+    for (let i = 0; i < length; i++) {
+      result = baseSize / ratio;
+      baseSize = result;
+      const em = Math.round(result * 1000) / 1000;
+      const px = (baseMultiplier * 16 * result).toFixed(2);
+      items.push({
+        em,
+        px,
+        label: em + 'rem/' + px + 'px',
+        size: px + 'px',
+        active: false,
+      });
+    }
+
+    return items;
+  }
+
+  onBaseFontSizeChange(event: Event) {
+    const value = Number((event.target as HTMLInputElement).value);
+    if (value > 0) {
+      this.baseFontSize.set(value);
+    }
+  }
+
+  onScaleRatioChange(event: Event) {
+    this.scaleRatio.set(Number((event.target as HTMLSelectElement).value));
+  }
+
+  addHighScale() {
+    this.highScaleLength.update((v) => v + 1);
+  }
+
+  addLowScale() {
+    this.lowScaleLength.update((v) => v + 1);
+  }
+
+  resetScale() {
+    this.baseFontSize.set(16);
+    this.scaleRatio.set(1.067);
+    this.highScaleLength.set(6);
+    this.lowScaleLength.set(3);
+  }
+}

package/src/app/shared/directives/autofocus/autofocus.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, AfterViewInit, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appAutofocus]',
+  standalone: true,
+})
+export class AutofocusDirective implements AfterViewInit {
+  private el = inject(ElementRef);
+
+  ngAfterViewInit() {
+    this.el.nativeElement.focus();
+    this.el.nativeElement.select();
+  }
+}

package/src/app/shared/directives/index.ts

@@ -1,2 +1,2 @@
-export * from './webview/webview.directive';
-export * from './gravatar/gravatar.directive';
+export * from './autofocus/autofocus.directive';
+export * from './webview/webview.directive';

package/src/app/shared/directives/webview/webview.directive.spec.ts

@@ -0,0 +1,8 @@
+import { WebviewDirective } from './webview.directive';
+
+describe('WebviewDirective', () => {
+  it('should create an instance', () => {
+    const directive = new WebviewDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/src/app/shared/directives/webview/webview.directive.ts

@@ -1,8 +1,9 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: 'webview'
-})
-export class WebviewDirective {
-  constructor() {}
-}
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'webview',
+  standalone: true,
+})
+export class WebviewDirective {
+  constructor() {}
+}

package/src/app/shared/shared.module.ts

@@ -1,92 +1,13 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { AlertComponent, BreadcrumbsComponent, ButtonComponent, GlyphListComponent, GlyphViewComponent, LoadingComponent, ModalComponent, PageNotFoundComponent, PaginatorComponent, PairingComponent, SpinnerComponent, SearchComponent, SettingsComponent, StoreComponent, TablesComponent, TypescaleComponent } from './components/';
-import { WebviewDirective, GravatarDirective } from './directives/';
-import { SafeHtmlPipe } from './pipes/safehtml.pipe';
-import { PrettyBytesPipe } from './pipes/prettybytes.pipe';
-import { InstallablePipe } from './pipes/installable.pipe';
-
-import { GeneralComponent } from './components/settings/general/general.component';
-import { DatabaseComponent } from './components/settings/database/database.component';
-import { ThemeComponent } from './components/settings/theme/theme.component';
-import { LogsComponent } from './components/settings/logs/logs.component';
-import { NewsComponent } from './components/settings/news/news.component';
-import { SystemComponent } from './components/settings/system/system.component';
-
-import { CreateCollectionComponent } from './components/collection/create-collection/create-collection.component';
-import { UpdateCollectionComponent } from './components/collection/update-collection/update-collection.component';
-import { FormCollectionComponent } from './components/collection/form-collection/form-collection.component';
-
-@NgModule({
-  declarations: [
-    WebviewDirective,
-    GravatarDirective,
-    AlertComponent,
-    BreadcrumbsComponent,
-    ButtonComponent,
-    GlyphListComponent,
-    GlyphViewComponent,
-    LoadingComponent,
-    ModalComponent,
-    PageNotFoundComponent,
-    PaginatorComponent,
-    PairingComponent,
-    SearchComponent,
-    SpinnerComponent,
-    StoreComponent,
-    TablesComponent,
-    TypescaleComponent,
-    SafeHtmlPipe,
-    PrettyBytesPipe,
-    InstallablePipe,
-    ModalComponent,
-    SettingsComponent,
-    GeneralComponent,
-    DatabaseComponent,
-    ThemeComponent,
-    LogsComponent,
-    NewsComponent,
-    SystemComponent,
-    CreateCollectionComponent,
-    UpdateCollectionComponent,
-    FormCollectionComponent
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    RouterModule
-  ],
-  exports: [
-    TranslateModule,
-    WebviewDirective,
-    GravatarDirective,
-    SafeHtmlPipe,
-    PrettyBytesPipe,
-    InstallablePipe,
-    AlertComponent,
-    BreadcrumbsComponent,
-    ButtonComponent,
-    GlyphListComponent,
-    GlyphViewComponent,
-    LoadingComponent,
-    ModalComponent,
-    PaginatorComponent,
-    PairingComponent,
-    SearchComponent,
-    SettingsComponent,
-    SpinnerComponent,
-    StoreComponent,
-    TablesComponent,
-    TypescaleComponent,
-    SystemComponent,
-    CreateCollectionComponent,
-    UpdateCollectionComponent,
-    FormCollectionComponent
-  ]
-})
-export class SharedModule { }
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, TranslateModule, FormsModule],
+  exports: [TranslateModule, FormsModule],
+})
+export class SharedModule {}

package/src/assets/i18n/en.json

@@ -1,12 +1,12 @@
-{
-  "PAGES": {
-      "HOME": {
-          "TITLE": "App works !",
-          "GO_TO_DETAIL": "Go to Detail"
-      },
-      "DETAIL": {
-        "TITLE": "Detail page !",
-        "BACK_TO_HOME": "Back to Home"
-    }
-  }
-}
+{
+  "PAGES": {
+    "HOME": {
+      "TITLE": "App works !",
+      "GO_TO_DETAIL": "Go to Detail"
+    },
+    "DETAIL": {
+      "TITLE": "Detail page !",
+      "BACK_TO_HOME": "Back to Home"
+    }
+  }
+}

package/src/environments/environment.dev.ts

@@ -1,4 +1,4 @@
-export const APP_CONFIG = {
-  production: false,
-  environment: 'DEV'
-};
+export const APP_CONFIG = {
+  production: false,
+  environment: 'DEV',
+};

package/src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
-export const APP_CONFIG = {
-  production: true,
-  environment: 'PROD'
-};
+export const APP_CONFIG = {
+  production: true,
+  environment: 'PROD',
+};

package/src/environments/environment.ts

@@ -1,4 +1,4 @@
-export const APP_CONFIG = {
-  production: false,
-  environment: 'LOCAL'
-};
+export const APP_CONFIG = {
+  production: false,
+  environment: 'LOCAL',
+};

package/src/index.html

@@ -1,55 +1,19 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Fontastic</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
-</head>
-<body class="app-loading" data-theme="default">
-  <app-root>
-    <style>
-      app-root {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        color: pink;
-      }
-
-      body {
-        background: #fff;
-        margin: 0;
-        padding: 0;
-      }
-
-      @keyframes dots {
-        50% {
-          transform: translateY(-.4rem);
-        }
-
-        100% {
-          transform: translateY(0);
-        }
-      }
-
-      .d {
-        animation: dots 1.5s ease-out infinite;
-      }
-
-      .d-2 {
-        animation-delay: .5s;
-      }
-
-      .d-3 {
-        animation-delay: 1s;
-      }
-    </style>
-
-    <span class="d">.</span>
-    <span class="d d-2">.</span>
-    <span class="d d-3">.</span>
-  </app-root>
-</body>
-</html>
+<!doctype html>
+<html lang="en" class="light">
+  <head>
+    <meta charset="utf-8" />
+    <title>Fontastic</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
+  </head>
+  <body class="font-sans antialiased app-loading">
+    <div class="splash-screen">
+      <span class="dot"></span>
+      <span class="dot dot-2"></span>
+      <span class="dot dot-3"></span>
+    </div>
+    <app-root></app-root>
+  </body>
+</html>

package/src/main.ts

@@ -1,15 +1,65 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { APP_CONFIG } from './environments/environment';
-
-if (APP_CONFIG.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule, {
-    preserveWhitespaces: false
-  })
-  .catch(err => console.error(err));
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { AppComponent } from './app/app.component';
+import { APP_CONFIG } from './environments/environment';
+import { CoreModule } from './app/core/core.module';
+import { SharedModule } from './app/shared/shared.module';
+import { provideTranslateService } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
+import { PageNotFoundComponent } from './app/shared/components';
+import { LayoutComponent } from './app/layout/layout.component';
+import { MainComponent } from './app/layout/main/main.component';
+import { SettingsComponent } from './app/settings/settings.component';
+import { SettingsGeneralPageComponent } from './app/settings/pages/general/general.component';
+import { SettingsLogsPageComponent } from './app/settings/pages/logs/logs.component';
+import { SettingsSystemPageComponent } from './app/settings/pages/system/system.component';
+
+if (APP_CONFIG.production) {
+  enableProdMode();
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection(),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideTranslateService({
+      loader: provideTranslateHttpLoader({
+        prefix: './assets/i18n/',
+        suffix: '.json',
+      }),
+      fallbackLang: 'en',
+      lang: 'en',
+    }),
+    provideRouter([
+      {
+        path: '',
+        redirectTo: 'home',
+        pathMatch: 'full',
+      },
+      {
+        path: 'home',
+        component: LayoutComponent,
+        children: [{ path: '', component: MainComponent }],
+      },
+      {
+        path: 'settings',
+        component: SettingsComponent,
+        children: [
+          { path: '', redirectTo: 'general', pathMatch: 'full' },
+          { path: 'general', component: SettingsGeneralPageComponent },
+          { path: 'logs', component: SettingsLogsPageComponent },
+          { path: 'system', component: SettingsSystemPageComponent },
+        ],
+      },
+      {
+        path: '**',
+        component: PageNotFoundComponent,
+      },
+    ]),
+    importProvidersFrom(CoreModule, SharedModule),
+  ],
+}).catch((err) => console.error(err));

package/src/styles/base/reset.css

@@ -0,0 +1,41 @@
+@layer base {
+  body {
+    color: var(--text-secondary);
+    background-color: var(--surface-0);
+  }
+
+  a {
+    color: inherit;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  ul,
+  ol {
+    list-style: none;
+  }
+}
+
+/* ==========================================================================
+Application
+========================================================================== */
+
+body {
+  @apply w-screen h-screen overflow-hidden;
+}
+
+/* ==========================================================================
+Panel
+========================================================================== */
+
+.panel {
+  @apply w-full h-full overflow-hidden;
+}