From 79e5db10ac70f2853e87ca4f462e073fdd4f795c Mon Sep 17 00:00:00 2001 From: nsemets Date: Wed, 25 Jun 2025 11:00:05 +0300 Subject: [PATCH 1/2] fix(chips): updated chips --- .../collections-filter-chips.component.html | 22 +-- .../collections-filter-chips.component.ts | 3 +- .../my-profile-filter-chips.component.html | 117 ++++------------ .../my-profile-filter-chips.component.ts | 3 +- .../my-profile-resources.component.html | 58 ++------ .../my-profile-resources.component.ts | 2 + .../preprints-filter-chips.component.html | 68 ++------- .../preprints-filter-chips.component.ts | 3 +- .../preprints-resources.component.html | 59 ++------ .../preprints-resources.component.ts | 2 + .../filter-chips/filter-chips.component.html | 129 ++++-------------- .../filter-chips/filter-chips.component.ts | 3 +- .../resources/resources.component.html | 58 ++------ .../resources/resources.component.ts | 2 + src/assets/styles/_base.scss | 6 +- src/assets/styles/overrides/chip.scss | 33 ++--- 16 files changed, 151 insertions(+), 417 deletions(-) diff --git a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html index a6007214a..fc3376e45 100644 --- a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html +++ b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html @@ -1,21 +1,23 @@
@if (activeFilters().programArea.length) { @for (filter of activeFilters().programArea; track filter) { - - - - - + } } @if (activeFilters().collectedType.length) { @for (filter of activeFilters().collectedType; track filter) { - - - - - + } }
diff --git a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts index a33896b4c..71f89cf53 100644 --- a/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts +++ b/src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts @@ -1,6 +1,5 @@ import { createDispatchMap, select } from '@ngxs/store'; -import { PrimeTemplate } from 'primeng/api'; import { Chip } from 'primeng/chip'; import { ChangeDetectionStrategy, Component } from '@angular/core'; @@ -9,7 +8,7 @@ import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters } @Component({ selector: 'osf-collections-filter-chips', - imports: [Chip, PrimeTemplate], + imports: [Chip], templateUrl: './collections-filter-chips.component.html', styleUrl: './collections-filter-chips.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html index bfdf735af..671963626 100644 --- a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html +++ b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.html @@ -1,119 +1,60 @@ @if (filters().dateCreated.value) { @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label; - - - - - + } @if (filters().funder.value) { @let funder = filters().funder.filterName + ': ' + filters().funder.label; - - - - - + + } @if (filters().subject.value) { @let subject = filters().subject.filterName + ': ' + filters().subject.label; - - - - - + } @if (filters().license.value) { @let license = filters().license.filterName + ': ' + filters().license.label; - - - - - + } @if (filters().resourceType.value) { @let resourceType = filters().resourceType.filterName + ': ' + filters().resourceType.label; - - - - - + } @if (filters().institution.value) { @let institution = filters().institution.filterName + ': ' + filters().institution.label; - - - - - + } @if (filters().provider.value) { @let provider = filters().provider.filterName + ': ' + filters().provider.label; - - - - - + } @if (filters().partOfCollection.value) { @let partOfCollection = filters().partOfCollection.filterName + ': ' + filters().partOfCollection.label; - - - - - + } diff --git a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts index 0d0136a57..64f3e0588 100644 --- a/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts +++ b/src/app/features/my-profile/components/my-profile-filter-chips/my-profile-filter-chips.component.ts @@ -1,6 +1,5 @@ import { Store } from '@ngxs/store'; -import { PrimeTemplate } from 'primeng/api'; import { Chip } from 'primeng/chip'; import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; @@ -23,7 +22,7 @@ import { @Component({ selector: 'osf-my-profile-filter-chips', - imports: [Chip, PrimeTemplate], + imports: [Chip], templateUrl: './my-profile-filter-chips.component.html', styleUrl: './my-profile-filter-chips.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html index 70aa971f4..1daff2552 100644 --- a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html +++ b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.html @@ -88,58 +88,28 @@

Sort by:

} -
+
@if (first() && prev()) { - - - + } - - - + - - - +
}
diff --git a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts index 1ac8619b9..da02d9ede 100644 --- a/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts +++ b/src/app/features/my-profile/components/my-profile-resources/my-profile-resources.component.ts @@ -1,5 +1,6 @@ import { Store } from '@ngxs/store'; +import { Button } from 'primeng/button'; import { DataView } from 'primeng/dataview'; import { Select } from 'primeng/select'; @@ -28,6 +29,7 @@ import { MyProfileResourceFiltersSelectors } from '../my-profile-resource-filter Select, FormsModule, ResourceCardComponent, + Button, ], templateUrl: './my-profile-resources.component.html', styleUrl: './my-profile-resources.component.scss', diff --git a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html index 1626a7853..d11232584 100644 --- a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html +++ b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.html @@ -1,74 +1,24 @@ @if (filters().creator.value) { @let creator = filters().creator.filterName + ': ' + filters().creator.label; - - - - - -} - -@if (filters().dateCreated.value) { - @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label; - - - - - + } @if (filters().subject.value) { @let subject = filters().subject.filterName + ': ' + filters().subject.label; - - - - - + } @if (filters().license.value) { @let license = filters().license.filterName + ': ' + filters().license.label; - - - - - + } @if (filters().institution.value) { @let institution = filters().institution.filterName + ': ' + filters().institution.label; - - - - - + } diff --git a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts index f9461b526..a0a880991 100644 --- a/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts +++ b/src/app/features/preprints/components/preprints-filter-chips/preprints-filter-chips.component.ts @@ -1,6 +1,5 @@ import { createDispatchMap, select } from '@ngxs/store'; -import { PrimeTemplate } from 'primeng/api'; import { Chip } from 'primeng/chip'; import { ChangeDetectionStrategy, Component } from '@angular/core'; @@ -18,7 +17,7 @@ import { FilterType } from '@osf/shared/enums'; @Component({ selector: 'osf-preprints-filter-chips', - imports: [Chip, PrimeTemplate], + imports: [Chip], templateUrl: './preprints-filter-chips.component.html', styleUrl: './preprints-filter-chips.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html index 98a51588a..e90f3badd 100644 --- a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html +++ b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.html @@ -85,58 +85,29 @@

