diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index b29ce1dcb..c76adec66 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -4,7 +4,6 @@
@if (currentUser()) {
- -

{{ collectionProvider()?.name }}

+ @let provider = collectionProvider(); + @if (provider && provider.brand) { + + } +

{{ collectionProvider()?.name }}

diff --git a/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts b/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts index 8ba79ae69..16a16be42 100644 --- a/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts +++ b/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts @@ -28,7 +28,9 @@ import { CreateCollectionSubmission, } from '@osf/features/collections/store/add-to-collection'; import { LoadingSpinnerComponent } from '@shared/components'; +import { HeaderStyleHelper } from '@shared/helpers'; import { CanDeactivateComponent } from '@shared/models'; +import { BrandService } from '@shared/services'; import { CollectionsSelectors, GetCollectionProvider } from '@shared/stores'; import { ProjectsSelectors } from '@shared/stores/projects/projects.selectors'; @@ -163,8 +165,20 @@ export class AddToCollectionComponent implements CanDeactivateComponent { this.destroyRef.onDestroy(() => { this.actions.clearAddToCollectionState(); this.allowNavigation.set(false); + + HeaderStyleHelper.resetToDefaults(); + BrandService.resetBranding(); }); }); + + effect(() => { + const provider = this.collectionProvider(); + + if (provider && provider.brand) { + BrandService.applyBranding(provider.brand); + HeaderStyleHelper.applyHeaderStyles(provider.brand.secondaryColor, provider.brand.backgroundColor || ''); + } + }); } @HostListener('window:beforeunload', ['$event']) diff --git a/src/app/features/collections/components/collections-discover/collections-discover.component.html b/src/app/features/collections/components/collections-discover/collections-discover.component.html index cd1f09fdf..3adf33906 100644 --- a/src/app/features/collections/components/collections-discover/collections-discover.component.html +++ b/src/app/features/collections/components/collections-discover/collections-discover.component.html @@ -4,8 +4,12 @@ class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row" >
- -

{{ collectionProvider()?.name }}

+ @let provider = collectionProvider(); + @if (provider && provider.brand) { + + } + +

{{ collectionProvider()?.name }}

