Merge pull request #2 from stavroskasidis/release/0.3

Release/0.3

BlazorDialog/BlazorDialog.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>netstandard2.0</TargetFramework>
+    <TargetFramework>netstandard2.1</TargetFramework>
     <LangVersion>7.3</LangVersion>
     <IsPackable>true</IsPackable>
     <RazorLangVersion>3.0</RazorLangVersion>
@@ -17,7 +17,7 @@
     <Copyright />
     <PackageTags>blazor blazor-component blazor-dialog dialog modal blazor-modal blazordialog blazormodaldialog blazormodal razor razor-components razorcomponents</PackageTags>
     <VersionSuffix>$(VersionSuffix)</VersionSuffix>
-    <Version>0.2.0</Version>
+    <Version>0.3.0</Version>
     <Version Condition=" '$(VersionSuffix)' != '' ">$(Version)-$(VersionSuffix)</Version>
     <Product>BlazorDialog</Product>
   </PropertyGroup>
@@ -36,7 +36,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.0" />
   </ItemGroup>
 </Project>

BlazorDialog/Components/DialogBody.razor

@@ -0,0 +1,9 @@
+@namespace BlazorDialog
+<div class="blazor-dialog-body">
+    @ChildContent
+</div>
+
+@code{
+
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}

BlazorDialog/Components/DialogFooter.razor

@@ -0,0 +1,8 @@
+@namespace BlazorDialog
+<div class="blazor-dialog-footer">
+    @ChildContent
+</div>
+
+@code{
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}

BlazorDialog/Components/DialogHeader.razor

@@ -0,0 +1,21 @@
+@namespace BlazorDialog
+<div class="blazor-dialog-header">
+    <h5 class="blazor-dialog-title">@ChildContent</h5>
+    @if (ShowClose)
+    {
+        <button type="button" class="blazor-dialog-close" aria-label="Close" @onclick="OnCloseClick">
+            <span aria-hidden="true">×</span>
+        </button>
+    }
+</div>
+
+@code{
+    [Parameter] public RenderFragment ChildContent { get; set; }
+    [Parameter] public bool ShowClose { get; set; } = false;
+    [CascadingParameter(Name = "ParentDialog")] Dialog Dialog { get; set; }
+
+    private async Task OnCloseClick()
+    {
+        await Dialog.Hide();
+    }
+}

BlazorDialog/wwwroot/styles.css

