Added support for HTML, CSS and JSON to Prettier [#539]

comixed-web/package.json

@@ -8,13 +8,21 @@
     "test": "ng test --code-coverage",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "code-cleanup": "prettier --write 'src/app/**/*.ts'"
+    "code-cleanup": "prettier --write 'src/app/**/*.{ts,json,html,scss}'"
   },
   "prettier": {
     "singleQuote": true,
     "useTabs": false,
     "bracketSpacing": true,
-    "jsxBracketSameLine": true
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular",
+          "singleQuote": false
+        }
+      }
+    ]
   },
   "private": true,
   "dependencies": {

comixed-web/src/app/app.component.html

@@ -1,9 +1,10 @@
-<div *ngIf="busy"
-     class="cx-busy-overlay cx-width-100 cx-height-100">
+<div *ngIf="busy" class="cx-busy-overlay cx-width-100 cx-height-100">
   <div class="cx-centered">
-    <mat-progress-spinner diameter="100"
-                          mode="indeterminate"
-                          color="accent"></mat-progress-spinner>
+    <mat-progress-spinner
+      diameter="100"
+      mode="indeterminate"
+      color="accent"
+    ></mat-progress-spinner>
   </div>
 </div>
 <cx-navigation-bar [user]="user"></cx-navigation-bar>

comixed-web/src/app/components/navigation-bar/navigation-bar.component.html

@@ -1,73 +1,66 @@
 <mat-toolbar class="cx-width-100">
-  <button *ngIf="!user"
-          mat-icon-button
-          color="primary"
-          [matTooltip]="'user.login-user.login-tooltip' | translate"
-          (click)="onLogin()">
+  <button
+    *ngIf="!user"
+    mat-icon-button
+    color="primary"
+    [matTooltip]="'user.login-user.login-tooltip' | translate"
+    (click)="onLogin()"
+  >
     <mat-icon>login</mat-icon>
   </button>
-  <button *ngIf="!!user"
-          mat-icon-button
-          [matMenuTriggerFor]="menu">
+  <button *ngIf="!!user" mat-icon-button [matMenuTriggerFor]="menu">
     <mat-icon>more_vert</mat-icon>
   </button>
   <mat-label class="cx-spacer">ComiXed</mat-label>
   <mat-label *ngIf="!!user">
-    {{ 'app.logged-in' | translate: {email: user.email} }}
-    <button mat-icon-button
-            color="warn"
-            [matTooltip]="'user.login-user.logout-tooltip' | translate"
-            (click)="onLogout()">
+    {{ "app.logged-in" | translate: { email: user.email } }}
+    <button
+      mat-icon-button
+      color="warn"
+      [matTooltip]="'user.login-user.logout-tooltip' | translate"
+      (click)="onLogout()"
+    >
       <mat-icon>logout</mat-icon>
     </button>
   </mat-label>
 </mat-toolbar>
 
 <mat-menu #menu="matMenu">
-  <button *ngIf="isReader"
-          mat-menu-item
-          [matMenuTriggerFor]="libraryMenu">
+  <button *ngIf="isReader" mat-menu-item [matMenuTriggerFor]="libraryMenu">
     <mat-icon>local_library</mat-icon>
-    <mat-label>{{ 'menu.library-menu.root' | translate }}</mat-label>
+    <mat-label>{{ "menu.library-menu.root" | translate }}</mat-label>
   </button>
-  <button *ngIf="isAdmin"
-          mat-menu-item
-          [matMenuTriggerFor]="adminMenu">
+  <button *ngIf="isAdmin" mat-menu-item [matMenuTriggerFor]="adminMenu">
     <mat-icon>admin_panel_settings</mat-icon>
-    <mat-label>{{ 'menu.admin-menu.root' | translate }}</mat-label>
+    <mat-label>{{ "menu.admin-menu.root" | translate }}</mat-label>
   </button>
-  <button *ngIf="isReader"
-          mat-menu-item
-          [matMenuTriggerFor]="optionsMenu">
+  <button *ngIf="isReader" mat-menu-item [matMenuTriggerFor]="optionsMenu">
     <mat-icon>settings</mat-icon>
-    <mat-label>{{ 'menu.options-menu.root' | translate }}</mat-label>
+    <mat-label>{{ "menu.options-menu.root" | translate }}</mat-label>
   </button>
 </mat-menu>
 
 <mat-menu #libraryMenu="matMenu">
-  <button mat-menu-item
-          [routerLink]="['library']">
+  <button mat-menu-item [routerLink]="['library']">
     <mat-icon>library_books</mat-icon>
-    <mat-label>{{ 'menu.library-menu.all-comics' | translate }}</mat-label>
+    <mat-label>{{ "menu.library-menu.all-comics" | translate }}</mat-label>
   </button>
 </mat-menu>
 
 <mat-menu #adminMenu="matMenu">
-  <button mat-menu-item
-          [routerLink]="['admin', 'import']">
+  <button mat-menu-item [routerLink]="['admin', 'import']">
     <mat-icon>import_export</mat-icon>
     <mat-label>{{
-      'menu.admin-menu.import-comic-files' | translate
-      }}</mat-label>
+      "menu.admin-menu.import-comic-files" | translate
+    }}</mat-label>
   </button>
 </mat-menu>
 
 <mat-menu #optionsMenu="matMenu">
