feat(app): allow scrolling for phoenix menu

HSF · Jun 12, 2021 · 3068d42 · 3068d42
1 parent ac0a0c4
commit 3068d42
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/_theming.scss b/packages/phoenix-ng/projects/phoenix-ui-components/_theming.scss
@@ -28,7 +28,7 @@ $light-theme: mat.define-light-theme($colors);
   --phoenix-text-color-secondary: #777777;
   --phoenix-text-color-hover: #c5c5c5;
   --phoenix-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
-  --phoenix-scroll-color: #d3d3d3;
+  --phoenix-scroll-color: #acacac;
   --phoenix-options-icon-bg: rgba(0, 0, 0, 0.08);
   --phoenix-options-icon-path: #777777;
   --phoenix-icon-shadow: 0px 3px 6px rgba(0, 0, 0, 0.11);
@@ -54,7 +54,7 @@ $light-theme: mat.define-light-theme($colors);
   --phoenix-text-color-secondary: #dbdbdb;
   --phoenix-text-color-hover: #c5c5c5;
   --phoenix-box-shadow: 0px 0px 8px rgb(26, 26, 26);
-  --phoenix-scroll-color: #3d3d3d;
+  --phoenix-scroll-color: #707070;
   --phoenix-options-icon-bg: rgba(255, 255, 255, 0.18);
   --phoenix-options-icon-path: #fff;
   --phoenix-icon-shadow: 0px 4px 8px rgba(0, 0, 0, 0.22);

diff --git a/...components/src/components/phoenix-menu/pheonix-menu-item/phoenix-menu-item.component.html b/...components/src/components/phoenix-menu/pheonix-menu-item/phoenix-menu-item.component.html
@@ -1,4 +1,4 @@
-<div class="phoenix-menu-item">
+<div class="phoenix-menu-item" #phoenixMenuItem>
   <div class="phoenix-menu-item-left align-items-center">
     <!-- If the item has some toggle function -->
     <ng-container *ngIf="currentNode.onToggle; else nodeName">
@@ -42,7 +42,11 @@
         *ngIf="currentNode.configActive"
         (click)="currentNode.configActive = false"
       ></div>
-      <div class="item-config" [hidden]="!currentNode.configActive">
+      <div
+        class="item-config"
+        [hidden]="!currentNode.configActive"
+        [ngStyle]="{ top: phoenixMenuItem.offsetTop + 'px' }"
+      >
         <ng-container
           *ngFor="let config of currentNode.configs"
           [ngSwitch]="config.type"

diff --git a/...components/src/components/phoenix-menu/pheonix-menu-item/phoenix-menu-item.component.scss b/...components/src/components/phoenix-menu/pheonix-menu-item/phoenix-menu-item.component.scss
@@ -6,7 +6,6 @@
   font-size: 0.8rem;
   transition: all 0.5s;
 
-  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/...ng/projects/phoenix-ui-components/src/components/phoenix-menu/phoenix-menu.component.scss b/...ng/projects/phoenix-ui-components/src/components/phoenix-menu/phoenix-menu.component.scss
@@ -1,10 +1,15 @@
-#phoenixMenu {
-  background: var(--phoenix-background-color-secondary);
+:host {
+  width: 15rem;
+  max-width: 45%;
   position: absolute;
   top: 5rem;
   right: 1rem;
-  width: 15rem;
-  max-width: 45%;
+}
+
+#phoenixMenu {
+  background: var(--phoenix-background-color-secondary);
+  max-height: 75vh;
+  overflow-y: auto;
   box-shadow: var(--phoenix-box-shadow);
   z-index: 100;