fix(print): Print options fix Issue #189 (#238)

* Issue #189 Print options fix * Issue #189 Removed alert * Issue #189 Ajusted margins * Removed '!important' and unused modules
infra-geo-ouverte · Dec 6, 2018 · 6f8921e · 6f8921e
1 parent a79637c
commit 6f8921e
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "file-saver": "^1.3.8",
     "hammerjs": "^2.0.8",
     "html2canvas": "^1.0.0-alpha.12",
-    "jspdf": "^1.3.5",
+    "jspdf": "^1.4.1",
     "jszip": "^3.1.5",
     "jwt-decode": "^2.2.0",
     "moment": "^2.22.2",

diff --git a/projects/geo/src/lib/print/print-form/print-form.component.html b/projects/geo/src/lib/print/print-form/print-form.component.html
@@ -19,18 +19,18 @@
   </div>
 
   <div class="igo-input-container">
-    <mat-checkbox class="horizontal-left right-padding" formControlName="showProjection">
-        {{'igo.geo.printForm.showProjection' | translate}}
-    </mat-checkbox>
-     <mat-checkbox class="horizontal-left right-padding" formControlName="showScale">
-        {{'igo.geo.printForm.showScale' | translate}}
-    </mat-checkbox>
-     <mat-checkbox class="horizontal-left right-padding" formControlName="showLegend">
-        {{'igo.geo.printForm.showLegend' | translate}}
-    </mat-checkbox>
-    <mat-checkbox class="horizontal-left right-padding" formControlName="doZipFile" [style.display]="isPrintService ? 'none' : 'inline'" >
-       {{'igo.geo.printForm.doZipFile' | translate}}
-   </mat-checkbox>
+    <mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="showProjection">
+      {{'igo.geo.printForm.showProjection' | translate}}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="showScale">
+      {{'igo.geo.printForm.showScale' | translate}}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="showLegend">
+      {{'igo.geo.printForm.showLegend' | translate}}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="print-option horizontal-left right-padding" formControlName="doZipFile" [style.display]="isPrintService ? 'none' : ''" >
+      {{'igo.geo.printForm.doZipFile' | translate}}
+    </mat-slide-toggle>
   </div>
 
   <div class="igo-input-container">
@@ -82,11 +82,15 @@
   </div>
 
   <div class="igo-input-container" [style.display]="isPrintService ? 'block' : 'none'">
