edit dashboard and text widgets

2023-03-11 10:39:28 +01:00
parent cb5b160d3c
commit e3945a4d33
10 changed files with 99 additions and 23 deletions
--- a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html
+++ b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html
@@ -1,8 +1,30 @@
 <style>
  :host {
    display: block;
-    margin-top: 1em;
-    background-color: aliceblue;
+  }
+  .text-widget {
+    position: relative;
+    padding: 1em 0;
+  }
+  .text-widget:hover {
+    outline: solid 1px black;
+    border-radius: 3px;
+  }
+
+  .editable-hovered {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .text-widget .editable-hovered {
+    visibility: hidden;
+  }
+  .text-widget:hover .editable-hovered {
+    visibility: visible;
  }
 </style>
-<p *ngFor="let line of lines()">{{line}}</p>
+<div class="text-widget">
+  <button mat-icon-button (click)="edit()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button>
+  <p *ngFor="let line of lines()">{{line}}</p>
+</div>