@vaadin/vaadin-app-layout - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "vaadin-app-layout.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-app-layout.js

@@ -126,3 +126,4 @@ /**
 
-      :host([hidden]) {
+      :host([hidden]),
+      [hidden] {
         display: none !important;
@@ -159,3 +160,4 @@ }
 
-      [part="navbar"] {
+      [part="navbar"],
+      [part="navbar"]::before {
         position: fixed;
@@ -235,3 +237,3 @@ display: flex;
       :host([overlay]) [part="backdrop"] {
-        z-index: 1;
+        z-index: 2;
       }
@@ -259,3 +261,3 @@
     </style>
-    <div part="navbar">
+    <div part="navbar" id="navbarTop">
       <slot name="navbar"></slot>
@@ -270,3 +272,3 @@ </div>
     </div>
-    <div part="navbar" bottom="" hidden="">
+    <div part="navbar" id="navbarBottom" bottom="" hidden="">
       <slot name="navbar-bottom"></slot>
@@ -282,3 +284,3 @@ </div>
   static get version() {
-    return '2.0.2';
+    return '2.0.3';
   }
@@ -445,3 +447,3 @@
     const childCount = this.querySelectorAll('[slot=drawer]').length;
-    const drawer = this.shadowRoot.querySelector('[part=drawer]');
+    const drawer = this.$.drawer;
 
@@ -523,3 +525,2 @@ if (childCount === 0) {
 
-  // TODO(jouni): what mechanism should we use to close the overlay drawer a navigation is triggered?
   _close() {
@@ -545,7 +546,6 @@ this.drawerOpened = false;
 
-    const navbarBottom = this.shadowRoot.querySelector('[part="navbar"][bottom]');
-    const navbars = this.querySelectorAll('[slot*="navbar"]');
+    const navbarItems = this.querySelectorAll('[slot*="navbar"]');
 
-    if (navbars.length > 0) {
-      Array.from(navbars).forEach(navbar => {
+    if (navbarItems.length > 0) {
+      Array.from(navbarItems).forEach(navbar => {
         if (navbar.getAttribute('slot').indexOf('touch-optimized') > -1) {
@@ -563,6 +563,12 @@ navbar.__touchOptimized = true;
 
+    if (this.$.navbarTop.querySelector('[name=navbar]').assignedNodes().length === 0) {
+      this.$.navbarTop.setAttribute('hidden', '');
+    } else {
+      this.$.navbarTop.removeAttribute('hidden');
+    }
+
     if (touchOptimized) {
-      navbarBottom.removeAttribute('hidden');
+      this.$.navbarBottom.removeAttribute('hidden');
     } else {
-      navbarBottom.setAttribute('hidden', '');
+      this.$.navbarBottom.setAttribute('hidden', '');
     }
@@ -569,0 +575,0 @@

src/vaadin-drawer-toggle.js

@@ -21,3 +21,2 @@ /**
  * @memberof Vaadin
- * @extends Vaadin.ButtonElement
  * @demo demo/index.html
@@ -24,0 +23,0 @@ */

theme/lumo/vaadin-app-layout-styles.js

@@ -9,3 +9,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     <style>
-      [part="navbar"] {
+      [part="navbar"]::before {
         background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
@@ -18,6 +18,15 @@ }
 
-      :host([overlay]) [part="drawer"] {
+      :host([overlay]) [part="drawer"]::before {
         background: var(--lumo-base-color);
       }
 
+      [part="navbar"]::before,
+      :host([overlay]) [part="drawer"]::before {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+      }
+
       [part="backdrop"] {
@@ -35,13 +44,19 @@ background-color: var(--lumo-shade-20pct);
 
-      @supports (-webkit-backdrop-filter: blur(1px)) {
+      @supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
+        [part="navbar"]::before {
+          opacity: 0.8;
+        }
+
         [part="navbar"] {
-          /* TODO(jouni): should use a Lumo color, but we don’t have a suitable one */
-          background: rgba(255, 255, 255, 0.8) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
           -webkit-backdrop-filter: blur(24px);
+          backdrop-filter: blur(24px);
         }
 
+        :host([overlay]) [part="drawer"]::before {
+          opacity: 0.9;
+        }
+
         :host([overlay]) [part="drawer"] {
-          /* TODO(jouni): should use a Lumo color, but we don’t have a suitable one */
-          background: rgba(255, 255, 255, 0.9);
           -webkit-backdrop-filter: blur(24px);
+          backdrop-filter: blur(24px);
         }
@@ -48,0 +63,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

46033

increased by0.44%

Lines of code

811

increased by2.01%

No dependency changes