Merge kb-modal-window-as-chat-popup-582 into production (#627)

* kb(window):added kb for chat popup * kb(grid):changed kb purpose * Update knowledge-base/window-modal-minimize-popup.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/window-modal-minimize-popup.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/window-modal-minimize-popup.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * kb(window):changed example as per comment * kb(window):shortening the code snippet * kb(window):ternary operators changed position Co-authored-by: Hristian Stefanov <Hristian.Stefanov@progress.com> Co-authored-by: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
telerik · Dec 8, 2021 · 2ec5810 · 2ec5810
1 parent 509ebda
commit 2ec5810
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 0 deletions.
diff --git a/knowledge-base/images/window-big-screen.gif b/knowledge-base/images/window-big-screen.gif
diff --git a/knowledge-base/images/window-small-screen.gif b/knowledge-base/images/window-small-screen.gif
diff --git a/knowledge-base/window-modal-minimize-popup.md b/knowledge-base/window-modal-minimize-popup.md
@@ -0,0 +1,120 @@
+---
+title: How to minimize a popup window to the bottom of the page?
+description: 
+type: how-to
+page_title: How to minimize a popup window to the bottom of the page?
+slug: window-modal-minimize-popup
+position: 
+tags: window,modal,popup,collapse,minimize
+ticketid: 1542823
+res_type: kb
+---
+
+## Environment
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Window for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+
+## Description
+Is there any way to collapse a window to the bottom of a page? How to create a responsive modal that can be minimized? How to minimize Modal Window as a chat for messages?
+
+## Solution
+To implement a responsible popup that can be minimized to the bottom of the page:
+
+1. Set the `Top` and `Left` parameters to control the position of the modal.
+2. Use boolean flags to show and hide the popup.
+3. Use the [MediaQuery](https://docs.telerik.com/blazor-ui/components/mediaquery/overview) component to make the modal window responsive.
+
+>caption The result from the code snippet below on a big screen.
+
+![](images/window-big-screen.gif)
+
+>caption The result from the code snippet below on a small screen.
+
+![](images/window-small-screen.gif)
+
+````Razor
+@*Responsive minimizable popup.*@
+
+<TelerikMediaQuery Media="(max-width: 960px)" OnChange="((changed) => Small = changed)"></TelerikMediaQuery>
+
+<TelerikWindow Class="@myClass" Modal="@isModal"
+               Top="@TopPosition"
+               Left="@LeftPosition" 
+               @bind-Visible="@isModalVisible">
+    <WindowTitle>
+        <strong>@Title</strong>
+    </WindowTitle>
+    <WindowContent>
+        @if (isModal)
+        {
+            @Content
+        }
+    </WindowContent>
+    <WindowActions>
+        <WindowAction Name="MyMinimizer" Hidden="@(!isModal)" Icon="window-minimize" OnClick="@MyCustomMinimize" />
+        <WindowAction Name="MyExpander" Hidden="@isModal" Icon="window" OnClick="@MyCustomExpand" />
+    </WindowActions>
+</TelerikWindow>
+
+@code {
+    bool isModalVisible { get; set; } = true;
+    bool isModal { get; set; } = true;
+    private bool Small { get; set; }
+
+    string Title => Small == true && !isModal ? "M" : "My Responsive Popup";
+    string Content = "---------- Welcome to our Minimized/Collapsed popup! ----------";
+    string TopPosition => Small == true && !isModal ? "100px" : Top;
+    string LeftPosition => Small == true && !isModal ? "300px" : Left;
+    string Top = "40%";
+    string Left = "40%";
+
+    string myClass => Small == true && !isModal ? "minimized" : "";
+
+    public void MyCustomMinimize()
+    {
+        Top = "90%";
+        Left = "15%";
+        isModal = false;
+        StateHasChanged();
+    }
+
+    public void MyCustomExpand()
+    {
+        Top = "40%";
+        Left = "40%";
+        isModal = true;
+        StateHasChanged();
+    }
+}
+
+@if (!isModal)
+{
+    <style>
+        .k-window-content:last-child {
+            display: none;
+        }
+
+        .k-window-titlebar {
+            border-style: none;
+        }
+
+        .minimized {
+            background-color: #ff6358;
+            color: white;
+            display: inline;
+            padding: 14px;
+            border-bottom-left-radius: 65%;
+            border-bottom-right-radius: 65%;
+            border-top-left-radius: 65%;
+            border-top-right-radius: 65%;
+        }
+    </style>
+}
+````