Skip to content

feat(Tab): add ShowContextFullScreenButton parameter #5739

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

Merged
merged 6 commits into from
Mar 28, 2025
Merged

feat(Tab): add ShowContextFullScreenButton parameter #5739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b9419a
style: 微调 divider 间隙
ArgoZhang Mar 28, 2025
e3a9569
feat: 增加 ShowContextMenuFullScreen 参数
ArgoZhang Mar 28, 2025
997d521
feat: 增加 ContextMenuFullScreenIcon 参数
ArgoZhang Mar 28, 2025
e8fd1e5
feat: 增加全屏右键菜单
ArgoZhang Mar 28, 2025
71d28eb
revert: 更新文档
ArgoZhang Mar 28, 2025
fc025bc
test: 更新单元测试
ArgoZhang Mar 28, 2025
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
5 changes: 2 additions & 3 deletions src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,9 +500,8 @@ private void Navigation()
<section ignore>
<p>@((MarkupString)Localizer["TabsContextMenuDesc"].Value)</p>
</section>
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowContextMenu="true"
OnBeforeShowContextMenu="OnBeforeShowContextMenu">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user" IsDisabled="true">
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowContextMenu="true">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
<div>@Localizer["TabItem1Content"]</div>
<Counter></Counter>
</TabItem>
Expand Down
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.bb-cm {
.bb-cm {
--bb-cm-icon-min-width: #{$bb-cm-icon-min-width};
--bb-cm-icon-min-height: #{$bb-cm-icon-min-height};
z-index: 1200;
Expand All @@ -10,6 +10,6 @@
}

.divider {
margin: 0.5rem 0;
margin: 0.25rem 0;
}
}
5 changes: 5 additions & 0 deletions src/BootstrapBlazor/Components/Tab/Tab.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ else if (ShowContextMenu)
<ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
@if (ShowContextMenuFullScreen)
{
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="@ContextMenuFullScreenIcon" Text="@Localizer["ContextFullScreen"]" OnClick="OnFullScreen"></ContextMenuItem>
}
@if (ContextMenuTemplate != null)
{
@ContextMenuTemplate(this)
Expand Down
27 changes: 26 additions & 1 deletion src/BootstrapBlazor/Components/Tab/Tab.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,12 @@ public partial class Tab : IHandlerException
[Parameter]
public bool ShowFullScreen { get; set; }

/// <summary>
/// Gets or sets whether show the full screen button on context menu. Default is true.
/// </summary>
[Parameter]
public bool ShowContextMenuFullScreen { get; set; } = true;

/// <summary>
/// 关闭标签页回调方法
/// </summary>
Expand Down Expand Up @@ -401,6 +407,12 @@ public partial class Tab : IHandlerException
[Parameter]
public string? ContextMenuCloseAllIcon { get; set; }

/// <summary>
/// Gets or sets the icon of tab item context menu full screen button. Default is null.
/// </summary>
[Parameter]
public string? ContextMenuFullScreenIcon { get; set; }

/// <summary>
/// Gets or sets before popup context menu callback. Default is null.
/// </summary>
Expand Down Expand Up @@ -433,6 +445,10 @@ public partial class Tab : IHandlerException
[Inject, NotNull]
private DialogService? DialogService { get; set; }

[Inject]
[NotNull]
private FullScreenService? FullScreenService { get; set; }

private ContextMenuZone? _contextMenuZone;

private ConcurrentDictionary<TabItem, bool> LazyTabCache { get; } = new();
Expand Down Expand Up @@ -490,6 +506,7 @@ protected override void OnParametersSet()
ContextMenuCloseIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseIcon);
ContextMenuCloseOtherIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseOtherIcon);
ContextMenuCloseAllIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuCloseAllIcon);
ContextMenuFullScreenIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabContextMenuFullScreenIcon);

if (AdditionalAssemblies is null)
{
Expand Down Expand Up @@ -1016,7 +1033,7 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
}
}

private string? GetIdByTabItem(TabItem item) => ComponentIdGenerator.Generate(item);
private string GetIdByTabItem(TabItem item) => ComponentIdGenerator.Generate(item);

private async Task OnRefreshAsync()
{
Expand Down Expand Up @@ -1075,6 +1092,14 @@ private Task OnCloseAll(ContextMenuItem item, object? context)
return Task.CompletedTask;
}

private async Task OnFullScreen(ContextMenuItem item, object? context)
{
if (context is TabItem tabItem)
{
await FullScreenService.ToggleById(GetIdByTabItem(tabItem));
}
}