-  <button mat-menu-item
-          (click)="onShowDisplayOptions()">
+  <button mat-menu-item (click)="onShowDisplayOptions()">
     <mat-icon>tv</mat-icon>
     <mat-label>{{
-      'menu.options-menu.show-options-panel' | translate
-      }}</mat-label>
+      "menu.options-menu.show-options-panel" | translate
+    }}</mat-label>
   </button>
 </mat-menu>

comixed-web/src/app/core/components/comic-detail-card/comic-detail-card.component.html

@@ -1,21 +1,24 @@
-<mat-card [style.width]="imageWidth"
-          [style.height]="imageHeight">
-  <mat-card-title class="cx-text-nowrap">{{title}}</mat-card-title>
-  <mat-card-subtitle *ngIf="detailLink"><a [routerLink]="detailLink">{{"text.view-details"|translate}}</a>
+<mat-card [style.width]="imageWidth" [style.height]="imageHeight">
+  <mat-card-title class="cx-text-nowrap">{{ title }}</mat-card-title>
+  <mat-card-subtitle *ngIf="detailLink"
+    ><a [routerLink]="detailLink">{{ "text.view-details" | translate }}</a>
   </mat-card-subtitle>
   <mat-card-content>
-    <img *ngIf="!!imageUrl"
-         [class.comic-detail-card-blurred]="blurred"
-         [src]="imageUrl"
-         [style.width]="'100%'"
-         [style.height]="'auto'"
-         [alt]="title"/>
-    <div *ngIf="!!description"
-         [innerHTML]="description"></div>
-    <mat-progress-spinner *ngIf="busy"
-                          class="comic-detail-card-busy-indicator"
-                          diameter="100"
-                          mode="indeterminate"
-                          color="accent"></mat-progress-spinner>
+    <img
+      *ngIf="!!imageUrl"
+      [class.comic-detail-card-blurred]="blurred"
+      [src]="imageUrl"
+      [style.width]="'100%'"
+      [style.height]="'auto'"
+      [alt]="title"
+    />
+    <div *ngIf="!!description" [innerHTML]="description"></div>
+    <mat-progress-spinner
+      *ngIf="busy"
+      class="comic-detail-card-busy-indicator"
+      diameter="100"
+      mode="indeterminate"
+      color="accent"
+    ></mat-progress-spinner>
   </mat-card-content>
 </mat-card>

comixed-web/src/app/core/components/comic-page/comic-page.component.html

@@ -1,10 +1,12 @@
 <mat-card>
-  <mat-card-title>{{imageTitle}}</mat-card-title>
+  <mat-card-title>{{ imageTitle }}</mat-card-title>
   <mat-card-content>
