Restructure of markup and overhaul of styling (#410)

* Initial rework of HTML with the addition of modal sizing * Fixed broken test and added new ones for Size feature * Fix for bubbling click events * Moved to isolated CSS. Renamed CSS classes. Simplified animations. * Fixed broken tests
Blazored · Jul 14, 2022 · e1ee116 · e1ee116
1 parent 6d6a6e7
commit e1ee116
Show file tree

Hide file tree

Showing 36 changed files with 1,172 additions and 429 deletions.
diff --git a/samples/BlazorServer/Pages/Animation.razor b/samples/BlazorServer/Pages/Animation.razor
@@ -5,17 +5,17 @@
 <hr class="mb-5" />
 
 <p>
-    By default, the modal is shown without animation. The modal can be set to no animation, Fade in, Fade out or both.
+    By default, the modal is shown with a subtle fade in out animation. However, this can be disabled so the modal shows and hides immediately.
 </p>
 
 <div class="card mb-4">
     <h5 class="card-header">Setting on a per modal basis</h5>
     <div class="card-body">
         <p class="card-text">
             <code>
-                @("var options = new ModalOptions() { Animation = ModalAnimation.FadeIn(2) };")
+                @("var options = new ModalOptions() { AnimationType = ModalAnimation.None };")
                 <br />
-                @("Modal.Show<Confirm>(\"Animation: Fade-In\", options);")
+                @("Modal.Show<Confirm>(\"Animation Type: None\", options);")
             </code>
         </p>
     </div>
@@ -26,48 +26,41 @@
     <div class="card-body">
         <p class="card-text">
             <code>
-                @("<BlazoredModal Animation=\"@ModalAnimation.FadeIn(2)\"/> ")
+                @("<BlazoredModal AnimationType=\"@ModalAnimationType.None\"/> ")
             </code>
         </p>
     </div>
 </div>
 
-<input type="number" @bind-value="@_duration" />
-
-<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeIn(_duration)))" class="btn btn-secondary">Fade-In</button>
-<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeOut(_duration)))" class="btn btn-secondary">Fade-Out</button>
-<button @onclick="AnimationDefault" class="btn btn-primary">Globally set value (default no animation)</button>
-<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeInOut(_duration)))" class="btn btn-secondary">Fade-in Fade-Out</button>
+<button @onclick="AnimationDefault" class="btn btn-primary">Fade-in Fade-Out (Default)</button>
+<button @onclick="NoAnimation" class="btn btn-secondary">None</button>
 
 <p>
-    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will only fade-in with a duration of 2 seconds. The second modal will fade-in and fade-out in 5.0 seconds.
+    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will appear without an animation. The second modal will fade-in and fade-out.
 </p>
 
 <button @onclick="@MultipleModals" class="btn btn-primary">Multiple Modals</button>
 
 @code {
-
     [CascadingParameter] public IModalService Modal { get; set; } = default!;
 
-    private double _duration = 1.0;
-
     void AnimationDefault()
     {
         Modal.Show<Confirm>("Default Animation");
     }
 
-    void AnimationCustom(ModalAnimation animation)
+    void NoAnimation()
     {
-        var options = new ModalOptions { Animation = animation };
+        var options = new ModalOptions { AnimationType = ModalAnimationType.None };
 
-        Modal.Show<Confirm>($"Animation: {animation.Type}", options);
+        Modal.Show<Confirm>("Animation Type: None", options);
     }
 
     void MultipleModals()
     {
         var options = new ModalOptions
         {
-            Animation = ModalAnimation.FadeIn(2)
+            AnimationType = ModalAnimationType.None
         };
 
         Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);

diff --git a/samples/BlazorServer/Pages/Position.razor b/samples/BlazorServer/Pages/Position.razor
@@ -35,7 +35,8 @@
 
 <button @onclick="@(() => PositionCustom(ModalPosition.TopLeft))" class="btn btn-secondary">Top left</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.TopRight))" class="btn btn-secondary">Top right</button>
-<button @onclick="PositionCenter" class="btn btn-primary">Center</button>
+<button @onclick="PositionCenter" class="btn btn-primary">Top Center (Default)</button>
+<button @onclick="@(() => PositionCustom(ModalPosition.Middle))" class="btn btn-secondary">Middle</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.BottomLeft))" class="btn btn-secondary">Bottom left</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.BottomRight))" class="btn btn-secondary">Bottom right</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.Custom))" class="btn btn-secondary">Custom</button>
@@ -46,7 +47,7 @@
 
     void PositionCenter()
     {
-        Modal.Show<Confirm>("Centered Modal (Default)");
+        Modal.Show<Confirm>("Top Center Modal (Default)");
     }
 
     void PositionCustom(ModalPosition position)

