diff --git a/src/app/about-window/about-window.component.html b/src/app/about-window/about-window.component.html index 793e125..921446f 100644 --- a/src/app/about-window/about-window.component.html +++ b/src/app/about-window/about-window.component.html @@ -6,7 +6,8 @@ + href="https://opentdb.com/">Open Trivia Database and QuizAPI @@ -14,7 +15,45 @@ href="https://www.deviantart.com/marchmountain/art/Windows-XP-High-Resolution-Icon-Pack-916042853">marchmountain at DeviantArt - +
+ + +
+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+
+
+
+ diff --git a/src/app/about-window/about-window.component.sass b/src/app/about-window/about-window.component.sass index 7ebffdb..4546310 100644 --- a/src/app/about-window/about-window.component.sass +++ b/src/app/about-window/about-window.component.sass @@ -1,15 +1,69 @@ -.window-body - display: flex - flex-direction: column - align-items: center - justify-content: center +.window + margin: 10px - label - margin: 3px + &-body + display: flex + flex-direction: column + align-items: center + justify-content: center - &.main - margin-bottom: 10px + label + margin: 3px + + &.main + margin-bottom: 10px + font-style: italic + + &_buttons + display: flex + flex-direction: row + align-items: center + justify-content: center + margin: 5px + + app-icon-button + margin: 5px + + label.window-body_feedback-title font-style: italic + margin-bottom: 10px + + &_feedback-inputs + display: flex + flex-direction: column + align-items: center + justify-content: center + margin: 10px + width: 300px + + .field-row + width: 100% + + textarea + border: 1px solid #7f9db9 + + label + width: 25% + display: block + text-align: end + align-self: flex-start + + input, textarea + width: 75% + + &_feedback-inputs-error + color: red + display: flex + flex-direction: column + align-items: center + justify-content: center + + &_feedback-buttons + display: flex + flex-direction: row + align-items: center + justify-content: center + margin: 5px - app-icon-button - margin-top: 15px + app-icon-button + margin: 5px diff --git a/src/app/about-window/about-window.component.ts b/src/app/about-window/about-window.component.ts index 6d30565..f8c112b 100644 --- a/src/app/about-window/about-window.component.ts +++ b/src/app/about-window/about-window.component.ts @@ -1,6 +1,7 @@ import {Component} from '@angular/core'; import {Router} from "@angular/router"; import {PathsEnum} from "../../model/enums/PathsEnum"; +import {AbstractControl, FormBuilder, FormGroup, Validators} from "@angular/forms"; @Component({ selector: 'app-about-window', @@ -11,9 +12,40 @@ export class AboutWindowComponent { protected readonly PathsEnum = PathsEnum; + public showFeedbackWindow: boolean = false; + public feedbackForm: FormGroup = this.formBuilder.group({ + name: ['', Validators.required], + message: [undefined, Validators.required] + }); + constructor( - public readonly router: Router + public readonly router: Router, + public readonly formBuilder: FormBuilder ) { } + protected toggleFeedbackWindow(): void { + this.feedbackForm.reset(); + this.showFeedbackWindow = !this.showFeedbackWindow; + } + + public async onSubmit(): Promise { + const subject: string = `XPQuiz - Suggestions from ${this.feedbackForm.controls['name'].value}`; + const body: string = encodeURI(this.feedbackForm.controls['message'].value) + + window.location.href = `mailto:xpquiz.github.io@gmail.com?subject=${subject}&body=${body}`; + } + + public shouldDisableSendButton(): boolean { + return !this.feedbackForm.valid; + } + + public shouldShowErrorMessage(formControlName: string): boolean { + const formControl: AbstractControl = this.feedbackForm.controls[formControlName]; + + if (!this.feedbackForm.touched && !formControl.touched) + return false; + + return !formControl.valid; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b46d839..11a3c98 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,7 @@ import {CopyClipboardDirective} from "./directives/CopyClipboardDirective"; import { GameModeWindowComponent } from './game-mode-window/game-mode-window.component'; import { IconTextButtonComponent } from './common/icon-text-button/icon-text-button.component'; import { QuestionTrifectaWindowComponent } from './question-trifecta-window/question-trifecta-window.component'; +import {ReactiveFormsModule} from "@angular/forms"; @NgModule({ declarations: [ @@ -38,7 +39,8 @@ import { QuestionTrifectaWindowComponent } from './question-trifecta-window/ques BrowserModule, AppRoutingModule, HttpClientModule, - NgOptimizedImage + NgOptimizedImage, + ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/assets/icons/20x20/contact.png b/src/assets/icons/20x20/contact.png new file mode 100644 index 0000000..210166a Binary files /dev/null and b/src/assets/icons/20x20/contact.png differ diff --git a/src/assets/icons/20x20/send.png b/src/assets/icons/20x20/send.png new file mode 100644 index 0000000..f493361 Binary files /dev/null and b/src/assets/icons/20x20/send.png differ