Merge pull request #184 from danheron/feature/month-scrollbar

Remove scroll bars when too many items shown in month view and replace with +n more message
danheron · Nov 11, 2024 · aa064ce · aa064ce
2 parents 300d8f3 + 9fdfc6d
commit aa064ce
Show file tree

Hide file tree

Showing 38 changed files with 216 additions and 17 deletions.
diff --git a/Heron.MudCalendar.Docs/Pages/Calendar/Examples/HeightCalendarExample.razor b/Heron.MudCalendar.Docs/Pages/Calendar/Examples/HeightCalendarExample.razor
@@ -1,6 +1,6 @@
 @namespace Heron.MudCalendar.Docs.Examples
 
-<MudCalendar Items="_events" Height="600" MonthCellMinHeight="@(_fixed ? 0 : 115)">
+<MudCalendar Items="_events" Height="630" MonthCellMinHeight="@(_fixed ? 0 : 115)">
     <MonthTemplate>
         <div class="d-flex gap-1">
             <MudIcon Icon="@Icons.Material.Filled.Circle" Color="Color.Secondary" Size="Size.Small"/>

diff --git a/Heron.MudCalendar/Components/MonthView.razor b/Heron.MudCalendar/Components/MonthView.razor
@@ -1,5 +1,7 @@
 @namespace Heron.MudCalendar
+@using Microsoft.JSInterop
 @inherits CalendarViewBase
+@inject IJSRuntime JsRuntime
 
 @Render
 
@@ -89,7 +91,7 @@
     /// </summary>
     protected virtual RenderFragment RenderCellContainer(CalendarCell cell, int index) =>
         @<div class="@CellClassname" style="@DayStyle(cell, index)" @onclick="() => OnCellLinkClicked(cell)">
-            <MudDropZone T="CalendarItem" Identifier="@cell.Date.Date.ToString("d")" Class="mud-cal-month-dropzone" Style="@CellStyle">
+            <MudDropZone T="CalendarItem" Identifier="@cell.Date.Date.ToString("d")" Class="mud-cal-month-dropzone">
                 @RenderCell(cell)
     </MudDropZone>
     </div>;

diff --git a/Heron.MudCalendar/Components/MonthView.razor.cs b/Heron.MudCalendar/Components/MonthView.razor.cs
@@ -1,13 +1,23 @@
+using System.Globalization;
+using Heron.MudCalendar.Services;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using Microsoft.Extensions.Logging.Abstractions;
+using Microsoft.Extensions.Options;
 using MudBlazor;
 using MudBlazor.Utilities;
 
 namespace Heron.MudCalendar;
 
-public partial class MonthView : CalendarViewBase
+public partial class MonthView : CalendarViewBase, IDisposable
 {
     private MudDropContainer<CalendarItem>? _dropContainer;
 
+    private JsService? _jsService;
+
+    private static CultureInfo? _uiCulture;
+    private static string? _moreText;
+
     protected virtual int Columns => 7;
 
     /// <summary>
@@ -25,11 +35,6 @@ public partial class MonthView : CalendarViewBase
                 Calendar.MonthCellMinHeight == 0)
             .Build();
 
-    protected virtual string CellStyle =>
-        new StyleBuilder()
-            .AddStyle("overflow-y", "scroll", Calendar.MonthCellMinHeight == 0)
-            .Build();
-
     /// <summary>
     /// Classes added to each month cell.
     /// </summary>
@@ -88,6 +93,12 @@ protected override void OnParametersSet()
         // Ensure that the order of items is correct
         _dropContainer?.Refresh();
     }
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        // Truncate overflowing calendar items
+        return TruncateOverflows();
+    }
 
     /// <summary>
     /// Method invoked when the user clicks on the calendar item.
@@ -162,6 +173,37 @@ private async Task ItemDropped(MudItemDropInfo<CalendarItem> dropItem)
 
         await Calendar.ItemChanged.InvokeAsync(item);
     }
+
+    private async Task TruncateOverflows()
+    {
+        // Load localized text
+        var moreText = LoadText();
+
+        // Truncate overflowing calendar items
+        _jsService ??= new JsService(JsRuntime);
+        await _jsService.HideOverflows("mud-cal-month-dropzone", moreText);
+    }
+
+    private string LoadText()
+    {
+        if (_moreText != null && Equals(_uiCulture, Thread.CurrentThread.CurrentUICulture)) return _moreText;
+
+        var options = Options.Create(new LocalizationOptions { ResourcesPath = "Resources" });
+        var factory = new ResourceManagerStringLocalizerFactory(options, NullLoggerFactory.Instance);
+        var localizer = new StringLocalizer<MudCalendar>(factory);
+
+        _uiCulture = Thread.CurrentThread.CurrentUICulture;
+        _moreText = localizer["More"];
+
+        return _moreText;
+    }
 
     private RenderFragment<CalendarItem> CellTemplate => Calendar.MonthTemplate ?? Calendar.CellTemplate;
