fontastic 0.1.7 → 0.2.0

package/src/app/layout/footer/footer.component.scss

@@ -1,27 +0,0 @@
-footer {
-  display: grid;
-  grid-template-areas: "left middle right";
-  grid-template-columns: 300px 1fr 300px;
-  grid-template-rows: 30px;
-}
-
-.left { grid-area: left; }
-.middle { grid-area: middle; }
-.right { grid-area: right; }
-
-.middle { 
-  margin: 0px 1px; 
-}
-
-.left,
-.middle,
-.right {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.left {
-  padding: 0px 10px;
-}

package/src/app/layout/header/header.component.scss

@@ -1,60 +0,0 @@
-@import "../../../styles/tools/variables";
-
-header {
-    display: grid;
-    grid-template-areas: "left middle right";
-    grid-template-columns: 240px 1fr 240px;
-    grid-template-rows: $appHeaderHeight;
-}
-
-@media only screen and (min-width: 1440px) {
-    header {
-        grid-template-columns: 300px 1fr 300px;
-    }
-}
-
-.left {
-    grid-area: left;
-}
-
-.middle {
-    grid-area: middle;
-}
-
-.right {
-    grid-area: right;
-}
-
-.left,
-.middle,
-.right {
-    @apply relative;
-}
-
-.middle {
-    @apply m-0;
-}
-
-.header-block {
-    @apply p-0 h-full;
-
-    a {
-        @apply cursor-pointer text-[11px] text-center no-underline py-[5px] px-[10px] inline-block outline-none whitespace-nowrap opacity-0 invisible transition-all;
-
-        i {
-            @apply block text-[24px] leading-none p-0;
-        }
-    }
-
-    a+a {
-        @apply pl-[5px];
-    }
-
-    a.gravatar {
-        @apply mt-[1px];
-
-        img {
-            @apply w-[38px] rounded-full;
-        }
-    }
-}

package/src/app/layout/layout.component.scss

@@ -1,119 +0,0 @@
-@import "../../styles/tools/variables";
-
-app-header {
-    grid-area: header;
-}
-
-app-footer {
-    grid-area: footer;
-}
-
-main {
-    grid-area: main;
-}
-
-app-navigation {
-    grid-area: navigation;
-}
-
-app-aside {
-    grid-area: aside;
-}
-
-.application {
-    display: grid;
-    grid-template-areas: "header" "main" "footer";
-    grid-template-columns: 1fr;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-.application.navigation {
-    display: grid;
-    grid-template-areas: "header header" "navigation main" "footer footer";
-    grid-template-columns: 240px 1fr;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-.application.aside {
-    display: grid;
-    grid-template-areas: "header header header" "main aside" "footer footer footer";
-    grid-template-columns: 240px 1fr 240px;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-.application.main {
-    display: grid;
-    grid-template-areas: "header" "main" "footer";
-    grid-template-columns: 1fr;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-.application.main.aside {
-    display: grid;
-    grid-template-areas: "header header" "main aside" "footer footer";
-    grid-template-columns: 1fr 240px;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-.application.main.navigation {
-    display: grid;
-    grid-template-areas: "header header" "navigation main" "footer footer";
-    grid-template-columns: 240px 1fr;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-.application.main.aside.navigation {
-    display: grid;
-    grid-template-areas: "header header header" "navigation main aside" "footer footer footer";
-    grid-template-columns: 240px 1fr 240px;
-    grid-template-rows: $appHeaderHeight 1fr 30px;
-}
-
-app-header,
-app-footer,
-app-navigation,
-app-aside {
-    position: relative;
-}
-
-app-navigation {
-    visibility: hidden;
-}
-
-app-aside {
-    visibility: hidden;
-}
-
-.application.navigation {
-    app-navigation {
-        visibility: visible;
-    }
-}
-
-.application.aside {
-    app-aside {
-        visibility: visible;
-    }
-}
-
-@media only screen and (min-width: 1440px) {
-    .application.navigation {
-        grid-template-columns: 300px 1fr;
-    }
-
-    .application.aside {
-        grid-template-columns: 300px 1fr 300px;
-    }
-
-    .application.main.aside {
-        grid-template-columns: 1fr 300px;
-    }
-
-    .application.main.navigation {
-        grid-template-columns: 300px 1fr;
-    }
-
-    .application.main.aside.navigation {
-        grid-template-columns: 300px 1fr 300px;
-    }
-}

package/src/app/layout/layout.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-
-import { SharedModule } from '@app/shared/shared.module';
-
-import { LayoutComponent } from './layout.component';
-import { HeaderComponent } from './header/header.component';
-import { FooterComponent } from './footer/footer.component';
-import { NavigationComponent } from './navigation/navigation.component';
-import { AsideComponent } from './aside/aside.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    SharedModule,
-    FormsModule,
-    RouterModule
-  ],
-  declarations: [
-    LayoutComponent, 
-    HeaderComponent, 
-    FooterComponent, 
-    NavigationComponent, 
-    AsideComponent
-  ],
-  exports: [
-    LayoutComponent
-  ]
-})
-export class LayoutModule { }

package/src/app/layout/layout.service.ts

@@ -1,13 +0,0 @@
-import { Routes, Route } from '@angular/router';
-import { LayoutComponent } from './layout.component';
-
-export class LayoutService {
-  static childRoutes(routes: Routes): Route {
-    return {
-      path: '',
-      component: LayoutComponent,
-      children: routes,
-      data: { reuse: true }
-    };
-  }
-}

package/src/app/pages/main/grid/grid.component.html

@@ -1,183 +0,0 @@
-<div class="component border-top">
-  <div class="component__panel">
-    <div class="hover-scrollbox-y hover-scrollbox-x h-full min-h-full" [class.loading]="isLoading" #gridElement>
-
-      <table class="table striped border-separate border-spacing-1">
-        <thead>
-          <tr>
-            <th class="sorting sort_center sort_input" (click)="handleSort('activated')">
-              <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'activated'">arrow_drop_up</span>
-              <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'activated'">arrow_drop_down</span>
-              <span class="material-icons" *ngIf="queryOptions.order.column !== 'activated'">swap_vert</span>
-            </th>
-            <th class="sorting sort_center sort_input" (click)="handleSort('temporary')" *ngIf="isWindows">
-              <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'temporary'">arrow_drop_up</span>
-              <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'temporary'">arrow_drop_down</span>
-              <span class="material-icons" *ngIf="queryOptions.order.column !== 'temporary'">swap_vert</span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('id')">
-              <span class="flex items-center justify-between w-full">
-                <span>ID</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'id'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'id'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'id'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('full_name')">
-              <span class="flex items-center justify-between w-full">
-                <span>Name</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'full_name'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'full_name'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'full_name'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('font_family')">
-              <span class="flex items-center justify-between w-full">
-                <span>Family</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'font_family'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'font_family'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'font_family'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('file_type')">
-              <span class="flex items-center justify-between w-full">
-                <span>Type</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'file_type'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'file_type'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'file_type'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('file_size')">
-              <span class="flex items-center justify-between w-full">
-                <span>Size</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'file_size'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'file_size'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'file_size'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('designer')">
-              <span class="flex items-center justify-between w-full">
-                <span>Designer</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'designer'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'designer'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'designer'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('manufacturer')">
-              <span class="flex items-center justify-between w-full">
-                <span>Manufacturer</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'manufacturer'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'manufacturer'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'manufacturer'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('version')">
-              <span class="flex items-center justify-between w-full">
-                <span>Version</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'version'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'version'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'version'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-left" (click)="handleSort('unique_id')">
-              <span class="flex items-center justify-between w-full">
-                <span>Unique Id</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'unique_id'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'unique_id'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'unique_id'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-center" (click)="handleSort('created')">
-              <span class="flex items-center justify-between w-full">
-                <span>Created</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'created'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'created'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'created'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-            <th class="sorting text-center" (click)="handleSort('updated')">
-              <span class="flex items-center justify-between w-full">
-                <span>Updated</span>
-                <span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'DESC' && queryOptions.order.column === 'updated'">arrow_drop_up</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.direction === 'ASC' && queryOptions.order.column === 'updated'">arrow_drop_down</span>
-                  <span class="material-icons" *ngIf="queryOptions.order.column !== 'updated'">swap_vert</span>
-                </span>
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <ng-container *ngFor="let item of resultSet">
-
-            <tr (click)="onRowClick(item.id)" [attr.id]="item.id" [attr.data-row]="item.id">
-
-              <ng-container *ngIf="item.installable; else p1">
-                <td [attr.title]="item.activated ? 'Remove' : 'Add'">
-                  <div class="checkbox" (click)="handleActivate($event, item, false)">
-                    <input type="checkbox" name="activate--{{item.id}}" id="{{item.id}}" value="{{item.id}}"
-                      [checked]="item.activated" />
-                    <label for="{{item.id}}"></label>
-                  </div>
-                </td>
-              </ng-container>
-              <ng-template #p1>
-                <td></td>
-              </ng-template>
-
-              <ng-container *ngIf="isWindows">
-                <ng-container *ngIf="item.installable; else t1">
-                  <td [attr.title]="item.temporary ? 'Remove' : 'Add'">
-                    <div class="radio" (click)="handleActivate($event, item, true)">
-                      <input type="radio" name="temporary--{{item.id}}" id="{{item.id}}" value="{{item.id}}"
-                        [checked]="item.temporary" />
-                      <label for="{{item.id}}"></label>
-                    </div>
-                  </td>
-                </ng-container>
-                <ng-template #t1>
-                  <td></td>
-                </ng-template>
-              </ng-container>
-
-              <td class="text-left">{{ item.id }}</td>
-              <td class="text-left">{{ item.full_name }}</td>
-              <td class="text-left">{{ item.font_family }}</td>
-              <td class="text-center">{{ item.file_type }}</td>
-              <td class="text-center">{{ item.file_size_pretty }}</td>
-              <td class="text-left">{{ item.designer }}</td>
-              <td class="text-left">{{ item.manufacturer }}</td>
-              <td class="text-left">{{ item.version }}</td>
-              <td class="text-left">{{ item.unique_id }}</td>
-              <td class="text-center">{{item.created | date :'medium'}}</td>
-              <td class="text-center">{{item.updated | date :'medium'}}</td>
-            </tr>
-
-          </ng-container>
-        </tbody>
-      </table>
-
-
-    </div>
-  </div>
-</div>

package/src/app/pages/main/grid/grid.component.scss

@@ -1,3 +0,0 @@
-:host {
-  margin-top: -1px;
-}

package/src/app/pages/main/grid/grid.component.ts

@@ -1,98 +0,0 @@
-import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
-import { delay } from 'rxjs/operators';
-import { AlertService, ConfigService, UtilsService, DatabaseService, MessageService } from '@app/core/services';
-import { Store } from '@main/database/entity/Store.schema';
-import { QueryOptions } from '@main/types';
-
-@Component({
-  selector: 'app-grid',
-  templateUrl: './grid.component.html',
-  styleUrls: ['./grid.component.scss']
-})
-export class GridComponent implements OnInit, OnDestroy {
-
-  @ViewChild('gridElement', { static: true }) scrollElement: ElementRef;
-
-  resultSet: Store[] = [];
-  queryOptions: QueryOptions;
-
-  isLoading = true;
-  isWindows = false;
-
-  constructor(
-    private utils: UtilsService,
-    private alertService: AlertService,
-    private configService: ConfigService,
-    private messageService: MessageService,
-    private databaseService: DatabaseService,
-  ) {
-    this.isWindows = this.configService.getIsWindows();
-  }
-
-  ngOnInit() {
-    const scrollElement: Element = this.scrollElement.nativeElement;
-
-    this.databaseService.watchStoreResult$.pipe(delay(1e3 / 5)).subscribe((result: Store) => {
-      if (result?.id) {
-        const el: HTMLDivElement = document.querySelector(`[data-row="${result.id}"]`);
-        if (el) {
-          this.utils.scrollTo(scrollElement, el.offsetTop);
-        }
-      }
-    });
-
-    this.databaseService.watchStoreResultSet$.subscribe((result: Store[]) => {
-      this.resultSet = result;
-      this.isLoading = false;
-      scrollElement.scrollTop = 0;
-    });
-
-    // this.databaseService.setOrder('id', 'ASC');
-
-    this.databaseService.watchQueryOptions$.subscribe((result: QueryOptions) => this.queryOptions = result);
-  }
-
-  ngOnDestroy() {
-    this.resultSet = [];
-  }
-
-  onRowClick(id: number): void {
-    this.databaseService.setStoreId(id);
-  }
-
-  handleSort(column: string): void {
-    const collectionId = this.databaseService.getCollectionId();
-    const queryOptions: QueryOptions = this.databaseService.getQueryOptions();
-
-    this.databaseService.setOrder(column, (queryOptions.order.direction === 'DESC') ? 'ASC' : 'DESC').setWhere('collection_id', collectionId).run();
-  }
-
-  handleActivate(event: Event, item: Store, temporary: boolean = false): void {
-    const target = event.target as HTMLElement;
-    const input = target.firstChild as HTMLInputElement;
-    const checked = input.checked ? true : false;
-
-    input.checked = (checked) ? false : true;
-
-    if (!item.installable) {
-      this.alertService.warning('Only (OpenType) and (TrueType) fonts are supported.');
-      return;
-    }
-
-    const files = [];
-
-    files.push({
-      id: item.id,
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      file_path: item.file_path
-    });
-
-    const options = { files, activate: !checked, temporary };
-
-    this.messageService.fontActivation(options).then(() => {
-      const message = (checked) ? `Successfully deactivated ${item.file_name}.` : `Successfully activated ${item.file_name}.`;
-      this.messageService.log(message, 1);
-      this.alertService.success(message);
-    }).catch((err) => this.alertService.error(err));
-  }
-}

package/src/app/pages/main/inspect/inspect.component.html

@@ -1,7 +0,0 @@
-<ng-container [ngSwitch]="componentName">
-  <div>
-    <app-glyph-list [fontObject]="fontObject" [fontColor]="fontColor" *ngSwitchCase="'glyph-list'"></app-glyph-list>
-    <app-typescale [fontObject]="fontObject" [fontFamily]="fontFamily" [latestNews]="latestNews" *ngSwitchCase="'typescale'"></app-typescale>
-    <app-pairing [fontObject]="fontObject" [fontFamily]="fontFamily" [latestNews]="latestNews" *ngSwitchCase="'pairing'"></app-pairing>
-  </div>
-</ng-container>

package/src/app/pages/main/inspect/inspect.component.scss

@@ -1,3 +0,0 @@
-:host {
-    margin-top: -1px;
-}

package/src/app/pages/main/inspect/inspect.component.ts

@@ -1,66 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { DatabaseService, FontService, NewsService, PresentationService } from '@app/core/services';
-import { NewsArticlesType, NewsType } from '@main/types';
-import { Store } from '@main/database/entity/Store.schema';
-
-@Component({
-  selector: 'app-inspect',
-  templateUrl: './inspect.component.html',
-  styleUrls: ['./inspect.component.scss']
-})
-export class InspectComponent implements OnInit, OnDestroy {
-
-  componentName = 'glyph-list';
-  componentList = ['glyph-list', 'typescale'];
-
-  fontObject: opentype.Font;
-  fontFamily: string;
-  fontColor: string;
-  latestNews: NewsArticlesType[] = [];
-
-  constructor(
-    private fontService: FontService,
-    private databaseService: DatabaseService,
-    private newsService: NewsService,
-    private presentationService: PresentationService
-  ) { }
-
-  ngOnInit() {
-    this.databaseService.watchStoreResult$.subscribe((result: Store) => {
-      if (result) {
-        this.fontFamily = result.file_name.replace(/\.[^/.]+$/, '');
-      }
-    });
-
-    this.fontService.watchFontObject$.subscribe((result: opentype.Font) => {
-      if (result) {
-        this.fontObject = result;
-      }
-    });
-
-    this.newsService.watchLatestNews$.subscribe((result: NewsType) => {
-      if (result?.articles?.length) {
-        this.latestNews = result.articles;
-      }
-    });
-
-    this.presentationService.watchFontColor$.subscribe((value) => this.fontColor = value);
-
-    this.presentationService._inspectComponent.subscribe((value: string) => {
-      this.componentName = this.componentList.includes(value) ? value : this.componentName;
-    });
-  }
-
-  ngOnDestroy() {
-    this.fontObject = null;
-  }
-
-  startsWithNumber(str: string): boolean {
-    return /^\d/.test(str);
-  }
-
-  onComponentSwitch(): void {
-    this.componentName = (this.componentName === 'glyph-list') ? 'typescale' : 'glyph-list';
-    this.presentationService.setInspectComponent(this.componentName);
-  }
-}

package/src/app/pages/main/main-routing.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Routes, RouterModule } from '@angular/router';
-import { LayoutService } from '../../layout/layout.service';
-import { MainComponent } from './main.component';
-
-const mainModuleRoutes: Routes = [{
-  path: '',
-  redirectTo: '/main',
-  pathMatch: 'full'
-}, {
-  path: 'main',
-  component: MainComponent,
-}];
-
-const routes: Routes = [
-  LayoutService.childRoutes(mainModuleRoutes)
-];
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule, 
-    RouterModule.forChild(routes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class MainRoutingModule { }

package/src/app/pages/main/main.component.html

@@ -1,6 +0,0 @@
-<div class="panel" [class.preview]="previewEnabled" [class.inspect]="inspectEnabled" [class.toolbar]="toolbarEnabled" [class.grid]="gridEnabled">
-  <app-preview></app-preview>
-  <app-inspect></app-inspect>
-  <app-toolbar></app-toolbar>
-  <app-grid></app-grid>
-</div>