From 2c932814147f89877602b057e72f6fd8a96bd976 Mon Sep 17 00:00:00 2001 From: David Moreira Date: Thu, 18 Jul 2024 12:41:11 +0100 Subject: [PATCH] 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 Co-authored-by: Mladen Macanovic --- .../Pages/Tests/DataGrid/DataGridPage.razor | 20 +++++- .../Tests/DataGrid/DataGridPage.razor.cs | 1 + .../Pages/Tests/TablesPage.razor | 16 +++-- .../Pages/Tests/TablesPage.razor.cs | 1 + .../Blazorise.Docs/Blazorise.Docs.csproj | 5 ++ .../Components/DocsNewFeatureBadge.razor | 5 ++ .../Components/DocsPageSectionContent.razor | 30 ++++++++- .../DocsPageSectionContent.razor.cs | 48 ++++++++++++++- .../Layouts/DocsIFrameLayout.razor | 11 ++++ .../Blazorise.Docs/Layouts/DocsLayout.razor | 39 ++++-------- .../Models/Snippets.generated.cs | 61 +++++++++++++++++++ .../Blazorise.Docs/Pages/BasePage.cs | 2 +- .../Code/BasicMobileTableExampleCode.html | 34 +++++++++++ .../Examples/BasicMobileTableExample.razor | 32 ++++++++++ .../Examples/BasicMobileTablePage.razor | 4 ++ .../Docs/Components/Tables/TablePage.razor | 21 +++++++ .../Code/DataGridMobileModeExampleCode.html | 34 +++++++++++ .../Extensions/DataGrid/DataGridApi.razor | 3 + .../Examples/DataGridMobileModeExample.razor | 31 ++++++++++ .../Features/MobileModeIFramePage.razor | 4 ++ .../DataGrid/Features/MobileModePage.razor | 39 ++++++++++++ .../News/2024-07-15-release-notes-160.razor | 36 +++++++++++ .../Blazorise.Docs/Styles/_docs.scss | 1 - .../Blazorise.Docs/wwwroot/blazorise.docs.css | 1 - .../wwwroot/blazorise.docs.min.css | 2 +- Shared/Blazorise.Shared/Data/PageEntryData.cs | 1 + .../Components/TableRowHeader.razor | 1 + .../Providers/AntDesignClassProvider.cs | 2 + .../Styles/components/_table.scss | 38 ++++++++++++ .../wwwroot/blazorise.antdesign.css | 32 ++++++++++ .../wwwroot/blazorise.antdesign.min.css | 2 +- .../Providers/BootstrapClassProvider.cs | 2 + .../Styles/components/_table.scss | 41 ++++++++++++- .../wwwroot/blazorise.bootstrap.css | 31 ++++++++++ .../wwwroot/blazorise.bootstrap.min.css | 2 +- .../Providers/Bootstrap5ClassProvider.cs | 2 + .../Styles/components/_table.scss | 37 +++++++++++ .../wwwroot/blazorise.bootstrap5.css | 31 ++++++++++ .../wwwroot/blazorise.bootstrap5.min.css | 2 +- .../Providers/BulmaClassProvider.cs | 2 + .../Styles/components/_table.scss | 37 +++++++++++ .../wwwroot/blazorise.bulma.css | 31 ++++++++++ .../wwwroot/blazorise.bulma.min.css | 2 +- .../Providers/FluentUI2ClassProvider.cs | 2 + .../Styles/components/_table.scss | 37 +++++++++++ .../wwwroot/blazorise.fluentui2.css | 31 ++++++++++ .../wwwroot/blazorise.fluentui2.min.css | 2 +- .../Styles/components/_table.scss | 37 +++++++++++ .../wwwroot/blazorise.material.css | 31 ++++++++++ .../wwwroot/blazorise.material.min.css | 2 +- .../Providers/TailwindClassProvider.cs | 2 + .../Styles/components/_table.scss | 37 +++++++++++ .../wwwroot/blazorise.tailwind.css | 31 ++++++++++ .../wwwroot/blazorise.tailwind.min.css | 2 +- .../Blazorise/Components/Table/Table.razor.cs | 23 ++++++- .../Components/Table/TableRowCell.razor | 3 +- .../Components/Table/TableRowCell.razor.cs | 5 ++ .../Components/Table/TableRowHeader.razor | 1 + .../Components/Table/TableRowHeader.razor.cs | 5 ++ Source/Blazorise/Enums/TableResponsiveMode.cs | 18 ++++++ Source/Blazorise/Interfaces/IClassProvider.cs | 2 + Source/Blazorise/Providers/ClassProvider.cs | 2 + .../Blazorise/Providers/EmptyClassProvider.cs | 2 + .../Blazorise.DataGrid/DataGrid.razor | 2 +- .../Blazorise.DataGrid/DataGrid.razor.cs | 6 +- .../Blazorise.DataGrid/_DataGridRow.razor | 3 +- .../Blazorise.DataGrid/_DataGridRowEdit.razor | 6 +- 67 files changed, 1015 insertions(+), 54 deletions(-) create mode 100644 Documentation/Blazorise.Docs/Components/DocsNewFeatureBadge.razor create mode 100644 Documentation/Blazorise.Docs/Layouts/DocsIFrameLayout.razor create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Components/Tables/Code/BasicMobileTableExampleCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Components/Tables/Examples/BasicMobileTableExample.razor create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Components/Tables/Examples/BasicMobileTablePage.razor create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridMobileModeExampleCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridMobileModeExample.razor create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Features/MobileModeIFramePage.razor create mode 100644 Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Features/MobileModePage.razor create mode 100644 Source/Blazorise/Enums/TableResponsiveMode.cs diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor index 5eb94f639d..b6096b0088 100644 --- a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor +++ b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor @@ -164,6 +164,12 @@ + + + + + + Sort mode @@ -186,6 +192,17 @@ + + + Responsive mode + + + + + Custom Search @@ -243,7 +260,8 @@ FilteredDataChanged="@OnFilteredDataChanged" UseValidation SortChanged="@OnSortChanged" - HeaderThemeContrast="@ThemeContrast.Light"> + HeaderThemeContrast="@ThemeContrast.Light" + ResponsiveMode="@responsiveMode"> diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor.cs b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor.cs index ce53fe9ebb..a919ed91d4 100644 --- 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 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 index 745c6e55dc..472e288755 100644 --- a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor +++ b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor @@ -648,9 +648,15 @@ } + + + - +
# @@ -671,10 +677,10 @@ var index = i.ToString(); - @index - Column content - Column content - Column content + @index + Column content + Column content + Column content } diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor.cs b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor.cs index 5a54d9d0f6..048b307626 100644 --- 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 index ba3f37ce38..1f65710c44 100644 --- a/Documentation/Blazorise.Docs/Blazorise.Docs.csproj +++ b/Documentation/Blazorise.Docs/Blazorise.Docs.csproj @@ -79,6 +79,11 @@ + + + true + + diff --git a/Documentation/Blazorise.Docs/Components/DocsNewFeatureBadge.razor b/Documentation/Blazorise.Docs/Components/DocsNewFeatureBadge.razor new file mode 100644 index 0000000000..4e2d9a5a91 --- /dev/null +++ b/Documentation/Blazorise.Docs/Components/DocsNewFeatureBadge.razor @@ -0,0 +1,5 @@ +@ChildContent +New +@code { + [Parameter] public RenderFragment ChildContent { get; set; } +} diff --git a/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor b/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor index f30c097a8d..501cae4ce3 100644 --- a/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor +++ b/Documentation/Blazorise.Docs/Components/DocsPageSectionContent.razor @@ -1,5 +1,31 @@ -
+@if ( !string.IsNullOrWhiteSpace( FrameUrl ) ) +{ +
+ + + + + + +
+} +
- @ChildContent + @if ( FrameView == "desktop" ) + { + @ChildContent + } + else + { +
+