@@ -10,6 +10,63 @@
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
+.blazor-dialog-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: 1rem;
+}
+
+.blazor-dialog-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid #e9ecef;
+    border-top-left-radius: .3rem;
+    border-top-right-radius: .3rem;
+}
+
+.blazor-dialog-title {
+    margin-bottom: 0;
+    line-height: 1.5;
+}
+
+.blazor-dialog-close {
+    padding: 1rem;
+    margin: -1rem -1rem -1rem auto;
+    background-color: transparent;
+    border: 0;
+    float: right;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .5;
+    cursor: pointer;
+}
+
+    .blazor-dialog-close:hover {
+        color: #000;
+        text-decoration: none;
+        opacity: .75;
+    }
+
+
+.blazor-dialog-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+    .blazor-dialog-footer > :not(:last-child) {
+        margin-right: .25rem;
+    }
+    .blazor-dialog-footer > :not(:first-child) {
+        margin-left: .25rem;
+    }
+
 @media (min-width: 576px) {
     .blazor-dialog-centered {
         min-height: calc(100% - (1.75rem * 2));

README.md

@@ -66,7 +66,13 @@ None so far
 
 ## Release Notes
 
-<details open="open"><summary>0.1</summary>
+<details open="open"><summary>0.3</summary>
+
+>- Upgrated to 3.1
+>- Added new helper components: `DialogHeader`, `DialogBody`, `DialogFooter`
+</details>
+
+<details><summary>0.1</summary>
 
 >- Initial release.
 </details>

TestApps/Blazor/BlazorDialog.BlazorTestApp.Client/BlazorDialog.BlazorTestApp.Client.csproj

@@ -1,15 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netstandard2.0</TargetFramework>
+    <TargetFramework>netstandard2.1</TargetFramework>
     <OutputType>Exe</OutputType>
     <LangVersion>7.3</LangVersion>
     <RazorLangVersion>3.0</RazorLangVersion>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.1.0-preview4.19579.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.1.0-preview4.19579.2" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

TestApps/Blazor/BlazorDialog.BlazorTestApp.Server/BlazorDialog.BlazorTestApp.Server.csproj

@@ -1,12 +1,12 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp3.0</TargetFramework>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
     <LangVersion>7.3</LangVersion>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.0.0-preview9.19465.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.1.0-preview4.19579.2" />
   </ItemGroup>
 
   <ItemGroup>

TestApps/BlazorDialog.TestAppsCommon/BlazorDialog.TestAppsCommon.csproj

@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>netstandard2.0</TargetFramework>
+    <TargetFramework>netstandard2.1</TargetFramework>
     <LangVersion>7.3</LangVersion>
     <RazorLangVersion>3.0</RazorLangVersion>
   </PropertyGroup>
 
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.0" />
   </ItemGroup>
 
 

TestApps/BlazorDialog.TestAppsCommon/IndexCommon.razor

@@ -15,30 +15,38 @@
 
 <Dialog Id="simple-dialog" Size="size" Centered="isCentered">
     <DialogInputProvider TInput="string">
-        <h4>@context.Input</h4>
-        <button type="button" class="btn btn-primary" @onclick="@(() => context.Dialog.Hide("yes"))">Yes</button>
-        <button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
+        <DialogBody>
+            <h4>@context.Input</h4>
+        </DialogBody>
+        <DialogFooter>
+            <button type="button" class="btn btn-primary" @onclick="@(() => context.Dialog.Hide("yes"))">Yes</button>
+            <button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
+        </DialogFooter>
     </DialogInputProvider>
 </Dialog>
 
 <Dialog Id="simple-large-dialog" Size="size" Centered="isCentered">
     <DialogInputProvider TInput="string">
-        <h4>@context.Input</h4>
-        <p>Lorem Ipsum</p>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis est vitae purus eleifend bibendum id et neque. Sed eu nisi commodo, sagittis neque suscipit, euismod quam. In metus turpis, pulvinar ut odio vel, vehicula congue dui. Praesent sed feugiat est. Ut ut rhoncus mi, et facilisis eros. Vivamus malesuada nulla eu tincidunt vulputate. Donec non augue aliquam, sodales est vel, varius quam. Nam vel fringilla felis.
+        <DialogBody>
+            <h4>@context.Input</h4>
+            <p>Lorem Ipsum</p>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis est vitae purus eleifend bibendum id et neque. Sed eu nisi commodo, sagittis neque suscipit, euismod quam. In metus turpis, pulvinar ut odio vel, vehicula congue dui. Praesent sed feugiat est. Ut ut rhoncus mi, et facilisis eros. Vivamus malesuada nulla eu tincidunt vulputate. Donec non augue aliquam, sodales est vel, varius quam. Nam vel fringilla felis.
 
-            Duis ultrices lorem id fringilla semper. Integer bibendum sagittis arcu in bibendum. Vivamus rhoncus feugiat leo accumsan bibendum. Aliquam ac turpis ut sem luctus laoreet. Donec sed tristique elit. Proin sit amet blandit dolor, eget aliquam mi. Nullam in ante aliquet, placerat turpis id, blandit enim. Donec sed ligula nisl. Ut varius vulputate suscipit. Nam at tristique odio.
+                Duis ultrices lorem id fringilla semper. Integer bibendum sagittis arcu in bibendum. Vivamus rhoncus feugiat leo accumsan bibendum. Aliquam ac turpis ut sem luctus laoreet. Donec sed tristique elit. Proin sit amet blandit dolor, eget aliquam mi. Nullam in ante aliquet, placerat turpis id, blandit enim. Donec sed ligula nisl. Ut varius vulputate suscipit. Nam at tristique odio.
 
-            Cras tincidunt ex arcu, quis luctus felis aliquet non. Morbi eget eleifend elit, quis molestie est. Sed vitae nulla non massa efficitur vulputate condimentum condimentum mauris. Suspendisse potenti. Suspendisse potenti. Ut ornare, odio a lacinia accumsan, ante ante accumsan elit, sit amet fringilla nulla felis quis arcu. Vestibulum eget erat non leo fringilla fringilla. Cras sed massa ac sapien mollis congue at non lorem. Vivamus ut justo id turpis iaculis pretium. Fusce leo odio, fringilla id ante sit amet, viverra vehicula neque. Phasellus maximus nisi elit. Aenean vitae rutrum ex.
+                Cras tincidunt ex arcu, quis luctus felis aliquet non. Morbi eget eleifend elit, quis molestie est. Sed vitae nulla non massa efficitur vulputate condimentum condimentum mauris. Suspendisse potenti. Suspendisse potenti. Ut ornare, odio a lacinia accumsan, ante ante accumsan elit, sit amet fringilla nulla felis quis arcu. Vestibulum eget erat non leo fringilla fringilla. Cras sed massa ac sapien mollis congue at non lorem. Vivamus ut justo id turpis iaculis pretium. Fusce leo odio, fringilla id ante sit amet, viverra vehicula neque. Phasellus maximus nisi elit. Aenean vitae rutrum ex.
 
-            Donec nibh ex, fringilla non tempus vel, rutrum feugiat orci. Donec diam massa, varius sit amet consequat scelerisque, congue ut nisl. Pellentesque scelerisque massa nisl, id aliquet justo facilisis nec. Donec consequat sapien ut quam eleifend, et laoreet tellus vehicula. Integer facilisis mauris nec pulvinar cursus. In quis magna elit. Praesent scelerisque, libero sed faucibus auctor, leo lectus blandit nisl, sit amet mattis dolor lacus vitae diam. Donec vitae neque eu ipsum porttitor facilisis. Sed a sagittis enim.
+                Donec nibh ex, fringilla non tempus vel, rutrum feugiat orci. Donec diam massa, varius sit amet consequat scelerisque, congue ut nisl. Pellentesque scelerisque massa nisl, id aliquet justo facilisis nec. Donec consequat sapien ut quam eleifend, et laoreet tellus vehicula. Integer facilisis mauris nec pulvinar cursus. In quis magna elit. Praesent scelerisque, libero sed faucibus auctor, leo lectus blandit nisl, sit amet mattis dolor lacus vitae diam. Donec vitae neque eu ipsum porttitor facilisis. Sed a sagittis enim.
 
-            Curabitur ac purus quis purus dictum aliquam at nec diam. Fusce est felis, auctor ut ex et, lobortis lacinia urna. Fusce egestas mi lorem, vel sagittis enim euismod dignissim. Nam porta nec sem sed malesuada. Ut non sollicitudin ex. Nam luctus sem a elit volutpat, in iaculis massa ultrices. Aliquam congue magna sem. Quisque mi elit, volutpat et mauris non, pellentesque commodo tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras tincidunt a odio non scelerisque. Duis tincidunt a quam a lacinia. Vivamus nec justo gravida dui commodo vulputate. Nulla risus ante, vehicula id enim sit amet, vestibulum pellentesque nibh. Morbi a lectus semper, blandit mauris sed, tristique nibh.
-        </p>
+                Curabitur ac purus quis purus dictum aliquam at nec diam. Fusce est felis, auctor ut ex et, lobortis lacinia urna. Fusce egestas mi lorem, vel sagittis enim euismod dignissim. Nam porta nec sem sed malesuada. Ut non sollicitudin ex. Nam luctus sem a elit volutpat, in iaculis massa ultrices. Aliquam congue magna sem. Quisque mi elit, volutpat et mauris non, pellentesque commodo tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras tincidunt a odio non scelerisque. Duis tincidunt a quam a lacinia. Vivamus nec justo gravida dui commodo vulputate. Nulla risus ante, vehicula id enim sit amet, vestibulum pellentesque nibh. Morbi a lectus semper, blandit mauris sed, tristique nibh.
+            </p>
 
-        <button type="button" class="btn btn-primary" @onclick="@(()=> context.Dialog.Hide("yes"))">Yes</button>
-        <button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
+        </DialogBody>
+        <DialogFooter>
+            <button type="button" class="btn btn-primary" @onclick="@(()=> context.Dialog.Hide("yes"))">Yes</button>
+            <button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
+        </DialogFooter>
     </DialogInputProvider>
 </Dialog>