Skip to content

Bootstrap 5 #127

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
Oct 29, 2024
Merged

Bootstrap 5 #127

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
41a7a68
Add css framework enum and BS5
ithielnor Oct 22, 2024
a693729
Switch to using info version for nuget
ithielnor Oct 24, 2024
1867e7b
Add another bs5 class
ithielnor Oct 25, 2024
c296bf9
Put the nuspec versioning back as it was
ithielnor Oct 28, 2024
f5fb27f
Use the correct data attribute for bs5
ithielnor Oct 28, 2024
2f5a073
Use bs version instead of boolean
ithielnor Oct 28, 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: 3 additions & 3 deletions Build/CommonAssemblyInfo.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
//
// You can specify all the values or you can default the Revision and Build Numbers
// by using the '*' as shown below:
[assembly: AssemblyVersion("3.7.7")]
[assembly: AssemblyFileVersion("3.7.7")]
//[assembly: AssemblyInformationalVersion("2.5-filters")]
[assembly: AssemblyVersion("3.7.8")]
[assembly: AssemblyFileVersion("3.7.8")]
[assembly: AssemblyInformationalVersion("3.7.8-beta")]
46 changes: 44 additions & 2 deletions Griddly.Mvc/GriddlyCss.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,26 @@ public struct GriddlyCss
public string FloatRight { get; set; }
public string GriddlyDefault { get; set; }
public string TableDefault { get; set; }
public string FooterDefault { get; set; }
public string ButtonDefault { get; set; }
public GriddlyCssIcons Icons { get; set; }
public bool IsBootstrap4 { get; set; }
[Obsolete("Use Is(CssFramework.Bootstrap4)")]
public bool IsBootstrap4
{
get => this.Is(CssFramework.Bootstrap4);
set => this.Framework = value ? CssFramework.Bootstrap4 : CssFramework.Bootstrap3;
}
public bool InlineFilterUseFilterClass { get; set; }
public CssFramework Framework { get; set; }

public bool Is(params CssFramework[] inFrameworks)
{
return inFrameworks != null && inFrameworks.Contains(this.Framework);
}

public static GriddlyCss Bootstrap3Defaults = new GriddlyCss()
{
Framework = CssFramework.Bootstrap3,
TextCenter = "text-center",
TextRight = "text-right",
FloatRight = "pull-right",
Expand All @@ -47,7 +60,7 @@ public struct GriddlyCss

public static GriddlyCss Bootstrap4Defaults = new GriddlyCss()
{
IsBootstrap4 = true,
Framework = CssFramework.Bootstrap4,
TextCenter = "text-center",
TextRight = "text-right",
FloatRight = "float-right",
Expand All @@ -66,4 +79,33 @@ public struct GriddlyCss
CaretDown = "fa fa-caret-down"
}
};

public static GriddlyCss Bootstrap5Defaults = new GriddlyCss()
{
Framework = CssFramework.Bootstrap5,
TextCenter = "text-center",
TextRight = "text-end",
FloatRight = "float-end",
GriddlyDefault = null,
TableDefault = "table table-bordered table-hover",
ButtonDefault = "btn btn-outline-secondary",
Icons = new GriddlyCssIcons()
{
Calendar = "fa fa-calendar-alt",
Remove = "fa fa-times",
ListMultipleSelected = "fa fa-check",
ListSingleSelected = "fas fa-check-circle",
Check = "fa fa-check-square",
Filter = "fa fa-filter",
Clear = "fa fa-ban",
CaretDown = "fa fa-caret-down"
}
};
}

public enum CssFramework
{
Bootstrap3,
Bootstrap4,
Bootstrap5,
}
6 changes: 4 additions & 2 deletions Griddly.Mvc/GriddlySettings.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ public abstract class GriddlySettings : IGriddlyFilterSettings
public static string DefaultTableClassName { get => DefaultCss.TableDefault; set => DefaultCss.TableDefault = value; }
[Obsolete("Use DefaultCss.ButtonDefault")]
public static string DefaultButtonClassName { get => DefaultCss.ButtonDefault; set => DefaultCss.ButtonDefault = value; }
[Obsolete("Use DefaultCss.IsBootstrap4")]
public static bool IsBootstrap4 => DefaultCss.IsBootstrap4;
[Obsolete("Use DefaultCss.Is(CssFramework.Bootstrap4)")]
public static bool IsBootstrap4 => DefaultCss.Is(CssFramework.Bootstrap4);
#endregion

#if NETFRAMEWORK
Expand Down Expand Up @@ -106,6 +106,7 @@ public GriddlySettings(IHtmlHelper html)

