Skip to content

Add parent panel support #365

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
ivanilson22 merged 9 commits into from
Oct 20, 2026
Merged

Add parent panel support #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0db2cd3
Add parent panel support
gumbarros Oct 13, 2026
c8e6fae
Merge branch 'refs/heads/main' into parent-panel-support
gumbarros Oct 13, 2026
979d6c3
Update version
gumbarros Oct 13, 2026
f47346a
Merge branch 'main' into parent-panel-support
gumbarros Oct 13, 2026
5f72152
Merge branch 'main' into parent-panel-support
gumbarros Oct 15, 2026
27d5b37
Refactor html structure
gumbarros Oct 15, 2026
76c6cf6
Merge branch 'main' into parent-panel-support
gumbarros Oct 16, 2026
3961c3d
Standardize success messages and improve parent panel layout
gumbarros Oct 19, 2026
da3abac
Merge branch 'main' into parent-panel-support
gumbarros Oct 20, 2026
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: 1 addition & 5 deletions src/Html/JJConsulting.Html.Bootstrap.TagHelpers/CardTagHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,13 @@ public class CardTagHelper : TagHelper
[HtmlAttributeName("color")]
public BootstrapColor Color { get; set; }

[HtmlAttributeName("layout")]
public PanelLayout? Layout { get; set; }

public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
var card = new JJCard
{
Name = Name ?? Title?.ToLower().Replace(" ", "_")!,
Title = Title,
Color = Color,
Layout = Layout ?? PanelLayout.Panel
Color = Color
};

if (Icon != default)
Expand Down
141 changes: 47 additions & 94 deletions src/Html/JJConsulting.Html.Bootstrap/Components/JJCard.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,119 +16,72 @@ public class JJCard : HtmlComponent

public string? Tooltip { get; set; }

public PanelLayout Layout { get; set; }

public BootstrapColor Color { get; set; } = BootstrapColor.Default;

public IHtmlContent? Content { get; set; }

private bool HasTitle => !string.IsNullOrEmpty(Title) || !string.IsNullOrEmpty(SubTitle);

public FontAwesomeIcon? Icon { get; set; }



protected override HtmlBuilder BuildHtml()
{
var html = Layout switch
{
PanelLayout.Well => GetHtmlWell(),
PanelLayout.NoDecoration => GetHtmlNoDecoration(),
_ => GetHtmlPanel()
};

if (BootstrapHelper.Version > 3)
{
return new HtmlBuilder(HtmlTag.Div)
.Append(html);
}

return html;
}

