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

Comparing version 2.0.0-alpha3 to 2.0.0-alpha4

package.json

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

src/vaadin-app-layout.js

@@ -245,3 +245,3 @@ /**
   static get version() {
-    return '2.0.0-alpha3';
+    return '2.0.0-alpha4';
   }
@@ -460,7 +460,10 @@
 
+    if (!this.overlay && overlay) { // Changed from not overlay to overlay
+      this._drawerStateSaved = this.drawerOpened;
+      this.drawerOpened = false;
+    }
+
     this._setOverlay(overlay);
 
     if (this.overlay) {
-      this.drawerOpened = false;
-
       drawer.setAttribute('role', 'dialog');
@@ -470,2 +473,7 @@ drawer.setAttribute('aria-modal', 'true');
     } else {
+      if (this._drawerStateSaved) {
+        this.drawerOpened = this._drawerStateSaved;
+        this._drawerStateSaved = null;
+      }
+
       drawer.removeAttribute('role');
@@ -472,0 +480,0 @@ drawer.removeAttribute('aria-modal');

src/vaadin-drawer-toggle.js

@@ -7,8 +7,5 @@ /**
 */
-import '@vaadin/vaadin-button/vaadin-button.js';
+import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
 
-import '@vaadin/vaadin-lumo-styles/icons.js';
-import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { ButtonElement } from '@vaadin/vaadin-button/src/vaadin-button.js';
 
@@ -39,2 +36,5 @@ /**
         outline: none;
+        height: 24px;
+        width: 24px;
+        padding: 4px;
       }
@@ -51,6 +51,28 @@
       }
+
+      [part="icon"],
+      [part="icon"]::after,
+      [part="icon"]::before {
+        position: absolute;
+        top: 8px;
+        height: 3px;
+        width: 24px;
+        background-color: #000;
+      }
+
+      [part="icon"]::after,
+      [part="icon"]::before {
+        content: "";
+      }
+
+      [part="icon"]::after {
+        top: 6px;
+      }
+
+      [part="icon"]::before {
+        top: 12px;
+      }
     </style>
     <slot>
-      <!-- TODO(jouni): don't use Lumo in the core styles, and make this customizable (font-icon) -->
-      <iron-icon icon="lumo:menu"></iron-icon>
+      <div part="icon"></div>
     </slot>
@@ -57,0 +79,0 @@ <button id="button" type="button" aria-label\$="[[ariaLabel]]"></button>

theme/lumo/vaadin-drawer-toggle-styles.js

 import '@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
@@ -9,3 +10,21 @@
         min-width: 0 !important;
+        height: inherit;
+        width: inherit;
       }
+
+      [part="icon"],
+      [part="icon"]::after,
+      [part="icon"]::before {
+        position: inherit;
+        height: auto;
+        width: auto;
+        background: transparent;
+        top: auto;
+      }
+
+      [part=icon]::before {
+        font-family: lumo-icons;
+        font-size: var(--lumo-icon-size-m);
+        content: var(--lumo-icons-menu);
+      }
     </style>
@@ -12,0 +31,0 @@ </template>

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

@@ -18,2 +18,23 @@ import '@vaadin/vaadin-material-styles/color.js';
 
+      [part="drawer"] {
+        background: var(--material-background-color);
+        border-right: 1px solid var(--material-secondary-background-color);
+      }
+
+      :host([primary-section="navbar"]:not([overlay])) [part="navbar"] {
+        z-index: 1;
+      }
+
+      [part] ::slotted(h2),
+      [part] ::slotted(h3),
+      [part] ::slotted(h4) {
+        margin-top: 0.25rem !important;
+        margin-bottom: 0.25rem !important;
+      }
+
+      [part="navbar"][bottom] {
+          padding: 0 1em;
+          box-shadow: var(--material-shadow-elevation-4dp);
+        }
+
       @media (min-width: 700px) {
@@ -20,0 +41,0 @@ [part="navbar"] {

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

43195

increased by5.63%

Number of package files

17

increased by13.33%

Lines of code

739

increased by12.31%

No dependency changes