From 09fc8e254c494d2708651b8061f34a829b769271 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 13:29:50 +0000 Subject: [PATCH 1/9] Paginator, Menu and MenuSurface updates --- .../Components/Menu/MBMenu.razor.cs | 12 ++++++ .../MenuSurface/MBMenuSurface.razor.cs | 12 ++++++ .../Components/Paginator/MBPaginator.razor | 6 +-- .../Components/Paginator/MBPaginator.razor.cs | 39 +++++++++++++------ 4 files changed, 54 insertions(+), 15 deletions(-) diff --git a/Material.Blazor/Components/Menu/MBMenu.razor.cs b/Material.Blazor/Components/Menu/MBMenu.razor.cs index 5860a27da..2057a42d9 100644 --- a/Material.Blazor/Components/Menu/MBMenu.razor.cs +++ b/Material.Blazor/Components/Menu/MBMenu.razor.cs @@ -2,6 +2,7 @@ using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; +using System; using System.Threading.Tasks; namespace Material.Blazor @@ -23,6 +24,12 @@ public partial class MBMenu : ComponentFoundation [Parameter] public MBMenuSurfacePositioning MenuSurfacePositioning { get; set; } = MBMenuSurfacePositioning.Regular; + /// + /// Called when the menu is closed. + /// + [Parameter] public Action OnClosed { get; set; } + + private DotNetObjectReference ObjectReference { get; set; } private ElementReference ElementReference { get; set; } private bool IsOpen { get; set; } = false; @@ -66,6 +73,11 @@ protected override void Dispose(bool disposing) public void NotifyClosed() { IsOpen = false; + + if (OnClosed != null) + { + _ = InvokeAsync(OnClosed); + } } diff --git a/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs b/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs index a8991b9e4..9e83a387d 100644 --- a/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs +++ b/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs @@ -1,6 +1,7 @@ using Material.Blazor.Internal; using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; +using System; using System.Threading.Tasks; namespace Material.Blazor @@ -23,6 +24,12 @@ public partial class MBMenuSurface : ComponentFoundation [Parameter] public MBMenuSurfacePositioning MenuSurfacePositioning { get; set; } = MBMenuSurfacePositioning.Regular; + /// + /// Called when the menu is closed. + /// + [Parameter] public Action OnClosed { get; set; } + + private DotNetObjectReference ObjectReference { get; set; } private ElementReference ElementReference { get; set; } private bool IsOpen { get; set; } = false; @@ -66,6 +73,11 @@ protected override void Dispose(bool disposing) public void NotifyClosed() { IsOpen = false; + + if (OnClosed != null) + { + _ = InvokeAsync(OnClosed); + } } diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor b/Material.Blazor/Components/Paginator/MBPaginator.razor index aca776cea..ef0413aad 100644 --- a/Material.Blazor/Components/Paginator/MBPaginator.razor +++ b/Material.Blazor/Components/Paginator/MBPaginator.razor @@ -9,7 +9,7 @@
- @ItemsText + @ItemsText @ToggleOn
@*
- + @foreach (var itemsPerPage in ItemsPerPageSelection) { PositionTextString(PageNumber); private bool PreviousDisabled => PageNumber <= 0; private string PositionTextString(int pageNumber) => $"{pageNumber * ItemsPerPage + 1:G0}-{Math.Min(ItemCount, (pageNumber + 1) * ItemsPerPage):G0} of {ItemCount:G0}"; - private bool ToggleOn { get; set; } + + + private bool toggleOn; + private bool ToggleOn + { + get => toggleOn; + set + { + if (value != toggleOn) + { + toggleOn = value; + + if (toggleOn) + { + _ = InvokeAsync(async () => await Menu.ToggleAsync()); + } + } + } + } // Would like to use however DocFX cannot resolve to references outside Material.Blazor @@ -126,7 +144,7 @@ protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); - ConditionalCssClasses + _ = ConditionalCssClasses .AddIf("no-border", () => !RequiresBorder); if (ItemsPerPage == 0) @@ -157,21 +175,18 @@ protected override async Task OnAfterRenderAsync(bool firstRender) } - private async Task OnMenuToggleAsync() + private void OnMenuItemClick(int itemsPerPage) { - if (ToggleOn) - { - await Menu.ToggleAsync(); - ToggleOn = false; - } + double ratio = (double)ItemsPerPage / itemsPerPage; + BackingItemsPerPage = itemsPerPage; + BackingPageNumber = Convert.ToInt32(PageNumber * ratio); } - private void OnMenuItemClick(int itemsPerPage) + private void OnMenuClosed() { - double ratio = (double)ItemsPerPage / (double)itemsPerPage; - BackingItemsPerPage = itemsPerPage; - BackingPageNumber = Convert.ToInt32(PageNumber * ratio); + toggleOn = false; + _ = InvokeAsync(StateHasChanged); } From 98c46a388bbd4770ee18e82e8adddcaa7938c6b4 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 13:37:04 +0000 Subject: [PATCH 2/9] Update release notes --- articles/ReleaseNotes.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md index fd225adcd..d768d0e66 100644 --- a/articles/ReleaseNotes.md +++ b/articles/ReleaseNotes.md @@ -22,14 +22,19 @@ Released 2021-??-??
-#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor) -In Pre-Release Q4 2020 to Q4 2021 +#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor) +Released 2021-12-04 + +- Fixes bug in MBPaginator where menu for number of items per pages doesn't open +
+ +#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor) Released 2021-11-10 **Updates** -Material.Blazor is now built against .Net 6.0.0 GA +- Material.Blazor is now built against .Net 6.0.0 GA **New components** From 7eb4896bc50501e8b6a842c5ea34dfbe2d74d537 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 13:39:33 +0000 Subject: [PATCH 3/9] Remove debugging text --- Material.Blazor/Components/Paginator/MBPaginator.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor b/Material.Blazor/Components/Paginator/MBPaginator.razor index ef0413aad..45a931b83 100644 --- a/Material.Blazor/Components/Paginator/MBPaginator.razor +++ b/Material.Blazor/Components/Paginator/MBPaginator.razor @@ -9,7 +9,7 @@
- @ItemsText @ToggleOn + @ItemsText
@* Date: Sat, 4 Dec 2021 13:48:07 +0000 Subject: [PATCH 4/9] Clarify Action names --- Material.Blazor/Components/Menu/MBMenu.razor.cs | 6 +++--- .../Components/MenuSurface/MBMenuSurface.razor.cs | 6 +++--- Material.Blazor/Components/Paginator/MBPaginator.razor | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Material.Blazor/Components/Menu/MBMenu.razor.cs b/Material.Blazor/Components/Menu/MBMenu.razor.cs index 2057a42d9..de964e3f5 100644 --- a/Material.Blazor/Components/Menu/MBMenu.razor.cs +++ b/Material.Blazor/Components/Menu/MBMenu.razor.cs @@ -27,7 +27,7 @@ public partial class MBMenu : ComponentFoundation /// /// Called when the menu is closed. /// - [Parameter] public Action OnClosed { get; set; } + [Parameter] public Action OnMenuClosed { get; set; } private DotNetObjectReference ObjectReference { get; set; } @@ -74,9 +74,9 @@ public void NotifyClosed() { IsOpen = false; - if (OnClosed != null) + if (OnMenuClosed != null) { - _ = InvokeAsync(OnClosed); + _ = InvokeAsync(OnMenuClosed); } } diff --git a/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs b/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs index 9e83a387d..c7e95589d 100644 --- a/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs +++ b/Material.Blazor/Components/MenuSurface/MBMenuSurface.razor.cs @@ -27,7 +27,7 @@ public partial class MBMenuSurface : ComponentFoundation /// /// Called when the menu is closed. /// - [Parameter] public Action OnClosed { get; set; } + [Parameter] public Action OnMenuClosed { get; set; } private DotNetObjectReference ObjectReference { get; set; } @@ -74,9 +74,9 @@ public void NotifyClosed() { IsOpen = false; - if (OnClosed != null) + if (OnMenuClosed != null) { - _ = InvokeAsync(OnClosed); + _ = InvokeAsync(OnMenuClosed); } } diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor b/Material.Blazor/Components/Paginator/MBPaginator.razor index 45a931b83..5a9930079 100644 --- a/Material.Blazor/Components/Paginator/MBPaginator.razor +++ b/Material.Blazor/Components/Paginator/MBPaginator.razor @@ -24,7 +24,7 @@ IconOn="arrow_drop_up" @ref="@IconButtonToggle" />
- @foreach (var itemsPerPage in ItemsPerPageSelection) { From b72bf157a6eae8665ddda754d955aae65d4d753c Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 15:17:41 +0000 Subject: [PATCH 5/9] Fix tooltip markup to material v12 --- Material.Blazor.Website/Pages/Tooltip.razor | 8 +++---- Material.Blazor.Website/Styles/app.scss | 8 +++---- .../Tooltip/InternalTooltipAnchor.razor | 2 +- .../Components/Tooltip/MBTooltip.razor | 24 +++++-------------- .../Components/Tooltip/MBTooltip.razor.cs | 3 ++- Material.Blazor/Model/MBEnumerations.cs | 5 ++-- articles/Tooltip.md | 5 +--- 7 files changed, 21 insertions(+), 34 deletions(-) diff --git a/Material.Blazor.Website/Pages/Tooltip.razor b/Material.Blazor.Website/Pages/Tooltip.razor index 92dbc7d15..41d37787f 100644 --- a/Material.Blazor.Website/Pages/Tooltip.razor +++ b/Material.Blazor.Website/Pages/Tooltip.razor @@ -55,9 +55,9 @@

- + - Tooltip applied with TooltipType="MBTooltipType.Span" using the whole paragraph as the target. + Tooltip applied using the whole paragraph as the target. < @@ -67,9 +67,9 @@

- + -

Tooltip applied with TooltipType="MBTooltipType.Div" using the whole div as the target.

+

Tooltip applied using the whole div as the target.

 < diff --git a/Material.Blazor.Website/Styles/app.scss b/Material.Blazor.Website/Styles/app.scss index f56645b6f..aa45fb2e2 100644 --- a/Material.Blazor.Website/Styles/app.scss +++ b/Material.Blazor.Website/Styles/app.scss @@ -161,7 +161,7 @@ /* Dynamic link underlining */ - a:not(.mdc-deprecated-list-item) { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor) { position: relative; box-shadow: inset 0 -2px 0 theme.$secondary; display: inline-flex; @@ -171,13 +171,13 @@ transition: 0.15s ease; } - a:not(.mdc-deprecated-list-item):hover { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor):hover { box-shadow: none; color: theme.$on-secondary; text-decoration: none; } - a:not(.mdc-deprecated-list-item)::after { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor)::after { content: ""; background: theme.$secondary; position: absolute; @@ -189,7 +189,7 @@ transition: 0.15s ease; } - a:not(.mdc-deprecated-list-item):hover:after { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor):hover:after { height: 100%; } diff --git a/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor b/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor index ded8f6965..7ea995be2 100644 --- a/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor +++ b/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor @@ -17,7 +17,7 @@ role="tooltip" aria-hidden="true" style="z-index: 1000;"> -
+
@if (tooltip.RenderFragmentContent == null) { @tooltip.MarkupStringContent; diff --git a/Material.Blazor/Components/Tooltip/MBTooltip.razor b/Material.Blazor/Components/Tooltip/MBTooltip.razor index d19b78968..1d594756e 100644 --- a/Material.Blazor/Components/Tooltip/MBTooltip.razor +++ b/Material.Blazor/Components/Tooltip/MBTooltip.razor @@ -3,21 +3,9 @@ @inherits ComponentBase -@if (TooltipType == MBTooltipType.Span) -{ - - @if (Target != null) - { - @Target - } - -} -else -{ -
- @if (Target != null) - { - @Target - } -
-} \ No newline at end of file + + @if (Target != null) + { + @Target + } + diff --git a/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs b/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs index 0d7143725..a46d20f18 100644 --- a/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs +++ b/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs @@ -25,8 +25,9 @@ public partial class MBTooltip : ComponentBase, IDisposable /// - /// The tooltip's content. + /// OBSOLETE TO BE REMOVED IN VERSION 3.0.0. The tooltip type. /// + [Obsolete] [Parameter] public MBTooltipType TooltipType { get; set; } = MBTooltipType.Span; diff --git a/Material.Blazor/Model/MBEnumerations.cs b/Material.Blazor/Model/MBEnumerations.cs index 338129dc7..4260d6bd1 100644 --- a/Material.Blazor/Model/MBEnumerations.cs +++ b/Material.Blazor/Model/MBEnumerations.cs @@ -777,9 +777,10 @@ public enum MBToastPosition /// - /// Determines the density of a component + /// OBSOLETE - TO BE REMOVED IN VERSION 3.0.0. Determines the density of a component. /// Defaults to /// + [Obsolete] public enum MBTooltipType { /// @@ -788,7 +789,7 @@ public enum MBTooltipType Span, /// - /// Uses a <div> element for a tooltip - the default. + /// Uses a <div> element for a tooltip. /// Div } diff --git a/articles/Tooltip.md b/articles/Tooltip.md index ed8f96656..2a82fe3e9 100644 --- a/articles/Tooltip.md +++ b/articles/Tooltip.md @@ -21,7 +21,7 @@ The [MBTooltip](xref:C.MBTooltip) component gives you flexible tooltips that tak in your page and Content for the tooltip's content, e.g.: ```html - + This is the target span to be displayed in your razor page. @@ -30,6 +30,3 @@ in your page and Content for the tooltip's content, e.g.: ``` - -This tooltip surrounds your `` with either a span or div depending on whether the `TooltipType` is `MBTooltipType.Span` or -`MBTooltipType.Div` respectively. \ No newline at end of file From f1541fa9917a39484f8f2eed87884665a3c2e518 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 15:40:14 +0000 Subject: [PATCH 6/9] Release Notes --- articles/ReleaseNotes.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md index d768d0e66..68462dca8 100644 --- a/articles/ReleaseNotes.md +++ b/articles/ReleaseNotes.md @@ -25,7 +25,8 @@ Released 2021-??-?? #### [2.0.1](https://github.com/Material-Blazor/Material.Blazor) Released 2021-12-04 -- Fixes bug in MBPaginator where menu for number of items per pages doesn't open +- Fixes bug in MBPaginator where menu for number of items per pages doesn't open. +- Updates tooltip markup to be Material Components Web 12, fixing a bug where tooltips failed to close when the anchor loses hover state.
From 5c270550e3d2b82763cdb8671d4f73a88040b4b8 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 15:43:07 +0000 Subject: [PATCH 7/9] Further release notes updates --- articles/ReleaseNotes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md index 68462dca8..084fc5177 100644 --- a/articles/ReleaseNotes.md +++ b/articles/ReleaseNotes.md @@ -22,7 +22,7 @@ Released 2021-??-??
-#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor) +#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.1) Released 2021-12-04 - Fixes bug in MBPaginator where menu for number of items per pages doesn't open. @@ -30,7 +30,7 @@ Released 2021-12-04
-#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor) +#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0) Released 2021-11-10 **Updates** From ad59c168438dc529d7f44e6e91fbeb9fbbbe9e77 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 15:44:10 +0000 Subject: [PATCH 8/9] Release notes --- articles/ReleaseNotes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md index 084fc5177..d70aa7ed1 100644 --- a/articles/ReleaseNotes.md +++ b/articles/ReleaseNotes.md @@ -51,7 +51,7 @@ Released 2021-11-10
-#### [2.0.0-rc.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0-preview.9) +#### [2.0.0-rc.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0-rc.1) 2021-10-29 **Updates** From 2e2a7a3056c0350ce8a1a6b6ba42efbc3d973d69 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 15:55:29 +0000 Subject: [PATCH 9/9] Tooltip page markup improvement --- Material.Blazor.Website/Pages/Tooltip.razor | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/Material.Blazor.Website/Pages/Tooltip.razor b/Material.Blazor.Website/Pages/Tooltip.razor index 41d37787f..c5a1fb06d 100644 --- a/Material.Blazor.Website/Pages/Tooltip.razor +++ b/Material.Blazor.Website/Pages/Tooltip.razor @@ -60,9 +60,7 @@ Tooltip applied using the whole paragraph as the target. - < - MBTooltip TooltipType="MBTooltipType. - Span"> + Centred on the paragraph

@@ -72,9 +70,7 @@

Tooltip applied using the whole div as the target.

- < - MBTooltip TooltipType="MBTooltipType. - Div"> + Centred on the div