fontastic 0.1.3

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

@@ -0,0 +1,60 @@
+@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/header/header.component.ts

@@ -0,0 +1,229 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlertService, AuthService, ConfigService, DatabaseService, GravatarService, MessageService, ModalService, PresentationService, UtilsService } from '@app/core/services';
+import { AuthUser } from '@main/types';
+import { StorageType } from '@main/enums';
+import { Collection } from '@main/database/entity';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  collectionId: number;
+  currentUser: AuthUser;
+  gravatarUrl: string;
+
+  gridEnabled = true;
+  toolbarEnabled = true;
+  previewEnabled = true;
+  inspectEnabled = true;
+  navigationEnabled = true;
+  asideEnabled = true;
+
+  constructor(
+    private router: Router,
+    private utils: UtilsService,
+    private alertService: AlertService,
+    private authService: AuthService,
+    private configService: ConfigService,
+    private messageService: MessageService,
+    private modalService: ModalService,
+    private databaseService: DatabaseService,
+    private presentationService: PresentationService,
+    private gravatar: GravatarService
+  ) { }
+
+  ngOnInit() {
+    this.databaseService.watchCollectionResultSet$.subscribe((results: Collection[]) => {
+      if (results) {
+        const collectionId = this.databaseService.getCollectionId();
+        if (collectionId) {
+          const hasChildren = results.some(x => x.parent_id === collectionId);
+          this.collectionId = (hasChildren) ? 0 : collectionId;
+        }
+      }
+    });
+    this.authService.watchAuthUser$.subscribe((result: AuthUser) => {
+      if (result?.email) {
+        this.currentUser = result;
+        this.gravatarUrl = this.gravatar.url(result.email, 128, 'mm');
+      }
+    });
+    this.presentationService._asideEnabled.subscribe((result) => {
+      this.asideEnabled = result;
+    });
+    this.presentationService._navigationEnabled.subscribe((result) => {
+      this.navigationEnabled = result;
+    });
+    this.presentationService._gridEnabled.subscribe((result) => {
+      this.gridEnabled = result;
+    });
+    this.presentationService._toolbarEnabled.subscribe((result) => {
+      this.toolbarEnabled = result;
+    });
+    this.presentationService._previewEnabled.subscribe((result) => {
+      this.previewEnabled = result;
+    });
+    this.presentationService._inspectEnabled.subscribe((result) => {
+      this.inspectEnabled = result;
+    });
+    this.presentationService._defaultTheme.subscribe((result) => this.enableTheme(result));
+  }
+
+  handleAddFonts(event: Event, collectionId: number): void {
+    event.stopPropagation();
+
+    const config = this.configService.get(StorageType.Options);
+    const importType = (config?.import?.type) ? config.import.type : 'ask';
+
+    let settings = {
+      type: 'question',
+      buttons: ['Cancel', 'Select files', 'Select folders'],
+      defaultId: 2,
+      title: 'Select Fonts',
+      message: 'Do you want to select files or folders?'
+    };
+
+    if (importType === 'ask') {
+      settings = {
+        ...settings,
+        ...{
+          checkboxLabel: 'Add fonts to catalog.',
+          checkboxChecked: true
+        }
+      };
+    }
+
+    this.messageService.showMessageBox(settings).then((response: object | any) => {
+      if (response?.response > 0) {
+        const isFiles = (response.response === 1) ? true : false;
+        const options = (isFiles) ? { properties: ['openFile', 'multiSelections'] } : { properties: ['openDirectory', 'multiSelections'] };
+        this.messageService.showOpenDialog(options).then((dialog: object | any) => {
+          if (dialog.filePaths.length) {
+            const addToCatalog = (importType === 'ask') ? response.checkboxChecked : (importType === 'catalog') ? true : false;
+            if (isFiles) {
+              this.openFiles(collectionId, { files: dialog.filePaths, addToCatalog });
+            } else {
+              this.openFolders(collectionId, { folders: dialog.filePaths, addToCatalog });
+            }
+          }
+        });
+      }
+    });
+  }
+
+  openFiles(collectionId: number, options: any): void {
+    this.presentationService.setLoadingSpinner(true);
+    this.alertService.info('Adding fonts please wait..', 1e3, true);
+    this.messageService.scanFiles({ ...options, collectionId }).then(this.utils.delay(1e3)).then(() => {
+      this.messageService.collectionUpdateCount(collectionId).then((result: Collection[]) => this.databaseService.setCollectionResultSet(result));
+      this.presentationService.setLoadingSpinner(false);
+      this.alertService.dismiss();
+      this.messageService.log(`Added fonts to collection id #${collectionId}.`, 1);
+
+      this.messageService.collectionEnable(collectionId, { enabled: true }).then((results: Collection[]) => {
+        this.databaseService.resetPage(1);
+        this.databaseService.setCollectionId(collectionId);
+        this.databaseService.setCollectionResultSet(results);
+      });
+
+    });
+  }
+
+  openFolders(collectionId: number, options: any): void {
+    this.presentationService.setLoadingSpinner(true);
+    this.alertService.info('Adding fonts please wait..', 1e3, true);
+    this.messageService.scanFolders({ ...options, collectionId }).then(this.utils.delay(1e3)).then(() => {
+      this.messageService.collectionUpdateCount(collectionId).then((result: Collection[]) => this.databaseService.setCollectionResultSet(result));
+      this.presentationService.setLoadingSpinner(false);
+      this.alertService.dismiss();
+      this.messageService.log(`Added folders to collection id #${collectionId}.`, 1);
+
+      this.messageService.collectionEnable(collectionId, { enabled: true }).then((results: Collection[]) => {
+        this.databaseService.resetPage(1);
+        this.databaseService.setCollectionId(collectionId);
+        this.databaseService.setCollectionResultSet(results);
+      });
+
+    });
+  }
+
+  handleCreateCollection(_event: Event): void {
+    this.modalService.open('collection-create');
+  }
+
+  handleLogout(_event: Event): void {
+    this.authService.logout();
+    this.router.navigate(['/settings']);
+  }
+
+  handleToggleAside(_event: Event): void {
+    this.presentationService.setAsideEnabled(!this.asideEnabled);
+    this.presentationService.saveLayoutSettings();
+  }
+
+  handleToggleNavigation(_event: Event): void {
+    this.presentationService.setNavigationEnabled(!this.navigationEnabled);
+    this.presentationService.saveLayoutSettings();
+  }
+
+  handleTogglePreview(_event: Event): void {
+    this.presentationService.setPreviewEnabled(!this.previewEnabled);
+    this.presentationService.saveLayoutSettings();
+  }
+
+  handleToggleInspect(_event: Event): void {
+    this.presentationService.setInspectEnabled(!this.inspectEnabled);
+    this.presentationService.saveLayoutSettings();
+  }
+
+  handleToggleToolbar(_event: Event): void {
+    this.presentationService.setToolbarEnabled(!this.toolbarEnabled);
+    this.presentationService.saveLayoutSettings();
+  }
+
+  handleToggleGrid(_event: Event): void {
+    this.presentationService.setGridEnabled(!this.gridEnabled);
+    this.presentationService.saveLayoutSettings();
+  }
+
+  enableTheme(theme: string): void {
+    const body = document.querySelector('body');
+    const themes = this.presentationService.getThemes();
+    if (themes.map(item => item.key).includes(theme)) {
+      body.setAttribute('data-theme', theme);
+    }
+  }
+
+  handleSwitchTheme(_event: Event): void {
+    const body = document.querySelector('body') as HTMLBodyElement;
+    const attr = body.getAttribute('data-theme');
+    const themes = this.presentationService.getThemes();
+
+    let idx = themes.map(item => item.key).indexOf(attr);
+
+    if (idx < themes.length - 1) {
+      idx++;
+    } else {
+      idx = 0;
+    }
+
+    if (themes[idx]) {
+      const theme: string = themes[idx].key;
+      body.setAttribute('data-theme', theme);
+      this.presentationService.setTheme(theme);
+      this.presentationService.setThemeVars(theme);
+    }
+  }
+
+  handleToggleSearch(_event: Event): void {
+    this.presentationService._asideComponent.next('search');
+  }
+
+  handleLoadSettings(): void {
+    this.modalService.open('system-settings');
+  }
+}

