From e9a38f89ddea7c498b632e2e9d0fbf0101cd52de Mon Sep 17 00:00:00 2001 From: Roma Date: Fri, 14 Mar 2025 14:24:13 +0200 Subject: [PATCH 1/5] feat(developer-apps): Designed Developer Apps page --- .../developer-apps.component.html | 26 +++++++++++ .../developer-apps.component.scss | 45 +++++++++++++++++++ .../developer-apps.component.spec.ts | 22 +++++++++ .../developer-apps.component.ts | 36 +++++++++++++++ src/app/features/settings/settings.routes.ts | 7 +++ 5 files changed, 136 insertions(+) create mode 100644 src/app/features/settings/developer-apps/developer-apps.component.html create mode 100644 src/app/features/settings/developer-apps/developer-apps.component.scss create mode 100644 src/app/features/settings/developer-apps/developer-apps.component.spec.ts create mode 100644 src/app/features/settings/developer-apps/developer-apps.component.ts diff --git a/src/app/features/settings/developer-apps/developer-apps.component.html b/src/app/features/settings/developer-apps/developer-apps.component.html new file mode 100644 index 000000000..7ab621ed7 --- /dev/null +++ b/src/app/features/settings/developer-apps/developer-apps.component.html @@ -0,0 +1,26 @@ +
+ +

Developer apps

+ Create Developer App +
+
+

+ Third-party web applications can connect to the OSF on behalf of users via + the OAuth 2.0 web application flow. +

