Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: correct margin, spacing and gap sizes; refactoring #57

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 0 additions & 25 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -36,7 +36,6 @@
"@angular/common": "^15.0.4",
"@angular/compiler": "^15.0.4",
"@angular/core": "^15.0.4",
"@angular/flex-layout": "^14.0.0-beta.41",
"@angular/forms": "^15.0.4",
"@angular/material": "^15.0.3",
"@angular/platform-browser": "^15.0.4",
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
<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-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">
<div class="container flexLayoutCenter" [style.flex-direction]="layout">
<button (click)="isActive = !isActive"
[color]="color" [disabled]="disabled"
type="button"
[ngClass]="{
'mat-fab' : !isActive,
'mat-mini-fab' : isActive
}"
mat-fab>
<mat-icon [@fabToggler]="{value: isActive}">{{icon}}</mat-icon> <!-- Animation here -->
</button>
<div *ngIf="isActive" class="flexLayoutCenter" [@fabsStagger]="fabButtons.length"
[style.flex-direction]="layout2">
<button (click)="selectFabMenu(fab)"
*ngFor="let fab of fabButtons"
[color]="fab?.color"
@@ -22,7 +20,7 @@
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">
<img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon" />
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -22,10 +22,20 @@
//display: flex;
//flex-direction: column-reverse;
//align-items: center;
margin-bottom: 5px;

button {
margin-bottom: 16px;
}
// Do not force the library user to define negative margin to align the button
//margin-bottom: 5px;

// Do not add additional padding which results in different gap sizes depending upon the direction.
//button {
// margin-bottom: 16px;
//}
}
}

.flexLayoutCenter {
display: flex;
place-content: center;
align-items: center;
gap: 16px;
}
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
import {NgModule} from '@angular/core';
import {MatFabMenuComponent} from './mat-fab-menu.component';
import {CommonModule} from '@angular/common';
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';
import { NgModule } from '@angular/core';
import { MatFabMenuComponent } from './mat-fab-menu.component';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
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, MatMiniFabMenuComponent],
imports: [
CommonModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
FlexLayoutModule
],
exports: [MatFabMenuComponent, MatMiniFabMenuComponent]
imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule],
exports: [MatFabMenuComponent, MatMiniFabMenuComponent],
})
export class MatFabMenuModule {
}
export class MatFabMenuModule {}
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
<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">
<div class="container flexLayoutCenter" [style.flex-direction]="layout">
<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 *ngIf="isActive" class="flexLayoutCenter" [@fabsStagger]="fabButtons.length"
[style.flex-direction]="layout2">
<button (click)="selectFabMenu(fab)"
*ngFor="let fab of fabButtons"
[color]="fab?.color"
@@ -22,7 +20,7 @@
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">
<img *ngIf="fab?.imgUrl" [src]="fab?.imgUrl" alt="icon" />
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -22,10 +22,20 @@
//display: flex;
//flex-direction: column-reverse;
//align-items: center;
margin-bottom: 5px;

button {
margin-bottom: 16px;
}
// Do not force the library user to define negative margin to align the button
//margin-bottom: 5px;

// Do not add additional padding which results in different gap sizes depending upon the direction.
//button {
// margin-bottom: 16px;
//}
}
}

.flexLayoutCenter {
display: flex;
place-content: center;
align-items: center;
gap: 16px;
}
28 changes: 17 additions & 11 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -435,7 +435,7 @@ <h2>Install</h2>
<h2>Usage</h2>

<mat-card class="card-container-example">
<mat-card-content>
<mat-card-content style="display: flex; flex-direction: column">
<p>
Color:
<mat-radio-group aria-label="Select an example option"
@@ -458,35 +458,41 @@ <h2>Usage</h2>
</p>

