Add calendar icon

BlazingApple · Oct 14, 2023 · fe64d29 · fe64d29
1 parent 684b4cf
commit fe64d29
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 15 deletions.
diff --git a/...AppleConsumer.Components/BlazingAppleConsumer.Components/Components/CalendarSection.razor b/...AppleConsumer.Components/BlazingAppleConsumer.Components/Components/CalendarSection.razor
@@ -5,6 +5,12 @@
 
 <div class="row">
 	<div class="col-lg-6">
+		<h4>Calendar Icon</h4>
+		<div class="code"><code>@("<CalendarIcon Date=\"@date\" SizeClass=\"medium\" />")</code></div>
+		<div style="font-size:1rem;" class="d-flex justify-content-center">
+			<CalendarIcon Date="@calEvent.Start" SizeClass="large" />
+		</div>
+
 		<EditForm Model="@_model">
 			<div class="row">
 				<div class="col-lg-12 d-flex flex-column">
@@ -51,6 +57,7 @@
 		</EditForm>
 	</div>
 	<div class="col-lg-6">
+		<h4>Calendar Button</h4>
 		<AddToCalendar Title="@calEvent.Title"
 					   Description="@calEvent.Description"
 					   Location="@calEvent.Location"

diff --git a/src/BlazingApple.Components/BlazingApple.Components/AddToCalendar.razor.cs b/src/BlazingApple.Components/BlazingApple.Components/AddToCalendar.razor.cs
@@ -1,9 +1,4 @@
 using BlazingApple.Components.Calendar;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
 
 namespace BlazingApple.Components;
 
@@ -68,8 +63,5 @@ protected override void OnParametersSet()
         _event = new CalendarEvent(Start, End, Title, Description, Location, IsFullDay);
     }
 
-    private void ToggleDropdown()
-    {
-        _dropdownExposed = !_dropdownExposed;
-    }
+    private void ToggleDropdown() => _dropdownExposed = !_dropdownExposed;
 }
diff --git a/src/BlazingApple.Components/BlazingApple.Components/BlazingApple.Components.csproj b/src/BlazingApple.Components/BlazingApple.Components/BlazingApple.Components.csproj
@@ -10,10 +10,10 @@
 		<RepositoryUrl>https://github.com/BlazingApple/Components</RepositoryUrl>
 		<RepositoryType>GitHub</RepositoryType>
 		<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
-		<AssemblyVersion>2.5.0</AssemblyVersion>
-		<FileVersion>2.5.0</FileVersion>
-		<Version>2.5.0</Version>
-		<PackageReleaseNotes>2.5.0 - Fix bug in CircleList in which unable to render 2 items.</PackageReleaseNotes>
+		<AssemblyVersion>2.5.3</AssemblyVersion>
+		<FileVersion>2.5.3</FileVersion>
+		<Version>2.5.3</Version>
+		<PackageReleaseNotes>2.5.3 - Add new calendar icon.</PackageReleaseNotes>
 		<IncludeSymbols>true</IncludeSymbols>
 		<SymbolPackageFormat>snupkg</SymbolPackageFormat>
 		<GenerateDocumentationFile>true</GenerateDocumentationFile>

