From 791e60fa4272254f445ac2d68713df12f797db4e Mon Sep 17 00:00:00 2001 From: Neimhin Date: Tue, 11 Jun 2024 00:01:17 +0100 Subject: [PATCH 1/3] bat mirialta drawer needs styling --- .../bat-mirialta-drawer.component.html | 12 +++++ .../bat-mirialta-drawer.component.scss | 47 +++++++++++++++++++ .../bat-mirialta-drawer.component.spec.ts | 25 ++++++++++ .../bat-mirialta-drawer.component.ts | 36 ++++++++++++++ .../dashboard/dashboard.component.html | 15 ++++++ .../student/dashboard/dashboard.component.ts | 2 +- ngapp/src/app/student/student.module.ts | 2 + 7 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html create mode 100644 ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss create mode 100644 ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.spec.ts create mode 100644 ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.ts diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html new file mode 100644 index 000000000..ed5d89a63 --- /dev/null +++ b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html @@ -0,0 +1,12 @@ +
+
+ {{ ts.l.batmirialta }} + An Bat Mírialta +
+
+ +
+
+ diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss new file mode 100644 index 000000000..9974de10f --- /dev/null +++ b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss @@ -0,0 +1,47 @@ +.batmirialtaHeader { + width: 100%; + padding: 25px; + height: 30px; + background-color: var(--scealai-green); + color: white; + display: flex; + align-items: center; +} + +.closeBatmirialtaBtn { + margin-left: auto; +} + +.closeBatmirialtaBtn:hover { + cursor: pointer; +} + +.textFieldContainer { + width: 100%; + resize: none; + z-index: 1; + color: var(--dark-text); + background: white; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; +} + +.textField { + width: 100%; + resize: none; + z-index: 1; + color: var(--dark-text); + background: white; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + border: none; +} + +.audioPlayer { + height: 30px; + width: 90%; + background-color: #f1f3f4; + border: 1px solid #8c806e86; +} diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.spec.ts b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.spec.ts new file mode 100644 index 000000000..a04579dea --- /dev/null +++ b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; + +import { BatMirialtaDrawerComponent } from './batmirialta-drawer.component'; + +describe('BatMirialtaDrawerComponent', () => { + let component: BatmirialtaDrawerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ HttpClientTestingModule ], + declarations: [ BatMirialtaDrawerComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BatMirialtaDrawerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.ts b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.ts new file mode 100644 index 000000000..fd0119a2f --- /dev/null +++ b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core"; +import { TranslationService } from "app/core/services/translation.service"; +import { StoryService } from "app/core/services/story.service"; +import { EngagementService } from "app/core/services/engagement.service"; +import { NotificationService } from "app/core/services/notification-service.service"; +import { DomSanitizer, SafeUrl } from "@angular/platform-browser"; +import { Story } from "app/core/models/story"; +import { EventType } from "app/core/models/event"; + +@Component({ + selector: "app-bat-mirialta-drawer", + templateUrl: "./bat-mirialta-drawer.component.html", + styleUrls: ["./bat-mirialta-drawer.component.scss"], +}) +export class BatMirialtaDrawerComponent implements OnInit { + @Output() closeEmitter = new EventEmitter(); + @Input() story: Story; + @Input() hasBatmirialta: boolean; + audioSource: SafeUrl | null = null; + + constructor( + protected ts: TranslationService, + protected sanitizer: DomSanitizer, + private storyService: StoryService, + private engagement: EngagementService, + private notificationService: NotificationService + ) {} + + ngOnInit(): void {} + + ngOnChanges(changes: any) { + if (!this.hasBatmirialta) { + this.closeEmitter.next(true) + } + } +} diff --git a/ngapp/src/app/student/dashboard/dashboard.component.html b/ngapp/src/app/student/dashboard/dashboard.component.html index 076f292f7..5afed8b2e 100644 --- a/ngapp/src/app/student/dashboard/dashboard.component.html +++ b/ngapp/src/app/student/dashboard/dashboard.component.html @@ -107,6 +107,17 @@ + +
+ {{ ts.l.batmirialta}} + An Bat Mírialta + +
+
+ + diff --git a/ngapp/src/app/student/dashboard/dashboard.component.ts b/ngapp/src/app/student/dashboard/dashboard.component.ts index 9b6a5579f..de6a1964d 100644 --- a/ngapp/src/app/student/dashboard/dashboard.component.ts +++ b/ngapp/src/app/student/dashboard/dashboard.component.ts @@ -78,7 +78,7 @@ export class DashboardComponent implements OnInit { dontToggle = false; @ViewChild("rightDrawer") rightDrawer: MatDrawer; rightDrawerOpened: boolean = false; - selectedDrawer: "grammar" | "dictionary" | "feedback" | "synthesis" = "grammar"; + selectedDrawer: "grammar" | "dictionary" | "feedback" | "synthesis" | "bat-mirialta" = "grammar"; // WORD COUNT words: string[] = []; diff --git a/ngapp/src/app/student/student.module.ts b/ngapp/src/app/student/student.module.ts index e50c9c9f8..ca1b99400 100644 --- a/ngapp/src/app/student/student.module.ts +++ b/ngapp/src/app/student/student.module.ts @@ -8,6 +8,7 @@ import { StoryDrawerComponent } from './story-drawer/story-drawer.component'; import { DictionaryDrawerComponent } from './dictionary-drawer/dictionary-drawer.component'; import { GrammarErrorDrawerComponent } from './grammar-error-drawer/grammar-error-drawer.component'; import { FeedbackDrawerComponent } from './feedback-drawer/feedback-drawer.component'; +import { BatMirialtaDrawerComponent } from './bat-mirialta-drawer/bat-mirialta-drawer.component'; import { SynthesisDrawerComponent } from './synthesis-drawer/synthesis-drawer.component'; import { HomePageComponent } from './home-page/home-page.component'; @@ -45,6 +46,7 @@ import { SafeHtmlPipe } from 'app/core/pipes/safe-html.pipe'; DictionaryDrawerComponent, GrammarErrorDrawerComponent, FeedbackDrawerComponent, + BatMirialtaDrawerComponent, SynthesisDrawerComponent, HomePageComponent ], From 3c1b1faff9c713f8ff98a4926f877c8867531f45 Mon Sep 17 00:00:00 2001 From: Neimhin Date: Tue, 11 Jun 2024 16:41:09 +0100 Subject: [PATCH 2/3] bat-mirialta close button --- ngapp/src/app/student/dashboard/dashboard.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/ngapp/src/app/student/dashboard/dashboard.component.html b/ngapp/src/app/student/dashboard/dashboard.component.html index 5afed8b2e..c42be6d17 100644 --- a/ngapp/src/app/student/dashboard/dashboard.component.html +++ b/ngapp/src/app/student/dashboard/dashboard.component.html @@ -204,6 +204,7 @@ > From 0d056ee5d61a416c3f7d11fe422091db495371dd Mon Sep 17 00:00:00 2001 From: Neimhin Date: Tue, 11 Jun 2024 16:42:31 +0100 Subject: [PATCH 3/3] bat-mirialta style flex to avoid scrollbar --- .../bat-mirialta-drawer.component.html | 21 +++--- .../bat-mirialta-drawer.component.scss | 67 ++++++++++++------- 2 files changed, 53 insertions(+), 35 deletions(-) diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html index ed5d89a63..73617e01d 100644 --- a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html +++ b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html @@ -1,12 +1,13 @@ -
-
- {{ ts.l.batmirialta }} - An Bat Mírialta -
-
- +
+
+
+ {{ ts.l.batmirialta }} + An Bat Mírialta +
+
+ +
+
- diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss index 9974de10f..23ae123bb 100644 --- a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss +++ b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss @@ -8,6 +8,15 @@ align-items: center; } +.group { + height: 100%; + width: 100%; + margin: none; + padding: none; + display: flex; + flex-flow: column; +} + .closeBatmirialtaBtn { margin-left: auto; } @@ -16,32 +25,40 @@ cursor: pointer; } -.textFieldContainer { - width: 100%; - resize: none; - z-index: 1; - color: var(--dark-text); - background: white; - padding-left: 20px; - padding-right: 20px; - padding-top: 10px; +iframe { + flex: 1 1 auto; } -.textField { - width: 100%; - resize: none; - z-index: 1; - color: var(--dark-text); - background: white; - padding-left: 20px; - padding-right: 20px; - padding-top: 10px; - border: none; +:host { + overflow: hidden; } -.audioPlayer { - height: 30px; - width: 90%; - background-color: #f1f3f4; - border: 1px solid #8c806e86; -} +// .textFieldContainer { +// width: 100%; +// resize: none; +// z-index: 1; +// color: var(--dark-text); +// background: white; +// padding-left: 20px; +// padding-right: 20px; +// padding-top: 10px; +// } +// +// .textField { +// width: 100%; +// resize: none; +// z-index: 1; +// color: var(--dark-text); +// background: white; +// padding-left: 20px; +// padding-right: 20px; +// padding-top: 10px; +// border: none; +// } +// +// .audioPlayer { +// height: 30px; +// width: 90%; +// background-color: #f1f3f4; +// border: 1px solid #8c806e86; +// }