ClassName = DefaultCss.GriddlyDefault;
TableClassName = DefaultCss.TableDefault;
FooterClassName = DefaultCss.FooterDefault;
FooterTemplate = DefaultFooterTemplate;
HeaderTemplate = DefaultHeaderTemplate;
FilterModalHeaderTemplate = DefaultFilterModalHeaderTemplate;
Expand Down Expand Up @@ -143,6 +144,7 @@ public static void ConfigureBootstrap4Defaults()
public string Title { get; set; }
public string ClassName { get; set; }
public string TableClassName { get; set; }
public string FooterClassName { get; set; }
public FilterMode? AllowedFilterModes { get; set; }
public FilterMode? InitialFilterMode { get; set; }
public bool IsFilterFormInline { get; set; }
Expand Down
20 changes: 13 additions & 7 deletions Griddly.NetCore.Razor/Pages/Shared/Griddly/BootstrapButton.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@

bool clearSelectionOnAction = button.ClearSelectionOnAction ?? (button.Action == GriddlyButtonAction.Ajax || button.Action == GriddlyButtonAction.AjaxBulk);

<a data-role="griddly-button" class="@(!item.isMenuItem ? css.ButtonDefault : null) @button.ClassName @(item.isDropdown && button.DropdownCaret != GriddlyDropdownCaret.Split ? "dropdown-toggle" : null) @(!button.Enabled || button.EnableOnSelection == true ? "disabled" : null) @(!string.IsNullOrWhiteSpace(button.Icon) ? "btn-with-icon" : null) @(item.isMenuItem && css.IsBootstrap4 ? "dropdown-item" : null)"
<a data-role="griddly-button" class="@(!item.isMenuItem ? css.ButtonDefault : null) @button.ClassName @(item.isDropdown && button.DropdownCaret != GriddlyDropdownCaret.Split ? "dropdown-toggle" : null) @(!button.Enabled || button.EnableOnSelection == true ? "disabled" : null) @(!string.IsNullOrWhiteSpace(button.Icon) ? "btn-with-icon" : null) @(item.isMenuItem && css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "dropdown-item" : null)"
@*onclick="@(button.Action == GriddlyButtonAction.Javascript ? button.Argument : null)"*@
title="@button.Title"
@Html.AttributeIf("target", button.Action == GriddlyButtonAction.Navigate && !string.IsNullOrWhiteSpace(button.Target), button.Target)
href="@(href ?? "javscript:void()")"
@Html.AttributeIf("data-toggle", button.Action != GriddlyButtonAction.Navigate && button.Action != GriddlyButtonAction.Javascript, button.Action.ToString().ToLower())
@Html.AttributeIf("data-toggle", item.isDropdown && button.DropdownCaret != GriddlyDropdownCaret.Split, "dropdown")
@Html.AttributeIf(css.Is(CssFramework.Bootstrap3, CssFramework.Bootstrap4) ? "data-toggle" : "data-bs-toggle", item.isDropdown && button.DropdownCaret != GriddlyDropdownCaret.Split, "dropdown")
@Html.AttributeIf("data-onclick", button.Action == GriddlyButtonAction.Javascript && !string.IsNullOrWhiteSpace(button.Argument), button.Argument)
@Html.AttributeIf("data-url", button.Action == GriddlyButtonAction.Ajax || button.Action == GriddlyButtonAction.AjaxBulk || button.Action == GriddlyButtonAction.Post || button.Action == GriddlyButtonAction.PostCriteria, button.Argument)
@Html.AttributeIf("data-target", button.Action != GriddlyButtonAction.Navigate && !string.IsNullOrWhiteSpace(button.Target), button.Target)
Expand All @@ -72,7 +72,7 @@
}
@button.Text

