changeset 2220:d926292d81b6 pdf-export

PDF generation: changed form labels/option texts To reduce the visual size of the form, labels were removed since the form options are self-explanatory.
author Markus Kottlaender <markus@intevation.de>
date Mon, 11 Feb 2019 10:16:48 +0100
parents 80de3787cdb3
children 74c7d84f93d7
files client/src/components/Pdftool.vue client/src/store/application.js
diffstat 2 files changed, 35 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue	Fri Feb 08 16:21:29 2019 +0100
+++ b/client/src/components/Pdftool.vue	Mon Feb 11 10:16:48 2019 +0100
@@ -29,8 +29,6 @@
             <translate>{{ template.name }}</translate>
           </option>
         </select>
-        <hr class="mb-1" />
-        <small class="text-muted"><translate>Format</translate></small>
         <select
           @change="compareFormWithTemplates"
           v-model="form.format"
@@ -41,26 +39,30 @@
         </select>
         <div class="d-flex">
           <div class="flex-fill mr-2">
-            <small class="text-muted"><translate>Resolution</translate></small>
             <select
               @change="compareFormWithTemplates"
               v-model="form.resolution"
               class="form-control form-control-sm mb-2 d-block w-100"
             >
-              <option value="80">80 dpi</option>
-              <option value="120">120 dpi</option>
-              <option value="200">200 dpi</option>
+              <option value="80">
+                <translate>low resolution (80 dpi)</translate>
+              </option>
+              <option value="120">
+                <translate>medium resolution (120 dpi)</translate>
+              </option>
+              <option value="200">
+                <translate>high resolution (200 dpi)</translate>
+              </option>
             </select>
           </div>
           <div class="flex-fill ml-2">
-            <small class="text-muted"><translate>Size</translate></small>
             <select
               @change="compareFormWithTemplates"
               v-model="form.paperSize"
               class="form-control form-control-sm mb-2 d-block w-100"
             >
-              <option value="a3"><translate>ISO A3</translate></option>
-              <option value="a4"><translate>ISO A4</translate></option>
+              <option value="a4"><translate>A4</translate></option>
+              <option value="a3"><translate>A3</translate></option>
             </select>
           </div>
         </div>
@@ -136,7 +138,7 @@
         format: "landscape",
         paperSize: "a4",
         downloadType: "download",
-        resolution: "120"
+        resolution: "80"
       },
       pdf: {
         doc: null,
@@ -280,17 +282,11 @@
                 break;
               }
               case "bottleneck": {
-                this.addBottleneckInfo(
-                  e.position,
-                  e.offset
-                );
+                this.addBottleneckInfo(e.position, e.offset);
                 break;
               }
               case "legend": {
-                this.addLegend(
-                  e.position,
-                  e.offset
-                );
+                this.addLegend(e.position, e.offset);
                 break;
               }
               case "scalebar": {
@@ -471,8 +467,7 @@
       if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
         y1 = this.pdf.height - offset.y - size;
       }
-      
-      
+
       var y2 = y1 + size * 3;
       var x3 = x1 - size * 2;
       var y3 = y1 + size * 5;
@@ -530,7 +525,7 @@
       }
 
       this.addRoundedBox(x, y, width, height);
-      
+
       // replace placeholders
       if (text.includes("{date}")) {
         text = text.replace("{date}", new Date().toLocaleString(locale2));
@@ -559,8 +554,10 @@
         y = this.pdf.height - offset.y - height;
       }
 
-      this.addRoundedBox(x, y, width, height);
-      
+      if (border) {
+        this.addRoundedBox(x, y, width, height);
+      }
+
       let image = new Image();
       image.src = url;
       this.pdf.doc.addImage(
@@ -572,7 +569,10 @@
       );
     },
     addLegend(position, offset) {
-      if (this.selectedBottleneck && this.getLayerByName("Bottleneck isolines").isVisible) {
+      if (
+        this.selectedBottleneck &&
+        this.getLayerByName("Bottleneck isolines").isVisible
+      ) {
         // transforming into an HTMLImageElement only to find out
         // the width x height of the legend image
         // FUTURE: find a better way to get the width and height
@@ -582,11 +582,11 @@
         let width = 54;
         let height = width / aspectRatio;
         let padding = 2;
-        
+
         // x/y defaults to offset for topleft corner (normal x/y coordinates)
         let x = offset.x;
         let y = offset.y;
-        
+
         // if position is on the right, x needs to be calculate with pdf width and
         // the size of the element
         if (["topright", "bottomright"].indexOf(position) !== -1) {
@@ -607,15 +607,18 @@
       }
     },
     addBottleneckInfo(position, offset) {
-      if (this.selectedBottleneck && this.getLayerByName("Bottleneck isolines").isVisible) {
+      if (
+        this.selectedBottleneck &&
+        this.getLayerByName("Bottleneck isolines").isVisible
+      ) {
         let width = 54;
         let height = 13;
         let padding = 5;
-        
+
         // x/y defaults to offset for topleft corner (normal x/y coordinates)
         let x = offset.x;
         let y = offset.y;
-        
+
         // if position is on the right, x needs to be calculate with pdf width and
         // the size of the element
         if (["topright", "bottomright"].indexOf(position) !== -1) {
@@ -639,7 +642,7 @@
         str = this.selectedBottleneck;
         this.pdf.doc.setFontStyle("bold");
         this.pdf.doc.text(x + padding + w, y + padding, str);
-        
+
         str = this.$gettext("Survey date") + ": ";
         w = this.pdf.doc.getTextWidth(str);
         this.pdf.doc.setFontStyle("italic");
@@ -647,7 +650,7 @@
         str = this.selectedSurvey.date_info;
         this.pdf.doc.setFontStyle("normal");
         this.pdf.doc.text(x + padding + w, y + padding + 3, str);
-        
+
         str = this.$gettext("Ref gauge") + ": ";
         w = this.pdf.doc.getTextWidth(str);
         this.pdf.doc.setFontStyle("italic");
--- a/client/src/store/application.js	Fri Feb 08 16:21:29 2019 +0100
+++ b/client/src/store/application.js	Mon Feb 11 10:16:48 2019 +0100
@@ -117,7 +117,7 @@
         setTimeout(function() {
           commit("pdfTemplates", [
             {
-              name: "Default",
+              name: "Default Template",
               properties: {
                 format: "landscape",
                 resolution: "80",