Skip to content

Commit

Permalink
feat(lib): implemented mat-mini-fab-menu component
Browse files Browse the repository at this point in the history
  • Loading branch information
AnthonyNahas committed Dec 19, 2022
1 parent 11b56cf commit abfbbaa
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import {MatIconModule} from '@angular/material/icon';
import {FlexLayoutModule} from '@angular/flex-layout';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule} from '@angular/material/button';
import {MatMiniFabMenuComponent} from './mat-mini-fab-menu/mat-mini-fab-menu.component';

@NgModule({
declarations: [MatFabMenuComponent],
declarations: [MatFabMenuComponent, MatMiniFabMenuComponent, MatMiniFabMenuComponent],
imports: [
CommonModule,
MatButtonModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<div [fxLayout]="layout" class="container" fxLayoutAlign="center center" fxLayoutGap="16px">
<div fxLayoutAlign="center">
<button (click)="isActive = !isActive"
[color]="color" [disabled]="disabled"
type="button"
[ngClass]="{
'mat-fab' : !isActive,
'mat-mini-fab' : isActive
}"
mat-mini-fab>
<mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
</button>
</div>
<div *ngIf="isActive" [@fabsStagger]="fabButtons.length"
[fxLayout]="layout2" fxLayoutAlign="center center" fxLayoutGap="16px">
<button (click)="selectFabMenu(fab)"
*ngFor="let fab of fabButtons"
[color]="fab?.color"
[matTooltip]="fab?.tooltip"
[matTooltipPosition]="fab?.tooltipPosition"
[ngClass]="{'fullSVG' : fab?.imgUrl}"
type="button"
mat-fab>
<mat-icon *ngIf="fab?.icon" [color]="fab?.iconColor">{{fab?.icon}}</mat-icon>
<img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon">
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
:host {
display: block;
}

.fullSVG {
img {
width: 100%;
}

::ng-deep span.mat-button-wrapper {
padding: 0;
}
}

.container {
//position: fixed;
//bottom: 15px;
//right: 15px;
//z-index: 100;

> div {
//display: flex;
//flex-direction: column-reverse;
//align-items: center;
margin-bottom: 5px;

button {
margin-bottom: 16px;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { MatMiniFabMenuComponent } from './mat-mini-fab-menu.component';

describe('MatMiniFabMenuComponent', () => {
let component: MatMiniFabMenuComponent;
let fixture: ComponentFixture<MatMiniFabMenuComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MatMiniFabMenuComponent ]
})
.compileComponents();

fixture = TestBed.createComponent(MatMiniFabMenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
import {MatFabMenuComponent} from '../mat-fab-menu.component';

@Component({
selector: 'mat-mini-fab-menu',
templateUrl: './mat-mini-fab-menu.component.html',
styleUrls: ['./mat-mini-fab-menu.component.scss']
})
export class MatMiniFabMenuComponent extends MatFabMenuComponent{

}
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
*/

export * from './lib/mat-fab-menu.component';
export * from './lib/mat-mini-fab-menu/mat-mini-fab-menu.component';
export * from './lib/mat-fab-menu.module';

0 comments on commit abfbbaa

Please sign in to comment.