docs(window): Overview Revamp and new features (#874)

* docs(window): Overview Revamp and new features

* Window overview polish

* Window Overview and Size polish

* Window docs polish even more

* Window docs polish even more 2

* docs(window): Polish all Window pages

* Remove Window images

* Update components/window/overview.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* Update components/window/overview.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* Update components/window/overview.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* Actions polishing

Co-authored-by: Dimo Dimov <[email protected]>
Co-authored-by: Dimo Dimov <[email protected]>
Co-authored-by: Nadezhda Tacheva <[email protected]>

Author: 4 people

_config.yml

@@ -540,7 +540,7 @@ intro_columns:
   -
     title: "Layout"
     items:
-      "Window": "components/window/overview"
+      "Window": "window-overview"
       "Predefined Dialogs": "dialog-predefined"
       "Animation Container": "components/animationcontainer/overview"
       "Tooltip": "tooltip-overview"

components/window/actions.md

@@ -20,15 +20,29 @@ The Window offers action buttons in its titlebar:
 
 To define action buttons, populate the `WindowActions` tag of the Window with `WindowAction` instances.
 
+
+## Action Parameters
+
 Action buttons expose the following properties:
 
-* `Name` - the name of the action. Can be one of the built-in actions (see above), or a custom action name.
-* `Hidden` - a boolean property indicating whether the action button is rendered. Do not use for `Minimize` and `Maximize` actions - the Window manages their visibility internallty, based on the component state. Check the example below for a possible alternative.
-* `OnClick` - event handler so you can respond to custom action clicks.
-* `Icon` - the CSS class name of the icon that will be rendered. You can use the [Telerik font icons]({%slug general-information/font-icons%}) directly, or your own font icon font class.
-* `Title` - the `title` attribute of the action button.
+<style>
+    article style + table {
+        table-layout: auto;
+        word-break: normal;
+    }
+</style>
+
+| Parameter | Type and Default&nbsp;Value | Description |
+| --- | --- | --- |
+| `Name` | `string` | The name of the action. Can be one of the built-in actions (see above), or a custom action name. |
+| `Hidden` | `bool` | Sets if the action button is rendered. Do not use for `Minimize` and `Maximize` actions - the Window manages their visibility internally, based on the component state. Check the example below for a possible alternative. |
+| `OnClick` | `EventCallback<MouseEventArgs>` | An event handler to respond to custom action clicks. |
+| `Icon` | `string` | The CSS class of the icon to be rendered. Use with the [Telerik font icons]({%slug general-information/font-icons%}), or set your own font icon class. |
+| `Title` | `string` | The `title` HTML attribute of the action button. |
 
 
+## Built-in Actions
+
 >caption The built-in actions of a Window
 
 ````CSHTML
@@ -56,9 +70,8 @@ Action buttons expose the following properties:
 }
 ````
 
->caption The result from the code snippet above
 
-![](images/built-in-actions.png)
+## Custom Actions
 
 You can create a custom action icon and you must provide its `OnClick` handler.
 
@@ -89,9 +102,8 @@ Custom actions can call C# directly
 }
 ````
 
->caption The result from the code snippet above
 
-![](images/custom-action.png)
+## Using Both Action Types
 
 You can mix custom actions with built-in actions, and you do not have to define all of the available ones.
 
@@ -130,11 +142,7 @@ You can mix custom actions with built-in actions, and you do not have to define
 }
 ````
 
->caption The result from the code snippet above
-
-![](images/mixed-actions.png)
-
 
 ## See Also
 
