Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Overflow] Better samples and better selector detection #1645

Merged
merged 2 commits into from
Mar 6, 2024
Merged

[Overflow] Better samples and better selector detection #1645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
116d044
- Overflow selectors work
vnbaaij Mar 6, 2024
f8207cf
Merge branch 'dev' into users/vnbaaij/overflow-samples-work
vnbaaij Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<FluentOverflow>
<div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
<FluentOverflow Style="width: 100%;">
<FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
<FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
<FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
<FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
<FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
<FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
<FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
</FluentOverflow>
</FluentOverflow>
</div>
48 changes: 25 additions & 23 deletions examples/Demo/Shared/Pages/Overflow/Examples/OverflowHorizontalExample.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
<FluentOverflow OnOverflowRaised="OverflowHandler" Style="border: 1px solid lightgray">
<ChildContent>
@foreach (var item in Items)
{
<FluentOverflowItem><FluentBadge>@item</FluentBadge></FluentOverflowItem>
}
</ChildContent>
<MoreButtonTemplate>
<FluentBadge Style="min-width: 32px; max-width:32px;">
@($"+{context.ItemsOverflow.Count()}")
</FluentBadge>
</MoreButtonTemplate>
<OverflowTemplate>
<FluentTooltip Anchor="@context.IdMoreButton" UseTooltipService="false">
@foreach (var item in context.ItemsOverflow)
<div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
<FluentOverflow OnOverflowRaised="OverflowHandler" Style="width: 100%; border: 1px solid darkgray; padding: 2px; margin-bottom: 4px;">
<ChildContent>
@foreach (var item in Items)
{
<div style="margin: 5px;">@item.Text</div>
<FluentOverflowItem><FluentBadge>@item</FluentBadge></FluentOverflowItem>
}
</FluentTooltip>
</OverflowTemplate>
</FluentOverflow>
</ChildContent>
<MoreButtonTemplate>
<FluentBadge Style="min-width: 32px; max-width:32px;">
@($"+{context.ItemsOverflow.Count()}")
</FluentBadge>
</MoreButtonTemplate>
<OverflowTemplate>
<FluentTooltip Anchor="@context.IdMoreButton" UseTooltipService="false">
@foreach (var item in context.ItemsOverflow)
{
<div style="margin: 5px;">@item.Text</div>
}
</FluentTooltip>
</OverflowTemplate>
</FluentOverflow>
</div>

<FluentButton @onclick="@AddNewItemClick">Add</FluentButton>
<FluentButton @onclick="@RemoveFirstItemClick">Remove</FluentButton>
<FluentButton @onclick="@RemoveLastItemClick">Remove</FluentButton>

@code
{
Expand All @@ -43,8 +45,8 @@
Items.Add(Catalog[index]);
}

void RemoveFirstItemClick()
void RemoveLastItemClick()
{
Items.RemoveAt(0);
Items.RemoveAt(Items.Count-1);
}
}
}
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/Overflow/OverflowPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<h1>Overflow panel</h1>

<p>
Resize your browser to hide Tags when an overflow occurs.
Resize the area where the badges are shown in (bottom right/left corner) to hide Tags when an overflow occurs.
</p>

<h2 id="example">Examples</h2>
Expand Down
11 changes: 6 additions & 5 deletions src/Core/Components/Overflow/FluentOverflow.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
/// Gets or sets the CSS selectors of the items to include in the overflow.
/// </summary>
[Parameter]
public string? Selectors { get; set; } = "*";
public string? Selectors { get; set; } = string.Empty;
/// <summary>
/// Event raised when a <see cref="FluentOverflowItem"/> enter or leave the current panel.
/// </summary>
Expand All @@ -74,6 +74,8 @@
/// </summary>
public string IdMoreButton => $"{Id}-more";

private bool IsHorizontal => Orientation == Orientation.Horizontal;

public FluentOverflow()
{
Id = Identifier.NewId();
Expand All @@ -86,9 +88,9 @@
{
_jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
_dotNetHelper = DotNetObjectReference.Create(this);

Check warning on line 91 in src/Core/Components/Overflow/FluentOverflow.razor.cs

View workflow job for this annotation

GitHub Actions / Build and deploy Demo site 

Avoid multiple blank lines (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/style-rules/ide2000)

Check warning on line 91 in src/Core/Components/Overflow/FluentOverflow.razor.cs

View workflow job for this annotation

GitHub Actions / Build and deploy Demo site 

Avoid multiple blank lines (https://learn.microsoft.com/dotnet/fundamentals/code-analysis/style-rules/ide2000)
var isHorizontal = Orientation == Orientation.Horizontal;
await _jsModule.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, isHorizontal, Selectors);

await _jsModule.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
}
}

Expand Down Expand Up @@ -116,7 +118,7 @@
await OnOverflowRaised.InvokeAsync(ItemsOverflow);
}

await InvokeAsync(() => StateHasChanged());
StateHasChanged();
}
internal void Register(FluentOverflowItem item)
{
Expand All @@ -127,7 +129,6 @@
{
_items.Remove(item);
_jsModule?.InvokeVoidAsync("FluentOverflowDispose", item.Id);

}

/// <inheritdoc />
Expand Down
11 changes: 8 additions & 3 deletions src/Core/Components/Overflow/FluentOverflow.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ let resizeObserver;
let observerAddRemove;

export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
var localSelector = querySelector;
if (!localSelector) {
// cannot use :scope for node.matches() further down
localSelector = ".fluent-overflow-item";
}

// Create a Add/Remove Observer, started later
observerAddRemove = new MutationObserver(mutations => {
Expand All @@ -12,9 +17,9 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
return
}

// Only for querySelector element
// Only for localSelector element
const node = mutation.addedNodes.length > 0 ? mutation.addedNodes[0] : mutation.removedNodes[0];
if (node.nodeType !== Node.ELEMENT_NODE || !node.matches(querySelector)) {
if (node.nodeType !== Node.ELEMENT_NODE || !node.matches(localSelector)) {
return;
}

Expand Down Expand Up @@ -42,7 +47,7 @@ export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelec
if (!container) return;

if (!querySelector) {
querySelector = ":scope > *";
querySelector = ":scope .fluent-overflow-item";
}
else {
querySelector = ":scope " + querySelector;
Expand Down
Loading