Skip to content

Commit

Permalink
chore: demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@vapkse
vapkse committed Jul 5, 2024
1 parent 0ef831d commit 125a116
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 33 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
"release:dry-run": "node -r @swc-node/register ./scripts/release.ts --verbose --dry-run",
"postinstall": "patch-package",
"start": "ng serve",
"prettier": "npx prettier . --check",
"prettier-fix": "npx prettier . --write"
"prettier": "npx prettier . --write"
},
"workspaces": [
"projects/core",
Expand Down
47 changes: 24 additions & 23 deletions projects/demo-app/src/app/overlay/overlay-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<mat-card class="demo-card demo-basic" *ngIf="tabIndex === 0">TODO</mat-card>

<div *ngIf="tabIndex === 1" (contextmenu)="onContextMenu($event)">
<overlay #contextMenu ngx-menu>
<div class="ngx-menu-content">
<overlay #contextMenu overlayContainerClass="ngx-menu">
<div class="menu-content">
<ul>
<li class="menu-item" (click)="contextMenu.close()">
<mat-icon>delete_sweep</mat-icon>
Expand All @@ -27,8 +27,8 @@
<mat-card class="demo-card">
<mat-toolbar color="primary">Overlay</mat-toolbar>
<mat-card-content>
<overlay #posYMenu>
<div class="ngx-menu-content">
<overlay #posYMenu overlayContainerClass="ngx-menu" positions="end bottom end top">
<div class="menu-content">
<ul>
<li class="menu-item" (click)="posYMenu.close()">
<mat-icon>delete_sweep</mat-icon>
Expand All @@ -46,8 +46,8 @@
</div>
</overlay>

<div id="demo-ngx-menu">
<div class="menu-section">
<div id="demo-overlay">
<div class="section">
<p>You clicked on: {{ selected }}</p>

<mat-toolbar>
Expand All @@ -56,49 +56,50 @@
</button>
</mat-toolbar>

<overlay #menu>
<div class="ngx-menu-content">
<button class="menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
<overlay #menu overlayContainerClass="ngx-menu">
<div class="menu-content button-menu">
<button mat-button class="menu-item" *ngFor="let item of items" (click)="select(item.text); menu.close()">
{{ item.text }}
</button>
</div>
</overlay>
</div>
<div class="menu-section">
<p>Clicking these will navigate:</p>
<div class="section">
<p>Clicking these will navigate: "</p>
<mat-toolbar>
<button mat-icon-button (click)="anchorMenu.show($event)">
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>

<overlay #anchorMenu>
<div id="anchorMenu" class="ngx-menu-content">
<overlay #anchorMenu overlayContainerClass="ngx-menu" positions="start top start bottom">
<div class="menu-content anchor-menu">
<a class="menu-item" *ngFor="let item of items" href="http://www.google.com">
{{ item.text }}
</a>
</div>
</overlay>
</div>
<div class="menu-section">
<p>With buttons position before</p>
<div class="section">
<p>With Lorem ipsum</p>
<mat-toolbar class="end-icon">
<button mat-icon-button (click)="posXMenu.show($event)">
<button mat-icon-button (click)="ipsum.show($event)">
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>

<overlay #posXMenu class="before" positions="end bottom end top">
<div class="ngx-menu-content">
<button class="menu-item" *ngFor="let item of items" (click)="posXMenu.close()">
{{ item.text }}
</button>
<overlay #ipsum overlayContainerClass="ngx-menu">
<div class="menu-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, lacus nec imperdiet pretium, purus nisi hendrerit velit, non laoreet est velit sit amet arcu. Cras eget malesuada tortor. Aliquam vitae libero tellus. Quisque at velit sed arcu feugiat imperdiet ut quis augue. Cras laoreet eleifend tellus varius laoreet. Vestibulum vulputate sagittis sapien, eget euismod metus. Sed ut lacus at risus tristique blandit. Cras at nibh augue. Nam felis felis, facilisis sed fringilla a, porta id magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eget velit a enim pharetra volutpat quis eget lacus. Donec imperdiet magna metus, auctor pretium nibh dictum eu. Sed pharetra tristique sodales. Nam dapibus porta imperdiet. Pellentesque elementum
tristique molestie. Sed at dolor et mauris vehicula vestibulum. Maecenas cursus vulputate convallis. Quisque eu imperdiet nunc. Nunc ut feugiat eros. Integer aliquam nibh nec est sollicitudin dictum at et diam. Aliquam neque magna, condimentum non dolor in, faucibus malesuada mauris. Sed dictum massa neque, quis venenatis justo consequat sed. Fusce imperdiet purus nec neque vestibulum, vel placerat enim porta. Duis turpis purus, suscipit vitae scelerisque sed, sollicitudin a sem. Nullam orci risus, suscipit non mollis non, semper sit amet enim. In vel eros justo. Etiam gravida dolor vitae commodo tincidunt. Ut consequat id odio ac scelerisque. Phasellus fringilla et nisi at convallis. Nunc efficitur est in luctus interdum. Curabitur risus turpis, gravida in ex
id, elementum convallis augue. Duis laoreet condimentum purus, sit amet vulputate dolor finibus ac. Proin consectetur ullamcorper orci ut ullamcorper. Vivamus ornare leo vel urna molestie porta. Vivamus malesuada velit eros, non rutrum urna elementum ut. Pellentesque sed lorem tempor, consectetur sem in, condimentum justo. Vivamus eu nunc interdum, mattis turpis nec, accumsan neque. Integer convallis porttitor turpis feugiat placerat. Nulla sodales ex in neque lobortis, vel mollis turpis interdum. Mauris pharetra ex a justo maximus, at semper metus feugiat. Nullam aliquet tortor nec tortor auctor venenatis. Proin id laoreet eros, id sodales mi. Vestibulum mollis orci nec orci posuere dapibus. Integer placerat, nisl id aliquam interdum, diam est vestibulum purus,
non venenatis turpis lacus in felis. Vestibulum pulvinar velit tortor, ut convallis turpis condimentum ut. Nunc auctor hendrerit augue, sed malesuada quam. Etiam varius interdum risus, eget gravida libero convallis sed. Aliquam tempor orci at ex ullamcorper mollis. Fusce imperdiet ut ex in gravida. Curabitur iaculis non diam vel consequat. Praesent a magna posuere, feugiat mauris nec, sollicitudin ligula. Sed faucibus viverra velit eget porttitor. Suspendisse a sem gravida, tincidunt lacus vitae, lobortis ante. Nulla nisl quam, ultrices non nunc eget, commodo luctus metus. Curabitur nulla erat, gravida in nulla vel, commodo vestibulum ligula. Quisque quis lectus vel urna luctus gravida eget id risus.
</div>
</overlay>
</div>

<div class="menu-section">
<p>With ul/li, position top</p>
<div class="section">
<p>With buttons, position before</p>
<mat-toolbar>
<button mat-icon-button (click)="posYMenu.show($event)">
<mat-icon>more_vert</mat-icon>
Expand Down
18 changes: 12 additions & 6 deletions projects/demo-app/src/app/overlay/overlay-demo.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
overlay-demo {
#demo-ngx-menu {
app-overlay-demo {
#demo-overlay {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;

.menu-section {
.section {
flex: 1 1 auto;
width: 300px;
margin: 0.5rem;
}
Expand All @@ -14,9 +17,12 @@ overlay-demo {
}
}

.overlay-container {
.ngx-menu-content {
&#anchorMenu {
.ngx-menu {
.menu-content {
background-color: #fff;

&.anchor-menu,
&.button-menu {
.menu-item {
white-space: nowrap;
padding: 0.5rem 2rem;
Expand Down
3 changes: 1 addition & 2 deletions projects/demo-app/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ body {
padding: 0.5rem;
}

> ul,
&ul {
> * {
padding: 0;
margin: 0;
display: flex;
Expand Down

0 comments on commit 125a116

Please sign in to comment.