From 69b692fa60369d0da1252b48cdb7c7d41be9fe11 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:28:19 +0200 Subject: [PATCH 01/21] =?UTF-8?q?=F0=9F=93=90Switch=20mood=20list=20Accent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button-component.component.html | 2 +- .../app/pages/profile/profile.component.html | 6 +- .../src/app/services/mood-service.service.ts | 56 +++++++++---------- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/Frontend/src/app/components/atoms/button-component/button-component.component.html b/Frontend/src/app/components/atoms/button-component/button-component.component.html index 44ce7d07..1cf97b87 100644 --- a/Frontend/src/app/components/atoms/button-component/button-component.component.html +++ b/Frontend/src/app/components/atoms/button-component/button-component.component.html @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/Frontend/src/app/pages/profile/profile.component.html b/Frontend/src/app/pages/profile/profile.component.html index 2c87ad3b..1fa67bab 100644 --- a/Frontend/src/app/pages/profile/profile.component.html +++ b/Frontend/src/app/pages/profile/profile.component.html @@ -48,13 +48,13 @@

Top Artists
-
+
-
+
+ class="rounded-lg overflow-hidden h-full relative">
diff --git a/Frontend/src/app/services/mood-service.service.ts b/Frontend/src/app/services/mood-service.service.ts index 0b2bb337..b8028730 100644 --- a/Frontend/src/app/services/mood-service.service.ts +++ b/Frontend/src/app/services/mood-service.service.ts @@ -101,34 +101,34 @@ export class MoodService { Surprise: 'bg-surprise text-surprise-text focus:ring-surprise-dark fill-surprise-dark transition-colors duration-mood ease-in-out', }; private _MoodClassesDark = { - Anger: 'bg-anger-dark transition-colors duration-mood ease-in-out', - Admiration: 'bg-admiration-dark transition-colors duration-mood ease-in-out', - Fear: 'bg-fear-dark transition-colors duration-mood ease-in-out', - Joy: 'bg-joy-dark transition-colors duration-mood ease-in-out', - Neutral: 'bg-default-dark transition-colors ', - Amusement: 'bg-amusement-dark transition-colors duration-mood ease-in-out', - Annoyance: 'bg-annoyance-dark transition-colors duration-mood ease-in-out', - Approval: 'bg-approval-dark transition-colors duration-mood ease-in-out', - Caring: 'bg-caring-dark transition-colors duration-mood ease-in-out', - Confusion: 'bg-confusion-dark transition-colors duration-mood ease-in-out', - Curiosity: 'bg-curiosity-dark transition-colors duration-mood ease-in-out', - Desire: 'bg-desire-dark transition-colors duration-mood ease-in-out', - Disappointment: 'bg-disappointment-dark transition-colors duration-mood ease-in-out', - Disapproval: 'bg-disapproval-dark transition-colors duration-mood ease-in-out', - Disgust: 'bg-disgust-dark transition-colors duration-mood ease-in-out', - Embarrassment: 'bg-embarrassment-dark transition-colors duration-mood ease-in-out', - Excitement: 'bg-excitement-dark transition-colors duration-mood ease-in-out', - Gratitude: 'bg-gratitude-dark transition-colors duration-mood ease-in-out', - Grief: 'bg-grief-dark transition-colors duration-mood ease-in-out', - Love: 'bg-love-dark transition-colors duration-mood ease-in-out', - Nervousness: 'bg-nervousness-dark transition-colors duration-mood ease-in-out', - Optimism: 'bg-optimism-dark transition-colors duration-mood ease-in-out', - Pride: 'bg-pride-dark transition-colors duration-mood ease-in-out', - Realisation: 'bg-realisation-dark transition-colors duration-mood ease-in-out', - Relief: 'bg-relief-dark transition-colors duration-mood ease-in-out', - Remorse: 'bg-remorse-dark transition-colors duration-mood ease-in-out', - Sadness: 'bg-sadness-dark transition-colors duration-mood ease-in-out', - Surprise: 'bg-surprise-dark transition-colors duration-mood ease-in-out', + Anger: 'bg-anger-dark text-gray-light transition-colors duration-mood ease-in-out', + Admiration: 'bg-admiration-dark text-gray-light transition-colors duration-mood ease-in-out', + Fear: 'bg-fear-dark text-gray-light transition-colors duration-mood ease-in-out', + Joy: 'bg-joy-dark text-gray-light transition-colors duration-mood ease-in-out', + Neutral: 'bg-default-dark text-gray-light transition-colors ', + Amusement: 'bg-amusement-dark text-gray-light transition-colors duration-mood ease-in-out', + Annoyance: 'bg-annoyance-dark text-gray-light transition-colors duration-mood ease-in-out', + Approval: 'bg-approval-dark text-gray-light transition-colors duration-mood ease-in-out', + Caring: 'bg-caring-dark text-gray-light transition-colors duration-mood ease-in-out', + Confusion: 'bg-confusion-dark text-gray-light transition-colors duration-mood ease-in-out', + Curiosity: 'bg-curiosity-dark text-gray-light transition-colors duration-mood ease-in-out', + Desire: 'bg-desire-dark text-gray-light transition-colors duration-mood ease-in-out', + Disappointment: 'bg-disappointment-dark text-gray-light transition-colors duration-mood ease-in-out', + Disapproval: 'bg-disapproval-dark text-gray-light transition-colors duration-mood ease-in-out', + Disgust: 'bg-disgust-dark text-gray-light transition-colors duration-mood ease-in-out', + Embarrassment: 'bg-embarrassment-dark text-gray-light transition-colors duration-mood ease-in-out', + Excitement: 'bg-excitement-dark text-gray-light transition-colors duration-mood ease-in-out', + Gratitude: 'bg-gratitude-dark text-gray-light transition-colors duration-mood ease-in-out', + Grief: 'bg-grief-dark text-gray-light transition-colors duration-mood ease-in-out', + Love: 'bg-love-dark text-gray-light transition-colors duration-mood ease-in-out', + Nervousness: 'bg-nervousness-dark text-gray-light transition-colors duration-mood ease-in-out', + Optimism: 'bg-optimism-dark text-gray-light transition-colors duration-mood ease-in-out', + Pride: 'bg-pride-dark text-gray-light transition-colors duration-mood ease-in-out', + Realisation: 'bg-realisation-dark text-gray-light transition-colors duration-mood ease-in-out', + Relief: 'bg-relief-dark text-gray-light transition-colors duration-mood ease-in-out', + Remorse: 'bg-remorse-dark text-gray-light transition-colors duration-mood ease-in-out', + Sadness: 'bg-sadness-dark text-gray-light transition-colors duration-mood ease-in-out', + Surprise: 'bg-surprise-dark text-gray-light transition-colors duration-mood ease-in-out', }; private _backgroundMoodClasses = { From fa5e68aae988f0b02dbe852a5c7d4ad995d0973a Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Mon, 9 Sep 2024 17:59:47 +0200 Subject: [PATCH 02/21] =?UTF-8?q?=F0=9F=94=A5Remove=20console.log=20statem?= =?UTF-8?q?ents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/app/app.component.ts | 1 - .../components/molecules/moods-list/moods-list.component.ts | 4 +--- .../app/components/molecules/top-card/top-card.component.ts | 1 - .../app/components/organisms/side-bar/side-bar.component.ts | 2 +- .../templates/desktop/other-nav/other-nav.component.ts | 2 -- Frontend/src/app/pages/profile/profile.component.ts | 1 - 6 files changed, 2 insertions(+), 9 deletions(-) diff --git a/Frontend/src/app/app.component.ts b/Frontend/src/app/app.component.ts index d9d28dd8..6c58053d 100644 --- a/Frontend/src/app/app.component.ts +++ b/Frontend/src/app/app.component.ts @@ -73,7 +73,6 @@ export class AppComponent implements OnInit { this.router.events.pipe( filter((event): event is NavigationEnd => event instanceof NavigationEnd) ).subscribe((event: NavigationEnd) => { - console.log('Navigation ended:', event.urlAfterRedirects); this.isAuthRoute = ['/login', '/register'].includes(event.urlAfterRedirects); this.isCallbackRoute = ['/auth/callback'].includes(event.urlAfterRedirects); }); diff --git a/Frontend/src/app/components/molecules/moods-list/moods-list.component.ts b/Frontend/src/app/components/molecules/moods-list/moods-list.component.ts index 425457b8..124ca2e2 100644 --- a/Frontend/src/app/components/molecules/moods-list/moods-list.component.ts +++ b/Frontend/src/app/components/molecules/moods-list/moods-list.component.ts @@ -19,9 +19,7 @@ export class MoodsListComponent implements OnInit { this.redirectToMoodPage.emit(mood); } ngOnInit(): void { - for (let mood of this.moods){ - console.log(mood); - } + } } \ No newline at end of file diff --git a/Frontend/src/app/components/molecules/top-card/top-card.component.ts b/Frontend/src/app/components/molecules/top-card/top-card.component.ts index 7164b133..e5bbf2e3 100644 --- a/Frontend/src/app/components/molecules/top-card/top-card.component.ts +++ b/Frontend/src/app/components/molecules/top-card/top-card.component.ts @@ -37,7 +37,6 @@ export class TopCardComponent { }); dialogRef.afterClosed().subscribe((result) => { - console.log('The dialog was closed'); }); } } diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts b/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts index 5eb58b64..ffe5d04d 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts @@ -131,7 +131,7 @@ export class SideBarComponent implements OnInit { try { this.isLoading = true; const data = await this.spotifyService.getRecentlyPlayedTracks(this.provider); - console.log("Recently Played Tracks Data:", data); + console.log("First track: ", data.items[0]); data.items.forEach((item: any) => { const trackId = item.track.id; if (!this.recentListeningCardData.find(track => track.id === trackId)) { diff --git a/Frontend/src/app/components/templates/desktop/other-nav/other-nav.component.ts b/Frontend/src/app/components/templates/desktop/other-nav/other-nav.component.ts index 3855d115..486d5e6d 100644 --- a/Frontend/src/app/components/templates/desktop/other-nav/other-nav.component.ts +++ b/Frontend/src/app/components/templates/desktop/other-nav/other-nav.component.ts @@ -43,9 +43,7 @@ export class OtherNavComponent implements AfterViewInit { } toggleDropdown(): void { - console.log('Profile picture clicked. Toggling dropdown...'); this.isDropdownOpen = !this.isDropdownOpen; - console.log('Dropdown open:', this.isDropdownOpen); } @HostListener('document:click', ['$event']) diff --git a/Frontend/src/app/pages/profile/profile.component.ts b/Frontend/src/app/pages/profile/profile.component.ts index c730eedc..1c523f0a 100644 --- a/Frontend/src/app/pages/profile/profile.component.ts +++ b/Frontend/src/app/pages/profile/profile.component.ts @@ -100,7 +100,6 @@ export class ProfileComponent implements AfterViewInit dialogRef.afterClosed().subscribe((result) => { - console.log("The dialog was closed"); }); } From daa71a2e499e7349ff133f55529ff65d80b2ba2d Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Mon, 9 Sep 2024 18:00:19 +0200 Subject: [PATCH 03/21] =?UTF-8?q?=F0=9F=93=90Refactor=20mood=20list=20comp?= =?UTF-8?q?onent=20to=20fix=20selected=20mood=20logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/molecules/mood-list/mood-list.component.html | 2 +- .../app/components/molecules/mood-list/mood-list.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Frontend/src/app/components/molecules/mood-list/mood-list.component.html b/Frontend/src/app/components/molecules/mood-list/mood-list.component.html index 28c6617e..c21d2f5c 100644 --- a/Frontend/src/app/components/molecules/mood-list/mood-list.component.html +++ b/Frontend/src/app/components/molecules/mood-list/mood-list.component.html @@ -2,7 +2,7 @@
\ No newline at end of file diff --git a/Frontend/src/app/components/molecules/mood-list/mood-list.component.ts b/Frontend/src/app/components/molecules/mood-list/mood-list.component.ts index 31652e30..91cf3ee5 100644 --- a/Frontend/src/app/components/molecules/mood-list/mood-list.component.ts +++ b/Frontend/src/app/components/molecules/mood-list/mood-list.component.ts @@ -12,9 +12,9 @@ import { ButtonComponentComponent } from './../../atoms/button-component/button- }) export class MoodListComponent { @Input() moods!: string[]; - @Input() selectedMood!: number | null; + @Input() selectedMood = 0; @Input() screenSize!: string; - + constructor(public moodService: MoodService) { } From 7e7bfca9feeb7ca9cc95d768da5c748e60f428ac Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Mon, 9 Sep 2024 18:39:36 +0200 Subject: [PATCH 04/21] =?UTF-8?q?=F0=9F=93=90Refactor=20grid=20layout=20in?= =?UTF-8?q?=20app=20component=20and=20side=20bar=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/app/app.component.html | 2 +- .../components/organisms/side-bar/side-bar.component.html | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html index 3434a832..bb120d11 100644 --- a/Frontend/src/app/app.component.html +++ b/Frontend/src/app/app.component.html @@ -4,7 +4,7 @@
-
+
diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html index fe42dfb1..e10ed144 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html @@ -1,12 +1,12 @@ -
+
- +
- +
From 9bdf34049f0c43367220734a0ef75610ec7f5bed Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 10 Sep 2024 11:37:48 +0200 Subject: [PATCH 05/21] =?UTF-8?q?=F0=9F=9A=A7created=20a=20plus=20icon=20f?= =?UTF-8?q?rom=20svg=20icon=20for=20exapading=20side=20bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/svg-icon/svg-icon.component.ts | 2 +- .../desktop/left/left.component.html | 8 +++++ .../templates/desktop/left/left.component.ts | 33 ++++++++++++------- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.ts b/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.ts index a17a5cb0..8fb73bf4 100644 --- a/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.ts +++ b/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.ts @@ -16,7 +16,7 @@ export class SvgIconComponent { @Input() fillColor: string = '#000000'; @Input() selected: boolean = false; @Input() isAnimating: boolean = false; - @Input() middleColor: string = '#FFFFFF'; + @Input() middleColor: string = '#191716'; @Input() pathHeight: string = '1'; // Default path height as a string @Input() circleAnimation: boolean = false; @Output() svgClick = new EventEmitter(); diff --git a/Frontend/src/app/components/templates/desktop/left/left.component.html b/Frontend/src/app/components/templates/desktop/left/left.component.html index 696eef7e..bd7236e1 100644 --- a/Frontend/src/app/components/templates/desktop/left/left.component.html +++ b/Frontend/src/app/components/templates/desktop/left/left.component.html @@ -1,2 +1,10 @@ + + + + diff --git a/Frontend/src/app/components/templates/desktop/left/left.component.ts b/Frontend/src/app/components/templates/desktop/left/left.component.ts index 73b88314..e458a085 100644 --- a/Frontend/src/app/components/templates/desktop/left/left.component.ts +++ b/Frontend/src/app/components/templates/desktop/left/left.component.ts @@ -1,27 +1,36 @@ +// left.component.ts import { Component } from '@angular/core'; import { NavbarComponent } from './../../../organisms/navbar/navbar.component'; import { SideBarComponent } from './../../../organisms/side-bar/side-bar.component'; -import { CommonModule} from "@angular/common"; +import { CommonModule } from "@angular/common"; import { AuthService } from "../../../../services/auth.service"; import { ProviderService } from "../../../../services/provider.service"; +import { SvgIconComponent } from '../../../atoms/svg-icon/svg-icon.component'; +import { MoodService } from "../../../../services/mood-service.service"; +const SVG_PATHS = { + PLUS: 'M20 0 H30 V20 H50 V30 H30 V50 H20 V30 H0 V20 H20 Z', + MIN: 'M0 20 H50 V30 H0 Z', +}; @Component({ selector: 'app-left', standalone: true, - imports: [NavbarComponent, SideBarComponent, CommonModule], + imports: [NavbarComponent, SideBarComponent, CommonModule, SvgIconComponent], templateUrl: './left.component.html', styleUrl: './left.component.css' }) export class LeftComponent { - constructor(private authService: AuthService, private providerService: ProviderService){} - //Check whether the app is ready to load data from Spotify - async ready() - { - if (this.providerService.getProviderName() === 'spotify') - { - return await this.authService.isReady(); - } - return false; + constructor(private moodService: MoodService) {} + + svgString: string = SVG_PATHS.PLUS; + isSideBarHidden = true; + + toggleSideBar() { + this.isSideBarHidden = !this.isSideBarHidden; } -} + + handleSvgClick(event: MouseEvent) { + console.log('SVG icon clicked', event); + } +} \ No newline at end of file From ed4cadd0d9330af70a02e7ed5dcaddd6522b9a0e Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 10 Sep 2024 18:14:29 +0200 Subject: [PATCH 06/21] =?UTF-8?q?=F0=9F=8E=89Create=20expandable=20icon=20?= =?UTF-8?q?component=20for=20sidebar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../expandable-icon.component.css | 0 .../expandable-icon.component.html | 6 +++++ .../expandable-icon.component.spec.ts | 23 +++++++++++++++++++ .../expandable-icon.component.ts | 23 +++++++++++++++++++ .../desktop/left/left.component.html | 10 +------- .../templates/desktop/left/left.component.ts | 12 ++++------ 6 files changed, 58 insertions(+), 16 deletions(-) create mode 100644 Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.css create mode 100644 Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.html create mode 100644 Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.spec.ts create mode 100644 Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts diff --git a/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.css b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.css new file mode 100644 index 00000000..e69de29b diff --git a/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.html b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.html new file mode 100644 index 00000000..fc14ad93 --- /dev/null +++ b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.html @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.spec.ts b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.spec.ts new file mode 100644 index 00000000..8e1dc0ac --- /dev/null +++ b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExpandableIconComponent } from './expandable-icon.component'; + +describe('ExpandableIconComponent', () => { + let component: ExpandableIconComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ExpandableIconComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ExpandableIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts new file mode 100644 index 00000000..787c3479 --- /dev/null +++ b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { CommonModule } from "@angular/common"; +import { SvgIconComponent } from '../../atoms/svg-icon/svg-icon.component'; +const SVG_PATHS = { + PLUS: 'M20 0 H30 V20 H50 V30 H30 V50 H20 V30 H0 V20 H20 Z', + MIN: 'M0 20 H50 V30 H0 Z', +}; + +@Component({ + selector: 'app-expandable-icon', + standalone: true, + imports: [CommonModule,SvgIconComponent], + templateUrl: './expandable-icon.component.html', + styleUrl: './expandable-icon.component.css' +}) +export class ExpandableIconComponent { + + svgString: string = SVG_PATHS.PLUS; + + handleSvgClick(event: MouseEvent) { + this.svgString = this.svgString === SVG_PATHS.PLUS ? SVG_PATHS.MIN : SVG_PATHS.PLUS; + } +} diff --git a/Frontend/src/app/components/templates/desktop/left/left.component.html b/Frontend/src/app/components/templates/desktop/left/left.component.html index bd7236e1..e3414949 100644 --- a/Frontend/src/app/components/templates/desktop/left/left.component.html +++ b/Frontend/src/app/components/templates/desktop/left/left.component.html @@ -1,10 +1,2 @@ - - - - - + \ No newline at end of file diff --git a/Frontend/src/app/components/templates/desktop/left/left.component.ts b/Frontend/src/app/components/templates/desktop/left/left.component.ts index e458a085..4a4a46da 100644 --- a/Frontend/src/app/components/templates/desktop/left/left.component.ts +++ b/Frontend/src/app/components/templates/desktop/left/left.component.ts @@ -1,23 +1,22 @@ -// left.component.ts import { Component } from '@angular/core'; import { NavbarComponent } from './../../../organisms/navbar/navbar.component'; import { SideBarComponent } from './../../../organisms/side-bar/side-bar.component'; import { CommonModule } from "@angular/common"; -import { AuthService } from "../../../../services/auth.service"; -import { ProviderService } from "../../../../services/provider.service"; import { SvgIconComponent } from '../../../atoms/svg-icon/svg-icon.component'; import { MoodService } from "../../../../services/mood-service.service"; +import { ExpandableIconComponent } from '../../../organisms/expandable-icon/expandable-icon.component'; const SVG_PATHS = { PLUS: 'M20 0 H30 V20 H50 V30 H30 V50 H20 V30 H0 V20 H20 Z', MIN: 'M0 20 H50 V30 H0 Z', }; + @Component({ selector: 'app-left', standalone: true, - imports: [NavbarComponent, SideBarComponent, CommonModule, SvgIconComponent], + imports: [NavbarComponent, SideBarComponent, CommonModule, SvgIconComponent,ExpandableIconComponent], templateUrl: './left.component.html', - styleUrl: './left.component.css' + styleUrls: ['./left.component.css'] }) export class LeftComponent { constructor(private moodService: MoodService) {} @@ -29,8 +28,7 @@ export class LeftComponent { this.isSideBarHidden = !this.isSideBarHidden; } - handleSvgClick(event: MouseEvent) { - console.log('SVG icon clicked', event); + this.svgString = this.svgString === SVG_PATHS.PLUS ? SVG_PATHS.MIN : SVG_PATHS.PLUS; } } \ No newline at end of file From d2576bb981eb0136ed1aaabf8eb53c37ab0cb64b Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Tue, 10 Sep 2024 18:30:24 +0200 Subject: [PATCH 07/21] =?UTF-8?q?=F0=9F=93=90Refactor=20SvgIconComponent?= =?UTF-8?q?=20to=20accept=20dynamic=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/components/atoms/svg-icon/svg-icon.component.html | 2 +- .../app/components/atoms/svg-icon/svg-icon.component.ts | 1 + .../expandable-icon/expandable-icon.component.html | 1 + .../components/organisms/side-bar/side-bar.component.html | 7 +++++-- .../components/organisms/side-bar/side-bar.component.ts | 3 ++- .../components/templates/desktop/left/left.component.ts | 3 +-- 6 files changed, 11 insertions(+), 6 deletions(-) diff --git a/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.html b/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.html index bdf8865e..f848e5a4 100644 --- a/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.html +++ b/Frontend/src/app/components/atoms/svg-icon/svg-icon.component.html @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html index e10ed144..a6b3f6ef 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html @@ -2,11 +2,14 @@
+
+ +
- +
- +
diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts b/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts index ffe5d04d..c5f8d0e6 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.ts @@ -12,13 +12,14 @@ import { SongCardsComponent } from "../song-cards/song-cards.component"; import { SearchService } from "../../../services/search.service"; import { SkeletonSongCardComponent } from "../../atoms/skeleton-song-card/skeleton-song-card.component"; import { ToastComponent } from '../../../components/organisms/toast/toast.component'; +import { ExpandableIconComponent } from '../../organisms/expandable-icon/expandable-icon.component'; type SelectedOption = 'suggestions' | 'recentListening'; @Component({ selector: "app-side-bar", standalone: true, - imports: [MatCard, MatCardContent, NgForOf, NgIf, NgClass, EchoButtonComponent, SongCardsComponent, SkeletonSongCardComponent, ToastComponent], + imports: [MatCard, MatCardContent, NgForOf, NgIf, NgClass, EchoButtonComponent, SongCardsComponent, SkeletonSongCardComponent, ToastComponent,ExpandableIconComponent], templateUrl: "./side-bar.component.html", styleUrls: ["./side-bar.component.css"] }) diff --git a/Frontend/src/app/components/templates/desktop/left/left.component.ts b/Frontend/src/app/components/templates/desktop/left/left.component.ts index 4a4a46da..b7a8d2c0 100644 --- a/Frontend/src/app/components/templates/desktop/left/left.component.ts +++ b/Frontend/src/app/components/templates/desktop/left/left.component.ts @@ -4,7 +4,6 @@ import { SideBarComponent } from './../../../organisms/side-bar/side-bar.compone import { CommonModule } from "@angular/common"; import { SvgIconComponent } from '../../../atoms/svg-icon/svg-icon.component'; import { MoodService } from "../../../../services/mood-service.service"; -import { ExpandableIconComponent } from '../../../organisms/expandable-icon/expandable-icon.component'; const SVG_PATHS = { PLUS: 'M20 0 H30 V20 H50 V30 H30 V50 H20 V30 H0 V20 H20 Z', @@ -14,7 +13,7 @@ const SVG_PATHS = { @Component({ selector: 'app-left', standalone: true, - imports: [NavbarComponent, SideBarComponent, CommonModule, SvgIconComponent,ExpandableIconComponent], + imports: [NavbarComponent, SideBarComponent, CommonModule, SvgIconComponent], templateUrl: './left.component.html', styleUrls: ['./left.component.css'] }) From bd2a8c75257d3667d065a31610867d34e77367d9 Mon Sep 17 00:00:00 2001 From: Rueben van der Westhuizen <91849806+21434809@users.noreply.github.com> Date: Wed, 11 Sep 2024 13:11:26 +0200 Subject: [PATCH 08/21] =?UTF-8?q?=F0=9F=93=90added=20side=20bar=20toggle?= =?UTF-8?q?=20on=20app.component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/app/app.component.html | 13 +++-- Frontend/src/app/app.component.ts | 17 +++++-- .../expandable-icon.component.ts | 14 ++++-- .../organisms/side-bar/side-bar.component.css | 6 +-- .../side-bar/side-bar.component.html | 20 +++++--- .../organisms/side-bar/side-bar.component.ts | 48 +++++++++---------- .../templates/desktop/left/left.component.ts | 16 ------- 7 files changed, 67 insertions(+), 67 deletions(-) diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html index bb120d11..7dd23442 100644 --- a/Frontend/src/app/app.component.html +++ b/Frontend/src/app/app.component.html @@ -5,10 +5,15 @@
- + - -
+ + +
@@ -22,4 +27,4 @@
-
+
\ No newline at end of file diff --git a/Frontend/src/app/app.component.ts b/Frontend/src/app/app.component.ts index 6c58053d..ce1615a0 100644 --- a/Frontend/src/app/app.component.ts +++ b/Frontend/src/app/app.component.ts @@ -6,12 +6,13 @@ import { ScreenSizeService } from "./services/screen-size-service.service"; import { SwUpdate } from "@angular/service-worker"; import { filter } from "rxjs/operators"; import { CommonModule, isPlatformBrowser } from "@angular/common"; -import { SideBarComponent } from "./components/organisms/side-bar/side-bar.component"; import { ProviderService } from "./services/provider.service"; import { PageHeaderComponent } from "./components/molecules/page-header/page-header.component"; import { MoodService } from "./services/mood-service.service"; import { BackgroundAnimationComponent } from "./components/organisms/background-animation/background-animation.component"; +import { NavbarComponent } from "./components/organisms/navbar/navbar.component"; +import { SideBarComponent } from './components/organisms/side-bar/side-bar.component'; //template imports import { HeaderComponent } from "./components/organisms/header/header.component"; import { OtherNavComponent } from "./components/templates/desktop/other-nav/other-nav.component"; @@ -31,7 +32,9 @@ import { PlayerStateService } from "./services/player-state.service"; HeaderComponent, OtherNavComponent, LeftComponent, - BackgroundAnimationComponent + BackgroundAnimationComponent, + NavbarComponent, + SideBarComponent ], templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] @@ -40,6 +43,9 @@ export class AppComponent implements OnInit { update: boolean = false; screenSize!: string; displayPageName: boolean = false; + columnStart: number = 3; + columnStartNav: number = 1; + protected displaySideBar: boolean = false; protected isAuthRoute: boolean = false; protected isCallbackRoute: boolean = false; @@ -77,7 +83,7 @@ export class AppComponent implements OnInit { this.isCallbackRoute = ['/auth/callback'].includes(event.urlAfterRedirects); }); } - + async ngOnInit() { this.screenSizeService.screenSize$.subscribe(screenSize => { this.screenSize = screenSize; @@ -91,10 +97,13 @@ export class AppComponent implements OnInit { return ['/login', '/register','/Auth/callback'].includes(this.router.url); } + layout(isSidebarOpen: boolean) { + this.columnStart = isSidebarOpen ? 1 : 3; + } isReady(): boolean { if (isPlatformBrowser(this.platformId)) return this.playerStateService.isReady(); return false; } -} +} \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts index 787c3479..cd1572ee 100644 --- a/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts +++ b/Frontend/src/app/components/organisms/expandable-icon/expandable-icon.component.ts @@ -1,6 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, Output, EventEmitter } from '@angular/core'; import { CommonModule } from "@angular/common"; import { SvgIconComponent } from '../../atoms/svg-icon/svg-icon.component'; + const SVG_PATHS = { PLUS: 'M20 0 H30 V20 H50 V30 H30 V50 H20 V30 H0 V20 H20 Z', MIN: 'M0 20 H50 V30 H0 Z', @@ -9,15 +10,18 @@ const SVG_PATHS = { @Component({ selector: 'app-expandable-icon', standalone: true, - imports: [CommonModule,SvgIconComponent], + imports: [CommonModule, SvgIconComponent], templateUrl: './expandable-icon.component.html', styleUrl: './expandable-icon.component.css' }) export class ExpandableIconComponent { - svgString: string = SVG_PATHS.PLUS; - + svgString: string = SVG_PATHS.MIN; + + @Output() svgClicked = new EventEmitter(); + handleSvgClick(event: MouseEvent) { this.svgString = this.svgString === SVG_PATHS.PLUS ? SVG_PATHS.MIN : SVG_PATHS.PLUS; + this.svgClicked.emit(); } -} +} \ No newline at end of file diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.css b/Frontend/src/app/components/organisms/side-bar/side-bar.component.css index 5d5ec93d..753ae9ae 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.css +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.css @@ -34,10 +34,7 @@ .scrollbar-hidden::-webkit-scrollbar { display: none; /* Safari and Chrome */ } -.container { - width: var(--tw-w); - height: var(--tw-h); -} + .view-more-container { /* Adjust the padding value based on your needs */ margin-bottom: calc(50vh - 50px); /* Assuming the button's height is around 100px */ @@ -47,4 +44,3 @@ color: inherit !important; /* Neutralizes text color change */ /* Add any other properties that change on hover to be neutralized */ } - diff --git a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html index a6b3f6ef..a9d592ae 100644 --- a/Frontend/src/app/components/organisms/side-bar/side-bar.component.html +++ b/Frontend/src/app/components/organisms/side-bar/side-bar.component.html @@ -1,19 +1,23 @@ -
-
+
+
+
- +
-
+ +
-
+
-
- + + +
+
@@ -25,10 +29,12 @@
+
+