diff --git a/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.html b/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.html new file mode 100644 index 0000000..6d2606d --- /dev/null +++ b/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.html @@ -0,0 +1,32 @@ + +
+

Add a code block

+
+
+
+ + Programming language + + @for(programmingLanguage of programmingLanguages; track programmingLanguage) { + + {{programmingLanguage.label}} + + } + + + + Code block + + +
+
+ + +
+
diff --git a/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.scss b/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.scss new file mode 100644 index 0000000..577224e --- /dev/null +++ b/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.scss @@ -0,0 +1,78 @@ +:host { + display: flex; + flex-direction: column; + padding: 1em; + gap: 1em; + position: relative; + max-height: 90vh; + + .close { + position: absolute; + top: 1em; + right: 1em; + width: 2.5em; + height: 2.5em; + border-radius: 10em; + border: none; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + header { + flex: 1; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + form { + div { + &.form-content { + mat-form-field { + width: 100%; + + textarea { + height: 30vh; + } + } + } + + &.actions { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + + button { + padding: .8em 1.2em; + border-radius: 10em; + border: none; + background-color: #3f51b5; + color: white; + transition: background-color .2s ease-in-out; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + + &:hover { + background-color: #5b6ed8; + } + + &.secondary { + color: #3f51b5; + background-color: white; + + &:hover { + background-color: #f2f4ff; + cursor: pointer; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.ts b/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.ts new file mode 100644 index 0000000..7f8ee96 --- /dev/null +++ b/frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.ts @@ -0,0 +1,66 @@ +import { Component, inject } from "@angular/core"; +import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; +import { MatDialogRef } from "@angular/material/dialog"; +import { MatFormFieldModule } from "@angular/material/form-field"; +import { MatIcon } from "@angular/material/icon"; +import { MatInputModule } from "@angular/material/input"; +import { MatSelectModule } from '@angular/material/select'; + +export interface ProgramingLanguage { + code: string; + label: string; +} + +export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [ + { + code: 'bash', + label: 'Bash' + }, + { + code: 'java', + label: 'Java' + }, + { + code: 'markup', + label: 'html/xml' + }, + { + code: 'python', + label: 'Python' + }, + { + code: 'sql', + label: 'SQL' + } +]; + +@Component({ + selector: 'app-code-block-dialog', + standalone: true, + templateUrl: './code-block-dialog.component.html', + styleUrl: './code-block-dialog.component.scss', + imports: [ + MatFormFieldModule, + MatIcon, + MatInputModule, + MatSelectModule, + ReactiveFormsModule, + ] +}) +export class CodeBlockDialog { + private readonly dialogRef = inject(MatDialogRef); + private formBuilder = inject(FormBuilder); + programmingLanguages = PROGRAMMING_LANGUAGES; + formGroup = this.formBuilder.group({ + programmingLanguage: new FormControl('', Validators.required), + codeBlock: new FormControl('', Validators.required) + }); + + closeAndValidate(): void { + + } + + closeDialog(): void { + this.dialogRef.close(); + } +} \ No newline at end of file diff --git a/frontend/src/app/pages/publication-edition/publication-edition.component.html b/frontend/src/app/pages/publication-edition/publication-edition.component.html index 1bb6181..1dffaa9 100644 --- a/frontend/src/app/pages/publication-edition/publication-edition.component.html +++ b/frontend/src/app/pages/publication-edition/publication-edition.component.html @@ -44,7 +44,7 @@ -