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;
+}
|
