Tables & DataGrid: Mobile Mode (#5608)

* Tables | Mobile Mode * Table | BS | BS5 | TableResponsiveMode Mobile support * Ant | Table Mobile * Bulma | Table Mobile * FluentUI | Table Mobile * Material | Table Mobile * Tailwind | Table Mobile * Docs : Table | BasicMobileTableExample * Release notes * DataGrid Mobile Mode * Release notes * Release notes datagrid disclaimer for unsupported features * ant-table-mobile * bs table-mobile * bulma is-table-mobile * fluent fui-Table-mobile * material table-mobile * MobileMode example | add iframe support to view mobile mode on button click * Adjust examples UI * Show new feature badge * Add more page description * Introduce dedicated DocsNewFeatureBadge * Always use @attributes as last parameter * Appla data-caption to AntDesign --------- Co-authored-by: Mladen Macanovic <[email protected]> Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Jul 18, 2024 · 2c93281 · 2c93281
1 parent c443d5b
commit 2c93281
Show file tree

Hide file tree

Showing 67 changed files with 1,015 additions and 54 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor
@@ -164,6 +164,12 @@
                                     </Select>
                                 </FieldBody>
                             </Field>
+                        </Fields>
+                    </Column>
+                </Row>
+                <Row>
+                    <Column>
+                        <Fields>
                             <Field>
                                 <FieldLabel>
                                     Sort mode
@@ -186,6 +192,17 @@
                                     </Select>
                                 </FieldBody>
                             </Field>
+                            <Field>
+                                <FieldLabel>
+                                    Responsive mode
+                                </FieldLabel>
+                                <FieldBody>
+                                    <Select @bind-SelectedValue="@responsiveMode">
+                                        <SelectItem Value="@TableResponsiveMode.Default">Default</SelectItem>
+                                        <SelectItem Value="@TableResponsiveMode.Mobile">Mobile</SelectItem>
+                                    </Select>
+                                </FieldBody>
+                            </Field>
                             <Field>
                                 <FieldLabel>
                                     Custom Search
@@ -243,7 +260,8 @@
                           FilteredDataChanged="@OnFilteredDataChanged"
                           UseValidation
                           SortChanged="@OnSortChanged"
-                          HeaderThemeContrast="@ThemeContrast.Light">
+                          HeaderThemeContrast="@ThemeContrast.Light"
+                          ResponsiveMode="@responsiveMode">
                     <EmptyTemplate>
                         <Span>
                             <Icon Name="IconName.InfoCircle" TextColor="TextColor.Info" Margin="Margin.Is2.FromEnd" />

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor.cs b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor.cs
@@ -24,6 +24,7 @@ public partial class DataGridPage
     private DataGridCommandMode commandsMode = DataGridCommandMode.Commands;
     private TableResizeMode resizableMode = TableResizeMode.Header;
     private DataGridFilterMode filterMode = DataGridFilterMode.Default;
+    private TableResponsiveMode responsiveMode = TableResponsiveMode.Default;
 
     private DataGrid<Employee> dataGrid;
     public int currentPage { get; set; } = 1;

diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor
@@ -648,9 +648,15 @@
                                 }
                             </Row>
                         </Field>
+                        <Field>
+                            <Select @bind-SelectedValue="@responsiveMode">
+                                <SelectItem Value="TableResponsiveMode.Default">Default</SelectItem>
+                                <SelectItem Value="TableResponsiveMode.Mobile">Mobile</SelectItem>
+                            </Select>
+                        </Field>
                     </Column>
                     <Column ColumnSize="ColumnSize.Is9.OnWidescreen.Is12.OnMobile">
-                        <Table @ref="@tableRef" FixedHeader="@fixedHeader" Striped="@stripped" Bordered="@bordered" Borderless="@borderless" Hoverable="@hoverable" Narrow="@small" Resizable="@resizable" ResizeMode="@resizeMode" FixedHeaderTableHeight="300px">
+                        <Table @ref="@tableRef" FixedHeader="@fixedHeader" Striped="@stripped" Bordered="@bordered" Borderless="@borderless" Hoverable="@hoverable" Narrow="@small" Resizable="@resizable" ResizeMode="@resizeMode" ResponsiveMode="@responsiveMode" FixedHeaderTableHeight="300px">
                             <TableHeader>
                                 <TableRow>
                                     <TableHeaderCell>#</TableHeaderCell>
