Improved dialog styling and made dialogs draggable

2 files changed, 39 insertions, 40 deletions

diff --git a/Pages/Component/Dialog.razor b/Pages/Component/Dialog.razor
index e71ddc6..dbfec49 100644
--- a/Pages/Component/Dialog.razor
+++ b/Pages/Component/Dialog.razor
@@ -1,13 +1,20 @@
-@inject IDialogService dialogService
+@inject IJSRuntime jsRuntime
 @implements IDialog
-@implements IDisposable
 
-<div @onclick=Bump style="@(style)">
+<div
+    class="dialog"
+    onmousedown="dialogMouseDown(event)"
+    style="opacity:0;visibility:hidden;@(heightStyle)"
+    @ref=dialogDiv>
     @if(Title is not null) {
-        <p>@Title</p>
-        <hr/>
+        <div class="titlebar" onmousedown="dialogTitleMouseDown(event)">
+            <p class="title">@Title</p>
+            <hr/>
+        </div>
     }
-    @ChildContent
+    <div class="content">
+        @ChildContent
+    </div>
 </div>
 
 @code {
@@ -26,49 +33,21 @@
         get => visible;
         set {
             visible = value;
-            if(value)
-                Bump();
-            StateHasChanged();
-        }
-    }
-
-    public int? ZIndex {
-        get => zIndex;
-        set {
-            zIndex = value;
-            StateHasChanged();
+            jsRuntime.InvokeVoidAsync(
+                "setDialogVisibility",
+                new object?[] { dialogDiv, value });
         }
     }
 
     private bool visible = false;
 
-    private int? zIndex;
-
     private string? height;
 
-    protected override void OnInitialized() =>
-       dialogService.Register(this);
+    private ElementReference dialogDiv;
 
     public void Show() => Visible = true;
     public void Hide() => Visible = false;
 
-    private void Bump() =>
-        dialogService.BumpZIndex(this);
-
-    private string style =>
-        zIndexStyle +
-        heightStyle +
-        visiblilityStyle;
-
-    private string zIndexStyle =>
-        zIndex is null ? "display:none;" : $"z-index:{zIndex};";
-
     private string heightStyle =>
         $"{(height is null ? "" : $"max-height:{height};")}";
-
-    private string visiblilityStyle =>
-        Visible ? "opacity:1;visibility:visible;" : "opacity:0;visibility:hidden;";
-
-    public void Dispose() =>
-        dialogService.Unregister(this);
 }
diff --git a/Pages/Component/Dialog.razor.css b/Pages/Component/Dialog.razor.css
index dea3d8d..1447407 100644
--- a/Pages/Component/Dialog.razor.css
+++ b/Pages/Component/Dialog.razor.css
@@ -1,11 +1,11 @@
-div {
+div.dialog {
     background:     var(--col-dialog-bg);
     border-radius:  20px;
     box-shadow:     0px 5px 10px 10px rgb(0 0 0 / 25%);
     display:        flex;
     flex-direction: column;
     left:           50%;
-    padding:        20px;
+    padding:        0;
     position:       absolute;
     top:            50%;
     transform:      translate(-50%, -50%);
@@ -13,3 +13,23 @@
     width:          450px;
     z-index:        1000;
 }
+
+hr {
+    margin: 0;
+}
+
+div.titlebar {
+    cursor: grab;
+}
+
+div.titlebar p.title {
+    font-size: 10pt;
+    margin:    0;
+    padding:   10px 20px 10px 20px;
+}
+
+div.content {
+    display:        flex;
+    flex-direction: column;
+    padding:        20px;
+}