private HtmlBuilder GetHtmlPanel()
{
var html = new HtmlBuilder(HtmlTag.Div)
.WithAttributes(Attributes)
.WithNameAndId(Name)
.WithCssClass(CssClass)
.WithCssClass(BootstrapHelper.GetPanel(Color.ToColorString()));
.WithCssClass(CssClass);

html.AppendIf(!string.IsNullOrEmpty(Title), HtmlTag.Div, header =>
{
header.WithCssClass(BootstrapHelper.GetPanelHeading(Color.ToColorString()));
if (Icon is not null)
{
var icon = new JJIcon(Icon.Value);
icon.CssClass += $" {BootstrapHelper.MarginRight}-1";
header.AppendComponent(icon);
}
html.WithCssClass("card");
if (Color != BootstrapColor.Default)
html.WithCssClass($"border-{Color.ToColorString()}");

header.AppendText(Title);
html.AppendDiv(body =>
{
body.WithCssClass("card-body");

if (Tooltip is not null)
if (HasTitle)
{
var icon = new JJIcon(FontAwesomeIcon.QuestionCircle);
icon.CssClass += " help-description";
icon.Attributes["title"] = Tooltip;
icon.Attributes[BootstrapHelper.DataToggle] = "tooltip";
header.AppendComponent(icon);
body.Append(HtmlTag.H5, title =>
{
title.WithCssClass("card-title");
if (Color != BootstrapColor.Default)
title.WithCssClass($"text-{Color.ToColorString()}");

if (Icon is not null)
{
var icon = new JJIcon(Icon.Value);
icon.CssClass += " me-2";
title.AppendComponent(icon);
}

title.AppendText(Title);

if (Tooltip is not null)
{
var tooltipIcon = new JJIcon(FontAwesomeIcon.QuestionCircle);
tooltipIcon.CssClass += " help-description ms-2";
tooltipIcon.Attributes["title"] = Tooltip;
tooltipIcon.Attributes[BootstrapHelper.DataToggle] = "tooltip";
title.AppendComponent(tooltipIcon);
}
});

if (!string.IsNullOrEmpty(SubTitle))
{
body.Append(HtmlTag.H6, subtitle =>
{
subtitle.WithCssClass("card-subtitle mb-2 text-body-secondary");
subtitle.AppendText(SubTitle);
});
}
}
});

html.Append(HtmlTag.Div, d =>
{
d.WithCssClass(BootstrapHelper.PanelBody);
if (!string.IsNullOrEmpty(SubTitle))
body.AppendDiv(content =>
{
d.Append(BootstrapUtils.GetBlockquote(null, SubTitle));
}

d.Append(Content);
content.WithCssClass("card-text");
content.Append(Content);
});
});

return html;
}

private HtmlBuilder GetHtmlNoDecoration()
{
var html = new HtmlBuilder(HtmlTag.Div)
.WithAttributes(Attributes)
.WithNameAndId(Name)
.WithCssClass(CssClass);

if (Icon is not null)
{
var icon = new JJIcon(Icon.Value);
icon.CssClass += $" {BootstrapHelper.MarginRight}-1";
html.AppendComponent(icon);
}

if (HasTitle)
{
html.Append(BootstrapUtils.GetBlockquote(Title, SubTitle));
}

html.Append(Content);

return html;
}

private HtmlBuilder GetHtmlWell()
{
var html = new HtmlBuilder(HtmlTag.Div)
.WithAttributes(Attributes)
.WithNameAndId(Name)
.WithCssClass(CssClass);

html.WithCssClass(BootstrapHelper.Version == 3 ? "well" : "card card-body");

if (HasTitle)
{
html.Append(BootstrapUtils.GetBlockquote(Title, SubTitle));
}

html.Append(Content);

return html;
}
}
}
61 changes: 10 additions & 51 deletions src/Html/JJConsulting.Html.Bootstrap/Components/JJCollapsePanel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,16 @@ protected override HtmlBuilder BuildHtml()
{
var root = new HtmlBuilder(HtmlTag.Div);

root.WithCssClass(CssClass);

root.Append(HtmlTag.Input, input =>
{
input.WithAttribute("hidden", "hidden");
input.WithNameAndId($"{Name}-is-open");
input.WithValue(IsCollapseOpen ? "1" : "0");
});

root.Append(BootstrapHelper.Version < 5 ? GetPanel() : GetAccordion());
root.Append(GetAccordion());

root.AppendScript($"CollapsePanelListener.listen('{Name}')");

Expand All @@ -90,14 +92,16 @@ private HtmlBuilder GetAccordion()
private HtmlBuilder GetAccordionHeader()
{
var h2 = new HtmlBuilder(HtmlTag.H2)
.WithCssClass("accordion-header ")
.WithCssClass("accordion-header")
.WithAttribute("id", $"{Name}-header")
.Append(HtmlTag.Button, (button) =>
{
button.WithCssClass($"accordion-button {(!IsCollapseOpen ? "collapsed" : "")}");
button.WithAttribute("type", "button");
button.WithDataAttribute("toggle", "collapse");
button.WithDataAttribute("target", $"#{Name}-collapse");
button.WithAttribute("aria-expanded", IsCollapseOpen.ToString().ToLowerInvariant());
button.WithAttribute("aria-controls", $"{Name}-collapse");
button.AppendDiv(div =>
{
div.WithId($"{Name}-title");
Expand All @@ -117,7 +121,7 @@ private HtmlBuilder GetAccordionBody()
var body = new HtmlBuilder(HtmlTag.Div)
.WithAttribute("id", $"{Name}-collapse")
.WithCssClass("accordion-collapse collapse")
.WithCssClassIf(IsCollapseOpen, BootstrapHelper.Show)
.WithCssClassIf(IsCollapseOpen, "show")
.WithAttribute("aria-labelledby", $"{Name}-header")
.WithDataAttribute("parent", $"#{Name}")
.Append(GetBody());
Expand All @@ -126,50 +130,6 @@ private HtmlBuilder GetAccordionBody()

#endregion

#region Bootstrap 3/4 Panel

private HtmlBuilder GetPanel()
{
var panel = new HtmlBuilder(HtmlTag.Div)
.WithCssClass(BootstrapHelper.PanelGroup)
.Append(HtmlTag.Div, div =>
{
div.WithCssClass(BootstrapHelper.GetPanel(Color.ToColorString()));
div.Append(GetPanelHeading());
div.Append(HtmlTag.Div, body =>
{
body.WithNameAndId(Name)
.WithCssClass("panel-collapse collapse")
.WithCssClassIf(IsCollapseOpen, BootstrapHelper.Show)
.Append(GetBody());
});
});
return panel;
}

private HtmlBuilder GetPanelHeading()
{
var panelHeading = new HtmlBuilder(HtmlTag.Div)
.WithCssClass(BootstrapHelper.GetPanelHeading(Color.ToColorString()))
.WithAttribute("href", "#collapseOne")
.WithDataAttribute("toggle", "collapse")
.WithDataAttribute("target", $"#{Name}")
.WithAttribute("aria-expanded", IsCollapseOpen.ToString().ToLower())
.Append(HtmlTag.Div, div =>
{
div.WithCssClass($"{BootstrapHelper.PanelTitle} unselectable");
div.Append(HtmlTag.A, a =>
{
a.AppendComponent(TitleIcon);
a.AppendTextIf(TitleIcon != null, "\u00A0");
a.AppendText(Title);
});
});
return panelHeading;
}

#endregion

private HtmlBuilder GetBody()
{
var panelBody = new HtmlBuilder(HtmlTag.Div);
Expand All @@ -184,9 +144,8 @@ private HtmlBuilder GetBody()

if (Buttons.Count > 0)
panelBody.Append(GetButtons());

panelBody.WithCssClass(CssClass);
panelBody.WithCssClass(BootstrapHelper.Version >= 5 ? "accordion-body" : BootstrapHelper.PanelBody);

panelBody.WithCssClass("accordion-body");

return panelBody;
}
Expand All @@ -210,4 +169,4 @@ private HtmlBuilder GetButtons()

return html;
}
}
}
Loading
Loading