about summary refs log tree commit diff
path: root/MatrixRoomUtils.Web/Shared/ModalWindow.razor
diff options
context:
space:
mode:
Diffstat (limited to 'MatrixRoomUtils.Web/Shared/ModalWindow.razor')
-rw-r--r--MatrixRoomUtils.Web/Shared/ModalWindow.razor130
1 files changed, 130 insertions, 0 deletions
diff --git a/MatrixRoomUtils.Web/Shared/ModalWindow.razor b/MatrixRoomUtils.Web/Shared/ModalWindow.razor
new file mode 100644
index 0000000..75c2933
--- /dev/null
+++ b/MatrixRoomUtils.Web/Shared/ModalWindow.razor
@@ -0,0 +1,130 @@
+<div class="r-modal" style="top: @(_y)px; left: @(_x)px;">
+    <div class="titlebar" @onmousedown="MouseDown" @onmouseup="MouseUp" @onmousemove="MouseMove" @onmouseleave="MouseMove">
+        <b class="title">@Title</b>
+        <button class="close" @onclick="OnCloseClicked">X</button>
+    </div>
+    <div class="content">
+        @ChildContent
+    </div>
+</div>
+
+<style>
+    .r-modal {
+        position: absolute;
+        width: fit-content;
+        height: fit-content;
+        z-index: 1000;
+    }
+    .r-modal:hover {
+        z-index: 1001;
+    }
+    
+    .r-modal > .titlebar {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 25px;
+        background-color: #000;
+        user-select: none;
+    }
+    
+    .r-modal > .titlebar > .title {
+        position: relative;
+        top: 0;
+        left: 0;
+        width: fit-content;
+        height: 100%;
+        line-height: 25px;
+        padding-left: 10px;
+        color: #fff;
+    }
+    
+    .r-modal > .titlebar > .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 25px;
+        height: 100%;
+        line-height: 25px;
+        text-align: center;
+        color: #fff;
+        background-color: #111;
+        cursor: pointer;
+    }
+    
+    .r-modal > .content {
+        position: relative;
+        top: 25px;
+        left: 0;
+        width: fit-content;
+        height: fit-content;
+        min-width: 150px;
+        min-height: 5px;
+        max-width: 75vw;
+        max-height: 75vh;
+        overflow: auto;
+        background-color: #fff;
+    }
+</style>
+
+@code {
+    
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+    
+    [Parameter]
+    public string Title { get; set; } = "Untitled window";
+    
+    [Parameter]
+    public double X { get; set; } = 60;
+    
+    [Parameter]
+    public double Y { get; set; } = 60;
+    
+    [Parameter]
+    public Action OnCloseClicked { get; set; }
+    
+
+    private double _x = 60;
+    private double _y = 60;
+    
+    protected override void OnInitialized() {
+        _x = X;
+        _y = Y;
+    }
+
+    private void WindowDrag(DragEventArgs obj) {
+        Console.WriteLine("Drag: " + obj.ToJson());
+        
+        _x += obj.MovementX;
+        _y += obj.MovementY;
+        
+        StateHasChanged();
+    }
+
+    private bool isDragging = false;
+    private double dragX = 0;
+    private double dragY = 0;
+    private void MouseDown(MouseEventArgs obj) {
+        isDragging = true;
+        dragX = obj.ClientX;
+        dragY = obj.ClientY;
+    }
+
+    private void MouseUp(MouseEventArgs obj) {
+        isDragging = false;
+    }
+
+    private void MouseMove(MouseEventArgs obj) {
+        if (isDragging) {
+            _x += obj.ClientX - dragX;
+            _y += obj.ClientY - dragY;
+            dragX = obj.ClientX;
+            dragY = obj.ClientY;
+            StateHasChanged();
+        }
+    }
+
+}
\ No newline at end of file