Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Grid, GridRow, GridRowContent

Browse Source
This commit is contained in:
markosteger 2023-03-09 12:44:10 +01:00
parent 602c61568c
commit 516c4f337e
10 changed files with 202 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -431,3 +431,8 @@ FodyWeavers.xsd
**.Runner/**
**.DS_Store
/src/Connected.Components/Models/Alert/AlertOptions.cs
/src/Connected.Components/Components/DatePicker.razor.cs
/src/Connected.Components/Components/FormWizard.razor
/src/Connected.Components/Components/FormWizard.razor.cs
/src/Connected.Components.Showcase.Runner/Program.cs

13
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
View File

@ -906,12 +906,12 @@
<!-- TO DO when modal is open add class to body .scroll-disabled-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" @onclick="ToggleNav" data-bs-target="#staticBackdrop">
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
Launch backdrop modal
</button>
<!-- Modal -->
<div class="modal fade @NavClosed" tabindex="-1">
<div class="modal fade @ModalShown" tabindex="-1">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
@ -922,7 +922,7 @@
ssss
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
<button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
<button type="button" class="btn btn-core">Understood</button>
</div>
</div>
@ -1119,6 +1119,13 @@
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
}
private string ModalShown { get; set; } = "";
private void ToggleModal()
{
ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
}
private string NextSlide { get; set; } = "";

20
src/Connected.Components.Showcase.Runner/Program.cs
View File

@ -1,20 +0,0 @@
using Connected.Components.Showcase.Runner;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Connected.Services;
internal class Program
{
private static async global::System.Threading.Tasks.Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddModalDialogService();
await builder.Build().RunAsync();
}
}

5
src/Connected.Components/Components/Grid.razor Normal file
View File

@ -0,0 +1,5 @@
<CascadingValue Value="this">
<div class="@GridClass">
@ChildContent
</div>
</CascadingValue>

41
src/Connected.Components/Components/Grid.razor.cs Normal file
View File

@ -0,0 +1,41 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Grid: ComponentBase
{
public List<GridRow> Rows { get; set; } = new();
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public bool Dense { get; set; } = true;
[Parameter]
public bool ContainsImage { get; set; } = true;
[Parameter]
public bool ShowSelect { get; set; } = true;
[Parameter]
public bool Collapsable { get; set; } = true;
[Parameter]
public string Class { get; set; } = string.Empty;
private string GridClass
{
get
{
return new CssBuilder("data-grid")
.AddClass("dense", Dense)
.AddClass("image", ContainsImage)
.AddClass("select", ShowSelect)
.AddClass("collapse", Collapsable)
.AddClass(Class)
.Build();
}
}
}

23
src/Connected.Components/Components/GridRow.razor Normal file
View File

@ -0,0 +1,23 @@
<CascadingValue Value="this">
<div class="@GridRowClass">
<div class="data-grid-select">
<label class="toggle-group m-0" for="toggle-s11">
<input class="toggle-input" id="toggle-s11" name="toggle" type="checkbox">
<div class="toggle-fill"></div>
</label>
</div>
<div class="data-grid-img">
<img class="img-fluid" src="https://source.unsplash.com/random?face" />
</div>
<!-- Row content -->
<div class="data-grid-container">
@ChildContent
</div>
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
</div>
</div>
</CascadingValue>

48
src/Connected.Components/Components/GridRow.razor.cs Normal file
View File

@ -0,0 +1,48 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class GridRow : ComponentBase
{
[CascadingParameter]
public Grid Parent { get; set; }
public List<GridRowContent> Children { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public bool CollapsedItemShown { get; set; } = false;
private void ToggleNav()
{
CollapsedItemShown = !CollapsedItemShown;
}
[Parameter]
public string Class { get; set; } = string.Empty;
[Parameter]
public GridRowTemplate? Template { get; set; } = null;
private string GridRowClass
{
get
{
return new CssBuilder("data-grid-row-content")
.AddClass("show",CollapsedItemShown)
.AddClass(Class)
.Build();
}
}
protected override async Task OnInitializedAsync()
{
if (Parent.Rows is null) Parent.Rows = new();
Parent.Rows.Add(this);
await base.OnInitializedAsync();
}
}

3
src/Connected.Components/Components/GridRowContent.razor Normal file
View File

@ -0,0 +1,3 @@
<div class="@GeneratedRowContentClass">
@ChildContent
</div>

46
src/Connected.Components/Components/GridRowContent.razor.cs Normal file
View File

@ -0,0 +1,46 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class GridRowContent : ComponentBase
{
[CascadingParameter]
public GridRow? Parent { get; set; }
/// <summary>
/// Text shown inside the button
/// Options: any string variable
/// Default: string.Empty
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// Disabled or enabled.
/// Default: false
/// </summary>
[Parameter]
public bool Collapsable { get; set; } = false;
private string GeneratedRowContentClass
{
get
{
return new CssBuilder("row")
.AddClass("collapsed", Collapsable)
.AddClass("show", (Collapsable ? Parent?.CollapsedItemShown : false))
.Build();
}
}
protected override async Task OnInitializedAsync()
{
if (Parent is not null)
{
if (Parent.Children is null) Parent.Children = new();
Parent.Children.Add(this);
}
await base.OnInitializedAsync();
}
}

21
src/connected.components/Models/Alert/AlertOptions.cs Normal file
View File

@ -0,0 +1,21 @@
namespace Connected.Models.Alert;
public class AlertOptions
{
Severity Severity { get; set; } = Severity.Info;
public bool ShowHeader { get; set; } = true;
public bool Cancelable { get; set; } = true;
public AlertOptions()
{
Severity = Severity.Info;
ShowHeader = true;
Cancelable = true;
}
public AlertOptions(Severity severity, bool showHeader, bool cancelable)
{
Severity = severity;
ShowHeader = showHeader;
Cancelable = cancelable;
}
}