tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add icon button component and integrate into cart item for improved UI

Browse Source
This commit is contained in:
ncoronel
2026-07-02 09:13:33 -03:00
parent 202205c038
commit 0a7a9d91c7
9 changed files with 222 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -63,6 +63,57 @@
<hr class="section-divider" />
<div class="icon-button-showcase">
<h2>Icon Buttons</h2>
<p class="text-muted mb-4">
Botones de ícono pequeños con color base <code>#666666</code>, deshabilitados con <code>#A0A0A0</code> y estados hover/active con color de marca (a excepción de trash que usa danger).
</p>
<div class="icon-button-showcase__grid">
<!-- Disabled Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Disabled</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" [disabled]="true" />
<app-icon-button variant="trash" [disabled]="true" />
<app-icon-button variant="angle-left" [disabled]="true" />
<app-icon-button variant="angle-right" [disabled]="true" />
<app-icon-button variant="angle-up" [disabled]="true" />
<app-icon-button variant="angle-down" [disabled]="true" />
<app-icon-button variant="copy" [disabled]="true" />
</div>
</div>
<!-- Normal Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Normal</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" />
<app-icon-button variant="trash" />
<app-icon-button variant="angle-left" />
<app-icon-button variant="angle-right" />
<app-icon-button variant="angle-up" />
<app-icon-button variant="angle-down" />
<app-icon-button variant="copy" />
</div>
</div>
<!-- Hover/Active Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Active / Hover</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" class="hover-preview" />
<app-icon-button variant="trash" class="hover-preview" />
<app-icon-button variant="angle-left" class="hover-preview" />
<app-icon-button variant="angle-right" class="hover-preview" />
<app-icon-button variant="angle-up" class="hover-preview" />
<app-icon-button variant="angle-down" class="hover-preview" />
<app-icon-button variant="copy" class="hover-preview" />
</div>
</div>
</div>
</div>
<div class="input-grid">
<div class="input-field">
<label for="search-input">Texto</label>

41
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -244,3 +244,44 @@ h1 {
}
}
}
.icon-button-showcase {
display: grid;
gap: 1.5rem;
&__grid {
display: grid;
gap: 1.5rem;
background-color: #eaeaea;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid #dee2e6;
}
&__row {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: 1.5rem;
@media (max-width: 575.98px) {
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
}
&__label {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
color: #495057;
letter-spacing: 0.05em;
}
&__items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
}
}

11
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
View File

@@ -5,12 +5,21 @@ import { InputComponent } from '../../../../shared/components/input/input.compon
import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
import { TenantService } from '../../../../core/services/tenant.service';
import { ToastService } from '../../../../core/services/toast.service';
@Component({
selector: 'app-reutilizables-test-page',
imports: [ButtonComponent, CartComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
imports: [
ButtonComponent,
CartComponent,
InputComponent,
PaginatorComponent,
ProductCardComponent,
StoreSectionComponent,
IconButtonComponent
],
templateUrl: './reutilizables-test-page.component.html',
styleUrl: './reutilizables-test-page.component.scss'
})