feat: integrate FontAwesome icons across various components
- Updated apartment-list component to use FontAwesome icons for better visual representation. - Refactored brand-mark component to utilize FontAwesome for the brand icon. - Enhanced dashboard-page with FontAwesome icons for improved navigation. - Replaced SVG icons with FontAwesome in settings-page for consistency and better performance. - Updated sign-in-page to use FontAwesome for the sign-in action icon. - Refactored tenant-card to incorporate FontAwesome icons for attachments. - Enhanced workspace-navigation with FontAwesome icons for all navigation items. - Applied consistent styling for fa-icon elements across components.
This commit is contained in:
nessar committed
1 parent
ba695e2426
commit
713ab3b2d9
19 files changed
+534
-456
No files matched your search
@@ -1,166 +1,204 @@
|
||||
:host {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.content-region > mat-progress-bar {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.content-region>mat-progress-bar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.refresh-error {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-heading h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
.page-heading > div > p:last-child {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
|
||||
.page-heading>div>p:last-child {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.page-heading .primary-action {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.button-plus {
|
||||
margin-right: 4px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.empty-state,
|
||||
.apartment-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 46px 22px;
|
||||
text-align: center;
|
||||
padding: 46px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-illustration {
|
||||
display: grid;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
place-items: center;
|
||||
margin: 0 auto 22px;
|
||||
border-radius: 16px;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent);
|
||||
display: grid;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
place-items: center;
|
||||
margin: 0 auto 22px;
|
||||
border-radius: 16px;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.empty-illustration svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
|
||||
.empty-illustration fa-icon {
|
||||
display: flex;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.empty-illustration fa-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.45rem;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
.empty-state > p:not(.eyebrow) {
|
||||
max-width: 440px;
|
||||
margin: 0 auto 22px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
|
||||
.empty-state>p:not(.eyebrow) {
|
||||
max-width: 440px;
|
||||
margin: 0 auto 22px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-state .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--accent);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
--mdc-outlined-button-label-text-color: var(--accent);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.apartments-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.apartment-card {
|
||||
padding: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.apartment-card-topline {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.property-label {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.property-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.apt-info h2 {
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.apt-address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.apt-address svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
flex: 0 0 17px;
|
||||
margin-top: 2px;
|
||||
|
||||
.apt-address fa-icon {
|
||||
display: flex;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
flex: 0 0 17px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.apt-address fa-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.apt-desc {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.apt-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.apt-actions .mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--accent);
|
||||
--mdc-text-button-label-text-color: var(--accent);
|
||||
}
|
||||
|
||||
.apt-actions .danger-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--danger);
|
||||
--mdc-text-button-label-text-color: var(--danger);
|
||||
}
|
||||
|
||||
.apt-actions mat-spinner {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card-error {
|
||||
margin: 14px 0 0;
|
||||
color: var(--danger);
|
||||
font-size: 0.84rem;
|
||||
margin: 14px 0 0;
|
||||
color: var(--danger);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
.page-heading .primary-action {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.page-heading .primary-action {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -1,117 +1,92 @@
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Portefeuille</p>
|
||||
<h1>Mes appartements</h1>
|
||||
<p>Les biens rattachés à votre activité LMNP.</p>
|
||||
</div>
|
||||
<button mat-flat-button type="button" class="primary-action" (click)="addRequested.emit()">
|
||||
<span class="button-plus" aria-hidden="true">+</span>Ajouter un appartement
|
||||
</button>
|
||||
<div>
|
||||
<p class="eyebrow">Portefeuille</p>
|
||||
<h1>Mes appartements</h1>
|
||||
<p>Les biens rattachés à votre activité LMNP.</p>
|
||||
</div>
|
||||
<button mat-flat-button type="button" class="primary-action" (click)="addRequested.emit()">
|
||||
<span aria-hidden="true">+</span> Ajouter un appartement
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="content-region" [attr.aria-busy]="loadState().loading">
|
||||
@if (loadState().loaded && loadState().loading) {
|
||||
<mat-progress-bar mode="indeterminate" aria-label="Actualisation des appartements" />
|
||||
}
|
||||
@if (loadState().loaded && loadState().error) {
|
||||
<div class="refresh-error" role="alert">
|
||||
<p>{{ loadState().error }}</p>
|
||||
<button mat-button type="button" (click)="retryRequested.emit()">Réessayer</button>
|
||||
</div>
|
||||
}
|
||||
@if (!loadState().loaded && loadState().loading) {
|
||||
<div
|
||||
class="apartments-grid loading-region"
|
||||
aria-busy="true"
|
||||
aria-label="Chargement des appartements"
|
||||
>
|
||||
@for (placeholder of [1, 2, 3]; track placeholder) {
|
||||
<article class="apartment-card skeleton-card" aria-hidden="true">
|
||||
<span class="skeleton-line skeleton-line-short"></span>
|
||||
<span class="skeleton-line skeleton-line-title"></span>
|
||||
<span class="skeleton-line"></span>
|
||||
<span class="skeleton-line skeleton-line-medium"></span>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
} @else if (!loadState().loaded && loadState().error) {
|
||||
<article class="load-error" role="alert">
|
||||
<h2>Chargement impossible</h2>
|
||||
<p>{{ loadState().error }}</p>
|
||||
<button mat-stroked-button type="button" (click)="retryRequested.emit()">Réessayer</button>
|
||||
</article>
|
||||
} @else if (apartments().length === 0) {
|
||||
<article class="empty-state">
|
||||
<div class="empty-illustration" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="m4 10 8-6 8 6v10H4z" />
|
||||
<path d="M9 20v-6h6v6" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="eyebrow">Commencez ici</p>
|
||||
<h2>Aucun appartement enregistré</h2>
|
||||
<p>Ajoutez votre premier bien pour construire votre portefeuille.</p>
|
||||
<button mat-stroked-button type="button" (click)="addRequested.emit()">
|
||||
Ajouter un appartement
|
||||
</button>
|
||||
</article>
|
||||
} @else {
|
||||
<div class="apartments-grid">
|
||||
@for (apt of apartments(); track apt.id) {
|
||||
<article class="apartment-card" [attr.aria-busy]="!!apt.id && deletingIds().has(apt.id)">
|
||||
<div class="apartment-card-topline">
|
||||
<span class="property-label">Bien immobilier</span>
|
||||
<span class="property-value">{{ apt.purchasePrice.toLocaleString('fr-FR') }} €</span>
|
||||
</div>
|
||||
<div class="apt-info">
|
||||
<h2>{{ apt.name }}</h2>
|
||||
<p class="apt-address">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z" />
|
||||
<circle cx="12" cy="10" r="2.5" />
|
||||
</svg>
|
||||
{{ apt.address }}
|
||||
</p>
|
||||
@if (apt.description) {
|
||||
<p class="apt-desc">{{ apt.description }}</p>
|
||||
}
|
||||
</div>
|
||||
@if (apt.id && deleteErrors()[apt.id]) {
|
||||
<p class="card-error" role="alert">{{ deleteErrors()[apt.id] }}</p>
|
||||
}
|
||||
<div class="apt-actions" aria-live="polite">
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
[disabled]="!!apt.id && deletingIds().has(apt.id)"
|
||||
(click)="editRequested.emit(apt)"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
@if (apt.id) {
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="danger-action"
|
||||
[disabled]="deletingIds().has(apt.id)"
|
||||
(click)="deleteRequested.emit(apt.id)"
|
||||
>
|
||||
@if (deletingIds().has(apt.id)) {
|
||||
<mat-spinner diameter="16" aria-hidden="true" /> Suppression…
|
||||
} @else {
|
||||
Supprimer
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@if (loadState().loaded && loadState().loading) {
|
||||
<mat-progress-bar mode="indeterminate" aria-label="Actualisation des appartements" />
|
||||
}
|
||||
@if (loadState().loaded && loadState().error) {
|
||||
<div class="refresh-error" role="alert">
|
||||
<p>{{ loadState().error }}</p>
|
||||
<button mat-button type="button" (click)="retryRequested.emit()">Réessayer</button>
|
||||
</div>
|
||||
}
|
||||
@if (!loadState().loaded && loadState().loading) {
|
||||
<div class="apartments-grid loading-region" aria-busy="true" aria-label="Chargement des appartements">
|
||||
@for (placeholder of [1, 2, 3]; track placeholder) {
|
||||
<article class="apartment-card skeleton-card" aria-hidden="true">
|
||||
<span class="skeleton-line skeleton-line-short"></span>
|
||||
<span class="skeleton-line skeleton-line-title"></span>
|
||||
<span class="skeleton-line"></span>
|
||||
<span class="skeleton-line skeleton-line-medium"></span>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
} @else if (!loadState().loaded && loadState().error) {
|
||||
<article class="load-error" role="alert">
|
||||
<h2>Chargement impossible</h2>
|
||||
<p>{{ loadState().error }}</p>
|
||||
<button mat-stroked-button type="button" (click)="retryRequested.emit()">Réessayer</button>
|
||||
</article>
|
||||
} @else if (apartments().length === 0) {
|
||||
<article class="empty-state">
|
||||
<div class="empty-illustration" aria-hidden="true">
|
||||
<fa-icon [icon]="faHouse" />
|
||||
</div>
|
||||
<p class="eyebrow">Commencez ici</p>
|
||||
<h2>Aucun appartement enregistré</h2>
|
||||
<p>Ajoutez votre premier bien pour construire votre portefeuille.</p>
|
||||
<button mat-stroked-button type="button" (click)="addRequested.emit()">
|
||||
Ajouter un appartement
|
||||
</button>
|
||||
</article>
|
||||
} @else {
|
||||
<div class="apartments-grid">
|
||||
@for (apt of apartments(); track apt.id) {
|
||||
<article class="apartment-card" [attr.aria-busy]="!!apt.id && deletingIds().has(apt.id)">
|
||||
<div class="apartment-card-topline">
|
||||
<span class="property-label">Bien immobilier</span>
|
||||
<span class="property-value">{{ apt.purchasePrice.toLocaleString('fr-FR') }} €</span>
|
||||
</div>
|
||||
<div class="apt-info">
|
||||
<h2>{{ apt.name }}</h2>
|
||||
<p class="apt-address">
|
||||
<fa-icon [icon]="faLocationDot" aria-hidden="true" />
|
||||
{{ apt.address }}
|
||||
</p>
|
||||
@if (apt.description) {
|
||||
<p class="apt-desc">{{ apt.description }}</p>
|
||||
}
|
||||
</div>
|
||||
@if (apt.id && deleteErrors()[apt.id]) {
|
||||
<p class="card-error" role="alert">{{ deleteErrors()[apt.id] }}</p>
|
||||
}
|
||||
<div class="apt-actions" aria-live="polite">
|
||||
<button mat-button type="button" [disabled]="!!apt.id && deletingIds().has(apt.id)"
|
||||
(click)="editRequested.emit(apt)">
|
||||
Modifier
|
||||
</button>
|
||||
@if (apt.id) {
|
||||
<button mat-button type="button" class="danger-action" [disabled]="deletingIds().has(apt.id)"
|
||||
(click)="deleteRequested.emit(apt.id)">
|
||||
@if (deletingIds().has(apt.id)) {
|
||||
<mat-spinner diameter="16" aria-hidden="true" /> Suppression…
|
||||
} @else {
|
||||
Supprimer
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { faHouse, faLocationDot } from '@fortawesome/free-solid-svg-icons';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
@@ -7,11 +9,13 @@ import { LoadState } from '../../services/workspace-resource';
|
||||
|
||||
@Component({
|
||||
selector: 'app-apartment-list',
|
||||
imports: [MatButtonModule, MatProgressBarModule, MatProgressSpinnerModule],
|
||||
imports: [FontAwesomeModule, MatButtonModule, MatProgressBarModule, MatProgressSpinnerModule],
|
||||
templateUrl: './apartment-list.html',
|
||||
styleUrl: './apartment-list.css',
|
||||
})
|
||||
export class ApartmentList {
|
||||
readonly faHouse = faHouse;
|
||||
readonly faLocationDot = faLocationDot;
|
||||
readonly apartments = input.required<Apartment[]>();
|
||||
readonly loadState = input.required<LoadState>();
|
||||
readonly deletingIds = input<ReadonlySet<string>>(new Set());
|
||||
|
||||
Reference in new issue
Block a user