Browse Source

Feature/restore badge style ("filter indicator") in assistant menu button of header (#6182)

* feat(styles): add badge background color overrides

* fix(styles): make the parent display inline-flex

* fix(styles): remove badge size

* fix(styles): change to NoBreak

* fix(styles): remove style overrides in scss
feature/migrate-from-angular-material-design-2-to-3
Kenrick Tandrian 1 week ago
committed by GitHub
parent
commit
bc7872e397
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 8
      apps/client/src/app/components/header/header.component.html
  2. 11
      apps/client/src/app/components/header/header.component.scss
  3. 6
      apps/client/src/styles/theme.scss

8
apps/client/src/app/components/header/header.component.html

@ -124,15 +124,15 @@
>
</li>
@if (hasPermissionToAccessAssistant) {
<li class="list-inline-item">
<li class="d-inline-flex list-inline-item">
<button
#assistantTrigger="matMenuTrigger"
class="h-100 no-min-width px-2"
mat-button
matBadge="✓"
matBadge="&NoBreak;"
matBadgeSize="small"
[mat-menu-trigger-for]="assistantMenu"
matButton
[matBadgeHidden]="!hasFilters || !hasPermissionToChangeFilters"
[matMenuTriggerFor]="assistantMenu"
[matMenuTriggerRestoreFocus]="false"
(menuOpened)="onOpenAssistant()"
>

11
apps/client/src/app/components/header/header.component.scss

@ -32,17 +32,6 @@
text-underline-offset: 0.25rem;
}
&.mat-badge {
::ng-deep {
.mat-badge-content {
--mat-badge-small-size-container-overlap-offset: -0.9rem;
--mat-badge-small-size-text-size: 0;
transform: scale(0.45);
}
}
}
ion-icon {
font-size: 1.5rem;

6
apps/client/src/styles/theme.scss

@ -305,6 +305,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
}
}
@include mat.badge-overrides(
(
background-color: var(--gf-theme-primary-500)
)
);
@include mat.button-overrides(
(
filled-container-color: var(--gf-theme-primary-500)

Loading…
Cancel
Save