Skip to content

Commit 4c0a08a

Browse files
nsemetsnsemets
authored
Merge pull request #97 from CenterForOpenScience/styles/icons-change
fix(icons): added fontawesome icons and updated styles
2 parents b3a2ad1 + 92e19b6 commit 4c0a08a

28 files changed

+235
-247
lines changed

‎angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
"styles": [
3636
"src/assets/styles/styles.scss",
3737
"src/assets/icons/dist/icons.css",
38-
"node_modules/primeflex/primeflex.css"
38+
"node_modules/primeflex/primeflex.css",
39+
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
3940
],
4041
"stylePreprocessorOptions": {
4142
"includePaths": ["src"]

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@angular/platform-browser-dynamic": "^19.2.0",
3434
"@angular/router": "^19.2.0",
3535
"@angular/service-worker": "^19.2.0",
36+
"@fortawesome/fontawesome-free": "^6.7.2",
3637
"@ngx-translate/core": "^16.0.4",
3738
"@ngx-translate/http-loader": "^16.0.1",
3839
"@ngxs/devtools-plugin": "^19.0.0",

‎src/app/core/components/breadcrumb/breadcrumb.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@if (!parsedUrl()[0].includes('home') && !parsedUrl()[0].includes('confirm')) {
2-
<div class="breadcrumbs flex gap-2 md:p-5 md:pb-0 xl:p-0">
3-
<i class="osf-icon-home"></i>
2+
<div class="breadcrumbs flex align-items-center gap-2 md:p-5 md:pb-0 xl:p-0">
3+
<osf-icon iconClass="fas fa-home"></osf-icon>
44
<p>/</p>
55
@for (url of parsedUrl(); track url; let l = $last) {
66
{{ url }}

‎src/app/core/components/breadcrumb/breadcrumb.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
22
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
33
import { NavigationEnd, Router } from '@angular/router';
44

5+
import { IconComponent } from '@osf/shared/components';
6+
57
@Component({
68
selector: 'osf-breadcrumb',
7-
imports: [],
9+
imports: [IconComponent],
810
templateUrl: './breadcrumb.component.html',
911
styleUrl: './breadcrumb.component.scss',
1012
})

‎src/app/core/components/footer/footer.component.html‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,7 @@
33
<div class="footer-links flex flex-wrap justify-content-center align-items-center">
44
<div class="flex justify-content-center">
55
<a href="https://cos.io/">{{ 'footer.links.centerForOpenScience' | translate }}</a>
6-
<span class="separator">|</span>
76
</div>
8-
9-
<div class="flex justify-content-center">
10-
<a>{{ 'footer.links.reproducibilityProjectPsychology' | translate }}</a>
11-
<span class="separator">|</span>
12-
</div>
13-
14-
<a>{{ 'footer.links.reproducibilityProjectCancerBiology' | translate }}</a>
157
</div>
168

179
<div class="footer-socials flex justify-content-center align-items-center" [class]="isWeb() ? 'm-y-12' : 'm-y-24'">

‎src/app/core/components/header/header.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<osf-breadcrumb />
33

44
<div class="dropdown-button ml-auto">
5-
<p-button (click)="menu.toggle($event)">
6-
{{ currentUser()?.fullName }}
7-
<i class="pi pi-chevron-down"></i>
8-
</p-button>
5+
<p-button
6+
icon="fas fa-chevron-down"
7+
iconPos="right"
8+
[label]="currentUser()?.fullName"
9+
(click)="menu.toggle($event)"
10+
></p-button>
911

1012
<p-menu appendTo="body" #menu [model]="items" popup>
1113
<ng-template #item let-item>

‎src/app/core/components/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@ export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
22
export { FooterComponent } from './footer/footer.component';
33
export { HeaderComponent } from './header/header.component';
44
export { RootComponent } from './root/root.component';
5-
export { SidenavComponent } from './sidenav/sidenav.component';
65
export { TopnavComponent } from './topnav/topnav.component';

‎src/app/core/components/nav-menu/nav-menu.component.html‎

Lines changed: 57 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,58 @@
1-
<nav class="nav-menu">
2-
<p-panelMenu [model]="mainMenuItems" [multiple]="false">
3-
<ng-template #item let-item>
4-
<a
5-
[routerLink]="item.routerLink"
6-
routerLinkActive="active"
7-
[routerLinkActiveOptions]="{
8-
exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
9-
}"
10-
class="nav-link flex"
11-
[class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
12-
(click)="goToLink(item)"
13-
>
14-
@if (item.icon) {
15-
<i [class]="item.icon" class="nav-icon"></i>
16-
}
17-
<span>{{ item.label | translate }}</span>
18-
@if (item.items) {
19-
<i [class]="item.expanded ? 'osf-icon-arrow-down' : 'osf-icon-arrow'" class="nav-icon ml-auto pt-1"></i>
20-
}
21-
</a>
1+
<aside class="custom-scrollbar flex flex-column p-4 h-full">
2+
<img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
223

23-
@if (item.label === 'navigation.myProjects' && isProjectRoute()) {
24-
<div class="ml-4">
25-
<p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
26-
<ng-template #item let-item>
27-
<a
28-
[routerLink]="item.routerLink ? ['/my-projects', currentProjectId(), item.routerLink] : null"
29-
[routerLinkActive]="item.routerLink ? 'active' : ''"
30-
[routerLinkActiveOptions]="{ exact: true }"
31-
class="nav-link flex"
32-
(click)="goToLink(item)"
33-
>
34-
@if (item.icon) {
35-
<i [class]="item.icon" class="nav-icon"></i>
36-
}
37-
<span>{{ item.label | translate }}</span>
38-
@if (item.items) {
39-
<i
40-
[class]="item.expanded ? 'osf-icon-arrow-down' : 'osf-icon-arrow'"
41-
class="nav-icon ml-auto pt-1"
42-
></i>
43-
}
44-
</a>
45-
</ng-template>
46-
</p-panelMenu>
47-
</div>
48-
}
49-
</ng-template>
50-
</p-panelMenu>
51-
</nav>
4+
<nav class="nav-menu m-t-36">
5+
<p-panelMenu [model]="mainMenuItems" [multiple]="false">
6+
<ng-template #item let-item>
7+
<a
8+
[routerLink]="item.routerLink"
9+
routerLinkActive="active"
10+
[routerLinkActiveOptions]="{
11+
exact: item.label !== 'navigation.myProjects' ? item.useExactMatch : true,
12+
}"
13+
class="nav-link flex align-items-center"
14+
[class.mt-5]="item.label === 'navigation.settings' || item.label === 'navigation.myProjects'"
15+
(click)="goToLink(item)"
16+
>
17+
@if (item.icon) {
18+
<osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
19+
}
20+
<span>{{ item.label | translate }}</span>
21+
@if (item.items) {
22+
<osf-icon
23+
class="ml-auto pt-1"
24+
[iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
25+
></osf-icon>
26+
}
27+
</a>
28+
29+
@if (item.label === 'navigation.myProjects' && isProjectRoute()) {
30+
<div class="ml-4">
31+
<p-panelMenu [model]="myProjectMenuItems" [multiple]="false">
32+
<ng-template #item let-item>
33+
<a
34+
[routerLink]="item.routerLink ? ['/my-projects', currentProjectId(), item.routerLink] : null"
35+
[routerLinkActive]="item.routerLink ? 'active' : ''"
36+
[routerLinkActiveOptions]="{ exact: true }"
37+
class="nav-link flex align-items-center"
38+
(click)="goToLink(item)"
39+
>
40+
@if (item.icon) {
41+
<osf-icon [iconClass]="`nav-icon ${item.icon}`"></osf-icon>
42+
}
43+
<span>{{ item.label | translate }}</span>
44+
@if (item.items) {
45+
<osf-icon
46+
class="ml-auto pt-1"
47+
[iconClass]="item.expanded ? `fas fa-chevron-down fa-sm` : `fas fa-chevron-right fa-sm`"
48+
></osf-icon>
49+
}
50+
</a>
51+
</ng-template>
52+
</p-panelMenu>
53+
</div>
54+
}
55+
</ng-template>
56+
</p-panelMenu>
57+
</nav>
58+
</aside>

‎src/app/core/components/nav-menu/nav-menu.component.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
@use "assets/styles/variables" as var;
2+
@use "assets/styles/mixins" as mix;
23

34
:host {
45
.nav-menu {
5-
width: 100%;
6-
max-width: 17rem;
6+
width: 250px;
7+
max-width: 250px;
78

89
.active {
9-
font-weight: 700;
1010
background-color: var.$dark-blue-2;
11-
border-radius: 0.5rem;
11+
border-radius: mix.rem(8px);
12+
font-weight: 700;
1213
}
1314
}
1415
}

‎src/app/core/components/nav-menu/nav-menu.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ import { PanelMenuModule } from 'primeng/panelmenu';
55

66
import { filter, map } from 'rxjs';
77

8+
import { NgOptimizedImage } from '@angular/common';
89
import { Component, computed, inject, output } from '@angular/core';
910
import { toSignal } from '@angular/core/rxjs-interop';
1011
import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
1112

1213
import { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants/nav-items.constant';
14+
import { IconComponent } from '@osf/shared/components';
1315
import { NavItem } from '@osf/shared/models';
1416

1517
@Component({
1618
selector: 'osf-nav-menu',
17-
imports: [RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe],
19+
imports: [NgOptimizedImage, RouterLinkActive, RouterLink, PanelMenuModule, TranslatePipe, IconComponent],
1820
templateUrl: './nav-menu.component.html',
1921
styleUrl: './nav-menu.component.scss',
2022
})

0 commit comments

Comments
 (0)