-  * [Live Demo: Window Actions](https://demos.telerik.com/blazor-ui/window/actions)
+* [Live Demo: Window Actions](https://demos.telerik.com/blazor-ui/window/actions)

components/window/events.md

@@ -15,9 +15,9 @@ This article explains the events available in the Telerik Window for Blazor:
 
 * [VisibleChanged](#visiblechanged)
 * [StateChanged](#statechanged)
+* [WidthChanged and HeightChanged](#widthchanged-and-heightchanged)
 * [Action Click](#action-click)
 * [LeftChanged and TopChanged](#leftchanged-and-topchanged)
-
 @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) 
 
 
@@ -158,9 +158,52 @@ You can use the `StateChanged` event to get notifications when the user tries to
 }
 ````
 
+## WidthChanged and HeightChanged
+
+You can use the `WidthChanged` and `HeightChanged` events to get notifications when the user tries to resize the window. The events requires the `Resizable` parameter of the Window to be `true`.
+
+>caption React to the user actions to resizing the window
+
+````CSHTML
+<TelerikWindow Visible="true"
+               Resizable="true"
+               WidthChanged="@WidthChangedHandler"
+               HeightChanged="@HeightChangedHandler">
+    <WindowTitle>
+        <strong>Lorem ipsum</strong>
+    </WindowTitle>
+    <WindowActions>
+        <WindowAction Name="Minimize"></WindowAction>
+        <WindowAction Name="Maximize"></WindowAction>
+        <WindowAction Name="Close"></WindowAction>
+    </WindowActions>
+    <WindowContent>
+        <strong>Resize Me!</strong>        
+    </WindowContent>
+</TelerikWindow>
+
+<br />
+
+@EventLog
+
+@code {
+    public string EventLog { get; set; }
+
+    public void WidthChangedHandler()
+    {
+        EventLog = "WidthChanged event fired at: " + DateTime.Now.ToString();
+    }
+
+    public void HeightChangedHandler()
+    {
+        EventLog = "HeightChanged event fired at: " + DateTime.Now.ToString();
+    }
+}
+````
+
 ## Action Click
 
-Actions expose the `OnClick` event. You can use it to implement custom buttons that invoke application logic from the Window's titlebar. See the [Window Actions]({%slug components/window/actions%}) article for examples.
+Window actions expose the `OnClick` event. You can use it to implement custom buttons that invoke application logic from the Window's titlebar. See the [Window Actions]({%slug components/window/actions%}) article for examples.
 
 If you use the `OnClick` event on a built-in action, it will act as a custom action and it will no longer perform the built-in feature (for example, close the window). If you want the invoke both a built-in action and custom logic from the same button, you have two options:
 
@@ -225,6 +268,6 @@ The `LeftChanged` event fires second, so if you intend to store locations in an
 
 ## See Also
 
-  * [Window Overview]({%slug components/window/overview%})
-  * [Window State]({%slug components/window/size%})
-  * [Window Actions]({%slug components/window/actions%})
+* [Window Overview]({%slug window-overview%})
+* [Window State]({%slug components/window/size%})
+* [Window Actions]({%slug components/window/actions%})

components/window/images/built-in-actions.png

@@ -14,19 +14,21 @@ The Window for Blazor can be modal so that the user is unable to interact with t
 
 To make a modal window, set its `Modal` property to `true`.
 
-````CSHTML
-@* Open and close a modal window *@
+It is possible for users to close a modal Window by clicking on the modal background around it. To allow this behavior, set `CloseOnOverlayClick` to `true`.
+
+>caption Open and close a modal Window
 
-<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
+````CSHTML
+<TelerikWindow Modal="true"
+               @bind-Visible="@isModalVisible"
+               CloseOnOverlayClick="true">
     <WindowTitle>
-        <strong>The Title</strong>
+        Window Title
     </WindowTitle>
     <WindowContent>
-        I am modal so the page behind me is not available to the user.
+        I am modal, so the page content behind me is not accessible to the user.
     </WindowContent>
     <WindowActions>
-        <WindowAction Name="Minimize" />
-        <WindowAction Name="Maximize" />
         <WindowAction Name="Close" />
     </WindowActions>
 </TelerikWindow>
@@ -38,8 +40,6 @@ To make a modal window, set its `Modal` property to `true`.
 }
 ````
 
->note A modal window is centered.
-
 ## See Also
 
-  * [Live Demo: Modal Window Size](https://demos.telerik.com/blazor-ui/window/modal)
+* [Live Demo: Modal Window](https://demos.telerik.com/blazor-ui/window/modal)