diff --git a/samples/BlazorServer/Pages/ScrollableContent.razor b/samples/BlazorServer/Pages/ScrollableContent.razor
diff --git a/samples/BlazorServer/Pages/Size.razor b/samples/BlazorServer/Pages/Size.razor
@@ -0,0 +1,69 @@
+@page "/size"
+
+<h1>Sizing the modal</h1>
+
+<hr class="mb-5" />
+
+<p>
+    The modal has a default width. However, this can be changed by setting the <code>Size</code> option.
+</p>
+<p>
+    There are 5 different sizes available:
+    <ul>
+        <li>Small - 300px</li>
+        <li>Medium - 500px (default)</li>
+        <li>Large - 800px</li>
+        <li>Extra Large - 1140px</li>
+        <li>Custom - Provide your own class, via the <code>SizeCustomClass</code> parameter, which sets the width</li>
+    </ul>
+</p>
+
+<div class="card mb-4">
+    <h5 class="card-header">Setting on a per modal basis</h5>
+    <div class="card-body">
+        <p class="card-text">
+            <code>
+                @("var options = new ModalOptions() { Size = ModalSize.Large };")
+                <br />
+                @("Modal.Show<Confirm>(\"Size: Large\", options);")
+            </code>
+        </p>
+    </div>
+</div>
+
+<div class="card mb-4">
+    <h5 class="card-header">Setting globally for all modals</h5>
+    <div class="card-body">
+        <p class="card-text">
+            <code>
+                @("<CascadingBlazoredModal Size=\"ModalSize.Large\" />")
+            </code>
+        </p>
+    </div>
+</div>
+
+<button @onclick="@(() => SetSize(ModalSize.Small))" class="btn btn-secondary">Small</button>
+<button @onclick="DefaultSize" class="btn btn-primary">Medium (default)</button>
+<button @onclick="@(() => SetSize(ModalSize.Large))" class="btn btn-secondary">Large</button>
+<button @onclick="@(() => SetSize(ModalSize.ExtraLarge))" class="btn btn-secondary">Extra Large</button>
+<button @onclick="@(() => SetSize(ModalSize.Custom))" class="btn btn-secondary">Custom</button>
+
+@code {
+
+    [CascadingParameter] public IModalService Modal { get; set; } = default!;
+
+    void DefaultSize()
+    {
+        Modal.Show<Confirm>("Size: Medium (Default)");
+    }
+
+    void SetSize(ModalSize size)
+    {
+        var options = new ModalOptions { Size = size };
+
+        if (size == ModalSize.Custom)
+            options.SizeCustomClass = "my-custom-size";
+
+        Modal.Show<Confirm>($"Size: {size}", options);
+    }
+}
diff --git a/samples/BlazorServer/Pages/_Layout.cshtml b/samples/BlazorServer/Pages/_Layout.cshtml
@@ -9,7 +9,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="blazorserver.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

diff --git a/samples/BlazorServer/Shared/NavMenu.razor b/samples/BlazorServer/Shared/NavMenu.razor
@@ -14,6 +14,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="size">
+                <span class="oi oi-resize-height" aria-hidden="true"></span> Size
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="custom">
                 <span class="oi oi-eye" aria-hidden="true"></span> Styling
@@ -64,11 +69,6 @@
                 <span class="oi oi-eye" aria-hidden="true"></span> Custom Layout
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="scrollablecontent">
-                <span class="oi oi-resize-height" aria-hidden="true"></span> Scrollable Content
-            </NavLink>
-        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="customoverlay">
                 <span class="oi oi-eye" aria-hidden="true"></span> Custom Overlay

