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

feat: differentiate between header and footer colors

Browse Source
This commit is contained in:
ncoronel
2026-07-01 15:37:44 -03:00
parent b61ae3cb32
commit ad39ccb561
12 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.routes.spec.ts
View File

@@ -16,7 +16,8 @@ const tenant: Tenant = {
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};

3
src/app/app.spec.ts
View File

@@ -15,7 +15,8 @@ const tenant: Tenant = {
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};

14
src/app/app.ts
View File

@@ -34,7 +34,8 @@ function hexToRgb(hex: string): string {
'[style.--tenant-secondary-rgb]': 'tenantSecondaryColorRgb()',
'[style.--tenant-danger-rgb]': 'tenantDangerColorRgb()',
'[style.--tenant-success-rgb]': 'tenantSuccessColorRgb()',
'[style.--tenant-header-footer-bg]': 'tenantHeaderFooterBgColor()'
'[style.--tenant-header-bg]': 'tenantHeaderBgColor()',
'[style.--tenant-footer-bg]': 'tenantFooterBgColor()'
}
})
export class App {
@@ -66,10 +67,15 @@ export class App {
protected readonly tenantSuccessColorRgb = computed(() =>
hexToRgb(this.tenantSuccessColor())
);
protected readonly tenantHeaderFooterBgColor = computed(
protected readonly tenantHeaderBgColor = computed(
() =>
this.tenantService.tenant()?.header_footer_bg_color ??
DEFAULT_TENANT_BRANDING.headerFooterBgColor
this.tenantService.tenant()?.header_bg_color ??
DEFAULT_TENANT_BRANDING.headerBgColor
);
protected readonly tenantFooterBgColor = computed(
() =>
this.tenantService.tenant()?.footer_bg_color ??
DEFAULT_TENANT_BRANDING.footerBgColor
);
}

2
src/app/core/layout/store-layout/store-footer/store-footer.component.scss
View File

@@ -1,5 +1,5 @@
.store-layout__footer {
background-color: var(--tenant-header-footer-bg);
background-color: var(--tenant-footer-bg);
}
.store-layout__brand-slot {

6
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -1,6 +1,6 @@
.store-layout__header {
color: #ffffff;
background-color: var(--tenant-header-footer-bg);
background-color: var(--tenant-header-bg);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
@@ -58,14 +58,14 @@
.store-layout__search-button {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
background-color: color-mix(in srgb, white 10%, var(--tenant-header-footer-bg));
background-color: color-mix(in srgb, white 10%, var(--tenant-header-bg));
}
.store-layout__search-button:hover,
.store-layout__search-button:focus-visible {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.28);
background-color: color-mix(in srgb, white 16%, var(--tenant-header-footer-bg));
background-color: color-mix(in srgb, white 16%, var(--tenant-header-bg));
}
.store-layout__action-button {

3
src/app/core/layout/store-layout/store-layout.component.spec.ts
View File

@@ -15,7 +15,8 @@ const tenant: Tenant = {
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};

3
src/app/core/services/tenant-ssr-cache.store.ts
View File

@@ -18,7 +18,8 @@ export const DEFAULT_TENANT_BRANDING = {
secondaryColor: '#9e9e9e',
dangerColor: '#fd4c4c',
successColor: '#198754',
headerFooterBgColor: '#313131'
headerBgColor: '#313131',
footerBgColor: '#313131'
} as const;
export const TENANT_SSR_STATE_KEY = makeStateKey<TenantSsrState | null>('tenant-ssr-state');

3
src/app/core/services/tenant.interface.ts
View File

@@ -9,7 +9,8 @@ export interface Tenant {
secondary_color: string;
danger_color: string;
success_color: string;
header_footer_bg_color: string;
header_bg_color: string;
footer_bg_color: string;
header_logo: string;
footer_logo: string;
}

3
src/app/core/services/tenant.service.spec.ts
View File

@@ -17,7 +17,8 @@ const tenant: Tenant = {
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};

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

@@ -220,7 +220,7 @@
<div class="col-md-6 mb-3 mb-md-0">
<div class="tenant-logo-card">
<div class="tenant-logo-card__label">Logo del Header</div>
<div class="tenant-logo-card__container header-footer-bg">
<div class="tenant-logo-card__container header-bg">
@if (tenant()?.header_logo) {
<img [src]="tenant()?.header_logo" alt="Header Logo" class="tenant-logo-card__img" />
} @else {
@@ -236,7 +236,7 @@
<div class="col-md-6">
<div class="tenant-logo-card">
<div class="tenant-logo-card__label">Logo del Footer</div>
<div class="tenant-logo-card__container header-footer-bg">
<div class="tenant-logo-card__container footer-bg">
@if (tenant()?.footer_logo) {
<img [src]="tenant()?.footer_logo" alt="Footer Logo" class="tenant-logo-card__img" />
} @else {
@@ -295,6 +295,26 @@
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-header-bg)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Header BG</span>
<code class="color-swatch-card__value">{{ tenant()?.header_bg_color || 'Default' }}</code>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-footer-bg)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Footer BG</span>
<code class="color-swatch-card__value">{{ tenant()?.footer_bg_color || 'Default' }}</code>
</div>
</div>
</div>
</div>
</div>
</div>

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

@@ -164,8 +164,12 @@ h1 {
}
}
.header-footer-bg {
background-color: var(--tenant-header-footer-bg, #f8f9fa);
.header-bg {
background-color: var(--tenant-header-bg, #f8f9fa);
}
.footer-bg {
background-color: var(--tenant-footer-bg, #f8f9fa);
}
.color-swatch-card {

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

@@ -14,7 +14,8 @@ const tenant: Tenant = {
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_bg_color: '#313131',
footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
};