@@ -671,10 +677,10 @@
                                     var index = i.ToString();
 
                                     <TableRow @key="@index">
-                                        <TableRowHeader>@index</TableRowHeader>
-                                        <TableRowCell>Column content</TableRowCell>
-                                        <TableRowCell>Column content</TableRowCell>
-                                        <TableRowCell>Column content</TableRowCell>
+                                        <TableRowHeader MobileModeCaption="#">@index</TableRowHeader>
+                                        <TableRowCell MobileModeCaption="Column heading">Column content</TableRowCell>
+                                        <TableRowCell MobileModeCaption="Column heading">Column content</TableRowCell>
+                                        <TableRowCell MobileModeCaption="Column heading">Column content</TableRowCell>
                                     </TableRow>
                                 }
                             </TableBody>

diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor.cs b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor.cs
@@ -16,6 +16,7 @@ public partial class TablesPage
     private bool resizable = true;
 
     private TableResizeMode resizeMode;
+    private TableResponsiveMode responsiveMode;
 
     private Task ScrollToRow()
         => tableRef.ScrollToRow( scrollToValue ).AsTask();

diff --git a/Documentation/Blazorise.Docs/Blazorise.Docs.csproj b/Documentation/Blazorise.Docs/Blazorise.Docs.csproj
@@ -79,6 +79,11 @@
     <PackageReference Include="Microsoft.Extensions.Configuration" Version="8.0.*" />
     <PackageReference Include="SendGrid" Version="9.29.3" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Update="Pages\Docs\Components\Tables\Examples\BasicMobileTableExample.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
 
   <!--Is this a rebuild - Dont clean generated files as this breaks rebuild behaviour-->
   <Target Name="ShouldCleanGeneratedFiles" BeforeTargets="BeforeRebuild">

diff --git a/Documentation/Blazorise.Docs/Components/DocsNewFeatureBadge.razor b/Documentation/Blazorise.Docs/Components/DocsNewFeatureBadge.razor
@@ -0,0 +1,5 @@
+<Span>@ChildContent</Span>
+<Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+@code {
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}
diff --git a/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor b/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor
@@ -1,5 +1,31 @@
-<Div Class="@ClassNames">
+@if ( !string.IsNullOrWhiteSpace( FrameUrl ) )
+{
+    <Div Flex="Flex.JustifyContent.Center.AlignItems.Center" Gap="Gap.Is3" Padding="Padding.Is3" Border="Border.Is0.OnBottom.Is1.OnTop.Is1.RoundedTop.OnStart.Is1.OnEnd">
+        <Tooltip Text="Desktop View" Inline>
+            <Button Clicked="@OnDesktopViewClicked">
+                <Icon Name="IconName.Laptop" />
+            </Button>
+        </Tooltip>
+        <Tooltip Text="Mobile View" Inline>
+            <Button Clicked="@OnMobileViewClicked">
+                <Icon Name="IconName.Smartphone" />
+            </Button>
+        </Tooltip>
+    </Div>
+}
+<Div Class="@ClassNames" Border="@(Outlined ? ShowFrame ? Border.Is1.OnAll : Border.Is1.RoundedTop : null)">
     <Div Class="b-docs-page-section-content-inner">
-        @ChildContent
+        @if ( FrameView == "desktop" )
+        {
+            @ChildContent
+        }
+        else
+        {
+            <Div Height="Height.Px(500)" Background="Background.Light">
+                <iframe src="@FrameUrl" style="@FrameStyle" />
+            </Div>
+        }
     </Div>
 </Div>
+
+
diff --git a/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor.cs b/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor.cs
@@ -1,18 +1,60 @@
 #region Using directives