+ +
+ @for (developerApp of developerApplications; track $index) { + +
+

{{ developerApp }}

+ Delete +
+ + } +
+
diff --git a/src/app/features/settings/developer-apps/developer-apps.component.scss b/src/app/features/settings/developer-apps/developer-apps.component.scss new file mode 100644 index 000000000..045c5e861 --- /dev/null +++ b/src/app/features/settings/developer-apps/developer-apps.component.scss @@ -0,0 +1,45 @@ +@use "../../../../assets/styles/variables" as var; +@use "../../../../assets/styles/mixins" as mix; + +:host { + @include mix.flex-column; + flex: 1; + + .header { + @include mix.flex-center-between; + width: 100%; + padding: 7.14rem 1.71rem 3.43rem 1.71rem; + background: var.$gradient-1; + + h1 { + margin-left: 0.85rem; + } + + p-button { + margin-left: auto; + } + + i { + color: var.$dark-blue-1; + font-size: 2.6rem; + } + } + + .content { + margin: 1.7rem; + color: var.$dark-blue-1; + + p { + margin-bottom: 1.7rem; + } + + .applications-container { + @include mix.flex-column; + gap: 0.85rem; + + .card-body { + @include mix.flex-center-between; + } + } + } +} diff --git a/src/app/features/settings/developer-apps/developer-apps.component.spec.ts b/src/app/features/settings/developer-apps/developer-apps.component.spec.ts new file mode 100644 index 000000000..877f51a84 --- /dev/null +++ b/src/app/features/settings/developer-apps/developer-apps.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeveloperAppsComponent } from './developer-apps.component'; + +describe('DeveloperAppsComponent', () => { + let component: DeveloperAppsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DeveloperAppsComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(DeveloperAppsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/settings/developer-apps/developer-apps.component.ts b/src/app/features/settings/developer-apps/developer-apps.component.ts new file mode 100644 index 000000000..a9d59f78c --- /dev/null +++ b/src/app/features/settings/developer-apps/developer-apps.component.ts @@ -0,0 +1,36 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { Card } from 'primeng/card'; + +@Component({ + selector: 'osf-developer-apps', + imports: [Button, Card], + templateUrl: './developer-apps.component.html', + styleUrl: './developer-apps.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DeveloperAppsComponent { + developerApplications: string[] = [ + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + 'Developer app name example', + ]; + + onDeleteDeveloperApp(developerApp: string): void { + console.log('delete', developerApp); + //TODO implement api integration + } +} diff --git a/src/app/features/settings/settings.routes.ts b/src/app/features/settings/settings.routes.ts index 1cce867df..6922327a2 100644 --- a/src/app/features/settings/settings.routes.ts +++ b/src/app/features/settings/settings.routes.ts @@ -20,6 +20,13 @@ export const settingsRoutes: Routes = [ (c) => c.AccountSettingsComponent, ), }, + { + path: 'developer-apps', + loadComponent: () => + import('./developer-apps/developer-apps.component').then( + (mod) => mod.DeveloperAppsComponent, + ), + }, ], }, ]; From 11f86fe1a1b9d0751a9eda6f872ec26c98b1e38f Mon Sep 17 00:00:00 2001 From: Roma Date: Fri, 14 Mar 2025 14:25:02 +0200 Subject: [PATCH 2/5] style(card): Override primeng card styles --- src/assets/styles/overrides/card.scss | 15 +++++++++++++++ src/assets/styles/styles.scss | 1 + 2 files changed, 16 insertions(+) create mode 100644 src/assets/styles/overrides/card.scss diff --git a/src/assets/styles/overrides/card.scss b/src/assets/styles/overrides/card.scss new file mode 100644 index 000000000..2eabddd22 --- /dev/null +++ b/src/assets/styles/overrides/card.scss @@ -0,0 +1,15 @@ +@use "../variables" as var; +@use "../mixins" as mix; + +.p-card { + color: var.$dark-blue-1; + box-shadow: none; + border-radius: 8px; + border-width: 1px; + border-color: var.$grey-2; + border-style: solid; + + .p-card-body { + padding: 1.7rem; + } +} diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss index a1cbadb99..decd87fd3 100644 --- a/src/assets/styles/styles.scss +++ b/src/assets/styles/styles.scss @@ -7,6 +7,7 @@ @use "./overrides/divider"; @use "./overrides/table"; @use "./overrides/message"; +@use "./overrides/card"; @layer base, primeng, reset; From 3e62cbfbf4fbfccac3d7d58f0103e3df36b033c7 Mon Sep 17 00:00:00 2001 From: Roma Date: Fri, 14 Mar 2025 14:26:03 +0200 Subject: [PATCH 3/5] chore(primeng): Set light theme as default one --- src/app/app.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 299d37be2..91eaa7bc8 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -17,6 +17,7 @@ export const appConfig: ApplicationConfig = { theme: { preset: Aura, options: { + darkModeSelector: false, cssLayer: { name: 'primeng', order: 'base, primeng, reset', From 325395b921c2f04fd06a9162328307a1caa4aba6 Mon Sep 17 00:00:00 2001 From: Roma Date: Fri, 14 Mar 2025 14:28:56 +0200 Subject: [PATCH 4/5] refactor(primeng): Refactored card styles --- src/assets/styles/overrides/card.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/assets/styles/overrides/card.scss b/src/assets/styles/overrides/card.scss index 2eabddd22..4b68e12a0 100644 --- a/src/assets/styles/overrides/card.scss +++ b/src/assets/styles/overrides/card.scss @@ -5,9 +5,7 @@ color: var.$dark-blue-1; box-shadow: none; border-radius: 8px; - border-width: 1px; - border-color: var.$grey-2; - border-style: solid; + border: 1px solid var.$grey-2; .p-card-body { padding: 1.7rem; From e5241d7a30a22ec43f037202bef7c633fa7ad4e9 Mon Sep 17 00:00:00 2001 From: Roma Date: Fri, 14 Mar 2025 14:47:55 +0200 Subject: [PATCH 5/5] refactor(style): Refactored var and mix imports --- .../settings/developer-apps/developer-apps.component.scss | 4 ++-- src/assets/styles/overrides/card.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/features/settings/developer-apps/developer-apps.component.scss b/src/app/features/settings/developer-apps/developer-apps.component.scss index 045c5e861..a4448def7 100644 --- a/src/app/features/settings/developer-apps/developer-apps.component.scss +++ b/src/app/features/settings/developer-apps/developer-apps.component.scss @@ -1,5 +1,5 @@ -@use "../../../../assets/styles/variables" as var; -@use "../../../../assets/styles/mixins" as mix; +@use "assets/styles/mixins" as mix; +@use "assets/styles/variables" as var; :host { @include mix.flex-column; diff --git a/src/assets/styles/overrides/card.scss b/src/assets/styles/overrides/card.scss index 4b68e12a0..84c630308 100644 --- a/src/assets/styles/overrides/card.scss +++ b/src/assets/styles/overrides/card.scss @@ -1,5 +1,5 @@ -@use "../variables" as var; -@use "../mixins" as mix; +@use "assets/styles/mixins" as mix; +@use "assets/styles/variables" as var; .p-card { color: var.$dark-blue-1;