Sort by:

} -
+
@if (first() && prev()) { - - - + + } - - - + - - - +
}
diff --git a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts index 1d3b7d4c6..e4e68b74b 100644 --- a/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts +++ b/src/app/features/preprints/components/preprints-resources/preprints-resources.component.ts @@ -1,5 +1,6 @@ import { createDispatchMap, select } from '@ngxs/store'; +import { Button } from 'primeng/button'; import { DataView } from 'primeng/dataview'; import { Select } from 'primeng/select'; @@ -31,6 +32,7 @@ import { IS_WEB, IS_XSMALL } from '@shared/utils'; PreprintsFilterChipsComponent, DataView, ResourceCardComponent, + Button, ], templateUrl: './preprints-resources.component.html', styleUrl: './preprints-resources.component.scss', diff --git a/src/app/features/search/components/filter-chips/filter-chips.component.html b/src/app/features/search/components/filter-chips/filter-chips.component.html index b55a1cba0..7d7cb94a7 100644 --- a/src/app/features/search/components/filter-chips/filter-chips.component.html +++ b/src/app/features/search/components/filter-chips/filter-chips.component.html @@ -1,134 +1,65 @@ @if (filters().creator.value && !isMyProfilePage()) { @let creator = filters().creator.filterName + ': ' + filters().creator.label; - - - - - + } @if (filters().dateCreated.value) { @let dateCreated = filters().dateCreated.filterName + ': ' + filters().dateCreated.label; - - - - - + } @if (filters().funder.value) { @let funder = filters().funder.filterName + ': ' + filters().funder.label; - - - - - + + } @if (filters().subject.value) { @let subject = filters().subject.filterName + ': ' + filters().subject.label; - - - - - + } @if (filters().license.value) { @let license = filters().license.filterName + ': ' + filters().license.label; - - - - - + } @if (filters().resourceType.value) { @let resourceType = filters().resourceType.filterName + ': ' + filters().resourceType.label; - - - - - + } @if (filters().institution.value) { @let institution = filters().institution.filterName + ': ' + filters().institution.label; - - - - - + } @if (filters().provider.value) { @let provider = filters().provider.filterName + ': ' + filters().provider.label; - - - - - + } @if (filters().partOfCollection.value) { @let partOfCollection = filters().partOfCollection.filterName + ': ' + filters().partOfCollection.label; - - - - - + } diff --git a/src/app/features/search/components/filter-chips/filter-chips.component.ts b/src/app/features/search/components/filter-chips/filter-chips.component.ts index 4038543ca..1f73dedfd 100644 --- a/src/app/features/search/components/filter-chips/filter-chips.component.ts +++ b/src/app/features/search/components/filter-chips/filter-chips.component.ts @@ -1,6 +1,5 @@ import { Store } from '@ngxs/store'; -import { PrimeTemplate } from 'primeng/api'; import { Chip } from 'primeng/chip'; import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; @@ -24,7 +23,7 @@ import { @Component({ selector: 'osf-filter-chips', - imports: [Chip, PrimeTemplate], + imports: [Chip], templateUrl: './filter-chips.component.html', styleUrl: './filter-chips.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/app/features/search/components/resources/resources.component.html b/src/app/features/search/components/resources/resources.component.html index 9a28361e3..3bc257cb5 100644 --- a/src/app/features/search/components/resources/resources.component.html +++ b/src/app/features/search/components/resources/resources.component.html @@ -89,58 +89,28 @@

Sort by:

} -
+
@if (first() && prev()) { - - - + } - - - + - - - +
}
diff --git a/src/app/features/search/components/resources/resources.component.ts b/src/app/features/search/components/resources/resources.component.ts index a5f310593..08b81b172 100644 --- a/src/app/features/search/components/resources/resources.component.ts +++ b/src/app/features/search/components/resources/resources.component.ts @@ -2,6 +2,7 @@ import { Store } from '@ngxs/store'; import { AccordionModule } from 'primeng/accordion'; import { AutoCompleteModule } from 'primeng/autocomplete'; +import { Button } from 'primeng/button'; import { DataViewModule } from 'primeng/dataview'; import { Select } from 'primeng/select'; import { TableModule } from 'primeng/table'; @@ -35,6 +36,7 @@ import { ResourceFiltersSelectors } from '../resource-filters/store'; Select, NgOptimizedImage, ResourceCardComponent, + Button, ], templateUrl: './resources.component.html', styleUrl: './resources.component.scss', diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss index e76385c06..9f657d0ab 100644 --- a/src/assets/styles/_base.scss +++ b/src/assets/styles/_base.scss @@ -27,6 +27,7 @@ i { @include mix.flex-center; font-size: mix.rem(16px); + outline: none; } h1 { @@ -82,11 +83,6 @@ display: block; } } - - i, - svg { - outline: none; - } } @layer base { diff --git a/src/assets/styles/overrides/chip.scss b/src/assets/styles/overrides/chip.scss index 60fefa688..38b406ab7 100644 --- a/src/assets/styles/overrides/chip.scss +++ b/src/assets/styles/overrides/chip.scss @@ -1,32 +1,33 @@ -@use "assets/styles/variables" as var; - .p-chip { - height: fit-content; - width: fit-content; - background: var.$bg-blue-3; - border-radius: 4px; - padding: 4px 12px 4px 12px; + --p-chip-background: var(--bg-blue-3); + --p-chip-border-radius: 0.25rem; + --p-chip-color: var(--dark-blue-1); + --p-chip-padding-y: 0.25rem; + --p-chip-padding-x: 0.75rem; + --p-chip-remove-icon-color: var(--dark-blue-1); + --p-chip-remove-icon-font-size: 0.875rem; + --p-chip-remove-icon-size: 0.875rem; + + &:has(.p-chip-remove-icon) { + padding-inline-end: var(--p-chip-padding-x); + } &:hover { - background: var.$bg-blue-2; - color: var.$pr-blue-3; - cursor: pointer; + --p-chip-background: var(--bg-blue-2); + --p-chip-color: var(--pr-blue-3); - i, .p-chip-remove-icon { - color: var.$pr-blue-1; + --p-chip-remove-icon-color: var(--pr-blue-1); } } .p-chip-label { - font-size: 1rem; - font-weight: 400; - line-height: 1.7rem; + line-height: 1.5rem; } .p-chip-remove-icon { display: flex; align-items: center; - margin-left: 12px; + margin-top: 2px; } } From 669a30804460c3305ba94cc59d89b02c68eb5612 Mon Sep 17 00:00:00 2001 From: nsemets Date: Wed, 25 Jun 2025 11:00:48 +0300 Subject: [PATCH 2/2] fix(dialog): update dialog styles --- .../styles/overrides/confirmation-dialog.scss | 57 +++++-------------- 1 file changed, 15 insertions(+), 42 deletions(-) diff --git a/src/assets/styles/overrides/confirmation-dialog.scss b/src/assets/styles/overrides/confirmation-dialog.scss index 440afe4fa..22a2c7dd6 100644 --- a/src/assets/styles/overrides/confirmation-dialog.scss +++ b/src/assets/styles/overrides/confirmation-dialog.scss @@ -1,45 +1,26 @@ -@use "../variables" as var; -@use "../mixins" as mix; - .p-dialog-mask { z-index: 2103 !important; } .p-dialog { - min-height: mix.rem(224px); - width: mix.rem(550px); - margin: 1rem; - - .p-dialog-header { - padding: 24px; - - .p-dialog-header-actions { - .p-button { - padding-right: 0.2rem; - } - } - - .p-dialog-title { - font-size: 18px; - font-weight: 700; - text-transform: capitalize; - } - - &.ng-star-inserted { - p-button > button { - background: transparent; - color: var.$grey-1; - } - } + --p-dialog-header-padding: 1.5rem; + --p-button-text-secondary-color: var(--grey-1); + --p-button-text-secondary-hover-background: var(--grey-3); + --p-button-text-secondary-active-background: var(--grey-1); + --p-dialog-title-font-size: 1.125rem; + --p-dialog-title-font-weight: 700; + --p-dialog-content-padding: 0 1.5rem 1.5rem; + --p-dialog-footer-padding: 0 1.5rem 1.5rem; + + .p-dialog-title { + text-transform: capitalize; } .p-dialog-content { - padding: 0 24px 24px; align-items: start; } .p-dialog-footer { - padding: 0 24px 24px; justify-content: center; p-button { @@ -56,18 +37,10 @@ } } -.p-dialog-align-center { - .p-dialog { - .p-dialog-content { - align-items: center; - } - } +.p-dialog-align-center .p-dialog .p-dialog-content { + align-items: center; } -.p-dialog-overflow-visible { - .p-dialog { - .p-dialog-content { - overflow-y: visible; - } - } +.p-dialog-overflow-visible .p-dialog .p-dialog-content { + overflow-y: visible; }