feat(Tab): add ShowContextFullScreenButton parameter (#5739)

* style: 微调 divider 间隙

* feat: 增加 ShowContextMenuFullScreen 参数

* feat: 增加 ContextMenuFullScreenIcon 参数

* feat: 增加全屏右键菜单

* revert: 更新文档

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tabs.razor

@@ -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>

src/BootstrapBlazor/Components/ContextMenu/ContextMenu.razor.scss

@@ -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;
@@ -10,6 +10,6 @@
     }
 
     .divider {
-        margin: 0.5rem 0;
+        margin: 0.25rem 0;
     }
 }

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -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)

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -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>
@@ -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>
@@ -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();
@@ -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)
         {
@@ -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()
     {
@@ -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)

src/BootstrapBlazor/Enums/ComponentIcons.cs

@@ -730,6 +730,11 @@ public enum ComponentIcons
     /// </summary>
     TabContextMenuCloseAllIcon,
 
+    /// <summary>
+    /// Tab 组件 TabContextMenuFullScreenIcon 属性图标
+    /// </summary>
+    TabContextMenuFullScreenIcon,
+
     /// <summary>
     /// Timer 组件 Icon 属性图标
     /// </summary>

src/BootstrapBlazor/Icons/BootstrapIcons.cs

@@ -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" },
 

src/BootstrapBlazor/Icons/FontAwesomeIcons.cs

@@ -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" },
 

src/BootstrapBlazor/Icons/MaterialDesignIcons.cs

@@ -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" },
 

src/BootstrapBlazor/Locales/en.json

@@ -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 ...",

src/BootstrapBlazor/Locales/zh.json

@@ -182,7 +182,8 @@
     "ContextRefresh": "刷新",
     "ContextClose": "关闭",
     "ContextCloseOther": "关闭其他",
-    "ContextCloseAll": "关闭全部"
+    "ContextCloseAll": "关闭全部",
+    "ContextFullScreen": "全屏"
   },
   "BootstrapBlazor.Components.MultiFilter": {
     "MultiFilterSearchPlaceHolderText": "请输入 ...",