feat(console): MDC components (#6482)

mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Max Peintner
2023-10-26 08:29:06 +00:00
committed by GitHub
co-authored by Elio Bischof
parent cb7b50b513
commit b099a26a16
412 changed files with 2711 additions and 2698 deletions
@@ -5,12 +5,12 @@
<button
(click)="$event.stopPropagation()"
*ngIf="hasActions"
class="table-actions-trigger"
mat-icon-button
class="more-button"
[matMenuTriggerFor]="actions"
data-e2e="table-actions-button"
>
<mat-icon>more_horiz</mat-icon>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #actions="matMenu" xPosition="before" class="table-actions-menu">
@@ -1,19 +1,14 @@
@use '@angular/material' as mat;
@mixin table-actions-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$card-background-color: mat.get-color-from-palette($background, cards);
$card-background-color: map-get($background, cards);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
.cnsl-table-action-wrapper {
position: relative;
height: 36px;
.cnsl-table-action {
position: absolute;
right: 0;
display: flex;
background-color: $card-background-color;
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -25,6 +20,9 @@
box-shadow: 0 0 3px #0000001a;
height: 36px;
align-items: center;
width: fit-content;
float: right;
overflow: hidden;
button {
height: 36px;
@@ -32,6 +30,12 @@
display: flex;
align-items: center;
justify-content: center;
&.more-button {
font-size: 1rem;
line-height: 1.5rem;
padding: 0;
}
}
button:only-of-type {
@@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { TableActionsComponent } from './table-actions.component';