Skip to content

Commit

Permalink
Add bounce effect wehn loading graphics
Browse files Browse the repository at this point in the history
  • Loading branch information
renanfranca committed Dec 12, 2021
1 parent c02f1f4 commit 393f8f6
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ <h2 data-cy="babyProfileDetailsHeading">
<fa-icon icon="plus"></fa-icon>
<span class="d-none d-sm-inline" jhiTranslate="gatewayApp.babyBabyProfile.addHumorHistory"> Humor </span>
</a>
<button (click)="showHideWeekAverageHumorHistoryGraphic()" class="btn btn-info btn-sm p-2 mt-1">
<fa-icon icon="chart-area"></fa-icon>
<button (click)="showHideWeekAverageHumorHistoryGraphic()" [disabled]="graphicLoading" class="btn btn-info btn-sm p-2 mt-1">
<fa-icon icon="chart-area" [ngClass]="graphicLoading ? 'fa-bounce' : ''"></fa-icon>
</button>
</div>
</div>
Expand Down Expand Up @@ -107,8 +107,8 @@ <h2 data-cy="babyProfileDetailsHeading">
<fa-icon icon="plus"></fa-icon>
<span class="d-none d-sm-inline" jhiTranslate="gatewayApp.babyBabyProfile.addNap"> Nap </span>
</a>
<button (click)="showHideWeekAverageNapHumorGraphic()" class="btn btn-info btn-sm p-2 mt-1">
<fa-icon icon="chart-area"></fa-icon>
<button (click)="showHideWeekAverageNapHumorGraphic()" [disabled]="graphicLoading" class="btn btn-info btn-sm p-2 mt-1">
<fa-icon icon="chart-area" [ngClass]="graphicLoading ? 'fa-bounce' : ''"></fa-icon>
</button>
</div>
</div>
Expand Down Expand Up @@ -186,9 +186,10 @@ <h2 data-cy="babyProfileDetailsHeading">
<button
(click)="showHideLastWeightsDaysAgoGraphic()"
[hidden]="hideLastWeightsDaysAgoGraphicIcon"
[disabled]="graphicLoading"
class="btn btn-info btn-sm p-2 mt-1"
>
<fa-icon icon="chart-area"></fa-icon>
<fa-icon icon="chart-area" [ngClass]="graphicLoading ? 'fa-bounce' : ''"></fa-icon>
</button>
</div>
</div>
Expand Down Expand Up @@ -227,9 +228,10 @@ <h4 class="nvd3-chart-title mobile">{{ d3ChartTranslate.last30Days }}</h4>
<button
(click)="showHideLastHeightsDaysAgoGraphic()"
[hidden]="hideLastHeightsDaysAgoGraphicIcon"
[disabled]="graphicLoading"
class="btn btn-info btn-sm p-2 mt-1"
>
<fa-icon icon="chart-area"></fa-icon>
<fa-icon icon="chart-area" [ngClass]="graphicLoading ? 'fa-bounce' : ''"></fa-icon>
</button>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export class BabyProfileDetailComponent implements OnInit, AfterViewInit {
latestHeight?: any;
favoriteNapPlace?: any;
d3ChartTranslate: any = {};
graphicLoading = false;
@ViewChild(NvD3Component) nvD3Component: NvD3Component | undefined;

constructor(
Expand Down Expand Up @@ -190,9 +191,11 @@ export class BabyProfileDetailComponent implements OnInit, AfterViewInit {
this.averageNapHumorLastCurrentWeek = {};
this.createAverageNapsHumorLastWeekCurrentWeekChart();
} else {
this.graphicLoading = true;
this.napService.lastWeekCurrentWeekAverageNapsHumorEachDayByBabyProfile(this.babyProfile!.id!).subscribe((res: HttpResponse<any>) => {
this.averageNapHumorLastCurrentWeek = res.body;
this.createAverageNapsHumorLastWeekCurrentWeekChart();
this.graphicLoading = false;
});
}
}
Expand All @@ -213,11 +216,13 @@ export class BabyProfileDetailComponent implements OnInit, AfterViewInit {
this.averageHumorHistoryLastCurrentWeek = {};
this.createAverageHumorHistoryLastWeekCurrentWeekChart();
} else {
this.graphicLoading = true;
this.humorHistoryService
.lastWeekCurrentWeekAverageHumorHistoryEachDayByBabyProfile(this.babyProfile!.id!)
.subscribe((res: HttpResponse<any>) => {
this.averageHumorHistoryLastCurrentWeek = res.body;
this.createAverageHumorHistoryLastWeekCurrentWeekChart();
this.graphicLoading = false;
});
}
}
Expand All @@ -231,9 +236,11 @@ export class BabyProfileDetailComponent implements OnInit, AfterViewInit {
this.lastWeightsDaysAgo = [];
this.createLastWeightsDaysAgo();
} else {
this.graphicLoading = true;
this.weightService.lastWeightsByDaysByBabyProfile(this.babyProfile!.id!, 30).subscribe((res: HttpResponse<any>) => {
this.lastWeightsDaysAgo = res.body;
this.createLastWeightsDaysAgo();
this.graphicLoading = false;
});
}
}
Expand All @@ -247,9 +254,11 @@ export class BabyProfileDetailComponent implements OnInit, AfterViewInit {
this.lastHeightsDaysAgo = {};
this.createLastHeightsDaysAgo();
} else {
this.graphicLoading = true;
this.heightService.lastHeightsByDaysByBabyProfile(this.babyProfile!.id!, 30).subscribe((res: HttpResponse<any>) => {
this.lastHeightsDaysAgo = res.body;
this.createLastHeightsDaysAgo();
this.graphicLoading = false;
});
}
}
Expand Down
80 changes: 80 additions & 0 deletions src/main/webapp/content/scss/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -271,4 +271,84 @@ body {
h4.mobile {
font-size: 1.15rem;
}
//source: https://gist.github.com/gubi/8483199 fa-bounce
.fa-bounce {
display: inline-block;
position: relative;
-moz-animation: bounce 1s infinite linear;
-o-animation: bounce 1s infinite linear;
-webkit-animation: bounce 1s infinite linear;
animation: bounce 1s infinite linear;
}

@-webkit-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-moz-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-o-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-ms-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
/* jhipster-needle-scss-add-main JHipster will add new css style */

0 comments on commit 393f8f6

Please sign in to comment.