Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Parameters for menu css & user button

Browse Source
This commit is contained in:
Adina Țeudan 2023-01-31 08:41:37 +02:00
parent 40e640bc62
commit 3d07e09e11
4 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/styles/_common-variables.scss
View File

@ -51,6 +51,12 @@ body {
--iqser-app-name-font-size: 18px; --iqser-app-name-font-size: 18px;
--iqser-app-name-color: black; --iqser-app-name-color: black;
--iqser-top-bar-height: 61px; --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'; $required-variables: 'iqser-font-family' 'iqser-primary';

11
src/assets/styles/common-menu.scss
View File

@ -1,17 +1,18 @@
@use 'common-mixins'; @use 'common-mixins';
.mat-menu-panel { .mat-menu-panel {
border-radius: 8px !important; border-radius: var(--iqser-menu-border-radius) !important;
max-width: none !important; max-width: none !important;
min-width: 180px !important; min-width: 180px !important;
margin-top: 10px; margin-top: var(--iqser-menu-margin-top);
background-color: var(--iqser-popup-background); background-color: var(--iqser-popup-background);
min-height: unset !important;
@include common-mixins.scroll-bar; @include common-mixins.scroll-bar;
@include common-mixins.drop-shadow; @include common-mixins.drop-shadow;
.mat-menu-content:not(:empty) { .mat-menu-content:not(:empty) {
padding-top: 8px; padding-top: var(--iqser-menu-padding-top);
padding-bottom: 24px; padding-bottom: var(--iqser-menu-padding-bottom);
} }
&.padding-bottom-0 .mat-menu-content:not(:empty) { &.padding-bottom-0 .mat-menu-content:not(:empty) {
@ -26,7 +27,7 @@
font-size: var(--iqser-font-size); font-size: var(--iqser-font-size);
color: var(--iqser-text); color: var(--iqser-text);
padding: 0 26px 0 8px; padding: 0 26px 0 8px;
margin: 0 8px 2px 8px; margin: var(--iqser-menu-item-margin);
border-radius: 4px; border-radius: 4px;
width: -webkit-fill-available; width: -webkit-fill-available;

11
src/lib/users/components/user-button/user-button.component.html
View File

@ -1,7 +1,14 @@
<button [class.overlay]="showDot" mat-button> <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> </button>
<div *ngIf="showDot" class="dot"></div> <div *ngIf="showDot" class="dot"></div>
<ng-template #initialsAvatar>
<iqser-initials-avatar [user]="userService.currentUser$ | async" [withName]="true"></iqser-initials-avatar>
</ng-template>

2
src/lib/users/components/user-button/user-button.component.ts
View File

@ -9,6 +9,8 @@ import { IqserUserService } from '../../services/iqser-user.service';
}) })
export class UserButtonComponent { export class UserButtonComponent {
@Input() showDot = false; @Input() showDot = false;
@Input() icon?: string;
@Input() showDropdownArrow = true;
constructor(readonly userService: IqserUserService) {} constructor(readonly userService: IqserUserService) {}
} }