diff --git a/samples/BlazorServer/Shared/YesNoPromptAnimation.razor b/samples/BlazorServer/Shared/YesNoPromptAnimation.razor
@@ -13,7 +13,7 @@
 
     async Task Yes()
     {
-        var options = new ModalOptions { Animation = new ModalAnimation(ModalAnimationType.FadeInOut, 5) };
+        var options = new ModalOptions { AnimationType = ModalAnimationType.FadeInOut };
 
         var confirmationModal = ModalService.Show<Confirm>("Second Modal", options);
         var result = await confirmationModal.Result;

diff --git a/samples/BlazorServer/wwwroot/css/site.css b/samples/BlazorServer/wwwroot/css/site.css
@@ -34,6 +34,18 @@ a, .btn-link {
     color: red;
 }
 
+.my-custom-position .blazored-modal {
+    position: absolute;
+    top: 20%;
+    left: 10%;
+}
+
+.my-custom-size {
+    width: 88%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;

diff --git a/samples/BlazorWebAssembly/Pages/Animation.razor b/samples/BlazorWebAssembly/Pages/Animation.razor
@@ -5,17 +5,17 @@
 <hr class="mb-5" />
 
 <p>
-    By default, the modal is shown without animation. The modal can be set to no animation, Fade in, Fade out or both.
+    By default, the modal is shown with a subtle fade in out animation. However, this can be disabled so the modal shows and hides immediately.
 </p>
 
 <div class="card mb-4">
     <h5 class="card-header">Setting on a per modal basis</h5>
     <div class="card-body">
         <p class="card-text">
             <code>
-                @("var options = new ModalOptions() { Animation = ModalAnimation.FadeIn(2) };")
+                @("var options = new ModalOptions() { AnimationType = ModalAnimation.None };")
                 <br />
-                @("Modal.Show<Confirm>(\"Animation: Fade-In\", options);")
+                @("Modal.Show<Confirm>(\"Animation Type: None\", options);")
             </code>
         </p>
     </div>
@@ -26,48 +26,41 @@
     <div class="card-body">
         <p class="card-text">
             <code>
-                @("<BlazoredModal Animation=\"@ModalAnimation.FadeIn(2)\"/> ")
+                @("<BlazoredModal AnimationType=\"@ModalAnimationType.None\"/> ")
             </code>
         </p>
     </div>
 </div>
 
-<input type="number" @bind-value="@_duration" />
-
-<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeIn(_duration)))" class="btn btn-secondary">Fade-In</button>
-<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeOut(_duration)))" class="btn btn-secondary">Fade-Out</button>
-<button @onclick="AnimationDefault" class="btn btn-primary">Globally set value (default no animation)</button>
-<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeInOut(_duration)))" class="btn btn-secondary">Fade-in Fade-Out</button>
+<button @onclick="AnimationDefault" class="btn btn-primary">Fade-in Fade-Out (Default)</button>
+<button @onclick="NoAnimation" class="btn btn-secondary">None</button>
 
 <p>
-    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will only fade-in with a duration of 2 seconds. The second modal will fade-in and fade-out in 5.0 seconds.
+    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will appear without an animation. The second modal will fade-in and fade-out.
 </p>
 
 <button @onclick="@MultipleModals" class="btn btn-primary">Multiple Modals</button>
 
 @code {
-
     [CascadingParameter] public IModalService Modal { get; set; } = default!;
 
-    private double _duration = 1.0;
-
     void AnimationDefault()
     {
         Modal.Show<Confirm>("Default Animation");
     }
 
-    void AnimationCustom(ModalAnimation animation)
+    void NoAnimation()
     {
-        var options = new ModalOptions { Animation = animation };
+        var options = new ModalOptions { AnimationType = ModalAnimationType.None };
 
-        Modal.Show<Confirm>($"Animation: {animation.Type}", options);
+        Modal.Show<Confirm>("Animation Type: None", options);
     }
 
     void MultipleModals()
     {
         var options = new ModalOptions
         {
-            Animation = ModalAnimation.FadeIn(2)
+            AnimationType = ModalAnimationType.None
         };
 
         Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);

diff --git a/samples/BlazorWebAssembly/Pages/Index.razor b/samples/BlazorWebAssembly/Pages/Index.razor
@@ -13,9 +13,7 @@
 <div class="card mb-4">
     <div class="card-body">
         <p class="card-text">
-            <code>
-                @("Modal.Show<Confirm>(\"Welcome to Blazored Modal\", options);")
-            </code>
+            <CodeBlock>@("Modal.Show<Confirm>(\"Welcome to Blazored Modal\", options);")</CodeBlock>
         </p>
     </div>
 </div>

diff --git a/samples/BlazorWebAssembly/Pages/Position.razor b/samples/BlazorWebAssembly/Pages/Position.razor
@@ -35,7 +35,8 @@
 
 <button @onclick="@(() => PositionCustom(ModalPosition.TopLeft))" class="btn btn-secondary">Top left</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.TopRight))" class="btn btn-secondary">Top right</button>
-<button @onclick="PositionCenter" class="btn btn-primary">Center</button>
+<button @onclick="PositionCenter" class="btn btn-primary">Top Center (Default)</button>
+<button @onclick="@(() => PositionCustom(ModalPosition.Middle))" class="btn btn-secondary">Middle</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.BottomLeft))" class="btn btn-secondary">Bottom left</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.BottomRight))" class="btn btn-secondary">Bottom right</button>
 <button @onclick="@(() => PositionCustom(ModalPosition.Custom))" class="btn btn-secondary">Custom</button>
@@ -46,7 +47,7 @@
 
     void PositionCenter()
     {
-        Modal.Show<Confirm>("Centered Modal (Default)");
+        Modal.Show<Confirm>("Top Center Modal (Default)");
     }
 
     void PositionCustom(ModalPosition position)