2 files changed, 88 insertions, 75 deletions

diff --git a/MatrixRoomUtils.Web/Shared/ModalWindow.razor b/MatrixRoomUtils.Web/Shared/ModalWindow.razor
index 75c2933..216f1f3 100644
--- a/MatrixRoomUtils.Web/Shared/ModalWindow.razor
+++ b/MatrixRoomUtils.Web/Shared/ModalWindow.razor
@@ -1,95 +1,37 @@
 <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
+        <button class="btnclose" @onclick="OnCloseClicked">X</button>
+        <button class="btncollapse" @onclick="@(() => Collapsed = !Collapsed)">_</button>
     </div>
+        <div class="content" style="@(Collapsed ? "height: 0px;" : "")">
+            @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; }
-    
+
+    [Parameter]
+    public bool Collapsed { get; set; } = false;
 
     private double _x = 60;
     private double _y = 60;
-    
+
     protected override void OnInitialized() {
         _x = X;
         _y = Y;
@@ -97,16 +39,17 @@
 
     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;
@@ -127,4 +70,4 @@
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/MatrixRoomUtils.Web/Shared/ModalWindow.razor.css b/MatrixRoomUtils.Web/Shared/ModalWindow.razor.css
new file mode 100644
index 0000000..b25ab0e
--- /dev/null
+++ b/MatrixRoomUtils.Web/Shared/ModalWindow.razor.css
@@ -0,0 +1,70 @@
+.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 > .btnclose {
+    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 > .titlebar > .btncollapse {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    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: #111;
+}