@pwabuilder/pwainstall - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/pwa-install.d.ts

@@ -13,2 +13,3 @@ import { LitElement } from 'lit-element';
     getManifestData(): Promise<void>;
+    updateButtonColor(data: any): void;
     openPrompt(): void;
@@ -15,0 +16,0 @@ install(): Promise<boolean>;

dist/pwa-install.js

@@ -40,3 +40,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       animation-name: opened;
-      animation-duration: 250ms;
+      animation-duration: 150ms;
      }
@@ -46,3 +46,3 @@
       from {
-        transform: scale(0.4, 0.4);
+        transform: scale(0.8, 0.8);
         opacity: 0.4;
@@ -56,2 +56,11 @@ }
 
+    @keyframes mobile {
+      from {
+        opacity: 0.6;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
     @keyframes fadein {
@@ -149,5 +158,5 @@ from {
       position: fixed;
-      top: 20px;
-      right: 20px;
-      background: #f0f0f0;
+      top: 5em;
+      right: 18em;
+      background: transparent;
       border: none;
@@ -161,5 +170,8 @@ color: black;
       font-weight: 600;
-      display: none;
       outline: none;
       cursor: pointer;
+      z-index: 1;
+
+      animation-name: fadein;
+      animation-duration: 450ms;
      }
@@ -273,5 +285,9 @@
         #installModal {
-          left: 24em;
-          right: 24em;
+          left: 26em;
+          right: 26em;
         }
+
+        #closeButton {
+          right: 32em;
+        }
       }
@@ -281,5 +297,9 @@
         #installModal {
-          left: 20em;
-          right: 20em;
+          left: 22em;
+          right: 22em;
         }
+
+        #closeButton {
+          right: 28em;
+        }
       }
@@ -294,3 +314,15 @@
           border-radius: 0px;
+
+          animation-name: mobile;
+          animation-duration: 250ms;
         }
+
+        #closeButton {
+          top: 20px;
+          right: 20px;
+        }
+
+        #screenshots {
+          justify-content: center;
+        }
       }
@@ -304,6 +336,2 @@
 
-        #closeButton {
-          display: block;
-        }
-
          #installModal {
@@ -367,3 +395,2 @@ overflow: scroll;
     async firstUpdated() {
-        console.log(this.showopen);
         if (this.manifestpath) {
@@ -373,3 +400,2 @@ await this.getManifestData();
         window.addEventListener('beforeinstallprompt', (e) => {
-            console.log('e', e);
             // Prevent Chrome 67 and earlier from automatically showing the prompt
@@ -389,5 +415,12 @@ e.preventDefault();
         const data = await response.json();
-        console.log(data);
         this.manifestdata = data;
+        if (this.manifestdata) {
+            this.updateButtonColor(this.manifestdata);
+        }
     }
+    updateButtonColor(data) {
+        if (data.theme_color) {
+            this.style.setProperty('--install-button-color', data.theme_color);
+        }
+    }
     openPrompt() {
@@ -429,2 +462,8 @@ this.openmodal = true;
 
+      ${this.openmodal ? html `<button id="closeButton" @click="${() => this.cancel()}">
+            <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/>
+            </svg>
+          </button>` : null}
+
       ${this.openmodal ?
@@ -444,4 +483,2 @@ html `
           </div>
-
-          <button id="closeButton" @click="${() => this.cancel()}">Close</button>
         </div>
@@ -448,0 +485,0 @@

package.json

 {
   "name": "@pwabuilder/pwainstall",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/pwa-install.js",

src/pwa-install.ts

@@ -14,4 +14,4 @@ import {
   @property() manifestdata: any;
-  @property({type: Boolean}) openmodal: boolean;
-  @property({type: Boolean }) showopen: boolean;
+  @property({ type: Boolean }) openmodal: boolean;
+  @property({ type: Boolean }) showopen: boolean;
 
@@ -44,3 +44,3 @@ static get styles() {
       animation-name: opened;
-      animation-duration: 250ms;
+      animation-duration: 150ms;
      }
@@ -50,3 +50,3 @@
       from {
-        transform: scale(0.4, 0.4);
+        transform: scale(0.8, 0.8);
         opacity: 0.4;
@@ -60,2 +60,11 @@ }
 
+    @keyframes mobile {
+      from {
+        opacity: 0.6;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
     @keyframes fadein {
@@ -153,5 +162,5 @@ from {
       position: fixed;
-      top: 20px;
-      right: 20px;
-      background: #f0f0f0;
+      top: 5em;
+      right: 18em;
+      background: transparent;
       border: none;
@@ -165,5 +174,8 @@ color: black;
       font-weight: 600;
-      display: none;
       outline: none;
       cursor: pointer;
+      z-index: 1;
+
+      animation-name: fadein;
+      animation-duration: 450ms;
      }
@@ -277,5 +289,9 @@
         #installModal {
-          left: 24em;
-          right: 24em;
+          left: 26em;
+          right: 26em;
         }
+
+        #closeButton {
+          right: 32em;
+        }
       }
@@ -285,5 +301,9 @@
         #installModal {
-          left: 20em;
-          right: 20em;
+          left: 22em;
+          right: 22em;
         }
+
+        #closeButton {
+          right: 28em;
+        }
       }
@@ -298,3 +318,15 @@
           border-radius: 0px;
+
+          animation-name: mobile;
+          animation-duration: 250ms;
         }
+
+        #closeButton {
+          top: 20px;
+          right: 20px;
+        }
+
+        #screenshots {
+          justify-content: center;
+        }
       }
@@ -308,6 +340,2 @@
 
-        #closeButton {
-          display: block;
-        }
-
          #installModal {
@@ -372,3 +400,2 @@ overflow: scroll;
   async firstUpdated(): Promise<void> {
-    console.log(this.showopen);
     if (this.manifestpath) {
@@ -379,3 +406,2 @@ await this.getManifestData();
     window.addEventListener('beforeinstallprompt', (e) => {
-      console.log('e', e);
       // Prevent Chrome 67 and earlier from automatically showing the prompt
@@ -398,6 +424,15 @@ e.preventDefault();
 
-    console.log(data);
     this.manifestdata = data;
+
+    if (this.manifestdata) {
+      this.updateButtonColor(this.manifestdata);
+    }
   }
 
+  updateButtonColor(data) {
+    if (data.theme_color) {
+      this.style.setProperty('--install-button-color', data.theme_color);
+    }
+  }
+
   openPrompt() {
@@ -444,2 +479,8 @@ this.openmodal = true;
 
+      ${this.openmodal ? html`<button id="closeButton" @click="${() => this.cancel()}">
+            <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path opacity="0.33" fill-rule="evenodd" clip-rule="evenodd" d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z" fill="#60656D"/>
+            </svg>
+          </button>` : null}
+
       ${
@@ -460,4 +501,2 @@ this.openmodal ?
           </div>
-
-          <button id="closeButton" @click="${() => this.cancel()}">Close</button>
         </div>
@@ -464,0 +503,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39178

increased by13.8%

Number of package files

13

increased by8.33%

Lines of code

1097

increased by10.58%

No dependency changes