Skip to content

Commit

Permalink
fix: overlay panel content[3141]
Browse files Browse the repository at this point in the history
  • Loading branch information
Ihar committed Dec 4, 2024
1 parent d071fb9 commit b15abc9
Show file tree
Hide file tree
Showing 8 changed files with 522 additions and 286 deletions.
210 changes: 110 additions & 100 deletions frontend/src/app/modules/policy-engine/policies/policies.component.html
View file

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions frontend/src/app/modules/policy-engine/policies/policies.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -993,3 +993,22 @@
min-width: 150px;
max-width: calc(100vw - 970px);
}

.submenu-arrow {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #6c757d;
position: absolute;
right: 20px;
top: 16px;
}

::ng-deep .sub-menu-overlay-container .p-overlaypanel-content {
padding: 0;
}

::ng-deep .sub-menu-overlay-container .p-overlaypanel-content .sub-menu-container {
padding: 1rem;
}
211 changes: 123 additions & 88 deletions frontend/src/app/modules/policy-engine/policies/policies.component.ts
View file

Large diffs are not rendered by default.

110 changes: 75 additions & 35 deletions frontend/src/app/views/login/login.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,45 +49,85 @@
<!-- </div>-->
<!-- </mat-menu>-->

<p-overlayPanel #demoMenu>
<div mat-menu-item class="demo-menu">
<div class="debug-user">
<button mat-raised-button (click)="authState.doLogin('StandardRegistry','test')">Standard Registry
</button>
<button mat-raised-button (click)="authState.doLogin('Installer','test')">Installer</button>
<button mat-raised-button (click)="authState.doLogin('Installer2','test')">Installer 2</button>
<button mat-raised-button (click)="authState.doLogin('Auditor','test')">Auditor</button>
<button mat-raised-button (click)="authState.doLogin('Registrant','test')">Registrant</button>
<button mat-raised-button (click)="authState.doLogin('VVB','test')">VVB</button>
<button mat-raised-button (click)="authState.doLogin('ProjectProponent','test')">Project Proponent
</button>
<button mat-raised-button (click)="authState.doLogin('Verra','test')">Verra</button>
</div>
<div class="debug-user">
<div class="current-user"
*ngFor="let user of testUsers$ | async as users; index as i; first as isFirst"
(click)="authState.doLogin(user.username, 'test')"
[ngClass]="{
<p-overlayPanel #demoMenu [styleClass]="'demo-menu'">
<!-- <div class="debug-user">-->
<!-- <button mat-raised-button (click)="authState.doLogin('StandardRegistry','test')">Standard Registry-->
<!-- </button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('Installer','test')">Installer</button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('Installer2','test')">Installer 2</button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('Auditor','test')">Auditor</button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('Registrant','test')">Registrant</button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('VVB','test')">VVB</button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('ProjectProponent','test')">Project Proponent-->
<!-- </button>-->
<!-- <button mat-raised-button (click)="authState.doLogin('Verra','test')">Verra</button>-->
<!-- </div>-->
<div class="debug-user buttons">
<p-button
class="raised-button"
label="Standard Registry"
(onClick)="authState.doLogin('StandardRegistry','test')">
</p-button>
<p-button
class="raised-button"
label="Installer"
(onClick)="authState.doLogin('Installer','test')">
</p-button>
<p-button
class="raised-button"
label="Installer 2"
(onClick)="authState.doLogin('Installer2','test')">
</p-button>
<p-button
class="raised-button"
label="Auditor"
(onClick)="authState.doLogin('Auditor','test')">
</p-button>
<p-button
class="raised-button"
label="Registrant"
(onClick)="authState.doLogin('Registrant','test')">
</p-button>
<p-button
class="raised-button"
label="VVB"
(onClick)="authState.doLogin('VVB','test')">
</p-button>
<p-button
class="raised-button"
label="Project Proponent"
(onClick)="authState.doLogin('ProjectProponent','test')">
</p-button>
<p-button
class="raised-button"
label="Verra"
(onClick)="authState.doLogin('Verra','test')">
</p-button>
</div>
<div class="debug-user list">
<div class="current-user"
*ngFor="let user of testUsers$ | async as users; index as i; first as isFirst"
(click)="authState.doLogin(user.username, 'test')"
[ngClass]="{
'current-user-first' : isFirst,
'current-user-last': i === users.length - 1
}">
<div class="current-user-name">
<span>{{ user.username }}</span>
<span class="current-user-role">({{ user.role }})</span>
</div>
<!-- <div class="current-user-policy-roles"-->
<!-- *ngIf="user.policyRoles && user.policyRoles.length"-->
<!-- [matTooltip]="getPoliciesRolesTooltip(user.policyRoles)"-->
<!-- matTooltipClass="policy-roles-tooltip">-->
<!-- <b>User participates in {{ user.policyRoles.length }} policies</b>-->
<!-- </div>-->
<div class="current-user-name">
<span>{{ user.username }}</span>
<span class="current-user-role">({{ user.role }})</span>
</div>
<!-- <div class="current-user-policy-roles"-->
<!-- *ngIf="user.policyRoles && user.policyRoles.length"-->
<!-- [matTooltip]="getPoliciesRolesTooltip(user.policyRoles)"-->
<!-- matTooltipClass="policy-roles-tooltip">-->
<!-- <b>User participates in {{ user.policyRoles.length }} policies</b>-->
<!-- </div>-->

