Skip to content
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.

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

Ribbon component #652

Merged
merged 10 commits into from
Apr 14, 2024
Merged
Changes from 1 commit
Commits
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
Next Next commit
Ribbon component- draft updates
  • Loading branch information
gvreddy04 committed Apr 11, 2024

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 7d5b7990fe16c3203a329d45ee5a5d8cf79389be
1 change: 1 addition & 0 deletions BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@
</ItemGroup>

<ItemGroup>
<Folder Include="Pages\Ribbon\" />
<Folder Include="Pages\SortableList\" />
</ItemGroup>

5 changes: 5 additions & 0 deletions BlazorBootstrap.Demo.RCL/Pages/Index.razor
Original file line number Diff line number Diff line change
@@ -160,6 +160,11 @@
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ribbon">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon <Badge Color="BadgeColor.Danger">New</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/script-loader">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CodeSlash" class="me-2" /> Script Loader</h4>
20 changes: 20 additions & 0 deletions BlazorBootstrap.Demo.RCL/Pages/Ribbon/RibbonDocumentation.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@page "/ribbon"

<PageTitle>@title</PageTitle>

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Ribbon</h1>
<div class="lead mb-3">Documentation and examples for using the Blazor Progress component featuring support for stacked bars, animated backgrounds, and text labels.</div>

@* <CarbonAds /> *@

<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
<Demo Type="typeof(Ribbon_Demo_01_How_It_Works)" />

@code {
private string pageUrl = "/ribbon";
private string title = "Blazor Ribbon Component";
private string description = "Documentation and examples for using Blazor Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."; // TODO: update
private string imageUrl = "https://i.imgur.com/MK142lQ.png"; // TODO: update
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<Ribbon />
17 changes: 9 additions & 8 deletions BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs
Original file line number Diff line number Diff line change
@@ -64,14 +64,15 @@ private IEnumerable<NavItem> GetNavItems()
new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
new (){ Id = "519", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
new (){ Id = "520", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
new (){ Id = "521", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
new (){ Id = "521", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
new (){ Id = "522", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
new (){ Id = "523", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
new (){ Id = "524", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
new (){ Id = "525", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
new (){ Id = "519", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
new (){ Id = "520", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
new (){ Id = "521", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
new (){ Id = "522", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
new (){ Id = "523", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
new (){ Id = "524", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
new (){ Id = "525", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
new (){ Id = "526", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
new (){ Id = "527", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },

new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },
63 changes: 63 additions & 0 deletions blazorbootstrap/Components/Ribbon/Ribbon.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
@namespace BlazorBootstrap
@inherits BlazorBootstrapComponentBase

<div>
<nav>
<div id="AR1C4BUKJHQJ3" class="nav nav-underline border-bottom" role="tablist">
<button class="nav-link active" id="AR1C4BUKJHQK9" data-bs-toggle="tab" data-bs-target="#nav-AR1C4BUKJHQK9" type="button" role="tab" aria-selected="true">Home</button>
<button class="nav-link " id="AR1C4BUKJHQLA" data-bs-toggle="tab" data-bs-target="#nav-AR1C4BUKJHQLA" type="button" role="tab" aria-selected="false" tabindex="-1">Send / Receive</button>
<button class="nav-link " id="AR1C4BUKJHQLB" data-bs-toggle="tab" data-bs-target="#nav-AR1C4BUKJHQLB" type="button" role="tab" aria-selected="false" tabindex="-1">View</button>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade active show" id="nav-AR1C4BUKJHQK9" role="tabpanel" aria-labelledby="AR1C4BUKJHQK9">
<div class="d-flex flex-row border">
<!-- New -->
<div class="d-flex flex-column align-items-center my-1 border-end">
<div class="flex-grow-1">
<div class="d-flex flex-row">
<!-- New Email -->
<div class="d-flex flex-column align-items-center ribbon-tile ms-1 mt-1 p1">
<div><Icon Class="fs-3 text-success" Name="IconName.EnvelopePlus" /></div>
<div class="text-center">New Email</div>
</div>
<!-- New Items -->
<div class="d-flex flex-column align-items-center ribbon-tile me-1 mt-1 p-1">
<div><Icon Class="fs-3" Name="IconName.Calendar3Event" /></div>
<div class="text-center">Appointment</div>
</div>
</div>
</div>
<div class="mb-1">New</div>
</div>
<!-- Delete -->
<div class="d-flex flex-column align-items-center my-1 border-end">
<div class="flex-grow-1">
<div class="d-flex flex-row">
<!-- Delete -->
<div class="d-flex flex-column align-items-center ribbon-tile ms-1 mt-1 p-1">
<div><Icon Class="fs-3" Name="IconName.Trash" /></div>
<div class="text-center">Delete</div>
</div>
<!-- Archive -->
<div class="d-flex flex-column align-items-center ribbon-tile me-1 mt-1 p-1">
<div><Icon Class="fs-3 text-success" Name="IconName.Archive" /></div>
<div class="text-center">Archive</div>
</div>
</div>
</div>
<div class="mb-1">Delete</div>
</div>
</div>
</div>

<div class="tab-pane fade" id="nav-AR1C4BUKJHQLA" role="tabpanel" aria-labelledby="AR1C4BUKJHQLA">

<p class="mt-3">This is the placeholder content for the <b>Send / Receive</b> tab.</p>
</div>

<div class="tab-pane fade" id="nav-AR1C4BUKJHQLB" role="tabpanel" aria-labelledby="AR1C4BUKJHQLB">
<p class="mt-3">This is the placeholder content for the <b>View</b> tab.</p>
</div>
</div>
</div>
53 changes: 53 additions & 0 deletions blazorbootstrap/Components/Ribbon/Ribbon.razor.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
namespace BlazorBootstrap;

public partial class Ribbon : BlazorBootstrapComponentBase
{
#region Fields and Constants

#endregion

#region Methods

protected override void BuildClasses()
{
//this.AddClass(BootstrapClassProvider.Modal);

base.BuildClasses();
}

protected override void BuildStyles()
{
//this.AddStyle("display:block", showBackdrop);

base.BuildStyles();
}

/// <inheritdoc />
protected override async ValueTask DisposeAsync(bool disposing)
{
if (disposing)
{
}

await base.DisposeAsync(disposing);
}

protected override void OnInitialized()
{
}

#endregion

#region Properties, Indexers

/// <inheritdoc />
protected override bool ShouldAutoGenerateId => true;

/// <summary>
/// Specifies the content to be rendered inside this.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }

#endregion
}
11 changes: 11 additions & 0 deletions blazorbootstrap/Components/Ribbon/Ribbon.razor.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.ribbon-tile {
cursor: pointer;
/*width: 64px;*/
}

.ribbon-tile:hover {
background-color: rgba(var(--bs-secondary-rgb), 0.10) !important;
}

.ribbon-tile.active {
}