From 3d07e09e116ef65843517c220ca5f6cf7a479b49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 31 Jan 2023 08:41:37 +0200
Subject: [PATCH] Parameters for menu css & user button

---
 src/assets/styles/_common-variables.scss              |  6 ++++++
 src/assets/styles/common-menu.scss                    | 11 ++++++-----
 .../components/user-button/user-button.component.html | 11 +++++++++--
 .../components/user-button/user-button.component.ts   |  2 ++
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index 1cda6a9..1de6e6c 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -51,6 +51,12 @@ body {
     --iqser-app-name-font-size: 18px;
     --iqser-app-name-color: black;
     --iqser-top-bar-height: 61px;
+    --iqser-menu-margin-top: 10px;
+    --iqser-menu-border-radius: 8px;
+    --iqser-menu-padding-top: 8px;
+    --iqser-menu-padding-bottom: 24px;
+    --iqser-menu-min-height: 24px;
+    --iqser-menu-item-margin: 0 8px 2px 8px;
 }
 
 $required-variables: 'iqser-font-family' 'iqser-primary';
diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss
index 94e07e0..edf323f 100644
--- a/src/assets/styles/common-menu.scss
+++ b/src/assets/styles/common-menu.scss
@@ -1,17 +1,18 @@
 @use 'common-mixins';
 
 .mat-menu-panel {
-    border-radius: 8px !important;
+    border-radius: var(--iqser-menu-border-radius) !important;
     max-width: none !important;
     min-width: 180px !important;
-    margin-top: 10px;
+    margin-top: var(--iqser-menu-margin-top);
     background-color: var(--iqser-popup-background);
+    min-height: unset !important;
     @include common-mixins.scroll-bar;
     @include common-mixins.drop-shadow;
 
     .mat-menu-content:not(:empty) {
-        padding-top: 8px;
-        padding-bottom: 24px;
+        padding-top: var(--iqser-menu-padding-top);
+        padding-bottom: var(--iqser-menu-padding-bottom);
     }
 
     &.padding-bottom-0 .mat-menu-content:not(:empty) {
@@ -26,7 +27,7 @@
         font-size: var(--iqser-font-size);
         color: var(--iqser-text);
         padding: 0 26px 0 8px;
-        margin: 0 8px 2px 8px;
+        margin: var(--iqser-menu-item-margin);
         border-radius: 4px;
         width: -webkit-fill-available;
 
diff --git a/src/lib/users/components/user-button/user-button.component.html b/src/lib/users/components/user-button/user-button.component.html
index bc937c6..517a08e 100644
--- a/src/lib/users/components/user-button/user-button.component.html
+++ b/src/lib/users/components/user-button/user-button.component.html
@@ -1,7 +1,14 @@
 <button [class.overlay]="showDot" mat-button>
-    <iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
+    <ng-container *ngIf="icon; else initialsAvatar">
+        <mat-icon [svgIcon]="icon" class="mr-8"></mat-icon>
+        {{ userService.currentUser$ | async | name }}
+    </ng-container>
 
-    <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
+    <mat-icon *ngIf="showDropdownArrow" svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 
 <div *ngIf="showDot" class="dot"></div>
+
+<ng-template #initialsAvatar>
+    <iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
+</ng-template>
diff --git a/src/lib/users/components/user-button/user-button.component.ts b/src/lib/users/components/user-button/user-button.component.ts
index 2d97814..d567d95 100644
--- a/src/lib/users/components/user-button/user-button.component.ts
+++ b/src/lib/users/components/user-button/user-button.component.ts
@@ -9,6 +9,8 @@ import { IqserUserService } from '../../services/iqser-user.service';
 })
 export class UserButtonComponent {
     @Input() showDot = false;
+    @Input() icon?: string;
+    @Input() showDropdownArrow = true;
 
     constructor(readonly userService: IqserUserService) {}
 }