move edit/delete buttons outside the text

pdb-js/src/app/app-routing.module.ts

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

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

@@ -1,15 +1,36 @@
 <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 {
     height: 20em;
   }
 </style>
 <h1 mat-dialog-title>Add Text</h1>
 <div mat-dialog-content>
+  <div>
     <mat-form-field class="pdb-form-full-width">
       <mat-label>Text</mat-label>
       <textarea matInput [(ngModel)]="text" #textElement focus ></textarea>
     </mat-form-field>
-  <div>Text field supports <a href="https://spec.commonmark.org/" target="_blank" rel="noopener">Markdown</a>.</div>
+    <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 mat-dialog-actions align="end">
   <button mat-button mat-dialog-close (click)="close()">Cancel</button>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -21,9 +21,21 @@
   .content {
     padding: 0.5em;
   }
+  .dashboard-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: stretch;
+  }
   .dashboard-column {
     display: flex;
     flex-direction: column;
+    
+    /* make all columns equal width - flex-basis:0 to make all resizing start from the same size*/
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    
   }
 
   .editable-hovered {
@@ -34,7 +46,6 @@
     visibility: visible;
   }
 
-
   .handle {
     display: block;
     height: 1.5em;
@@ -68,16 +79,16 @@
     <p>{{dashboard.description}}</p>
   </div>
 
-  <div cdkDropListGroup>
+  <div cdkDropListGroup class="dashboard-area">
     <div 
       cdkDropList
       class="dashboard-column"
-      *ngFor="let column of dashboard.arrangement"
-      [cdkDropListData]="column"
+      *ngFor="let i of [0,1]"
+      [cdkDropListData]="i"
       (cdkDropListDropped)="drop($event)">
       <div 
         cdkDrag 
-        *ngFor="let id of column" 
+        *ngFor="let id of dashboard.arrangement[i]" 
         [attr.widget-id]="id">
         <div cdkDragHandle class="handle"><img src="/assets/img/drag_handle.svg" class="icon-small"/></div>
         <app-text-widget 

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -89,8 +89,8 @@ export class DashboardComponent implements OnInit {
 
   private repairArrangement(){
     const arrangement = this.dashboard!.arrangement || [];
-    if (arrangement.length == 0){
-      arrangement[0] = [];
+    for (let i = 0; i < 2; i++){
+      arrangement[i] = arrangement[i] ?? [] ;
     }
     this.dashboard?.texts.forEach(t => {
       if (!this.arrangmentContainsId(arrangement, t.id)){
@@ -102,6 +102,7 @@ export class DashboardComponent implements OnInit {
         arrangement[0].push(t.id);
       }
     });
+
     this.dashboard!.arrangement = arrangement;
   }
 
@@ -118,7 +119,7 @@ export class DashboardComponent implements OnInit {
   addText() {
     this.dialog.open(AddTextDialogComponent,{
       data: {text:""},
-      width: '600px'
+      width: '800px'
     }).afterClosed().subscribe((text: string) => {
       const widget = new TextWidget((<any>window).randomId(),'MEDIUM', text);
       this.dashboard!.texts.push(widget); 
@@ -213,13 +214,14 @@ export class DashboardComponent implements OnInit {
     return this.plotWidgetRenderData.find( x => x.widget.id == id);
   }
 
-  drop(event: CdkDragDrop<string[]>) {
+  drop(event: CdkDragDrop<number>) {
     if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+      moveItemInArray(this.dashboard!.arrangement[event.container.data], event.previousIndex, event.currentIndex);
     } else {
+      window.console.log("from ",event.previousContainer.data, " to ", event.container.data);
       transferArrayItem(
-        event.previousContainer.data,
-        event.container.data,
+        this.dashboard!.arrangement[event.previousContainer.data],
+        this.dashboard!.arrangement[event.container.data],
         event.previousIndex,
         event.currentIndex,
       );

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html

@@ -14,7 +14,7 @@
   .editable-hovered {
     position: absolute;
     right: 0;
-    top: 0;
+    top: -2em;
   }
 
   .text-widget .editable-hovered {

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

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

pdb-js/src/styles.scss

@@ -209,7 +209,7 @@ app-add-text-dialog .mat-mdc-form-field-subscript-wrapper  {
   line-height: 1em;
 }
 
-a[target="_blank"]:after {
+a.external-link:after {
   content: "";
   display: inline-block;
   background: url("assets/img/external-link.svg") no-repeat;
@@ -223,8 +223,27 @@ a[target="_blank"]:after {
 
 /* styles for markdown*/
 markdown blockquote {
-  border-left: 4px grey solid;
+  border-left: 3px grey solid;
   display: block;
-  margin-left: 2em;
-  padding-left: 0.5em;
+  margin: 1em 0 1em 2em;
+  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;
 }