-using Microsoft.AspNetCore.Components;
 using System.Text;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
 #endregion
 
 namespace Blazorise.Docs.Components;
 
 public partial class DocsPageSectionContent
 {
     #region Methods
+    public Task OnDesktopViewClicked()
+    {
+        FrameView = "desktop";
+
+        return Task.CompletedTask;
+    }
+
+    public Task OnMobileViewClicked()
+    {
+        FrameView = "mobile";
 
+        return Task.CompletedTask;
+    }
     #endregion
 
     #region Properties
 
+    protected string FrameStyle
+    {
+        get
+        {
+            var sb = new StringBuilder( "margin-left: auto; margin-right: auto; display: block; vertical-align: middle; height: 100%;" );
+
+            sb.Append( FrameWidth );
+
+            return sb.ToString();
+        }
+    }
+    private string FrameView { get; set; } = "desktop";
+
+    private string FrameWidth
+    {
+        get
+        {
+            switch ( FrameView )
+            {
+                case "tablet":
+                    return "width: 768px;";
+                case "mobile":
+                    return "width: 425px;";
+                default:
+                    return "width: 100%;";
+            }
+        }
+    }
+
     private string ClassNames
     {
         get
@@ -29,11 +71,15 @@ private string ClassNames
         }
     }
 
+    bool ShowFrame => !string.IsNullOrEmpty( FrameUrl );
+
     [Parameter] public bool Outlined { get; set; }
 
     [Parameter] public bool FullWidth { get; set; }
 
     [Parameter] public RenderFragment ChildContent { get; set; }
 
+    [Parameter] public string FrameUrl { get; set; }
+
     #endregion
 }
diff --git a/Documentation/Blazorise.Docs/Layouts/DocsIFrameLayout.razor b/Documentation/Blazorise.Docs/Layouts/DocsIFrameLayout.razor
@@ -0,0 +1,11 @@
+@inherits LayoutComponentBase
+<Container Breakpoint="Breakpoint.Widescreen">
+    <Row>
+        <Column ColumnSize="ColumnSize.Is12.Is10.OnDesktop" Class="b-docs-page">
+            @Body
+        </Column>
+        <Column ColumnSize="ColumnSize.Is2.OnDesktop">
+            <Toc />
+        </Column>
+    </Row>
+</Container>
diff --git a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor
@@ -53,8 +53,7 @@
                                     <BarDropdownItem To="docs/usage/bootstrap5/">Bootstrap 5</BarDropdownItem>
                                     <BarDropdownItem To="docs/usage/bulma/">Bulma</BarDropdownItem>
                                     <BarDropdownItem To="docs/usage/fluent2/" Flex="Flex.JustifyContent.Between">
-                                        <Span>Fluent 2</Span>
-                                        <Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                        <DocsNewFeatureBadge>Fluent 2</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                     <BarDropdownItem To="docs/usage/material/">Material</BarDropdownItem>
                                     <BarDropdownItem To="docs/usage/tailwind/">Tailwind</BarDropdownItem>
@@ -119,10 +118,7 @@
                                     <BarDropdownItem To="docs/components/input-mask">Input Mask</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/memo">Memo Edit</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/modal">Modal</BarDropdownItem>
-                                    <BarDropdownItem To="docs/components/offcanvas" Flex="Flex.JustifyContent.Between">
-                                        <Span>Offcanvas</Span>
-                                        <Span Background="Background.Dark" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
-                                    </BarDropdownItem>
+                                    <BarDropdownItem To="docs/components/offcanvas">Offcanvas</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/numeric">Numeric Edit</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/numeric-picker">Numeric Picker</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/pagination">Pagination</BarDropdownItem>
@@ -139,8 +135,7 @@
                                     <BarDropdownItem To="docs/components/time">Time Edit</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/time-picker">Time Picker</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/toast" Flex="Flex.JustifyContent.Between">
-                                        <Span>Toast</Span>
-                                        <Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                        <DocsNewFeatureBadge>Toast</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                     <BarDropdownItem To="docs/components/tooltip">Tooltip</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/text">Text Edit</BarDropdownItem>
@@ -158,8 +153,7 @@
                                     <BarDropdownItem To="docs/extensions/autocomplete">Autocomplete</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/animate">Animate</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/captcha">