-    <img [src]="imageUrl"
-         [alt]="imageUrl"
-         [style.height]="imageHeight"
-         [style.width]="imageWidth"
-         (click)="onClick()"/>
+    <img
+      [src]="imageUrl"
+      [alt]="imageUrl"
+      [style.height]="imageHeight"
+      [style.width]="imageWidth"
+      (click)="onClick()"
+    />
   </mat-card-content>
 </mat-card>

comixed-web/src/app/core/components/confirmation/confirmation.component.html

@@ -1,22 +1,18 @@
 <h1 mat-dialog-title>
-  {{title}}
+  {{ title }}
 </h1>
 
 <div mat-dialog-content>
-  <p>{{message}}</p>
+  <p>{{ message }}</p>
 </div>
 
 <div mat-dialog-actions>
-  <button mat-icon-button
-          color="accent"
-          (click)="onDecline()">
+  <button mat-icon-button color="accent" (click)="onDecline()">
     <mat-icon>cancel</mat-icon>
-    <mat-label>{{noButton}}</mat-label>
+    <mat-label>{{ noButton }}</mat-label>
   </button>
-  <button mat-icon-button
-          color="primary"
-          (click)="onConfirm()">
+  <button mat-icon-button color="primary" (click)="onConfirm()">
     <mat-icon>check</mat-icon>
-    <mat-label>{{yesButton}}</mat-label>
+    <mat-label>{{ yesButton }}</mat-label>
   </button>
 </div>

comixed-web/src/app/library/components/comic-display-options/comic-display-options.component.html

@@ -1,35 +1,43 @@
 <form [formGroup]="comicDisplayForm">
   <mat-card>
-    <mat-card-title>{{"display-options.title"|translate}}</mat-card-title>
+    <mat-card-title>{{ "display-options.title" | translate }}</mat-card-title>
     <mat-card-content>
       <div class="cx-width-100">
-        <mat-label>{{"display-options.label.page-size"|translate}}</mat-label>
-        <mat-slider thumbLabel
-                    formControlName="pageSize"
-                    [displayWith]="formatCoverSizeLabel"
-                    tickInterval="1"
-                    min="200"
-                    max="600"
-                    [style.width]="'100%'"
-                    (input)="onDisplaySizeChange($event.value)"
-                    (valueChange)="onDisplaySizeChange($event)"></mat-slider>
+        <mat-label>{{
+          "display-options.label.page-size" | translate
+        }}</mat-label>
+        <mat-slider
+          thumbLabel
+          formControlName="pageSize"
+          [displayWith]="formatCoverSizeLabel"
+          tickInterval="1"
+          min="200"
+          max="600"
+          [style.width]="'100%'"
+          (input)="onDisplaySizeChange($event.value)"
+          (valueChange)="onDisplaySizeChange($event)"
+        ></mat-slider>
       </div>
     </mat-card-content>
     <mat-card-actions>
-      <button id="save-display-config-button"
-              mat-flat-button
-              color="primary"
-              [disabled]="!comicDisplayForm.valid"
-              (click)="onSaveChanges()">
+      <button
+        id="save-display-config-button"
+        mat-flat-button
+        color="primary"
+        [disabled]="!comicDisplayForm.valid"
+        (click)="onSaveChanges()"
+      >
         <mat-icon>save</mat-icon>
-        <mat-label>{{"button.save"|translate}}</mat-label>
+        <mat-label>{{ "button.save" | translate }}</mat-label>
       </button>
-      <button id="cancel-display-config-button"
-              mat-flat-button
-              color="warn"
-              (click)="onCancelChanges()">
+      <button
+        id="cancel-display-config-button"
+        mat-flat-button
+        color="warn"
+        (click)="onCancelChanges()"
+      >
         <mat-icon>cancel</mat-icon>
-        <mat-label>{{"button.cancel"|translate}}</mat-label>
+        <mat-label>{{ "button.cancel" | translate }}</mat-label>
       </button>
     </mat-card-actions>
   </mat-card>