<div class="current-user-policy-roles"
*ngIf="user.policyRoles && user.policyRoles.length"
[pTooltip]="getPoliciesRolesTooltip(user.policyRoles)"
tooltipStyleClass="policy-roles-tooltip">
<b>User participates in {{ user.policyRoles.length }} policies</b>
</div>
<div class="current-user-policy-roles"
*ngIf="user.policyRoles && user.policyRoles.length"
[pTooltip]="getPoliciesRolesTooltip(user.policyRoles)"
tooltipStyleClass="policy-roles-tooltip">
<b>User participates in {{ user.policyRoles.length }} policies</b>
</div>
</div>
</div>
Expand Down
76 changes: 51 additions & 25 deletions frontend/src/app/views/login/login.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,16 +159,16 @@ form {
}
}

.primary-text-button {
color: var(--color-primary, #4169E2);
font-family: Inter, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 30px;
/* 214.286% */
cursor: pointer;
}
//.primary-text-button {
// color: var(--color-primary, #4169E2);
// font-family: Inter, sans-serif;
// font-size: 14px;
// font-style: normal;
// font-weight: 500;
// line-height: 30px;
// /* 214.286% */
// cursor: pointer;
//}

.preloader {
width: 16px;
Expand Down Expand Up @@ -247,26 +247,20 @@ form {
}
}

.demo-menu {
background: white !important;
max-height: 345px;
height: auto;
width: 510px;
border-radius: 30px;
overflow: scroll;

.debug-user button {
width: 145px;
padding: 0 15px;
margin: 5px 4px;
}
::ng-deep .p-overlaypanel-content {
max-height: 347px;
overflow-y: scroll;

.debug-user {
.debug-user.list {
margin-top: 16px;
white-space: normal;
}

.current-user {
border-bottom: 1px dashed gray;
line-height: 48px;
color: var(--color-grey-black-1, #181818);
cursor: pointer;
}

.current-user-name {
Expand Down Expand Up @@ -310,4 +304,36 @@ form {
color: #f44336;
padding: 6px 16px;
background: #fff8f7;
}
}

.debug-user.buttons {
background: white !important;
width: 470px;
max-height: 345px;
height: auto;
border-radius: 30px;
display: grid;
grid-template-columns: repeat(3, 145px);
column-gap: 7px;
row-gap: 7px;
}

::ng-deep p-button.raised-button {
display: grid;
}

::ng-deep p-button.raised-button .p-button {
background: none;
width: 145px;
padding: 0 15px;
border-radius: 24px;
height: 47px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0px rgba(0, 0, 0, 0.14), 0 1px 5px 0px rgba(0, 0, 0, 0.12);
border: none;
}

::ng-deep p-button.raised-button .p-button-label {
color: var(--color-grey-black-1, #181818);
font-size: 14px;
font-weight: 500;
}
Loading

0 comments on commit b15abc9

Please sign in to comment.