-                                        <Span>Captcha</Span>
-                                        <Span Background="Background.Dark" TextColor="TextColor.Primary" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                        <DocsNewFeatureBadge>Captcha</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                     <BarDropdown>
                                         <BarDropdownToggle>Chart</BarDropdownToggle>
@@ -198,8 +192,7 @@
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/paging">Paging</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/sorting">Sorting</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/editing" Flex="Flex.JustifyContent.Between">
-                                                        <Span>Editing</Span>
-                                                        <Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                                        <DocsNewFeatureBadge>Editing</DocsNewFeatureBadge>
                                                     </BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/filtering">Filtering</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/resizing">Resizing</BarDropdownItem>
@@ -211,6 +204,9 @@
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/grouping">Grouping</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/header-group">Header Group</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/state-management">State Management</BarDropdownItem>
+                                                    <BarDropdownItem To="docs/extensions/datagrid/features/mobile-mode" Flex="Flex.JustifyContent.Between.AlignItems.Center">
+                                                        <DocsNewFeatureBadge>Mobile Mode</DocsNewFeatureBadge>
+                                                    </BarDropdownItem>
                                                 </BarDropdownMenu>
                                             </BarDropdown>
 
@@ -257,20 +253,13 @@
                                     <BarDropdownItem To="docs/extensions/richtextedit">RichTextEdit</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/selectlist">SelectList</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/sidebar">Sidebar</BarDropdownItem>
-                                    <BarDropdownItem To="docs/extensions/signaturepad" Flex="Flex.JustifyContent.Between">
-                                        <Span>SignaturePad</Span>
-                                        <Span Background="Background.Dark" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
-                                    </BarDropdownItem>
+                                    <BarDropdownItem To="docs/extensions/signaturepad">SignaturePad</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/snackbar">Snackbar</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/spinkit">SpinKit</BarDropdownItem>
-                                    <BarDropdownItem To="docs/extensions/splitter" Flex="Flex.JustifyContent.Between">
-                                        <Span>Splitter</Span>
-                                        <Span Background="Background.Dark" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
-                                    </BarDropdownItem>
+                                    <BarDropdownItem To="docs/extensions/splitter">Splitter</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/treeview">TreeView</BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/transferlist" Flex="Flex.JustifyContent.Between">
-                                        <Span>TransferList</Span>
-                                        <Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                        <DocsNewFeatureBadge>TransferList</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                     <BarDropdownItem To="docs/extensions/video">Video</BarDropdownItem>
                                 </BarDropdownMenu>
@@ -287,8 +276,7 @@
                                     <BarDropdownItem To="docs/services/notification-provider">Notification Provider</BarDropdownItem>
                                     <BarDropdownItem To="docs/services/page-progress-provider">PageProgress Provider</BarDropdownItem>
                                     <BarDropdownItem To="docs/services/toast-provider" Flex="Flex.JustifyContent.Between">
-                                        <Span>Toast Provider</Span>
-                                        <Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                        <DocsNewFeatureBadge>Toast Provider</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                 </BarDropdownMenu>
                             </BarDropdown>
@@ -302,8 +290,7 @@
                                 <BarDropdownMenu>
                                     <BarDropdownItem To="docs/helpers/colors">Colors</BarDropdownItem>
                                     <BarDropdownItem To="docs/helpers/utilities/css-grid" Flex="Flex.JustifyContent.Between">
-                                        <Span>CSS Grid</Span>
-                                        <Span Background="Background.Primary" TextColor="TextColor.White" Border="Border.Rounded" TextWeight="TextWeight.Bold" TextSize="TextSize.ExtraSmall" Padding="Padding.Is1">New</Span>
+                                        <DocsNewFeatureBadge>CSS Grid</DocsNewFeatureBadge>
                                     </BarDropdownItem>
                                     <BarDropdownItem To="docs/helpers/utilities/grid">Grid</BarDropdownItem>
                                     <BarDropdown>