From a53ec1184d51caaea570f2360555ae843a2ba428 Mon Sep 17 00:00:00 2001 From: Thomas Schaffter Date: Fri, 27 Oct 2023 21:13:21 +0000 Subject: [PATCH 1/3] Add Discord button to the navbar --- .../assets/src/assets/images/discord-icon.svg | 7 +++++ .../discord-button/_discord-button-theme.scss | 27 +++++++++++++++++++ .../discord-button.component.html | 8 ++++++ .../discord-button.component.scss | 5 ++++ .../discord-button.component.ts | 15 +++++++++++ .../ui/src/lib/navbar/navbar.component.html | 2 ++ .../ui/src/lib/navbar/navbar.component.ts | 4 +-- .../organization-card.component.spec.ts | 10 ------- 8 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 libs/openchallenges/assets/src/assets/images/discord-icon.svg create mode 100644 libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss create mode 100644 libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html create mode 100644 libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss create mode 100644 libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts diff --git a/libs/openchallenges/assets/src/assets/images/discord-icon.svg b/libs/openchallenges/assets/src/assets/images/discord-icon.svg new file mode 100644 index 0000000000..dba775b381 --- /dev/null +++ b/libs/openchallenges/assets/src/assets/images/discord-icon.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss b/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss new file mode 100644 index 0000000000..ed50c1a960 --- /dev/null +++ b/libs/openchallenges/ui/src/lib/discord-button/_discord-button-theme.scss @@ -0,0 +1,27 @@ +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin color($theme) { + $config: mat.get-color-config($theme); + $primary: map.get($config, primary); + $accent: map.get($config, accent); + $warn: map.get($config, warn); + $background: map.get($config, background); + $foreground: map.get($config, foreground); + + // add color-related scss here +} + +@mixin typography($theme) {} + +@mixin theme($theme) { + $color-config: mat.get-color-config($theme); + @if $color-config != null { + @include color($theme); + } + + $typography-config: mat.get-typography-config($theme); + @if $typography-config != null { + @include typography($theme); + } +} diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html new file mode 100644 index 0000000000..cae8adb1a6 --- /dev/null +++ b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html @@ -0,0 +1,8 @@ + + + {{ label }} + diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss new file mode 100644 index 0000000000..693987fdc3 --- /dev/null +++ b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.scss @@ -0,0 +1,5 @@ +.discord-logo { + height: 21px; + margin: 0 7px 2px 0; + vertical-align: middle; +} diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts new file mode 100644 index 0000000000..c8148a23e5 --- /dev/null +++ b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.ts @@ -0,0 +1,15 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input } from '@angular/core'; +import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; + +@Component({ + selector: 'openchallenges-discord-button', + standalone: true, + imports: [CommonModule, MatButtonModule], + templateUrl: './discord-button.component.html', + styleUrls: ['./discord-button.component.scss'], +}) +export class DiscordButtonComponent { + @Input({ required: false }) label = 'Discord'; + @Input({ required: false }) href = 'https://discord.gg/6PGt7nkcwG'; +} diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.html b/libs/openchallenges/ui/src/lib/navbar/navbar.component.html index d939631b7f..34f6bdb87e 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.html +++ b/libs/openchallenges/ui/src/lib/navbar/navbar.component.html @@ -14,6 +14,8 @@
+ + diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts index d8c2ee1a8f..6418970104 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts +++ b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts @@ -3,11 +3,11 @@ import { Avatar } from '../avatar/avatar'; import { EMPTY_AVATAR } from '../avatar/mock-avatars'; import { MenuItem } from '../user-button/menu-item'; import { NavbarSection } from './navbar-section'; -import { ButtonGithubComponent } from '../button-github/button-github.component'; import { CommonModule } from '@angular/common'; import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { RouterModule } from '@angular/router'; import { UserButtonComponent } from '../user-button/user-button.component'; +import { DiscordButtonComponent } from '../discord-button/discord-button.component'; @Component({ selector: 'openchallenges-navbar', @@ -16,8 +16,8 @@ import { UserButtonComponent } from '../user-button/user-button.component'; CommonModule, RouterModule, MatButtonModule, - ButtonGithubComponent, UserButtonComponent, + DiscordButtonComponent, ], templateUrl: './navbar.component.html', styleUrls: ['./navbar.component.scss'], diff --git a/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts b/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts index 17a16365fe..47d32e909b 100644 --- a/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts +++ b/libs/openchallenges/ui/src/lib/organization-card/organization-card.component.spec.ts @@ -54,14 +54,4 @@ describe('OrganizationCardComponent', () => { size: 160, }); }); - - // it('login property of org should be used for orgAvatar name', () => { - // component.organization.name = ''; - // fixture.detectChanges(); - // expect(component.organizationAvatar).toEqual({ - // name: MOCK_ORGANIZATIONS[0].login.replace(/-/g, ' '), - // src: '', - // size: 160, - // }); - // }); }); From effb3165777b5fa84630cd253017f9a032a66a86 Mon Sep 17 00:00:00 2001 From: Thomas Schaffter Date: Fri, 27 Oct 2023 21:14:33 +0000 Subject: [PATCH 2/3] Cleanup --- libs/openchallenges/ui/src/lib/navbar/navbar.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts index 6418970104..0a706f1a19 100644 --- a/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts +++ b/libs/openchallenges/ui/src/lib/navbar/navbar.component.ts @@ -1,13 +1,13 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { Avatar } from '../avatar/avatar'; import { EMPTY_AVATAR } from '../avatar/mock-avatars'; import { MenuItem } from '../user-button/menu-item'; -import { NavbarSection } from './navbar-section'; -import { CommonModule } from '@angular/common'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { RouterModule } from '@angular/router'; import { UserButtonComponent } from '../user-button/user-button.component'; import { DiscordButtonComponent } from '../discord-button/discord-button.component'; +import { NavbarSection } from './navbar-section'; @Component({ selector: 'openchallenges-navbar', From bbc4105ba5a4f736ba0ec2290f33b040d5f75f6d Mon Sep 17 00:00:00 2001 From: Thomas Schaffter Date: Fri, 27 Oct 2023 21:20:02 +0000 Subject: [PATCH 3/3] Add target property to link --- .../lib/discord-button/discord-button.component.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html index cae8adb1a6..b068149e54 100644 --- a/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html +++ b/libs/openchallenges/ui/src/lib/discord-button/discord-button.component.html @@ -1,8 +1,15 @@ - + {{ label }}