sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added tooltip components

Browse Source
This commit is contained in:
sanchezvem
2026-03-29 11:24:09 +01:00
parent 0a1e30cf69
commit 53f6667035
13 changed files with 86 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/challenge-card/challenge-card.component.html
+3
View File
@@ -0,0 +1,3 @@
<p>
challenge-card works!
</p>
src/app/components/challenge-card/challenge-card.component.scss
View File
src/app/components/challenge-card/challenge-card.component.ts
+14
View File
@@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-challenge-card',
templateUrl: './challenge-card.component.html',
styleUrls: ['./challenge-card.component.scss'],
})
export class ChallengeCardComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
src/app/components/friends/friends-list.component.html
+7 -7
View File
@@ -53,7 +53,7 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="--background: #f7f6f2;">
<div class="rounded-xl px-5 m-3 bg-white border border-gray-200 grid grid-cols-3 items-center">
<div class="rounded-lg px-5 m-3 bg-white border border-gray-200 grid grid-cols-3 items-center">
<div>
<ion-avatar slot="start" class="w-20 h-20 p-2">
<img alt="Silhouette of a person's head"
@@ -79,33 +79,33 @@
</div>
<div class="grid grid-cols-3 px-1">
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalChallenge }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis réalisés</p>
</div>
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalWin }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Victoires</p>
</div>
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalPodium }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Podiums</p>
</div>
</div>
<div class="grid grid-cols-2 px-1">
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalBonusChallenge }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis bonus</p>
</div>
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.series }}×</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Séries max</p>
</div>
</div>
<div class="px-1">
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.score }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Score global</p>
</div>
src/app/components/title-part/title-part.component.html
+2 -2
View File
@@ -1,3 +1,3 @@
<p class="font-sans font-semibold ml-4 mt-0 mb-0 text-[14px] text-gray-500">
• <em> {{ textInfo() }} </em>
<p class="font-mono font-semibold ml-4 mt-0 mb-0 text-[14px] text-gray-500">
{{ textInfo() }}
</p>
src/app/components/title-part/title-part.component.ts
+3 -1
View File
@@ -10,5 +10,7 @@ import {IonicModule} from "@ionic/angular";
]
})
export class TitlePartComponent {
textInfo = input.required<string>();
textInfo = input('', {
transform: (x: string) => x.toUpperCase()
});
}
src/app/components/tooltip/tooltip.component.html
+9
View File
@@ -0,0 +1,9 @@
<div [ngClass]="{
'border-l-red-700': color() == 'red',
'border-l-green-700': color() == 'green'}"
class="ml-4 mr-5 pl-4 border border-gray-400 rounded-r-xl border-l-{{color()}}-700 border-l-4 bg-[#f7f6f2]">
<p class="text-[11px] text-gray-600">
<strong class="text-gray-900">{{ title() }}</strong>
— {{ content() }}
</p>
</div>
src/app/components/tooltip/tooltip.component.scss
View File
src/app/components/tooltip/tooltip.component.ts
+16
View File
@@ -0,0 +1,16 @@
import {Component, input} from '@angular/core';
import {NgClass} from "@angular/common";
@Component({
selector: 'app-tooltip',
templateUrl: './tooltip.component.html',
styleUrls: ['./tooltip.component.scss'],
imports: [
NgClass
]
})
export class TooltipComponent {
title = input.required<string>();
content = input.required<string>();
color = input<string>();
}
src/app/pages/groups/groups.component.html
+8
View File
@@ -0,0 +1,8 @@
<ion-header>
<ion-toolbar>
<ion-title class="font-mono">Mes groupes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content style="--background: #f7f6f2;">
</ion-content>
src/app/pages/groups/groups.component.ts
+4 -1
View File
@@ -1,10 +1,13 @@
import {Component} from '@angular/core';
import {IonicModule} from "@ionic/angular";
@Component({
selector: 'app-groups',
templateUrl: './groups.component.html',
styleUrls: ['./groups.component.scss'],
imports: []
imports: [
IonicModule
]
})
export class GroupsComponent {
}
src/app/pages/home/home.component.html
+15 -1
View File
@@ -10,9 +10,23 @@
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>BeReady</ion-title>
<ion-title class="font-mono">BeReady</ion-title>
</ion-toolbar>
</ion-header>
<ion-content style="--background: #f7f6f2;">
<div class="mt-4">
<app-title-part textInfo="Défi bonus du jour"></app-title-part>
<app-challenge-card></app-challenge-card>
</div>
<div class="mt-4">
<app-title-part textInfo="Vote en attente"></app-title-part>
<app-challenge-card></app-challenge-card>
</div>
<div class="mt-4">
<app-title-part textInfo="Défis en cours"></app-title-part>
<app-challenge-card></app-challenge-card>
</div>
</ion-content>
src/app/pages/home/home.component.ts
+5 -1
View File
@@ -2,6 +2,8 @@ import {Component} from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {addIcons} from "ionicons";
import {walkOutline, addOutline} from "ionicons/icons";
import {TitlePartComponent} from "../../components/title-part/title-part.component";
import {ChallengeCardComponent} from "../../components/challenge-card/challenge-card.component";
addIcons({
'profile': walkOutline,
@@ -13,7 +15,9 @@ addIcons({
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
imports: [
IonicModule
IonicModule,
TitlePartComponent,
ChallengeCardComponent
]
})
export class HomeComponent {