-    <mat-radio-group formControlName="orientation" class="horizontal">
-      <mat-radio-button *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
-        {{('igo.geo.printForm.' + orientation.value) | translate}}
-      </mat-radio-button>
-    </mat-radio-group>
+    <mat-form-field>
+      <mat-select
+        formControlName="orientation"
+        placeholder="{{'igo.geo.printForm.orientation' | translate}}">
+        <mat-option *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
+          {{('igo.geo.printForm.' + orientation.value) | translate}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
 
   <div class="igo-form-button-group print-button-top-padding">

diff --git a/projects/geo/src/lib/print/print-form/print-form.component.scss b/projects/geo/src/lib/print/print-form/print-form.component.scss
@@ -4,20 +4,21 @@ mat-form-field {
   width: 100%;
 }
 
-mat-checkbox.horizontal-left {
+mat-slide-toggle.horizontal-left {
   text-align: left;
    @include mobile {
     text-align: inherit;
   }
 }
 
- mat-checkbox.horizontal-left span {
-  padding: 0 8px;
+mat-slide-toggle ::ng-deep .mat-slide-toggle-content {
+  font-size: 100%;
 }
 
-mat-checkbox, mat-radio-button {
-  padding-right: 20px;
-  padding-bottom: 10px;
+.print-option {
+  display: block;
+  margin-right: 10px;
+  margin-bottom: 15px;
 }
 
 .print-button-top-padding {
@@ -30,8 +31,4 @@ mat-checkbox, mat-radio-button {
 
 .igo-form-button-group {
   text-align: center;
-}
-
-mat-checkbox ::ng-deep label.mat-checkbox-layout {
-    padding-bottom: 10px;
-}
+}
diff --git a/projects/geo/src/lib/print/print.module.ts b/projects/geo/src/lib/print/print.module.ts
@@ -8,8 +8,7 @@ import {
   MatOptionModule,
   MatInputModule,
   MatFormFieldModule,
-  MatRadioModule,
-  MatCheckboxModule
+  MatSlideToggleModule
 } from '@angular/material';
 
 import { IgoLanguageModule } from '@igo2/core';
@@ -31,8 +30,7 @@ import { PrintService } from './shared/print.service';
     MatOptionModule,
     MatInputModule,
     MatFormFieldModule,
-    MatRadioModule,
-    MatCheckboxModule,
+    MatSlideToggleModule,
     IgoLanguageModule,
     IgoKeyValueModule
   ],

diff --git a/projects/geo/src/lib/print/shared/print.service.ts b/projects/geo/src/lib/print/shared/print.service.ts
@@ -71,7 +71,7 @@ export class PrintService {
       (status: SubjectStatus) => {
         if (status === SubjectStatus.Done) {
           if (options.showLegend === true) {
-            this.addLegend(doc, map);
+            this.addLegend(doc, map, margins);
           } else {
             this.saveDoc(doc);
           }
@@ -236,8 +236,10 @@ export class PrintService {
   /**
   Add the legend to the document
   @param  doc - Pdf document where legend will be added
+  @param  map - Map of the app
+  @param  margins - Page margins
   */
-  private addLegend(doc: jsPDF, map: IgoMap) {
+  private addLegend(doc: jsPDF, map: IgoMap, margins: Array<number>) {
     const that = this;
     // Get html code for the legend
     const width = doc.internal.pageSize.width;
@@ -256,7 +258,7 @@ export class PrintService {
 
       imgData = canvas.toDataURL('image/png');
       doc.addPage();
-      const imageSize = this.getImageSizeToFitPdf(doc, canvas);
+      const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
       doc.addImage(imgData, 'PNG', 10, position, imageSize[0], imageSize[1]);
       that.saveDoc(doc);
       div.parentNode.removeChild(div); // remove temp div (IE style)
@@ -280,7 +282,7 @@ export class PrintService {
 
 
     if (image !== undefined) {
-      const imageSize = this.getImageSizeToFitPdf(doc, canvas);
+      const imageSize = this.getImageSizeToFitPdf(doc, canvas, margins);
       doc.addImage(image, 'JPEG', margins[3], margins[0], imageSize[0], imageSize[1]);
       doc.rect(margins[3], margins[0], imageSize[0], imageSize[1]);
     }
@@ -558,11 +560,12 @@ export class PrintService {
   Calculate the best Image size to fit in pdf
   @param doc - Pdf Document
   @param canvas - Canvas of image
+  @param margins - Page margins
   */
-  private getImageSizeToFitPdf(doc, canvas) {
+  private getImageSizeToFitPdf(doc, canvas, margins) {
     // Define variable to calculate best size to fit in one page
-    const pageHeight = doc.internal.pageSize.getHeight() - 20; // -20 to let margin work great
-    const pageWidth = doc.internal.pageSize.getWidth() - 20; // -20 to let margin work great
+    const pageHeight = doc.internal.pageSize.getHeight() - (margins[0] + margins[2]);
+    const pageWidth = doc.internal.pageSize.getWidth() - (margins[1] + margins[3]);
     const canHeight = canvas.height;
     const canWidth = canvas.width;
     const heightRatio = canHeight / pageHeight;

diff --git a/projects/geo/src/locale/en.geo.json b/projects/geo/src/locale/en.geo.json
@@ -116,6 +116,7 @@
         "outputFormat": "Output format",
         "paperFormat": "Paper format",
         "imageFormat": "Image format",
+        "orientation" : "Orientation",
         "landscape": "Landscape",
         "portrait": "Portrait",
         "projection": "Projection",

diff --git a/projects/geo/src/locale/fr.geo.json b/projects/geo/src/locale/fr.geo.json
@@ -117,6 +117,7 @@
         "outputFormat": "Format de sortie",
         "paperFormat": "Format du papier",
         "imageFormat": "Format de l'image",
+        "orientation" : "Orientation",
         "landscape": "Paysage",
         "portrait": "Portrait",
         "printBtn": "Imprimer",