fontastic 1.2.0 → 1.3.1

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

@@ -26,9 +26,7 @@
         <button
           class="px-2 py-0.5 rounded cursor-pointer text-[10px] transition-colors"
           [style.color]="'var(--text-secondary)'"
-          [style.background-color]="'transparent'"
-          (mouseenter)="$any($event.currentTarget).style.backgroundColor = 'var(--hover-bg)'"
-          (mouseleave)="$any($event.currentTarget).style.backgroundColor = 'transparent'"
+          [appHoverHighlight]="false"
           (click)="onReset()"
         >
           Clear
@@ -64,15 +62,7 @@
               <label
                 class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-[11px] transition-colors"
                 [style.color]="'var(--text-secondary)'"
-                [style.background-color]="isSearchFieldSelected(sf.value) ? 'var(--selected-bg)' : 'transparent'"
-                (mouseenter)="
-                  $any($event.currentTarget).style.backgroundColor = isSearchFieldSelected(sf.value)
-                    ? 'var(--selected-bg)'
-                    : 'var(--hover-bg)'
-                "
-                (mouseleave)="
-                  $any($event.currentTarget).style.backgroundColor = isSearchFieldSelected(sf.value) ? 'var(--selected-bg)' : 'transparent'
-                "
+                [appHoverHighlight]="isSearchFieldSelected(sf.value)"
               >
                 <input
                   type="checkbox"
@@ -96,15 +86,7 @@
                 <label
                   class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-[11px] transition-colors"
                   [style.color]="'var(--text-secondary)'"
-                  [style.background-color]="isFileTypeSelected(ft.value) ? 'var(--selected-bg)' : 'transparent'"
-                  (mouseenter)="
-                    $any($event.currentTarget).style.backgroundColor = isFileTypeSelected(ft.value)
-                      ? 'var(--selected-bg)'
-                      : 'var(--hover-bg)'
-                  "
-                  (mouseleave)="
-                    $any($event.currentTarget).style.backgroundColor = isFileTypeSelected(ft.value) ? 'var(--selected-bg)' : 'transparent'
-                  "
+                  [appHoverHighlight]="isFileTypeSelected(ft.value)"
                 >
                   <input
                     type="checkbox"
@@ -125,9 +107,7 @@
               <label
                 class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-[11px] transition-colors"
                 [style.color]="'var(--text-secondary)'"
-                [style.background-color]="favoritesOnly ? 'var(--selected-bg)' : 'transparent'"
-                (mouseenter)="$any($event.currentTarget).style.backgroundColor = favoritesOnly ? 'var(--selected-bg)' : 'var(--hover-bg)'"
-                (mouseleave)="$any($event.currentTarget).style.backgroundColor = favoritesOnly ? 'var(--selected-bg)' : 'transparent'"
+                [appHoverHighlight]="favoritesOnly"
               >
                 <input type="checkbox" class="accent-current" [(ngModel)]="favoritesOnly" />
                 Favorites Only
@@ -135,9 +115,7 @@
               <label
                 class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-[11px] transition-colors"
                 [style.color]="'var(--text-secondary)'"
-                [style.background-color]="systemOnly ? 'var(--selected-bg)' : 'transparent'"
-                (mouseenter)="$any($event.currentTarget).style.backgroundColor = systemOnly ? 'var(--selected-bg)' : 'var(--hover-bg)'"
-                (mouseleave)="$any($event.currentTarget).style.backgroundColor = systemOnly ? 'var(--selected-bg)' : 'transparent'"
+                [appHoverHighlight]="systemOnly"
               >
                 <input type="checkbox" class="accent-current" [(ngModel)]="systemOnly" />
                 System Fonts Only
@@ -145,9 +123,7 @@
               <label
                 class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer text-[11px] transition-colors"
                 [style.color]="'var(--text-secondary)'"
-                [style.background-color]="installedOnly ? 'var(--selected-bg)' : 'transparent'"
-                (mouseenter)="$any($event.currentTarget).style.backgroundColor = installedOnly ? 'var(--selected-bg)' : 'var(--hover-bg)'"
-                (mouseleave)="$any($event.currentTarget).style.backgroundColor = installedOnly ? 'var(--selected-bg)' : 'transparent'"
+                [appHoverHighlight]="installedOnly"
               >
                 <input type="checkbox" class="accent-current" [(ngModel)]="installedOnly" />
                 Installed Only
@@ -292,11 +268,10 @@
       <div class="flex gap-2 pt-5">
         <button
           class="flex-1 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-colors"
-          [style.background-color]="'var(--selected-bg)'"
           [style.color]="'var(--text-primary)'"
           [style.border]="'1px solid var(--border-default)'"
-          (mouseenter)="$any($event.currentTarget).style.backgroundColor = 'var(--hover-bg)'"
-          (mouseleave)="$any($event.currentTarget).style.backgroundColor = 'var(--selected-bg)'"
+          [appHoverHighlight]="false"
+          normalBg="var(--selected-bg)"
           (click)="onSearch()"
         >
           <span class="flex items-center justify-center gap-1">
@@ -316,9 +291,7 @@
           class="px-3 py-1.5 rounded text-[11px] cursor-pointer transition-colors"
           [style.color]="'var(--text-muted)'"
           [style.border]="'1px solid var(--border-subtle)'"