+
+    public void Dispose()
+    {
+        GC.SuppressFinalize(this);
+
+        _jsService?.Dispose();
+    }
 }
diff --git a/Heron.MudCalendar/Resources/MudCalendar.bg.resx b/Heron.MudCalendar/Resources/MudCalendar.bg.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Днес</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Още</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.cs.resx b/Heron.MudCalendar/Resources/MudCalendar.cs.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Dnes</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Více na</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.da.resx b/Heron.MudCalendar/Resources/MudCalendar.da.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>I dag</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Mere om det</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.de.resx b/Heron.MudCalendar/Resources/MudCalendar.de.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Heute</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Mehr</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.el.resx b/Heron.MudCalendar/Resources/MudCalendar.el.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Σήμερα</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Περισσότερα</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.es.resx b/Heron.MudCalendar/Resources/MudCalendar.es.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Hoy</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Más</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.et.resx b/Heron.MudCalendar/Resources/MudCalendar.et.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Täna</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Rohkem</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.fi.resx b/Heron.MudCalendar/Resources/MudCalendar.fi.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Tänään</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Lisää</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.fr.resx b/Heron.MudCalendar/Resources/MudCalendar.fr.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Aujourd'hui</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Plus d'informations</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.hr.resx b/Heron.MudCalendar/Resources/MudCalendar.hr.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Danas</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Više</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.hu.resx b/Heron.MudCalendar/Resources/MudCalendar.hu.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Ma</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>További</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.id.resx b/Heron.MudCalendar/Resources/MudCalendar.id.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Hari ini</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Lebih lanjut</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.it.resx b/Heron.MudCalendar/Resources/MudCalendar.it.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Oggi</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Di più</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.ja.resx b/Heron.MudCalendar/Resources/MudCalendar.ja.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>今日</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>もっと見る</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.ko.resx b/Heron.MudCalendar/Resources/MudCalendar.ko.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>오늘</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>자세히 보기</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.lt.resx b/Heron.MudCalendar/Resources/MudCalendar.lt.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Šiandien</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Daugiau</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.lv.resx b/Heron.MudCalendar/Resources/MudCalendar.lv.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Šodien</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Vairāk</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.nb.resx b/Heron.MudCalendar/Resources/MudCalendar.nb.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>I dag</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Mer</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.nl.resx b/Heron.MudCalendar/Resources/MudCalendar.nl.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Vandaag</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Meer</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.pl.resx b/Heron.MudCalendar/Resources/MudCalendar.pl.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Dzisiaj</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Więcej</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.pt.resx b/Heron.MudCalendar/Resources/MudCalendar.pt.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Hoje</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Mais</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.resx b/Heron.MudCalendar/Resources/MudCalendar.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Today</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>More</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.ro.resx b/Heron.MudCalendar/Resources/MudCalendar.ro.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Astăzi</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Mai mult</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.ru.resx b/Heron.MudCalendar/Resources/MudCalendar.ru.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Сегодня</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Подробнее</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.sk.resx b/Heron.MudCalendar/Resources/MudCalendar.sk.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Dnes</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Viac na</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.sl.resx b/Heron.MudCalendar/Resources/MudCalendar.sl.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Danes</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Več</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.sv.resx b/Heron.MudCalendar/Resources/MudCalendar.sv.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Idag</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Mer om</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.tr.resx b/Heron.MudCalendar/Resources/MudCalendar.tr.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Bugün</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Daha fazla</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.uk.resx b/Heron.MudCalendar/Resources/MudCalendar.uk.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>Сьогодні</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>Більше</value>
+    </data>
 </root>
diff --git a/Heron.MudCalendar/Resources/MudCalendar.zh.resx b/Heron.MudCalendar/Resources/MudCalendar.zh.resx
@@ -2,4 +2,7 @@
     <data name="Today" xml:space="preserve">
         <value>今天</value>
     </data>
+    <data name="More" xml:space="preserve">
+        <value>更多信息</value>
+    </data>
 </root>