{ + const provider = this.collectionProvider(); + + if (provider && provider.brand) { + BrandService.applyBranding(provider.brand); + HeaderStyleHelper.applyHeaderStyles(provider.brand.secondaryColor, provider.brand.backgroundColor || ''); + } + }); + effect(() => { const searchText = this.searchText(); const sortBy = this.sortBy(); @@ -143,6 +154,8 @@ export class CollectionsDiscoverComponent { effect(() => { this.destroyRef.onDestroy(() => { this.actions.clearCollections(); + HeaderStyleHelper.resetToDefaults(); + BrandService.resetBranding(); }); }); } diff --git a/src/app/features/preprints/mappers/preprint-providers.mapper.ts b/src/app/features/preprints/mappers/preprint-providers.mapper.ts index 4f74aeae4..5fc610f1e 100644 --- a/src/app/features/preprints/mappers/preprint-providers.mapper.ts +++ b/src/app/features/preprints/mappers/preprint-providers.mapper.ts @@ -28,6 +28,7 @@ export class PreprintProvidersMapper { topNavLogoImageUrl: brandRaw.attributes.topnav_logo_image, primaryColor: brandRaw.attributes.primary_color, secondaryColor: brandRaw.attributes.secondary_color, + backgroundColor: brandRaw.attributes.background_color, }, iri: response.links.iri, faviconUrl: response.attributes.assets.favicon, diff --git a/src/app/features/project/overview/components/recent-activity/recent-activity.component.html b/src/app/features/project/overview/components/recent-activity/recent-activity.component.html index 09bacf33f..9384efee0 100644 --- a/src/app/features/project/overview/components/recent-activity/recent-activity.component.html +++ b/src/app/features/project/overview/components/recent-activity/recent-activity.component.html @@ -4,7 +4,7 @@

{{ 'project.overview.recentActivity.title' | translate }}

@if (!isLoading()) { @if (formattedActivityLogs().length) { @for (activityLog of formattedActivityLogs(); track activityLog.id) { -
+
diff --git a/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss b/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss index 800d08df0..33ff6e203 100644 --- a/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss +++ b/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss @@ -10,7 +10,7 @@ border-bottom: 1px solid var.$grey-2; .activity-date { - width: 30%; + min-width: 27%; } } diff --git a/src/app/features/registries/mappers/providers.mapper.ts b/src/app/features/registries/mappers/providers.mapper.ts index f2857e480..46139e7b6 100644 --- a/src/app/features/registries/mappers/providers.mapper.ts +++ b/src/app/features/registries/mappers/providers.mapper.ts @@ -26,6 +26,7 @@ export class ProvidersMapper { topNavLogoImageUrl: brandRaw.attributes.topnav_logo_image, primaryColor: brandRaw.attributes.primary_color, secondaryColor: brandRaw.attributes.secondary_color, + backgroundColor: brandRaw.attributes.background_color, }, iri: response.links.iri, }; diff --git a/src/app/shared/helpers/header-style.helper.ts b/src/app/shared/helpers/header-style.helper.ts index 7e11601fd..e40447b77 100644 --- a/src/app/shared/helpers/header-style.helper.ts +++ b/src/app/shared/helpers/header-style.helper.ts @@ -4,7 +4,7 @@ export class HeaderStyleHelper { root.style.setProperty('--header-color', textColor); root.style.setProperty('--header-background-color', backgroundColor || ''); - root.style.setProperty('--header-background-image-url', `url(${backgroundImageUrl})`); + root.style.setProperty('--header-background-image-url', `url(${backgroundImageUrl || ''})`); } static resetToDefaults() { diff --git a/src/app/shared/mappers/collections/collections.mapper.ts b/src/app/shared/mappers/collections/collections.mapper.ts index 2c5740d4c..f50ea46ef 100644 --- a/src/app/shared/mappers/collections/collections.mapper.ts +++ b/src/app/shared/mappers/collections/collections.mapper.ts @@ -58,6 +58,18 @@ export class CollectionsMapper { id: response.relationships.primary_collection.data.id, type: response.relationships.primary_collection.data.type, }, + brand: response.embeds.brand.data + ? { + id: response.embeds.brand.data.id, + name: response.embeds.brand.data.attributes.name, + heroLogoImageUrl: response.embeds.brand.data.attributes.hero_logo_image, + topNavLogoImageUrl: response.embeds.brand.data.attributes.topnav_logo_image, + heroBackgroundImageUrl: response.embeds.brand.data.attributes.hero_background_image, + primaryColor: response.embeds.brand.data.attributes.primary_color, + secondaryColor: response.embeds.brand.data.attributes.secondary_color, + backgroundColor: response.embeds.brand.data.attributes.background_color, + } + : null, }; } diff --git a/src/app/shared/models/brand.json-api.model.ts b/src/app/shared/models/brand.json-api.model.ts index 043736566..cadfea6a6 100644 --- a/src/app/shared/models/brand.json-api.model.ts +++ b/src/app/shared/models/brand.json-api.model.ts @@ -8,5 +8,6 @@ export interface BrandDataJsonApi { topnav_logo_image: string; primary_color: string; secondary_color: string; + background_color: string; }; } diff --git a/src/app/shared/models/brand.model.ts b/src/app/shared/models/brand.model.ts index d0edbaa69..8e0adb77f 100644 --- a/src/app/shared/models/brand.model.ts +++ b/src/app/shared/models/brand.model.ts @@ -6,4 +6,5 @@ export interface Brand { topNavLogoImageUrl: string; primaryColor: string; secondaryColor: string; + backgroundColor: string | null; } diff --git a/src/app/shared/models/collections/collections-json-api.models.ts b/src/app/shared/models/collections/collections-json-api.models.ts index 30fa9f6d9..69e6384ad 100644 --- a/src/app/shared/models/collections/collections-json-api.models.ts +++ b/src/app/shared/models/collections/collections-json-api.models.ts @@ -1,4 +1,4 @@ -import { JsonApiResponse } from '@shared/models'; +import { BrandDataJsonApi, JsonApiResponse } from '@shared/models'; export interface CollectionProviderResponseJsonApi { id: string; @@ -26,6 +26,11 @@ export interface CollectionProviderResponseJsonApi { permissions: string[]; reviews_workflow: string; }; + embeds: { + brand: { + data?: BrandDataJsonApi; + }; + }; relationships: { primary_collection: { data: { @@ -33,6 +38,12 @@ export interface CollectionProviderResponseJsonApi { type: string; }; }; + brand: { + data: { + id: string; + type: string; + } | null; + }; }; } @@ -166,10 +177,6 @@ export interface SparseCollectionsResponseJsonApi { data: SparseCollectionJsonAi[]; } -export interface CollectionProviderGetResponseJsonApi extends JsonApiResponse { - data: CollectionProviderResponseJsonApi; -} - export interface CollectionDetailsGetResponseJsonApi extends JsonApiResponse { data: CollectionDetailsResponseJsonApi; } diff --git a/src/app/shared/models/collections/collections.models.ts b/src/app/shared/models/collections/collections.models.ts index 9de873dda..ff94c7df3 100644 --- a/src/app/shared/models/collections/collections.models.ts +++ b/src/app/shared/models/collections/collections.models.ts @@ -1,4 +1,5 @@ import { CollectionSubmissionReviewAction } from '@osf/features/moderation/models'; +import { Brand } from '@shared/models'; export interface CollectionProvider { id: string; @@ -28,6 +29,7 @@ export interface CollectionProvider { id: string; type: string; }; + brand: Brand | null; } export interface CollectionFilters { diff --git a/src/app/shared/services/brand.service.ts b/src/app/shared/services/brand.service.ts index da2f0bc46..054dab0c9 100644 --- a/src/app/shared/services/brand.service.ts +++ b/src/app/shared/services/brand.service.ts @@ -6,6 +6,7 @@ export class BrandService { root.style.setProperty('--branding-primary-color', brand.primaryColor); root.style.setProperty('--branding-secondary-color', brand.secondaryColor); + root.style.setProperty('--branding-background-color', brand.backgroundColor || ''); root.style.setProperty('--branding-hero-logo-image-url', `url(${brand.topNavLogoImageUrl})`); root.style.setProperty('--branding-hero-background-image-url', `url(${brand.heroBackgroundImageUrl})`); } @@ -15,6 +16,7 @@ export class BrandService { root.style.setProperty('--branding-primary-color', ''); root.style.setProperty('--branding-secondary-color', ''); + root.style.setProperty('--branding-background-color', ''); root.style.setProperty('--branding-hero-logo-image-url', ''); root.style.setProperty('--branding-hero-background-image-url', ''); } diff --git a/src/app/shared/services/collections.service.ts b/src/app/shared/services/collections.service.ts index 3d3b02616..809d56e74 100644 --- a/src/app/shared/services/collections.service.ts +++ b/src/app/shared/services/collections.service.ts @@ -15,7 +15,7 @@ import { CollectionDetailsGetResponseJsonApi, CollectionDetailsResponseJsonApi, CollectionProvider, - CollectionProviderGetResponseJsonApi, + CollectionProviderResponseJsonApi, CollectionSubmission, CollectionSubmissionActionType, CollectionSubmissionJsonApi, @@ -46,10 +46,10 @@ export class CollectionsService { }); getCollectionProvider(collectionName: string): Observable { - const url = `${environment.apiUrl}/providers/collections/${collectionName}/`; + const url = `${environment.apiUrl}/providers/collections/${collectionName}/?embed=brand`; return this.jsonApiService - .get(url) + .get>(url) .pipe(map((response) => CollectionsMapper.fromGetCollectionProviderResponse(response.data))); } diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss index 22da43d57..c92991071 100644 --- a/src/assets/styles/_variables.scss +++ b/src/assets/styles/_variables.scss @@ -169,6 +169,7 @@ $white-60: var(--white-60); --branding-primary-color: var(--pr-blue-1); --branding-secondary-color: var(--white); + --branding-background-color: var(--white); --branding-hero-logo-image-url: none; --branding-hero-background-image-url: none; } diff --git a/src/assets/styles/components/collections.scss b/src/assets/styles/components/collections.scss index ebfdebd5c..c4e7a4eeb 100644 --- a/src/assets/styles/components/collections.scss +++ b/src/assets/styles/components/collections.scss @@ -1,14 +1,30 @@ @use "assets/styles/mixins" as mix; .collections-content { - background: var(--collection-bg-color); + background: var(--branding-background-color); border-top: none; .collections-sub-header { margin: mix.rem(48px) mix.rem(28px); - .collections-icon { - font-size: mix.rem(42px); + .collections-logo { + background: var(--branding-background-color); + } + + .collections-heading { + color: var(--branding-secondary-color); + } + + .collections-heading-btn { + --p-button-primary-background: var(--branding-primary-color); + --p-button-primary-border-color: var(--branding-primary-color); + --p-button-primary-color: var(--branding-secondary-color); + --p-button-primary-hover-background: var(--branding-primary-color); + --p-button-primary-hover-border-color: var(--branding-primary-color); + --p-button-primary-hover-color: var(--branding-secondary-color); + --p-button-primary-active-background: var(--branding-primary-color); + --p-button-primary-active-border-color: var(--branding-primary-color); + --p-button-primary-active-color: var(--branding-secondary-color); } }