<p>
Direction
Direction:
<mat-radio-group aria-label="Select a direction"
[(ngModel)]="direction"
(ngModelChange)="logDirection()">
[(ngModel)]="direction">
<mat-radio-button value="top">Top</mat-radio-button>
<mat-radio-button value="bottom">Bottom</mat-radio-button>
<mat-radio-button value="left">Left</mat-radio-button>
<mat-radio-button value="right">Right</mat-radio-button>
</mat-radio-group>
</p>
<p>
Button size:
<mat-radio-group aria-label="Select the button size"
[(ngModel)]="buttonSize">
<mat-radio-button [value]="1">Normal</mat-radio-button>
<mat-radio-button [value]="2">Mini</mat-radio-button>
</mat-radio-group>
</p>

<p>
<mat-slide-toggle #isActive>isActive</mat-slide-toggle>
</p>
<p>
<mat-slide-toggle #disabled>disabled</mat-slide-toggle>
</p>
<div fxLayout="column"
[fxLayoutAlign]="layout"
[ngStyle.xs]="{'height':'60%'}"
[ngStyle.sm]="{'height':'70%'}"
style="height: 80%">
<mat-fab-menu [color]="color"
<div style="flex: 1 1 0px">
<mat-fab-menu *ngIf="buttonSize === 1"
[color]="color"
[direction]="direction"
[fabButtons]="exampleFabButtons"
[isActive]="isActive.checked"
[disabled]="disabled.checked">
</mat-fab-menu>

<mat-mini-fab-menu [color]="color"
<mat-mini-fab-menu *ngIf="buttonSize === 2"
[color]="color"
[direction]="direction"
[fabButtons]="exampleFabButtons"
[isActive]="isActive.checked"
5 changes: 0 additions & 5 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -14,10 +14,6 @@ mat-fab-menu.fix-bottom-right {
mat-card-content {
height: 100%;

mat-fab-menu {
margin-bottom: 16px;
}

.mat-radio-button ~ .mat-radio-button {
margin-left: 16px;
}
@@ -31,4 +27,3 @@ markdown {
max-width: 100%;
margin: 4px;
}

13 changes: 1 addition & 12 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -11,11 +11,11 @@ export class AppComponent implements OnInit {
title = 'fab-menu';

direction: MatFabMenuDirection = 'top';
buttonSize = 1;

color: ThemePalette = 'primary';
exampleIndex = 1;
exampleFabButtons: MatFabMenu[];
layout = 'end end';

fabButtonsRandom: MatFabMenu[] = [
{
@@ -109,23 +109,12 @@ export class AppComponent implements OnInit {
this.exampleFabButtons = this.fabProfessions;
}

logDirection() {
if (this.direction === 'bottom') {
this.layout = 'start end';
} else if (this.direction === 'right') {
this.layout = 'start start';
} else {
this.layout = 'end end';
}
}

onExampleChanged($event: number) {
console.log('on example changed', $event);
switch ($event) {
case 1:
this.exampleFabButtons = this.fabProfessions;
return;

case 2:
this.exampleFabButtons = this.fabCountries;
return;
39 changes: 17 additions & 22 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,37 +1,32 @@
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {Angulartics2Module} from 'angulartics2';
import {MarkdownModule} from 'ngx-markdown';
import {FlexLayoutModule} from '@angular/flex-layout';
import {HttpClientModule} from '@angular/common/http';
import {MatFabMenuModule} from '@angular-material-extensions/fab-menu';
import {FormsModule} from '@angular/forms';
import {MatRadioModule} from '@angular/material/radio';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatCardModule} from '@angular/material/card';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Angulartics2Module } from 'angulartics2';
import { MarkdownModule } from 'ngx-markdown';
import { HttpClientModule } from '@angular/common/http';
import { MatFabMenuModule } from '@angular-material-extensions/fab-menu';
import { FormsModule } from '@angular/forms';
import { MatRadioModule } from '@angular/material/radio';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatCardModule } from '@angular/material/card';

@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule.withServerTransition({appId: 'serverApp'}),
BrowserModule.withServerTransition({ appId: 'serverApp' }),
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
FlexLayoutModule,
Angulartics2Module.forRoot(),
MarkdownModule.forRoot(),
MatFabMenuModule,
MatCardModule,
MatRadioModule,
MatSlideToggleModule
MatSlideToggleModule,
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule {
}
export class AppModule {}