florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add code-block dialog and style it.

Browse Source
This commit is contained in:
Florian THIERRY
2024-09-03 10:00:45 +02:00
parent afd184f936
commit c03d977028
6 changed files with 194 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.html Normal file
View File

@@ -0,0 +1,32 @@
<button type="button" class="close" (click)="closeDialog()">
<mat-icon>close</mat-icon>
</button>
<header>
<h1>Add a code block</h1>
</header>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
<div class="form-content">
<mat-form-field>
<mat-label>Programming language</mat-label>
<mat-select #programmingLanguageSelect formControlName="programmingLanguage">
@for(programmingLanguage of programmingLanguages; track programmingLanguage) {
<mat-option [value]="programmingLanguage.code">
{{programmingLanguage.label}}
</mat-option>
}
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Code block</mat-label>
<textarea matInput formControlName="codeBlock"></textarea>
</mat-form-field>
</div>
<div class="actions">
<button type="submit">
Validate
</button>
<button type="button" (click)="closeDialog()" class="secondary">
Cancel
</button>
</div>
</form>

78
frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.scss Normal file
View File

@@ -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;
}
}
}
}
}
}
}

66
frontend/src/app/pages/publication-edition/code-block-dialog/code-block-dialog.component.ts Normal file
View File

@@ -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<CodeBlockDialog>);
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();
}
}

2
frontend/src/app/pages/publication-edition/publication-edition.component.html
View File

@@ -44,7 +44,7 @@
<button type="button" matTooltip="Click to insert a link" (click)="insertLink()">
<mat-icon>link</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to insert a code block">
<button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()">
<mat-icon>code</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to display editor help">

4
frontend/src/app/pages/publication-edition/publication-edition.component.ts
View File

@@ -112,6 +112,10 @@ export class PublicationEditionComponent implements OnInit, OnDestroy {
this.publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.publicationEditionService.displayCodeBlockDialog();
}
save(): void {
this.publicationEditionService.save();
}

13
frontend/src/app/pages/publication-edition/publication-edition.service.ts
View File

@@ -8,6 +8,7 @@ import { PublicationRestService } from "../../core/rest-services/publications/pu
import { copy } from '../../core/utils/ObjectUtils';
import { MatDialog } from "@angular/material/dialog";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
export class CursorPosition {
start: number;
@@ -149,6 +150,18 @@ export class PublicationEditionService implements OnDestroy {
this.subscriptions.push(afterDialogCloseSubscription);
}
displayCodeBlockDialog(): void {
const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => {
if (codeBlockWithLanguage) {
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this._state;