andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

add preview for markup

Browse Source
This commit is contained in:
Andreas Huber
2023-04-04 18:46:34 +02:00
parent 75f45c4d87
commit 3386f0994f
4 changed files with 49 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pdb-js/src/app/app-routing.module.ts
View File

@@ -24,7 +24,6 @@ const routes: Routes = [
imports: [ imports: [
RouterModule.forRoot(routes, {}) RouterModule.forRoot(routes, {})
], ],
//declarations: [VisualizationPageComponent],
declarations: [], declarations: [],
exports: [RouterModule] exports: [RouterModule]
}) })

31
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
View File

@@ -1,15 +1,36 @@
<style> <style>
markdown {
--mdc-dialog-supporting-text-color: black;
}
.mat-mdc-dialog-content {
display: flex;
justify-content: center;
height: 22em;
}
.mat-mdc-dialog-content > div {
width:50%;
}
.preview {
margin-left: 0.5em;
overflow: auto;
}
mat-form-field textarea { mat-form-field textarea {
height: 20em; height: 20em;
} }
</style> </style>
<h1 mat-dialog-title>Add Text</h1> <h1 mat-dialog-title>Add Text</h1>
<div mat-dialog-content> <div mat-dialog-content>
<mat-form-field class="pdb-form-full-width"> <div>
<mat-label>Text</mat-label> <mat-form-field class="pdb-form-full-width">
<textarea matInput [(ngModel)]="text" #textElement focus></textarea> <mat-label>Text</mat-label>
</mat-form-field> <textarea matInput [(ngModel)]="text" #textElement focus ></textarea>
<div>Text field supports <a href="https://spec.commonmark.org/" class="external-link" target="_blank" rel="noopener">Markdown</a>.</div> </mat-form-field>
<div>Text field supports <a href="https://spec.commonmark.org/" class="external-link" target="_blank" rel="noopener">Markdown</a>.</div>
</div>
<div class="preview">
<markdown [data]="this.text"></markdown>
</div>
</div> </div>
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-button mat-dialog-close (click)="close()">Cancel</button> <button mat-button mat-dialog-close (click)="close()">Cancel</button>

2
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts
View File

@@ -36,7 +36,7 @@ export class TextWidgetComponent {
edit() { edit() {
this.dialog.open(AddTextDialogComponent,{ this.dialog.open(AddTextDialogComponent,{
data: {text : this.data.text}, data: {text : this.data.text},
width: '600px' width: '800px'
}).afterClosed().subscribe((text?: string) => { }).afterClosed().subscribe((text?: string) => {
if (text !== undefined) { if (text !== undefined) {
this.data.text = text; this.data.text = text;

25
pdb-js/src/styles.scss
View File

@@ -223,8 +223,27 @@ a.external-link:after {
/* styles for markdown*/ /* styles for markdown*/
markdown blockquote { markdown blockquote {
border-left: 4px grey solid; border-left: 3px grey solid;
display: block; display: block;
margin-left: 2em; margin: 1em 0 1em 2em;
padding-left: 0.5em; padding: 0.5em 0 0.5em 0.5em;
}
markdown table {
border-collapse: collapse;
}
markdown table th, markdown table td {
border: solid 1px black;
padding: 0.4em;
}
markdown thead {
border-bottom: 2px black solid;
}
markdown tfoot {
border-top: 2px black solid;
}
markdown pre {
font-family: monospace;
} }