diff --git a/src/BlazingApple.Components/BlazingApple.Components/Calendar/CalendarIcon.razor b/src/BlazingApple.Components/BlazingApple.Components/Calendar/CalendarIcon.razor
@@ -0,0 +1,23 @@
+
+<div class="ba-calendar-icon-container @SizeClass" @attributes="@AdditionalAttributes">
+    <div class="ba-calendar-icon-top">
+        @if(Date.Date == DateTime.Now.Date)
+        {
+            @Date.ToString("t")
+        } 
+        else
+        {
+            @Date.Day
+        }
+    </div>
+    <div class="ba-calendar-icon-bottom">
+        @if (Date.Date == DateTime.Now.Date)
+        {
+            <span>Today</span>
+        }
+        else
+        {
+            @Date.ToString("MMM")
+        }
+    </div>
+</div>
diff --git a/src/BlazingApple.Components/BlazingApple.Components/Calendar/CalendarIcon.razor.cs b/src/BlazingApple.Components/BlazingApple.Components/Calendar/CalendarIcon.razor.cs
@@ -0,0 +1,17 @@
+namespace BlazingApple.Components.Calendar;
+
+/// <summary>Renders a calendar showing a particular day.</summary>
+public partial class CalendarIcon : ComponentBase
+{
+    /// <summary>Additional styles to apply to the badge.</summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object>? AdditionalAttributes { get; set; }
+
+    /// <summary>The date/time to render</summary>
+    [Parameter, EditorRequired]
+    public DateTime Date { get; set; }
+
+    /// <summary>"small", "medium", or "large" to change the size of the calendar, or use your own css class.</summary>
+    [Parameter]
+    public string SizeClass { get; set; } = "small";
+}
diff --git a/src/BlazingApple.Components/BlazingApple.Components/Card.razor b/src/BlazingApple.Components/BlazingApple.Components/Card.razor
@@ -33,7 +33,7 @@
 			</div>
 			@if (HeaderContent is not null || IsDismissable)
 			{
-				<div class="ms-2" style="flex-shrink: 0;">
+				<div class="ms-2" style="flex-basis: 50%; flex-shrink: 1; justify-content: flex-end; display: flex; align-items: center;">
 					@if (HeaderContent is not null)
 					{
 						@HeaderContent

diff --git a/src/BlazingApple.Components/BlazingApple.Components/wwwroot/css/blazingAppleComponents.css b/src/BlazingApple.Components/BlazingApple.Components/wwwroot/css/blazingAppleComponents.css
@@ -224,6 +224,65 @@
   box-shadow: 0 1px 3px 0 rgba(32, 33, 36, 0.28);
 }
 
+.ba-calendar-icon-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: darkred;
+  padding: 0;
+  line-height: 1;
+  border-radius: 3px;
+  text-wrap: wrap;
+  word-wrap: normal;
+}
+.ba-calendar-icon-container .ba-calendar-icon-top {
+  font-size: 1em;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  flex-grow: 1;
+}
+.ba-calendar-icon-container.small {
+  font-size: 0.75em;
+  height: 2rem;
+  width: 2rem;
+}
+.ba-calendar-icon-container.small .ba-calendar-icon-top {
+  font-size: 1rem;
+}
+.ba-calendar-icon-container.medium {
+  font-size: 0.9em;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+.ba-calendar-icon-container.medium .ba-calendar-icon-top {
+  font-size: 1.1rem;
+}
+.ba-calendar-icon-container.large {
+  font-size: 1.1em;
+  height: 4em;
+  width: 4em;
+  border-radius: 4px;
+}
+.ba-calendar-icon-container.large .ba-calendar-icon-top {
+  font-size: 1.2rem;
+}
+.ba-calendar-icon-container .ba-calendar-icon-bottom {
+  color: white;
+  background-color: darkred;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  text-align: center;
+  align-items: center;
+  flex-shrink: 1;
+  padding-bottom: 0.1rem;
+  padding-top: 0.1rem;
+}
+
 /* Html Elements */
 /* #region Background Color Mode */
 /* #endregion */

diff --git a/...lazingApple.Components/BlazingApple.Components/wwwroot/css/blazingAppleComponents.min.css b/...lazingApple.Components/BlazingApple.Components/wwwroot/css/blazingAppleComponents.min.css
diff --git a/src/BlazingApple.Components/BlazingApple.Components/wwwroot/css/components/_calendar.scss b/src/BlazingApple.Components/BlazingApple.Components/wwwroot/css/components/_calendar.scss
@@ -8,3 +8,79 @@
     border-radius: .5rem;
     box-shadow: 0 1px 3px 0 rgba(32,33,36,0.28);
 }
+
+.ba-calendar-icon-container
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-width: 1px;
+    border-style: solid;
+    border-color: darkred;
+    padding: 0;
+    line-height: 1;
+    border-radius: 3px;
+    text-wrap: wrap;
+    word-wrap: normal;
+
+    .ba-calendar-icon-top
+    {
+        font-size: 1em;
+        align-items: center;
+        text-align: center;
+        display: flex;
+        flex-grow: 1;
+    }
+
+    &.small
+    {
+        font-size: .75em;
+        height: 2rem;
+        width: 2rem;
+
+        .ba-calendar-icon-top
+        {
+            font-size: 1rem;
+        }
+    }
+
+    &.medium
+    {
+        font-size: .9em;
+        height: 2.5rem;
+        width: 2.5rem;
+
+        .ba-calendar-icon-top
+        {
+            font-size: 1.1rem;
+        }
+    }
+
+    &.large
+    {
+        font-size: 1.1em;
+        height: 4em;
+        width: 4em;
+        border-radius: 4px;
+
+        .ba-calendar-icon-top
+        {
+            font-size: 1.2rem;
+        }
+    }
+
+    .ba-calendar-icon-bottom
+    {
+        color: white;
+        background-color: darkred;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        text-align: center;
+        align-items: center;
+        flex-shrink: 1;
+        padding-bottom: .1rem;
+        padding-top: .1rem;
+    }
+}