Skip to content

Commit

Permalink
Merge pull request #99 from siemens/fix/menu-close
Browse files Browse the repository at this point in the history 
Fix(core): menu close overlays
  • Loading branch information
@nuke-ellington
nuke-ellington authored Nov 7, 2022
2 parents 67ff008 + 4bc086e commit fa6e654
Show file tree
Hide file tree
Showing 7 changed files with 263 additions and 70 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.


.yarn-cache

# compiled output
/dist
Expand Down
95 changes: 84 additions & 11 deletions packages/core/component-doc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,13 +228,18 @@
"docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [
"ix-application-header"
],
"dependencyGraph": {
"ix-basic-navigation": [
"ix-application-header"
],
"my-component": [
"ix-basic-navigation"
]
},
"props": [
Expand Down Expand Up @@ -4095,7 +4100,9 @@
"docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
"docsTags": [],
"encapsulation": "none",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [
"ix-menu-item",
"ix-dropdown"
Expand All @@ -4104,6 +4111,9 @@
"ix-menu": [
"ix-menu-item",
"ix-dropdown"
],
"my-component": [
"ix-menu"
]
},
"props": [
Expand Down Expand Up @@ -4473,7 +4483,8 @@
"docsTags": [],
"encapsulation": "scoped",
"dependents": [
"ix-map-navigation"
"ix-map-navigation",
"my-component"
],
"dependencies": [
"ix-tab-item",
Expand All @@ -4491,6 +4502,9 @@
],
"ix-map-navigation": [
"ix-menu-about"
],
"my-component": [
"ix-menu-about"
]
},
"props": [
Expand Down Expand Up @@ -4574,9 +4588,15 @@
"docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [],
"dependencyGraph": {},
"dependencyGraph": {
"my-component": [
"ix-menu-about-item"
]
},
"props": [
{
"name": "label",
Expand Down Expand Up @@ -4952,12 +4972,16 @@
"docsTags": [],
"encapsulation": "none",
"dependents": [
"ix-menu"
"ix-menu",
"my-component"
],
"dependencies": [],
"dependencyGraph": {
"ix-menu": [
"ix-menu-item"
],
"my-component": [
"ix-menu-item"
]
},
"props": [
Expand Down Expand Up @@ -5080,7 +5104,9 @@
"docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [
"ix-tab-item",
"ix-icon-button",
Expand All @@ -5094,6 +5120,9 @@
],
"ix-icon-button": [
"ix-icon"
],
"my-component": [
"ix-menu-settings"
]
},
"props": [
Expand Down Expand Up @@ -5177,9 +5206,15 @@
"docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependents": [
"my-component"
],
"dependencies": [],
"dependencyGraph": {},
"dependencyGraph": {
"my-component": [
"ix-menu-settings-item"
]
},
"props": [
{
"name": "label",
Expand Down Expand Up @@ -8576,8 +8611,46 @@
"docsTags": [],
"encapsulation": "scoped",
"dependents": [],
"dependencies": [],
"dependencyGraph": {},
"dependencies": [
"ix-basic-navigation",
"ix-menu",
"ix-menu-item",
"ix-menu-settings",
"ix-menu-settings-item",
"ix-menu-about",
"ix-menu-about-item"
],
"dependencyGraph": {
"my-component": [
"ix-basic-navigation",
"ix-menu",
"ix-menu-item",
"ix-menu-settings",
"ix-menu-settings-item",
"ix-menu-about",
"ix-menu-about-item"
],
"ix-basic-navigation": [
"ix-application-header"
],
"ix-menu": [
"ix-menu-item",
"ix-dropdown"
],
"ix-menu-settings": [
"ix-tab-item",
"ix-icon-button",
"ix-tabs"
],
"ix-icon-button": [
"ix-icon"
],
"ix-menu-about": [
"ix-tab-item",
"ix-icon-button",
"ix-tabs"
]
},
"props": [],
"methods": [],
"events": [],
Expand Down
18 changes: 9 additions & 9 deletions packages/core/src/components/menu-settings/menu-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@
*/

import {
Component,
Element,
Event,
EventEmitter,
forceUpdate,
h,
Host,
Prop,
Watch
Component,
Element,
Event,
EventEmitter,
forceUpdate,
h,
Host,
Prop,
Watch,
} from '@stencil/core';

@Component({
Expand Down
124 changes: 78 additions & 46 deletions packages/core/src/components/menu/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,10 @@ export class Menu {
return this.hostElement.querySelector('ix-menu-avatar');
}

get tabsContainer(): HTMLDivElement {
return this.hostElement.querySelector('#menu-tabs');
}

private popoverListener: Popover;

private showTab(index: number) {
Expand Down Expand Up @@ -658,6 +662,19 @@ export class Menu {
return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';
}

private isMenuItemClicked(event: MouseEvent) {
const path = event.composedPath();

const menuItems = (path as HTMLElement[])

.filter((element) => element.id !== 'more-tab')
.filter((element) => {
return element.tagName === 'IX-MENU-ITEM';
});

return menuItems.some((menu) => this.tabsContainer.contains(menu));
}

render() {
return (
<Host
Expand Down Expand Up @@ -711,58 +728,73 @@ export class Menu {
</svg>
</div>
<div id="avatar-tab-placeholder"></div>
<div class="tabs-top"></div>
<slot></slot>
<div class="active-more-tab">
{this.activeTab ? (
<ix-menu-item
class="internal-tab"
active={true}
tabIcon={this.activeTab.tabIcon}
>
{this.activeTab.innerText}
</ix-menu-item>
) : null}
</div>
<ix-menu-item
id="more-tab"
tabIcon="more-menu"
class={{
'internal-tab': true,
}}
<div
id="menu-tabs"
style={{
display: this.showMoreButton() ? 'block' : 'none',
display: 'contents',
}}
onClick={(event) => {
if (this.isMenuItemClicked(event)) {
this.resetOverlay();
}
}}
title="Show more"
notifications={this.countMoreNotifications}
onClick={() => this.toggleShowMoreDropdown()}
>
{this.i18nMore}
<ix-dropdown show={this.showMoreItems}>
{this.menuItems
.filter(
(elm: HTMLIxMenuItemElement, index) =>
!this.showTab(index) &&
!this.isMenuItemActive(elm) &&
this.isVisible(elm)
)
.map((e: HTMLIxMenuItemElement) => {
return (
<ix-menu-item
tabIcon={e.tabIcon}
active={e.active}
class="internal-tab appended"
onClick={() => e.dispatchEvent(new CustomEvent('click'))}
>
{e.innerText}
</ix-menu-item>
);
})}
</ix-dropdown>
</ix-menu-item>
<div class="tabs-top"></div>
<slot></slot>
<div class="active-more-tab">
{this.activeTab ? (
<ix-menu-item
class="internal-tab"
active={true}
tabIcon={this.activeTab.tabIcon}
>
{this.activeTab.innerText}
</ix-menu-item>
) : null}
</div>
<ix-menu-item
id="more-tab"
tabIcon="more-menu"
class={{
'internal-tab': true,
}}
style={{
display: this.showMoreButton() ? 'block' : 'none',
}}
title="Show more"
notifications={this.countMoreNotifications}
onClick={() => this.toggleShowMoreDropdown()}
>
{this.i18nMore}
<ix-dropdown show={this.showMoreItems}>
{this.menuItems
.filter(
(elm: HTMLIxMenuItemElement, index) =>
!this.showTab(index) &&
!this.isMenuItemActive(elm) &&
this.isVisible(elm)
)
.map((e: HTMLIxMenuItemElement) => {
return (
<ix-menu-item
tabIcon={e.tabIcon}
active={e.active}
class="internal-tab appended"
onClick={() =>
e.dispatchEvent(new CustomEvent('click'))
}
>
{e.innerText}
</ix-menu-item>
);
})}
</ix-dropdown>
</ix-menu-item>
</div>
<div class="bottom-tab-divider"></div>
{this.enableSettings && !this.isSettingsEmpty ? (
<ix-menu-item
id="settings"
class={{
'internal-tab': true,
'bottom-tab': true,
Expand Down
Loading

0 comments on commit fa6e654

Please sign in to comment.