@if (item.isDropdown && button.DropdownCaret == GriddlyDropdownCaret.Inline && !css.IsBootstrap4)
@if (item.isDropdown && button.DropdownCaret == GriddlyDropdownCaret.Inline && css.Is(CssFramework.Bootstrap3))
{
<span class="@css.Icons.CaretDown"></span>
}
Expand All @@ -82,7 +82,7 @@
Func<List<GriddlyButton>, IHtmlContent> RenderList = @<text>@{
foreach (GriddlyButton button in item)
{
if (css.IsBootstrap4)
if (css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5))
{
if (button.IsSeparator)
{
Expand Down Expand Up @@ -149,14 +149,20 @@ else
@RenderLink((Model, true, false))
@if (Model.DropdownCaret == GriddlyDropdownCaret.Split)
{
<button type="button" class="dropdown-toggle dropdown-toggle-split @css.ButtonDefault" data-toggle="dropdown">
@if (!css.IsBootstrap4)
<button type="button" class="dropdown-toggle dropdown-toggle-split @css.ButtonDefault" data-toggle="@(css.Is(CssFramework.Bootstrap3, CssFramework.Bootstrap4) ? "dropdown" : null)" data-bs-toggle="@(css.Is(CssFramework.Bootstrap5) ? "dropdown" : null)">
@if (css.Is(CssFramework.Bootstrap3))
{
<span class="@css.Icons.CaretDown"></span>
}
</button>
}
@if (css.IsBootstrap4)
@if (css.Is(CssFramework.Bootstrap5))
{
<div class="dropdown-menu @(Model.AlignRight ? "dropdown-menu-end float-end" : "")">
@RenderList(Model.Buttons)
</div>
}
else if (css.Is(CssFramework.Bootstrap4))
{
<div class="dropdown-menu @(Model.AlignRight ? "dropdown-menu-right float-right" : "")">
@RenderList(Model.Buttons)
Expand Down
4 changes: 2 additions & 2 deletions Griddly.NetCore.Razor/Pages/Shared/Griddly/Griddly.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,9 +391,9 @@
@if (settings.FooterTemplate == null || simple)
{
<span class="griddly-summary">
<span class="@(settings.Css.IsBootstrap4 ? "d-none d-sm-inline" : "hidden-xs")">Records</span>
<span class="@(settings.Css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "d-none d-sm-inline" : "hidden-xs")">Records</span>
<span class="griddly-recordstart">@(Model.PageNumber * Model.PageSize + (Model.Total > 0 ? 1 : 0))</span>
<span class="@(settings.Css.IsBootstrap4 ? "d-none d-sm-inline" : "hidden-xs")">through</span><span class="@(settings.Css.IsBootstrap4 ? "d-inline d-sm-none" : "visible-xs-inline")">-</span>
<span class="@(settings.Css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "d-none d-sm-inline" : "hidden-xs")">through</span><span class="@(settings.Css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "d-inline d-sm-none" : "visible-xs-inline")">-</span>
<span class="griddly-recordend">@(Model.PageNumber * Model.PageSize + Model.Count)</span>
of <span class="griddly-recordtotal">@Model.Total</span>
</span>
Expand Down
6 changes: 3 additions & 3 deletions Griddly.NetCore.Razor/Pages/Shared/Griddly/GriddlyFilterForm.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
Func<SelectListItem, IHtmlContent> RenderListItem = @<option value="@item.Value" selected="@item.Selected">@item.Text</option>;

Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGroupAddon = @<text>@{
if (css.IsBootstrap4)
if (css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5))
{
<div class="input-group-@(item.prepend ? "prepend" : "append")"><span class="input-group-text">@item.content(null)</span></div>
}
Expand Down Expand Up @@ -59,7 +59,7 @@ Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGro
@Html.AttributeIf("data-griddly-filter-isnullable", filterList != null, x => filterList.IsNullable.ToString().ToLower())
@Html.AttributeIf("data-griddly-filter-displayitemcount", filterList != null, x => filterList.DisplayItemCount)
@Html.AttributeIf("data-griddly-filter-displayincludecaption", filterList != null, x => filterList.DisplayIncludeCaption.ToString().ToLower())>
<label for="[email protected]" class="col-sm-3 @(css.IsBootstrap4 ? "col-form-label" : "control-label")">@filter.Caption</label>
<label for="[email protected]" class="col-sm-3 @(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "col-form-label" : "control-label")">@filter.Caption</label>
<div class="col-sm-9">
@if (filterBox != null)
{
Expand Down Expand Up @@ -144,7 +144,7 @@ Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGro
{
filterList.SetSelectedItems(defaultValue);

<select class="form-control" id="[email protected]" name="@filter.Field" @(filterList.IsMultiple ? "multiple" : null) @if (filter.InputHtmlAttributes != null) { foreach (var attr in filter.InputHtmlAttributes) { <text> @attr.Key="@attr.Value" </text> } }>
<select class="form-control @(css.Is(CssFramework.Bootstrap5) ? "form-select" : null)" id="[email protected]" name="@filter.Field" @(filterList.IsMultiple ? "multiple" : null) @if (filter.InputHtmlAttributes != null) { foreach (var attr in filter.InputHtmlAttributes) { <text> @attr.Key="@attr.Value" </text> } }>
@foreach (SelectListItem item in filterList.Items)
{
SelectListItemGroup group = item as SelectListItemGroup;
Expand Down
22 changes: 11 additions & 11 deletions Griddly.NetCore.Razor/Pages/Shared/Griddly/GriddlyFilterInline.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,25 @@

Func<(GriddlyFilterList filter, SelectListItem item, bool isGrouped), IHtmlContent> RenderListItem = @<text>@{
var className = (item.item.Selected ? "griddly-filter-selected" : null) + " " + (item.isGrouped ? "griddly-list-group" : null);
if (!css.IsBootstrap4)
if (css.Is(CssFramework.Bootstrap3))
{
@Html.Raw("<li class=\"" + className + "\">")
}

<a href="javascript:;" class="@(css.IsBootstrap4 ? "dropdown-item " + className : null)">
<a href="javascript:;" class="@(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "dropdown-item " + className : null)">
<input name="@item.filter.Field" type="@(item.filter.IsMultiple ? "checkbox" : "radio")" checked="@(item.item.Selected)" value="@item.item.Value" />
<i class="@(item.filter.IsMultiple ? css.Icons.ListMultipleSelected : css.Icons.ListSingleSelected) griddly-filter-selected-indicator"></i>
@item.item.Text
</a>

if (!css.IsBootstrap4)
if (css.Is(CssFramework.Bootstrap3))
{
@Html.Raw("</li>")
}
}</text>;

Func<(GriddlyFilterList filterList, SelectListItemGroup group), IHtmlContent> ListGroupHeader = @<text>@{
var tag = css.IsBootstrap4 ? "div" : "li";
var tag = css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "div" : "li";
var className = item.filterList.IsMultiple && item.group.Items.All(x => x.Selected) ? "griddly-filter-selected" : null;

@Html.Raw("<" + tag + " class=\"griddly-list-group-header " + className + "\">")
Expand All @@ -54,7 +54,7 @@ Func<(GriddlyFilterList filterList, SelectListItemGroup group), IHtmlContent> Li

Func<Func<dynamic, IHtmlContent>, IHtmlContent> DropdownMenu = @<text>@{
var css = Model.Css;
if (css.IsBootstrap4)
if (css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5))
{
<div class="dropdown-menu">
@item(null)
Expand All @@ -70,7 +70,7 @@ Func<Func<dynamic, IHtmlContent>, IHtmlContent> DropdownMenu = @<text>@{

Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGroupAddon = @<text>@{
var css = Model.Css;
if (css.IsBootstrap4)
if (css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5))
{
<div class="input-group-@(item.prepend?"prepend":"append")"><span class="input-group-text">@item.content(null)</span></div>
}
Expand Down Expand Up @@ -197,7 +197,7 @@ Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGro
{
<span class="input-group-addon">%</span>
}*@
<span class="@(css.IsBootstrap4 ? "input-group-append" : "input-group-btn")">
<span class="@(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "input-group-append" : "input-group-btn")">
<a class="@css.ButtonDefault griddly-filter-clear" href="javascript:;" tabindex="-1"><i class="@(css.Icons.Remove)"></i></a>
</span>
</div>
Expand All @@ -219,7 +219,7 @@ Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGro
{
<span class="input-group-addon">%</span>
}*@
<span class="@(css.IsBootstrap4 ? "input-group-append" : "input-group-btn")">
<span class="@(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "input-group-append" : "input-group-btn")">
<a class="@css.ButtonDefault griddly-filter-clear" href="javascript:;" tabindex="-1"><i class="@(css.Icons.Remove)"></i></a>
</span>
</div>
Expand All @@ -239,7 +239,7 @@ Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGro
{
<span class="input-group-addon">%</span>
}*@
<span class="@(css.IsBootstrap4 ? "input-group-append" : "input-group-btn")">
<span class="@(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "input-group-append" : "input-group-btn")">
<a class="@css.ButtonDefault griddly-filter-clear" href="javascript:;" tabindex="-1"><i class="@(css.Icons.Remove)"></i></a>
</span>
</div>
Expand All @@ -249,10 +249,10 @@ Func<(Func<dynamic, IHtmlContent> content, bool prepend), IHtmlContent> InputGro
if (filterList.IsMultiple)
{
<div class="input-group griddly-filter-buttons">
<span class="input-group-btn @(css.IsBootstrap4 ? "w-50" : null)">
<span class="input-group-btn @(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "w-50" : null)">
<a class="@css.ButtonDefault griddly-select-all" href="javascript:;"><i class="@(css.Icons.Check)"></i> Select All</a>
</span>
<span class="input-group-btn @(css.IsBootstrap4 ? "w-50" : null)">
<span class="input-group-btn @(css.Is(CssFramework.Bootstrap4, CssFramework.Bootstrap5) ? "w-50" : null)">
<a class="@css.ButtonDefault griddly-clear" href="javascript:;"><i class="@(css.Icons.Clear)"></i> Clear</a>
</span>
</div>
Expand Down
Loading