-          [style.background-color]="'transparent'"
-          (mouseenter)="$any($event.currentTarget).style.backgroundColor = 'var(--hover-bg)'"
-          (mouseleave)="$any($event.currentTarget).style.backgroundColor = 'transparent'"
+          [appHoverHighlight]="false"
           (click)="onReset()"
         >
           Reset

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

@@ -1,6 +1,7 @@
 import { Component, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DatabaseService, PresentationService } from '../../../core/services';
+import { HoverHighlightDirective } from '../../directives/hover-highlight/hover-highlight.directive';
 import type { Collection } from '@main/database/entity/Collection.schema';
 
 const FILE_TYPES = [
@@ -45,7 +46,7 @@ const SORT_OPTIONS = [
 @Component({
   selector: 'app-search',
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, HoverHighlightDirective],
   templateUrl: './search.component.html',
 })
 export class SearchComponent {

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

@@ -67,9 +67,7 @@
           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'"
+          [appHoverHighlight]="false"
           (click)="resetScale()"
           title="Reset scale"
         >

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

@@ -1,6 +1,7 @@
 import { Component, inject, computed, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DatabaseService, PresentationService } from '../../../core/services';
+import { HoverHighlightDirective } from '../../directives/hover-highlight/hover-highlight.directive';
 import { fontTypeScale } from '@main/config/system';
 
 interface ScaleItem {
@@ -14,7 +15,7 @@ interface ScaleItem {
 @Component({
   selector: 'app-waterfall',
   standalone: true,
-  imports: [FormsModule],
+  imports: [FormsModule, HoverHighlightDirective],
   templateUrl: './waterfall.component.html',
 })
 export class WaterfallComponent {

package/src/app/shared/directives/disabled-opacity/disabled-opacity.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, ElementRef, Input, OnChanges, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appDisabledOpacity]',
+  standalone: true,
+})
+export class DisabledOpacityDirective implements OnChanges {
+  @Input('appDisabledOpacity') isDisabled = false;
+  @Input() opacityValue = '0.3';
+
+  private el = inject(ElementRef);
+
+  ngOnChanges() {
+    const el = this.el.nativeElement;
+    el.disabled = this.isDisabled;
+    el.style.opacity = this.isDisabled ? this.opacityValue : '';
+  }
+}

package/src/app/shared/directives/hover-highlight/hover-highlight.directive.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementRef, HostListener, Input, OnChanges, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appHoverHighlight]',
+  standalone: true,
+})
+export class HoverHighlightDirective implements OnChanges {
+  @Input('appHoverHighlight') selected = false;
+  @Input() hoverBg = 'var(--hover-bg)';
+  @Input() selectedBg = 'var(--selected-bg)';
+  @Input() normalBg = 'transparent';
+  @Input() selectedColor = '';
+  @Input() normalColor = '';
+
+  private el = inject(ElementRef);
+
+  ngOnChanges() {
+    this.applyStyles();
+  }
+
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    this.el.nativeElement.style.backgroundColor = this.selected ? this.selectedBg : this.hoverBg;
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    this.applyStyles();
+  }
+
+  private applyStyles() {
+    const el = this.el.nativeElement;
+    el.style.backgroundColor = this.selected ? this.selectedBg : this.normalBg;
+    if (this.selectedColor || this.normalColor) {
+      el.style.color = this.selected ? this.selectedColor : this.normalColor;
+    }
+  }
+}

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

@@ -1,2 +1,7 @@
 export * from './autofocus/autofocus.directive';
+export * from './disabled-opacity/disabled-opacity.directive';
+export * from './hover-highlight/hover-highlight.directive';
+export * from './modal-backdrop/modal-backdrop.directive';
+export * from './scroll-reset/scroll-reset.directive';
+export * from './stop-propagation/stop-propagation.directive';
 export * from './webview/webview.directive';

package/src/app/shared/directives/modal-backdrop/modal-backdrop.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, ElementRef, HostListener, Output, EventEmitter, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appModalBackdrop]',
+  standalone: true,
+})
+export class ModalBackdropDirective {
+  @Output() backdropClick = new EventEmitter<void>();
+
+  private el = inject(ElementRef);
+
+  @HostListener('click', ['$event'])
+  onClick(event: MouseEvent) {
+    if (event.target === this.el.nativeElement) {
+      this.backdropClick.emit();
+    }
+  }
+}

package/src/app/shared/directives/scroll-reset/scroll-reset.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, Input, OnChanges, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appScrollReset]',
+  standalone: true,
+})
+export class ScrollResetDirective implements OnChanges {
+  @Input('appScrollReset') trigger: unknown;
+
+  private el = inject(ElementRef);
+
+  ngOnChanges() {
+    this.el.nativeElement.scrollTo(0, 0);
+  }
+}

package/src/app/shared/directives/stop-propagation/stop-propagation.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appStopPropagation]',
+  standalone: true,
+})
+export class StopPropagationDirective {
+  @HostListener('click', ['$event'])
+  onClick(event: Event) {
+    event.stopPropagation();
+  }
+}

package/src/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Fontastic</title>
-    <base href="/" />
+    <base href="./" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />