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

Added Progress and ProgressBar components #12

Merged
merged 22 commits into from Feb 10, 2020
Merged
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
10d35e5
Added progress bar components and class names. Probably going to need…
EvanWeeks Feb 6, 2020
e695f4e
Changed the <Div> to a <div> in order to test using bound attributes …
Feb 6, 2020
a850f95
Merge branch 'master' into evan/progressbar
Feb 6, 2020
7ba792a
Add the IsAnimated property and example on the Showroom screen. Added…
Feb 6, 2020
ce99e41
Added the ProgressBars page to the ClientTestHost project.
Feb 6, 2020
f772bd7
Changed "ValueMin" to "MinValue" and similarly for the Max. Changed r…
Feb 6, 2020
f591364
Changed the exception throws into warnings logged via an injected ILo…
Feb 6, 2020
3ef37cb
Merge branch 'master' into evan/progressbar
EvanWeeks Feb 7, 2020
0175d28
Merge branch 'master' into evan/progressbar
Feb 7, 2020
7131fbf
Merge branch 'evan/progressbar' of https://github.com/EvanWeeks/Blazo…
Feb 7, 2020
76dfb0a
Added XML docs on the progress and progressbar components.
Feb 7, 2020
2fc5f6a
Merge branch 'master' into evan/progressbar
Feb 7, 2020
ed465b8
Merge branch 'master' into evan/progressbar
Feb 7, 2020
2891d0d
Merge remote-tracking branch 'upstream/master'
Feb 10, 2020
ce4e6df
Merge branch 'master' into evan/progressbar
Feb 10, 2020
61101db
Added logging statements to the ProgressBar component using the new p…
Feb 10, 2020
1bd2acb
Merge remote-tracking branch 'upstream/master'
Feb 10, 2020
23e4140
Merging changes from master.
Feb 10, 2020
0340fa8
Changed the progress bar to default to child content if there is any,…
Feb 10, 2020
2dd8cb1
Removed the .Net Core console logger.
Feb 10, 2020
ffbf549
Changed some values in the showroom demo to 10% from 0%.
Feb 10, 2020
ee5ed3e
Changed the log statements around. The previous iteration wasn't usef…
Feb 10, 2020
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -33,6 +33,7 @@
{
new MenuItem { Text = "Jumbotrons", Url = "jumbotrons", Description = "The Jumbotron component is a lightweight and flexible component for showcasing content." },
new MenuItem { Text = "Media", Url = "media", Description = "The Media component is used to build complex and repetitive content where media is positioned alongside content." },
new MenuItem { Text = "Progress Bars", Url = "progressbars", Description = "The Progress component is used to display progress bars, including stacked bars, animated backgrounds, and text labels." },
new MenuItem { Text = "Sizing", Url = "sizing" },
new MenuItem { Text = "Grid", Url = "grids", Description = "Use the powerful grid system to build mobile-first layouts of all shapes and sizes." },
}
@@ -0,0 +1,134 @@
@code {
Spacing headingMarginTop = Spacing.Five;
}

<Heading Level="HeadingLevel.H2">Progress/ProgressBar Component</Heading>
<Paragraph>
The <Anchor Url="https://getbootstrap.com/docs/4.4/components/progress/" OpenInNewTab="true">Progress component</Anchor>
is used to display progress bars, including stacked bars, animated backgrounds, and text labels.
</Paragraph>

<DocsSection ComponentName="ProgressBar" />

<Heading Id="basic-progress-bar" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Basic Progress Bars</Heading>
<Paragraph>
A basic progress bar example.
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="10"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="25"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="50"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="75"></ProgressBar>
</Progress>


<Heading Id="progress-bar-percentage" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Labels</Heading>
<Paragraph>
Set the ShowPercentage property of the ProgressBar component to true to add percentage labels to a progress bar.
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="25" ShowPercentage="true"></ProgressBar>
</Progress>


<Heading Id="progress-bar-height" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Height</Heading>
<Paragraph>
Setting a height value on the Progress element sets the height on the bar.
</Paragraph>

<Progress style="height: 5px;">
<ProgressBar MaxValue="100" MinValue="0" Value="25"></ProgressBar>
</Progress>
&nbsp;
<Progress style="height: 30px;">
<ProgressBar MaxValue="100" MinValue="0" Value="25"></ProgressBar>
</Progress>


<Heading Id="progress-bar-colors" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Backgrounds</Heading>
<Paragraph>
Setting the Color property will allow you to give a progress bar a contextual color.
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="10" Color="NamedColor.Success"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="25" Color="NamedColor.Primary"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="50" Color="NamedColor.Warning"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="75" Color="NamedColor.Danger"></ProgressBar>
</Progress>


<Heading Id="progress-bar-stacked" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Stacked bars</Heading>
<Paragraph>
Adding multiple ProgressBar elements to a Progress element lets you stack those bars on the same line.
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="10" Color="NamedColor.Success"></ProgressBar>
<ProgressBar MaxValue="100" MinValue="0" Value="15" Color="NamedColor.Primary"></ProgressBar>
<ProgressBar MaxValue="100" MinValue="0" Value="25" Color="NamedColor.Warning"></ProgressBar>
<ProgressBar MaxValue="100" MinValue="0" Value="30" Color="NamedColor.Danger"></ProgressBar>
</Progress>


<Heading Id="progress-bar-striped" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Striped</Heading>
<Paragraph>
Setting the IsStriped property to true will give a progress bar a striped texture.
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="10" Color="NamedColor.Success" IsStriped="true"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="25" Color="NamedColor.Primary" IsStriped="true"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="50" Color="NamedColor.Warning" IsStriped="true"></ProgressBar>
</Progress>
&nbsp;
<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="75" Color="NamedColor.Danger" IsStriped="true"></ProgressBar>
</Progress>


<Heading Id="progress-bar-animated" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Animated stripes</Heading>
<Paragraph>
Adding the IsAnimated property and setting it to true will animate the stripes on a progress bar (be sure to set IsStriped to true!)
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="0" Value="35" Color="NamedColor.Success" IsStriped="true" IsAnimated="true" ShowPercentage="true"></ProgressBar>
</Progress>


<Heading Id="progress-bar-warnings" IsAnchor="true" Level="HeadingLevel.H3" MarginTop="@headingMarginTop">Warnings for values out of range.</Heading>
<Paragraph>
If Value is greater than max or less than min, the component uses an ILogger instance to warn. Similarly if Min is greater than Max.
In this case, the application has a browser console logger enabled, so check your dev tools.
</Paragraph>

<Progress>
<ProgressBar MaxValue="100" MinValue="1000" Value="350" Color="NamedColor.Danger" IsStriped="true" IsAnimated="true" ShowPercentage="true"></ProgressBar>
</Progress>
@@ -445,6 +445,30 @@ public static class Paragraphs
public const string Lead = "lead";
}

public static class ProgressBars
{
/// <summary>
/// Add this class mark an element as the outer "shell" of a progress bar.
/// </summary>
public const string Progress = "progress";

/// <summary>
/// Add this class to turn an element into a progress bar. Must be inside of a "progress" element.
/// </summary>
public const string ProgressBar = "progress-bar";

/// <summary>
/// Add this class to make a progress bar striped.
/// </summary>
public const string Striped = "progress-bar-striped";


/// <summary>
/// Add this class to animate the stripes (don't forget to add the "Striped" class!) from right to left.
/// </summary>
public const string Animated = "progress-bar-animated";
}

public static class Position
{
public const string Relative = "position-relative";
@@ -0,0 +1,5 @@
@inherits BootstrapComponentBase

<Div @attributes="this.Attributes">
@this.ChildContent
</Div>
@@ -0,0 +1,20 @@
using System;
using System.Collections.Generic;
using System.Text;

namespace Blazorade.Bootstrap.Components
{
/// <summary>
/// Wrapper component for ProgressBar components.
/// Use one or more ProgressBar components inside of a Progress component to create a bootstrap progress bar.
/// </summary>
public partial class Progress
{
protected override void OnParametersSet()
{
this.AddClasses(ClassNames.ProgressBars.Progress);

base.OnParametersSet();
}
}
}
@@ -0,0 +1,12 @@
@inherits ColoredBootstrapComponentBase

<div @attributes="this.Attributes" style="width: @CalculatedWidth" aria-valuemax="@this.MaxValue" aria-valuemin="@this.MinValue" aria-valuenow="@this.Value">
@if (null != this.ChildContent)
{
@this.ChildContent
}
else if(ShowPercentage)
{
@CalculatedWidth
}
</div>
@@ -0,0 +1,95 @@
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;

namespace Blazorade.Bootstrap.Components
{
/// <summary>
/// The ProgressBar component, when placed inside of a Progress component, defines a bootstrap progress bar
/// or a section of a progress bar if multiple ProgressBar elements are used.
/// </summary>
public partial class ProgressBar
{
/// <summary>
/// If set to true, this progress bar will have a striped texture.
/// </summary>
[Parameter]
public bool IsStriped { get; set; }

/// <summary>
/// If set to true, any stripe will be animated.
/// </summary>
[Parameter]
public bool IsAnimated { get; set; }

/// <summary>
/// The minimum value represented by the progress bar. This must be less than both <see cref="Value"/> and <see cref="MaxValue"/>.
/// </summary>
[Parameter]
public double MinValue { get; set; }

/// <summary>
/// The maximum value represented by the progress bar. This must be greater than both <see cref="MinValue"/> and <see cref="Value"/>.
/// </summary>
[Parameter]
public double MaxValue { get; set; }

/// <summary>
/// The current value represented by the progress bar. This must fall between <see cref="MinValue"/> and <see cref="MaxValue"/>.
/// </summary>
[Parameter]
public double Value { get; set; }

/// <summary>
/// Set this to true if you want to show the percentage as text inside the bar.
/// </summary>
[Parameter]
public bool ShowPercentage { get; set; }


protected string CalculatedWidth {
get
{
return $"{Math.Round(Value / MaxValue, 2) * 100}%;";
}
}

protected override void OnParametersSet()
This conversation was marked as resolved by MikaBerglund

This comment has been minimized.

Copy link
@MikaBerglund

MikaBerglund Feb 10, 2020

Contributor

If you call the async logging methods on the base class, then you might want to change the method you override to OnParametersSetAsync().

This comment has been minimized.

Copy link
@EvanWeeks

EvanWeeks Feb 10, 2020

Author Contributor

See the other comment, but I ended up using the helper method, but calling it synchronously.

{
this.AddClasses(ClassNames.ProgressBars.ProgressBar);
this.AddAttribute("role", "progressbar");

if(this.IsStriped)
{
this.AddClasses(ClassNames.ProgressBars.Striped);
}

if (this.IsAnimated)
{
this.AddClasses(ClassNames.ProgressBars.Animated);
}

if (null != this.Color)
{
this.AddClasses(this.GetColorClassName("bg", this.Color));
}

// check and warn if contraints are busted
if (MaxValue < MinValue)
{
this.LogWarningAsync($"MaxValue ({this.MaxValue}) must be greater than MinValue ({this.MinValue})", this);
}

if (Value > MaxValue || Value < MinValue)
{
this.LogWarningAsync($"Value ({this.Value}) must be greater than MinValue ({this.MinValue}) and less than MaxValue ({this.MaxValue})", this);
}

base.OnParametersSet();
}
}
}
@@ -0,0 +1,3 @@
@page "/progressbars"

<Blazorade.Bootstrap.Components.Showroom.ProgressBars />
@@ -0,0 +1,3 @@
@page "/progressbars"

<Blazorade.Bootstrap.Components.Showroom.ProgressBars/>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.