private async Task OnContextMenu(MouseEventArgs e, TabItem item)
{
if (_contextMenuZone != null)
Expand Down
5 changes: 5 additions & 0 deletions src/BootstrapBlazor/Enums/ComponentIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,6 +730,11 @@ public enum ComponentIcons
/// </summary>
TabContextMenuCloseAllIcon,

/// <summary>
/// Tab 组件 TabContextMenuFullScreenIcon 属性图标
/// </summary>
TabContextMenuFullScreenIcon,

/// <summary>
/// Timer 组件 Icon 属性图标
/// </summary>
Expand Down
1 change: 1 addition & 0 deletions src/BootstrapBlazor/Icons/BootstrapIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ internal static class BootstrapIcons
{ ComponentIcons.TabContextMenuCloseIcon, "bi bi-x" },
{ ComponentIcons.TabContextMenuCloseOtherIcon, "bi bi-arrow" },
{ ComponentIcons.TabContextMenuCloseAllIcon, "bi bi-arrow-left-right" },
{ ComponentIcons.TabContextMenuFullScreenIcon, "bi bi-arrows-fullscreen" },

{ ComponentIcons.LogoutLinkIcon, "bi bi-box-arrow-right" },

Expand Down
1 change: 1 addition & 0 deletions src/BootstrapBlazor/Icons/FontAwesomeIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ internal static class FontAwesomeIcons
{ ComponentIcons.TabContextMenuCloseIcon, "fa-fw fa-solid fa-xmark" },
{ ComponentIcons.TabContextMenuCloseOtherIcon, "fa-fw fa-solid fa-left-right" },
{ ComponentIcons.TabContextMenuCloseAllIcon, "fa-fw fa-solid fa-arrows-left-right-to-line" },
{ ComponentIcons.TabContextMenuFullScreenIcon, "fa-fw fa-solid fa-maximize" },

{ ComponentIcons.LogoutLinkIcon, "fa-solid fa-key" },

Expand Down
1 change: 1 addition & 0 deletions src/BootstrapBlazor/Icons/MaterialDesignIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ internal static class MaterialDesignIcons
{ ComponentIcons.TabContextMenuCloseIcon, "mdi mdi-close" },
{ ComponentIcons.TabContextMenuCloseOtherIcon, "mdi mdi-menu" },
{ ComponentIcons.TabContextMenuCloseAllIcon, "mdi mdi-arrow-left-right-bold" },
{ ComponentIcons.TabContextMenuFullScreenIcon, "mdi mdi-arrow-expand-all" },

{ ComponentIcons.LogoutLinkIcon, "mdi mdi-logout" },

Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor/Locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,8 @@
"ContextRefresh": "Refresh",
"ContextClose": "Close",
"ContextCloseOther": "Close Other Tabs",
"ContextCloseAll": "Close All Tabs"
"ContextCloseAll": "Close All Tabs",
"ContextFullScreen": "Full screen"
},
"BootstrapBlazor.Components.MultiFilter": {
"MultiFilterSearchPlaceHolderText": "Please enter ...",
Expand Down
3 changes: 2 additions & 1 deletion src/BootstrapBlazor/Locales/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,8 @@
"ContextRefresh": "刷新",
"ContextClose": "关闭",
"ContextCloseOther": "关闭其他",
"ContextCloseAll": "关闭全部"
"ContextCloseAll": "关闭全部",
"ContextFullScreen": "全屏"
},
"BootstrapBlazor.Components.MultiFilter": {
"MultiFilterSearchPlaceHolderText": "请输入 ...",
Expand Down
1 change: 1 addition & 0 deletions test/UnitTest/Components/TabTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ public async Task ContextMenu_Ok()
pb.AddChildContent<Tab>(pb =>
{
pb.Add(a => a.ShowContextMenu, true);
pb.Add(a => a.ShowContextMenuFullScreen, true);
Copy link
Contributor

@sourcery-ai sourcery-ai bot Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (testing): Test both true and false values for ShowContextMenuFullScreen

It's important to test both true and false values for the ShowContextMenuFullScreen parameter to ensure that the full-screen button is correctly shown or hidden in the context menu.

Suggested implementation:

            pb.AddChildContent<Tab>(pb =>
            {
                pb.Add(a => a.ShowContextMenu, true);
                pb.Add(a => a.ShowContextMenu, true);
                pb.Add(a => a.ShowContextMenuFullScreen, true);
                pb.AddChildContent<TabItem>(pb =>
                {
                    pb.Add(a => a.IsDisabled, true);
                });
            });

            // Additional test case to validate ShowContextMenuFullScreen with false value
            pb.AddChildContent<Tab>(pb =>
            {
                pb.Add(a => a.ShowContextMenu, true);
                pb.Add(a => a.ShowContextMenuFullScreen, false);
                pb.AddChildContent<TabItem>(pb =>
                {
                    pb.Add(a => a.IsDisabled, true);
                });
            });

The additional test case will allow you to verify that the full-screen button is correctly hidden when ShowContextMenuFullScreen is false. Adjust assertions (if any) in your test framework accordingly to validate the UI behavior.

pb.AddChildContent<TabItem>(pb =>
{
pb.Add(a => a.IsDisabled, true);
Expand Down