From 92e19b648e45428ddfa24e98069345864594a225 Mon Sep 17 00:00:00 2001 From: nsemets Date: Wed, 4 Jun 2025 11:37:30 +0300 Subject: [PATCH] fix(icons): added fontawesome icons and updated styles --- angular.json | 3 +- package.json | 1 + .../breadcrumb/breadcrumb.component.html | 4 +- .../breadcrumb/breadcrumb.component.ts | 4 +- .../components/footer/footer.component.html | 8 - .../components/header/header.component.html | 10 +- src/app/core/components/index.ts | 1 - .../nav-menu/nav-menu.component.html | 107 ++++++------ .../nav-menu/nav-menu.component.scss | 9 +- .../components/nav-menu/nav-menu.component.ts | 4 +- .../core/components/root/root.component.html | 2 +- .../components/root/root.component.spec.ts | 12 +- .../core/components/root/root.component.ts | 5 +- .../components/sidenav/sidenav.component.html | 4 - .../components/sidenav/sidenav.component.scss | 9 - .../sidenav/sidenav.component.spec.ts | 26 --- .../components/sidenav/sidenav.component.ts | 13 -- .../components/topnav/topnav.component.html | 12 +- .../components/topnav/topnav.component.scss | 8 +- src/app/features/search/search.component.html | 164 +++++++++--------- src/app/features/search/search.component.scss | 2 +- .../components/icon/icon.component.html | 3 + .../components/icon/icon.component.scss | 0 .../components/icon/icon.component.spec.ts | 22 +++ .../shared/components/icon/icon.component.ts | 12 ++ src/app/shared/components/index.ts | 1 + src/assets/styles/_base.scss | 9 +- src/assets/styles/overrides/panel-menu.scss | 27 ++- 28 files changed, 235 insertions(+), 247 deletions(-) delete mode 100644 src/app/core/components/sidenav/sidenav.component.html delete mode 100644 src/app/core/components/sidenav/sidenav.component.scss delete mode 100644 src/app/core/components/sidenav/sidenav.component.spec.ts delete mode 100644 src/app/core/components/sidenav/sidenav.component.ts create mode 100644 src/app/shared/components/icon/icon.component.html create mode 100644 src/app/shared/components/icon/icon.component.scss create mode 100644 src/app/shared/components/icon/icon.component.spec.ts create mode 100644 src/app/shared/components/icon/icon.component.ts diff --git a/angular.json b/angular.json index 4ad5dd3a8..89b6f24df 100644 --- a/angular.json +++ b/angular.json @@ -35,7 +35,8 @@ "styles": [ "src/assets/styles/styles.scss", "src/assets/icons/dist/icons.css", - "node_modules/primeflex/primeflex.css" + "node_modules/primeflex/primeflex.css", + "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ], "stylePreprocessorOptions": { "includePaths": ["src"] diff --git a/package.json b/package.json index 66258b15e..515adbefe 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@angular/platform-browser-dynamic": "^19.2.0", "@angular/router": "^19.2.0", "@angular/service-worker": "^19.2.0", + "@fortawesome/fontawesome-free": "^6.7.2", "@ngx-translate/core": "^16.0.4", "@ngx-translate/http-loader": "^16.0.1", "@ngxs/devtools-plugin": "^19.0.0", diff --git a/src/app/core/components/breadcrumb/breadcrumb.component.html b/src/app/core/components/breadcrumb/breadcrumb.component.html index 2e6af7d26..3c817cf1a 100644 --- a/src/app/core/components/breadcrumb/breadcrumb.component.html +++ b/src/app/core/components/breadcrumb/breadcrumb.component.html @@ -1,6 +1,6 @@ @if (!parsedUrl()[0].includes('home') && !parsedUrl()[0].includes('confirm')) { -
- +
+

/

@for (url of parsedUrl(); track url; let l = $last) { {{ url }} diff --git a/src/app/core/components/breadcrumb/breadcrumb.component.ts b/src/app/core/components/breadcrumb/breadcrumb.component.ts index 65a4bae6b..f64252511 100644 --- a/src/app/core/components/breadcrumb/breadcrumb.component.ts +++ b/src/app/core/components/breadcrumb/breadcrumb.component.ts @@ -2,9 +2,11 @@ import { Component, computed, DestroyRef, inject, signal } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { NavigationEnd, Router } from '@angular/router'; +import { IconComponent } from '@osf/shared/components'; + @Component({ selector: 'osf-breadcrumb', - imports: [], + imports: [IconComponent], templateUrl: './breadcrumb.component.html', styleUrl: './breadcrumb.component.scss', }) diff --git a/src/app/core/components/footer/footer.component.html b/src/app/core/components/footer/footer.component.html index fbb7a0a4d..521118f98 100644 --- a/src/app/core/components/footer/footer.component.html +++ b/src/app/core/components/footer/footer.component.html @@ -3,15 +3,7 @@
{{ 'footer.links.centerForOpenScience' | translate }} - |
- -
- {{ 'footer.links.reproducibilityProjectPsychology' | translate }} - | -
- - {{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index eb483388b..c0c26ab32 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -2,10 +2,12 @@
- - {{ currentUser()?.fullName }} - - + diff --git a/src/app/core/components/index.ts b/src/app/core/components/index.ts index 39b7327d8..d20f23ab0 100644 --- a/src/app/core/components/index.ts +++ b/src/app/core/components/index.ts @@ -2,5 +2,4 @@ export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; export { FooterComponent } from './footer/footer.component'; export { HeaderComponent } from './header/header.component'; export { RootComponent } from './root/root.component'; -export { SidenavComponent } from './sidenav/sidenav.component'; export { TopnavComponent } from './topnav/topnav.component'; diff --git a/src/app/core/components/nav-menu/nav-menu.component.html b/src/app/core/components/nav-menu/nav-menu.component.html index 4eb727ce4..617b482ba 100644 --- a/src/app/core/components/nav-menu/nav-menu.component.html +++ b/src/app/core/components/nav-menu/nav-menu.component.html @@ -1,51 +1,58 @@ - + + diff --git a/src/app/core/components/nav-menu/nav-menu.component.scss b/src/app/core/components/nav-menu/nav-menu.component.scss index 1ee1f02cf..7228bf2ee 100644 --- a/src/app/core/components/nav-menu/nav-menu.component.scss +++ b/src/app/core/components/nav-menu/nav-menu.component.scss @@ -1,14 +1,15 @@ @use "assets/styles/variables" as var; +@use "assets/styles/mixins" as mix; :host { .nav-menu { - width: 100%; - max-width: 17rem; + width: 250px; + max-width: 250px; .active { - font-weight: 700; background-color: var.$dark-blue-2; - border-radius: 0.5rem; + border-radius: mix.rem(8px); + font-weight: 700; } } } diff --git a/src/app/core/components/nav-menu/nav-menu.component.ts b/src/app/core/components/nav-menu/nav-menu.component.ts index 23df127b3..fe71b525c 100644 --- a/src/app/core/components/nav-menu/nav-menu.component.ts +++ b/src/app/core/components/nav-menu/nav-menu.component.ts @@ -5,16 +5,18 @@ import { PanelMenuModule } from 'primeng/panelmenu'; import { filter, map } from 'rxjs'; +import { NgOptimizedImage } from '@angular/common'; import { Component, computed, inject, output } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'; import { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants/nav-items.constant'; +import { IconComponent } from '@osf/shared/components'; import { NavItem } from '@osf/shared/models'; @Component({ selector: 'osf-nav-menu', - imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe], + imports: [NgOptimizedImage, RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent], templateUrl: './nav-menu.component.html', styleUrl: './nav-menu.component.scss', }) diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html index 9f9ace757..fdf2f30f1 100644 --- a/src/app/core/components/root/root.component.html +++ b/src/app/core/components/root/root.component.html @@ -1,6 +1,6 @@ @if (isWeb()) {
- +
diff --git a/src/app/core/components/root/root.component.spec.ts b/src/app/core/components/root/root.component.spec.ts index 9ced4ed34..a385fe1fe 100644 --- a/src/app/core/components/root/root.component.spec.ts +++ b/src/app/core/components/root/root.component.spec.ts @@ -10,8 +10,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component'; import { FooterComponent } from '@core/components/footer/footer.component'; import { HeaderComponent } from '@core/components/header/header.component'; -import { MainContentComponent } from '@core/components/main-content/main-content.component'; -import { SidenavComponent } from '@core/components/sidenav/sidenav.component'; import { TopnavComponent } from '@core/components/topnav/topnav.component'; import { IS_WEB, IS_XSMALL } from '@osf/shared/utils/breakpoints.tokens'; @@ -30,15 +28,7 @@ describe('RootComponent', () => { await TestBed.configureTestingModule({ imports: [ RootComponent, - ...MockComponents( - SidenavComponent, - HeaderComponent, - MainContentComponent, - FooterComponent, - TopnavComponent, - ConfirmDialog, - BreadcrumbComponent - ), + ...MockComponents(HeaderComponent, FooterComponent, TopnavComponent, ConfirmDialog, BreadcrumbComponent), ], providers: [ MockProvider(IS_WEB, isWebSubject), diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts index 6fd1c6772..bd78eff74 100644 --- a/src/app/core/components/root/root.component.ts +++ b/src/app/core/components/root/root.component.ts @@ -8,21 +8,22 @@ import { RouterOutlet } from '@angular/router'; import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component'; import { FooterComponent } from '@core/components/footer/footer.component'; import { HeaderComponent } from '@core/components/header/header.component'; -import { SidenavComponent } from '@core/components/sidenav/sidenav.component'; import { TopnavComponent } from '@core/components/topnav/topnav.component'; import { IS_MEDIUM, IS_WEB } from '@shared/utils'; +import { NavMenuComponent } from '../nav-menu/nav-menu.component'; + @Component({ selector: 'osf-root', imports: [ CommonModule, - SidenavComponent, HeaderComponent, FooterComponent, TopnavComponent, ConfirmDialog, BreadcrumbComponent, RouterOutlet, + NavMenuComponent, ], templateUrl: './root.component.html', styleUrls: ['./root.component.scss'], diff --git a/src/app/core/components/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html deleted file mode 100644 index 1480eb29d..000000000 --- a/src/app/core/components/sidenav/sidenav.component.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/src/app/core/components/sidenav/sidenav.component.scss b/src/app/core/components/sidenav/sidenav.component.scss deleted file mode 100644 index 6dca3c024..000000000 --- a/src/app/core/components/sidenav/sidenav.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "assets/styles/mixins" as mix; - -aside { - @include mix.flex-column; - gap: 1.8rem; - width: 19.5rem; - padding: 1.8rem 1rem 1.8rem 1.6rem; - height: 100%; -} diff --git a/src/app/core/components/sidenav/sidenav.component.spec.ts b/src/app/core/components/sidenav/sidenav.component.spec.ts deleted file mode 100644 index 0f5064358..000000000 --- a/src/app/core/components/sidenav/sidenav.component.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { MockComponent } from 'ng-mocks'; - -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NavMenuComponent } from '../nav-menu/nav-menu.component'; - -import { SidenavComponent } from './sidenav.component'; - -describe('SidenavDComponent', () => { - let component: SidenavComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [SidenavComponent, MockComponent(NavMenuComponent)], - }).compileComponents(); - - fixture = TestBed.createComponent(SidenavComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts deleted file mode 100644 index d33c9dc50..000000000 --- a/src/app/core/components/sidenav/sidenav.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgOptimizedImage } from '@angular/common'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; - -import { NavMenuComponent } from '@core/components/nav-menu/nav-menu.component'; - -@Component({ - selector: 'osf-sidenav', - imports: [NgOptimizedImage, NavMenuComponent], - templateUrl: './sidenav.component.html', - styleUrl: './sidenav.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class SidenavComponent {} diff --git a/src/app/core/components/topnav/topnav.component.html b/src/app/core/components/topnav/topnav.component.html index 9cfdf83c8..fa4953dde 100644 --- a/src/app/core/components/topnav/topnav.component.html +++ b/src/app/core/components/topnav/topnav.component.html @@ -1,5 +1,6 @@ -
+
OSF Logo + - - + +
diff --git a/src/app/core/components/topnav/topnav.component.scss b/src/app/core/components/topnav/topnav.component.scss index 616d030b4..dabf74709 100644 --- a/src/app/core/components/topnav/topnav.component.scss +++ b/src/app/core/components/topnav/topnav.component.scss @@ -5,13 +5,13 @@ z-index: 1300; .nav-container { - @include mix.flex-center-between; background: var.$dark-blue-1; - padding: 1.8rem 1.6rem; + padding: mix.rem(28px) mix.rem(24px); color: var.$white; - .topnav-icon { - font-size: 2.1rem; + .topnav-btn { + height: mix.rem(36px); + width: mix.rem(36px); } } } diff --git a/src/app/features/search/search.component.html b/src/app/features/search/search.component.html index 6ee6442c7..c4de0f7e4 100644 --- a/src/app/features/search/search.component.html +++ b/src/app/features/search/search.component.html @@ -1,105 +1,107 @@ -
- better-research - -
+
+
+ better-research + +
-
- - @if (!isMobile()) { - - All - Projects - Registrations - Preprints - Files +
+ + @if (!isMobile()) { + + All + Projects + Registrations + Preprints + Files + @if (!isMyProfilePage()) { + Users + } + + } + + + + + + + @if (!isMyProfilePage()) { - Users + } - - } + + - - - - - - - @if (!isMyProfilePage()) { - - } - - +
+ -
- + @if (currentStep === 1) { +
+

Improved OSF Search

- @if (currentStep === 1) { -
-

Improved OSF Search

+

+ Enter any term in the search box and filter by specific object types. More information is available on our + help guides. +

-

- Enter any term in the search box and filter by specific object types. More information is available on our - help guides. -

+
+

1 of 3

-
-

1 of 3

- -
- - Next +
+ + Next +
-
- } + } - @if (currentStep === 2) { -
-

Refine Your Search

+ @if (currentStep === 2) { +
+

Refine Your Search

-

- Narrow the source, discipline, and more. For example, find content supported by a specific funder or view only - datasets. -

+

+ Narrow the source, discipline, and more. For example, find content supported by a specific funder or view + only datasets. +

-
-

2 of 3

+
+

2 of 3

-
- - Next +
+ + Next +
-
- } + } - @if (currentStep === 3) { -
-

Add Metadata

+ @if (currentStep === 3) { +
+

Add Metadata

-

- Remember to add metadata and resources to your own work on OSF to make it more discoverable! Learn more in our - help guides. -

+

+ Remember to add metadata and resources to your own work on OSF to make it more discoverable! Learn more in + our help guides. +

-
-

3 of 3

+
+

3 of 3

-
- Done +
+ Done +
-
- } + } +
diff --git a/src/app/features/search/search.component.scss b/src/app/features/search/search.component.scss index 1d515fd2d..3fd6204e8 100644 --- a/src/app/features/search/search.component.scss +++ b/src/app/features/search/search.component.scss @@ -6,8 +6,8 @@ img { position: absolute; - right: mix.rem(4px); top: mix.rem(4px); + right: mix.rem(4px); z-index: 1; } } diff --git a/src/app/shared/components/icon/icon.component.html b/src/app/shared/components/icon/icon.component.html new file mode 100644 index 000000000..45428a6dc --- /dev/null +++ b/src/app/shared/components/icon/icon.component.html @@ -0,0 +1,3 @@ + + + diff --git a/src/app/shared/components/icon/icon.component.scss b/src/app/shared/components/icon/icon.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/shared/components/icon/icon.component.spec.ts b/src/app/shared/components/icon/icon.component.spec.ts new file mode 100644 index 000000000..bfdaec7e4 --- /dev/null +++ b/src/app/shared/components/icon/icon.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IconComponent } from './icon.component'; + +describe('IconComponent', () => { + let component: IconComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [IconComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(IconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/icon/icon.component.ts b/src/app/shared/components/icon/icon.component.ts new file mode 100644 index 000000000..383c730d6 --- /dev/null +++ b/src/app/shared/components/icon/icon.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; + +@Component({ + selector: 'osf-icon', + imports: [], + templateUrl: './icon.component.html', + styleUrl: './icon.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class IconComponent { + iconClass = input(''); +} diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts index 9772db0bb..092e3da30 100644 --- a/src/app/shared/components/index.ts +++ b/src/app/shared/components/index.ts @@ -3,6 +3,7 @@ export { BarChartComponent } from './bar-chart/bar-chart.component'; export { CustomPaginatorComponent } from './custom-paginator/custom-paginator.component'; export { EducationHistoryComponent } from './education-history/education-history.component'; export { EmploymentHistoryComponent } from './employment-history/employment-history.component'; +export { IconComponent } from './icon/icon.component'; export { LineChartComponent } from './line-chart/line-chart.component'; export { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component'; export { MyProjectsTableComponent } from './my-projects-table/my-projects-table.component'; diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss index 4d77da942..f5837d364 100644 --- a/src/assets/styles/_base.scss +++ b/src/assets/styles/_base.scss @@ -26,6 +26,11 @@ font-size: mix.rem(14px); } + i { + @include mix.flex-center; + font-size: mix.rem(16px); + } + h1 { font-size: mix.rem(24px); } @@ -60,10 +65,6 @@ text-decoration: underline; } - i { - @include mix.flex-center; - } - dl { margin-bottom: 1.7rem; padding: 0; diff --git a/src/assets/styles/overrides/panel-menu.scss b/src/assets/styles/overrides/panel-menu.scss index a9fa7913d..068fa6937 100644 --- a/src/assets/styles/overrides/panel-menu.scss +++ b/src/assets/styles/overrides/panel-menu.scss @@ -1,22 +1,18 @@ @use "../variables" as var; +@use "../mixins" as mix; .p-panelmenu { - gap: 0.2rem; + gap: mix.rem(4px); .nav-link { - display: flex; - justify-content: flex-start; - align-items: center; - padding-left: 0.8rem; - width: 100%; - max-height: 100%; - height: 3.4rem; - gap: 0.6rem; color: var.$white; + gap: mix.rem(8px); text-decoration: none; + padding: mix.rem(12px); + width: 100%; .nav-icon { - font-size: 1.5rem; + font-size: mix.rem(20px); } } @@ -39,21 +35,20 @@ .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content, .p-panelmenu-item.p-focus > .p-panelmenu-item-content { background-color: var.$dark-blue-2; - border-radius: 0.5rem; + border-radius: mix.rem(8px); } .p-panelmenu-submenu { padding: 0; - margin-left: 1.5rem; - margin-top: 0.5rem; + margin-left: mix.rem(24px); + margin-top: mix.rem(8px); .p-panelmenu-item { border-left: 1px solid var.$grey-2; - height: 3rem; - padding: 0 0 1rem 0.5rem; + padding: 0 0 mix.rem(4px) mix.rem(8px); .nav-link { - height: 2.5rem; + height: mix.rem(40px); } } }