chore: update with new Qlik logos (#12)

* chore: update with new Qlik logos

* fix js reference

* add the larger app and sheet icon configs

* update index & readme

README.md

@@ -23,6 +23,12 @@ The default deployment looks like:
 Configuration is via the `src/qs-icon-generator/config.json` file, and supporting background images in the `src/qs-icon-generator/backgrounds/` directory.
 
 Several templates are included by default:
+* modern_qlik_cloud_grey - uses a square grey background image with white app name text, sized for the card and list views in the Qlik Cloud hub - approx 3x the size of qlik_cloud_* versions but looks much more clear in the hub
+* modern_qlik_cloud_green - uses a square green background image with white app name text, sized for the card and list views in the Qlik Cloud hub - approx 3x the size of qlik_cloud_* versions but looks much more clear in the hub
+* modern_qlik_cloud_white - uses a square white background image with grey app name text, sized for the card and list views in the Qlik Cloud hub - approx 3x the size of qlik_cloud_* versions but looks much more clear in the hub
+* modern_qlik_sheet_green - uses a green background with white text - approx 3x the size of qlik_sheet_* versions but looks much more clear in the app
+* modern_qlik_sheet_grey - uses a grey background with white text - approx 3x the size of qlik_sheet_* versions but looks much more clear in the app
+* modern_qlik_sheet_white - uses a white background with green text - approx 3x the size of qlik_sheet_* versions but looks much more clear in the app
 * qlik_cloud_green - uses a square green background image with white app name text, sized for the card and list views in the Qlik Cloud hub
 * qlik_cloud_grey - uses a square grey background image with white app name text, sized for the card and list views in the Qlik Cloud hub
 * qlik_cloud_white - uses a white background image with grey app name text, sized for the card and list views in the Qlik Cloud hub
@@ -32,7 +38,7 @@ Several templates are included by default:
 * qlik_sheet_grey - uses a grey background with white text
 * qlik_sheet_white - uses a white background with green text
 
-If you wish to change the background of an existing or new template:
+If you wish to change the background of an existing or new template, start from one of the examples, or review the following:
 * Suitable format - ideally PNG file, but can be JPG, JPEG or GIF
 * Correct size for app icons, which differs based on your product version
   * Qlik Sense client-managed: 164x108 pixels, which is acceptable for both the hub and in-app aspect ratios

src/qs-icon-generator/config.json

@@ -1,5 +1,155 @@
 {
     "templates": {
+        "modern_qlik_cloud_grey": {
+            "background": {
+                "image": "modern_qlik_cloud.png",
+                "imageAlpha": 1,
+                "colour": "#585a5f",
+                "canvasX": 864,
+                "canvasY": 540
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 63,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 190,
+                "locY": 96
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 24,
+                "colour": "#585a5f",
+                "align": "left",
+                "locX": 190,
+                "locY": 510
+            }
+        },
+        "modern_qlik_cloud_green": {
+            "background": {
+                "image": "modern_qlik_cloud.png",
+                "imageAlpha": 1,
+                "colour": "#009844",
+                "canvasX": 864,
+                "canvasY": 540
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 63,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 190,
+                "locY": 96
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 24,
+                "colour": "#585a5f",
+                "align": "left",
+                "locX": 190,
+                "locY": 510
+            }
+        },
+        "modern_qlik_cloud_white": {
+            "background": {
+                "image": "modern_qlik_cloud.png",
+                "imageAlpha": 1,
+                "colour": "#ffffff",
+                "canvasX": 864,
+                "canvasY": 540
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 63,
+                "colour": "#585a5f",
+                "align": "left",
+                "locX": 190,
+                "locY": 96
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 24,
+                "colour": "#585a5f",
+                "align": "left",
+                "locX": 190,
+                "locY": 510
+            }
+        },
+        "modern_qlik_sheet_green": {
+            "background": {
+                "image": "",
+                "imageAlpha": 1,
+                "colour": "#009845",
+                "canvasX": 840,
+                "canvasY": 540
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 63,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 45,
+                "locY": 135
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 24,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 45,
+                "locY": 480
+            }
+        },
+        "modern_qlik_sheet_grey": {
+            "background": {
+                "image": "",
+                "imageAlpha": 1,
+                "colour": "#585a5f",
+                "canvasX": 840,
+                "canvasY": 540
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 63,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 45,
+                "locY": 135
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 24,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 45,
+                "locY": 480
+            }
+        },
+        "modern_qlik_sheet_white": {
+            "background": {
+                "image": "",
+                "imageAlpha": 1,
+                "colour": "#fff",
+                "canvasX": 840,
+                "canvasY": 540
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 63,
+                "colour": "#009844",
+                "align": "left",
+                "locX": 45,
+                "locY": 135
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 24,
+                "colour": "#585a5f",
+                "align": "left",
+                "locX": 45,
+                "locY": 480
+            }
+        },
         "qlik_cloud_green": {
             "background": {
                 "image": "qlik_cloud_green.png",

src/qs-icon-generator/css/app.css

@@ -0,0 +1,21 @@
+.qsi-header {
+    padding: 3rem 1.5rem;
+    text-align: center;
+  }
+
+  .qsi-formgroup {
+    margin-bottom: 1rem;
+  }
+
+  h3 {
+    margin-bottom: 2rem;
+  }
+
+  .col-sm {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  #qsi-canvas {
+    border:1px solid #666666;
+  }

src/qs-icon-generator/index.html

@@ -8,36 +8,17 @@
   <meta name="author" content="withdave">
   <title>Qlik Icon Generator</title>
 
-  <!-- Bootstrap core CSS -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/app.css" rel="stylesheet">
 
-  <style>
-    .qsi-header {
-      padding: 3rem 1.5rem;
-      text-align: center;
-    }
-
-    .qsi-formgroup {
-      margin-bottom: 1rem;
-    }
-
-    h3 {
-      margin-bottom: 2rem;
-    }
-
-    .col-sm {
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  </style>
 </head>
 
 <body>
 
   <main role="main" class="container">
 
     <div class="qsi-header">
-      <h1>Qlik Icon Generator v3.1.0</h1>
+      <h1>Qlik Icon Generator v3.1.1</h1>
       <p class="lead">This tool is designed to help you produce standardised, consistent icons.</p>
     </div>
 
@@ -78,15 +59,17 @@ <h3>Icon Config</h3>
         <h3>Generated Icon</h3>
         <p>Enter icon details to the left and click "Generate Icon". Once complete, the box below will fill with the
           icon, at which point it can be downloaded.</p>
-        <p><canvas id="qsi-canvas" width="164" height="108" style="border:1px solid #666666;">Your browser does not
+        <p><canvas id="qsi-canvas" width="164" height="108">Your browser does not
             support canvas. Please switch to a different browser.</canvas></p>
         <p><button type="button" id="qsiDownload" class="btn btn-primary" disabled>Download Icon</button></p>
       </div>
     </div>
     <br><br>
     <div class="row">
       <div class="col-sm">
-        <p>The default config.json contains templates for both Qlik Cloud (qlik_cloud_*) and Qlik Sense client managed (qlik_*). Please see <a href="https://github.com/withdave/qlik-icon-generator">GitHub</a> for instructions on configuring this tool for your branding.</p>
+        <p>The default config.json contains templates for both Qlik Cloud (modern_qlik_cloud_*, which are higher resolution, and legacy qlik_cloud_*) and Qlik Sense client managed
+          (qlik_*). Please see <a href="https://github.com/withdave/qlik-icon-generator">GitHub</a> for instructions on
+          configuring this tool for your branding.</p>
       </div>
     </div>
   </main>
@@ -98,4 +81,4 @@ <h3>Generated Icon</h3>
 
 </body>
 
-</html>
+</html>

src/qs-icon-generator/qs-icon-generator.qext

@@ -2,12 +2,12 @@
     "type": "mashup",
     "name": "Qlik Sense Icon Builder (qs-icon-generator)",
     "description": "This tool is designed to help you produce standardised, consistent app icons.",
-    "version": "2.0.1",
+    "version": "3.1.1",
     "author": "withdave",
-    "homepage": "https://github.com/withdave/qlik-sense-icon-generator",
+    "homepage": "https://github.com/withdave/qlik-icon-generator",
     "keywords": "",
     "license": "",
-    "repository": "https://github.com/withdave/qlik-sense-icon-generator",
+    "repository": "https://github.com/withdave/qlik-icon-generator",
     "dependencies": {
         "qlik-sense": ">=3.0.x"
     }