package/src/app/layout/layout.component.html

@@ -0,0 +1,14 @@
+<div class="application main" [class.navigation]="navigationEnabled" [class.aside]="asideEnabled">
+  <app-header></app-header>
+  <app-navigation></app-navigation>
+  <main>
+    <router-outlet></router-outlet>
+  </main>
+  <app-aside></app-aside>
+  <app-footer></app-footer>
+</div>
+
+<app-glyph></app-glyph>
+<app-settings></app-settings>
+<app-update-collection></app-update-collection>
+<app-create-collection></app-create-collection>

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

@@ -0,0 +1,119 @@
+@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.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit {
+
+  navigationEnabled = true;
+  asideEnabled = true;
+
+  constructor(
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._navigationEnabled.subscribe((result) => this.navigationEnabled = result);
+    this.presentationService._asideEnabled.subscribe((result) => this.asideEnabled = result);
+  }
+
+}

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,13 @@
+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/layout/navigation/navigation.component.html

@@ -0,0 +1,142 @@
+<nav class="component border-right">
+  <div class="component__panel">
+
+    <figure class="figure-stats border-bottom" [class.collapsed]="statsCollapsed === true">
+
+      <figcaption class="border-bottom">
+        <span class="material-icons" (click)="toggleCollapse($event)" data-figure-stats>
+          <ng-container *ngIf="statsCollapsed === true; else elseStatsCollapsed">
+            arrow_drop_down
+          </ng-container>
+          <ng-template #elseStatsCollapsed>
+            arrow_right
+          </ng-template>
+        </span>
+        <span class="grow">System Statistics</span>
+        <span class="flex items-center justify-end mr-1 material-icons-rounded">
+          <span class="material-icons cursor-pointer" (click)="toggleFigureCollapse()" title="Collapse">more_horiz</span>
+        </span>
+      </figcaption>
+
+      <ul class="statistics">
+        <li>
+          <a href="#" (click)="handleClickAll($event)">
+            <span class="material-icons">playlist_add</span>
+            <span class="statistics__title ml-[5px] w-full" title="All Collections">Font Count</span>
+            <span class="statistics__count">{{ rowCount }}</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" (click)="handleClickFavorites($event)">
+            <span class="material-icons">playlist_add</span>
+            <span class="statistics__title ml-[5px] w-full" title="My Favorites">My Favorites</span>
+            <span class="statistics__count">{{ favoriteCount }}</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" (click)="handleClickSystem($event)">
+            <span class="material-icons">playlist_add</span>
+            <span class="statistics__title ml-[5px] w-full" title="System Fonts">System Fonts</span>
+            <span class="statistics__count">{{ systemCount }}</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" (click)="handleClickActivated($event)">
+            <span class="material-icons">playlist_add</span>
+            <span class="statistics__title ml-[5px] w-full" title="Activated Fonts">Activated Fonts</span>
+            <span class="statistics__count">{{ activatedCount }}</span>
+          </a>
+        </li>
+      </ul>
+
+    </figure>
+
+    <figure class="figure-folders" [class.collapsed]="foldersCollapsed === true">
+      <figcaption class="border-bottom">
+        <span class="material-icons" (click)="toggleCollapse($event)" data-figure-folders>
+          <ng-container *ngIf="foldersCollapsed === true; else elseFoldersCollapsed">
+            arrow_drop_down
+          </ng-container>
+          <ng-template #elseFoldersCollapsed>
+            arrow_right
+          </ng-template>
+        </span>
+        <span class="grow">Font Collections</span>
+        <span class="flex items-center justify-end mr-1 material-icons-rounded">
+          <span class="material-icons cursor-pointer" (click)="toggleDetailsOpen()" title="Collapse">more_horiz</span>
+        </span>
+      </figcaption>
+
+      <div *ngIf="resultSet.length" class="flex flex-col w-full h-full overflow-hidden">
+
+        <div class="hover-scrollbox-x hover-scrollbox-y p-0">
+          <ng-template #recursiveList let-items>
+            <ng-container *ngFor="let item of items">
+              <details [attr.open]="item.collapsed ? '1' : null" [attr.data-id]="item.id">
+
+                <summary [class.selected]="item.enabled">
+                  <span class="flex items-center justify-center">
+                    <span class="material-icons collapsed-icon cursor-pointer" (click)="handleCollapse($event, item.id)"></span>
+                  </span>
+                  <span class="flex grow w-full cursor-pointer" [attr.title]="item.title" (click)="handleNavigate($event, item.id)">{{item.title}}</span>
+                  <span class="flex items-center justify-center mr-1.5" *ngIf="item.enabled" >
+                    <span class="material-icons cursor-pointer" (click)="handleUpdate($event)" [attr.data-id]="item.id" title="Update Collection">more_horiz</span>
+                  </span>
+                </summary>
+
+                <ng-container *ngIf="item.children.length; else elseif1">
+                  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
+                </ng-container>
+                <ng-template #elseif1>
+                  <ul>
+                    <li class="flex items-center justify-start"><span>Font count:</span>
+                      <span>{{item.storeCount}}</span>
+                    </li>
+                    <li class="flex items-center justify-start"><span>Installable:</span>
+                      <span>{{item.installableCount}}</span>
+                    </li>
+                    <li class="flex items-center justify-start"><span>Activated:</span>
+                      <span>{{item.activatedCount}}</span>
+                    </li>
+                    <li class="flex items-center justify-start"><span>Favorited:</span>
+                      <span>{{item.favoriteCount}}</span>
+                    </li>
+                    <li class="flex items-center justify-start"><span>Temporary :</span>
+                      <span>{{item.temporaryCount}}</span>
+                    </li>
+                  </ul>
+                </ng-template>
+
+              </details>
+            </ng-container>
+          </ng-template>
+
+          <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: resultSet }"></ng-container>
+
+        </div>
+
+      </div>
+    </figure>
+
+    <figure class="figure-options hidden" [class.collapsed]="optionsCollapsed === true">
+      <figcaption class="border-bottom">
+        <span class="material-icons" (click)="toggleCollapse($event)" data-figure-options>
+          <ng-container *ngIf="optionsCollapsed === true; else elseOptionsCollapsed">
+            arrow_drop_down
+          </ng-container>
+          <ng-template #elseOptionsCollapsed>
+            arrow_right
+          </ng-template>
+        </span>
+        <span class="grow">Folder Options</span>
+        <span class="flex items-center justify-end mr-3">{{resultSet.length}}</span>
+      </figcaption>
+      <ul class="w-full py-2 hidden">
+        <li class="py-1 px-4">Sort collection</li>
+        <li class="py-1 px-4">Sort collection</li>
+        <li class="py-1 px-4">Sort collection</li>
+      </ul>
+    </figure>
+
+  </div>
+</nav>