From 41ec7871106182495cf3d428d3cb23f389e3e09c Mon Sep 17 00:00:00 2001 From: Joshua Chase Date: Mon, 10 Feb 2020 21:12:27 -0500 Subject: [PATCH 1/3] Added HTMLStatusItem functionality with hex codes --- Public/New-HTMLStatusItem.ps1 | 71 ++++++++++++++++++++++++----------- Resources/CSS/status.css | 41 +++----------------- 2 files changed, 55 insertions(+), 57 deletions(-) diff --git a/Public/New-HTMLStatusItem.ps1 b/Public/New-HTMLStatusItem.ps1 index 70e893d9..c06f9762 100644 --- a/Public/New-HTMLStatusItem.ps1 +++ b/Public/New-HTMLStatusItem.ps1 @@ -1,43 +1,72 @@ function New-HTMLStatusItem { - [CmdletBinding()] + [CmdletBinding(DefaultParameterSetName = 'Percent')] param( [string] $ServiceName, + [string] $ServiceStatus, - [ValidateSet('Dead', 'Bad', 'Good')]$Icon = 'Good', - [ValidateSet('0%', '10%', '30%', '70%', '100%')][string] $Percentage = '100%' + + [ValidateSet('Dead', 'Bad', 'Good')] + [string]$Icon = 'Good', + + [ValidateSet('0%', '10%', '30%', '70%', '100%')] + [Parameter(ParameterSetName = 'Percent')] + [string]$Percentage = '100%', + + [ValidatePattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')] + [Parameter(ParameterSetName = 'Hex')] + [string]$BackgroundColor, + + [ValidatePattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')] + [string]$FontColor = '#5f6982', + + [ValidatePattern('^&#x[A-Fa-f0-9]{4,5}')] + [string]$IconHex ) #$Script:HTMLSchema.Features.StatusButtonical = $true - if ($Icon -eq 'Dead') { - $IconType = 'performanceDead' - } elseif ($Icon -eq 'Bad') { - $IconType = 'performanceProblem' - } elseif ($Icon -eq 'Good') { - #$IconType = 'performance' + if ($IconHex) { + $IconType = $IconHex + } + else { + if ($Icon -eq 'Dead') { + $IconType = '☠' + } elseif ($Icon -eq 'Bad') { + $IconType = '☹' + } elseif ($Icon -eq 'Good') { + $IconType = '✔' + } } - if ($Percentage -eq '100%') { - $Colors = 'background-color: #0ef49b;' - } elseif ($Percentage -eq '70%') { - $Colors = 'background-color: #d2dc69;' - } elseif ($Percentage -eq '30%') { - $Colors = 'background-color: #faa04b;' - } elseif ($Percentage -eq '10%') { - $Colors = 'background-color: #ff9035;' - } elseif ($Percentage -eq '0%') { - $Colors = 'background-color: #ff5a64;' + if ($PSCmdlet.ParameterSetName -eq 'Percent') { + if ($Percentage -eq '100%') { + $Colors = 'background-color: #0ef49b;' + } elseif ($Percentage -eq '70%') { + $Colors = 'background-color: #d2dc69;' + } elseif ($Percentage -eq '30%') { + $Colors = 'background-color: #faa04b;' + } elseif ($Percentage -eq '10%') { + $Colors = 'background-color: #ff9035;' + } elseif ($Percentage -eq '0%') { + $Colors = 'background-color: #ff5a64;' + } + } + elseif ($PSCmdlet.ParameterSetName -eq 'Hex') { + $Colors = "background-color: $BackgroundColor" } New-HTMLTag -Tag 'div' -Attributes @{ class = 'buttonical'; style = $Colors } -Value { New-HTMLTag -Tag 'div' -Attributes @{ class = 'label' } { - New-HTMLTag -Tag 'span' -Attributes @{ class = 'performance' } { + New-HTMLTag -Tag 'span' -Attributes @{ class = 'performance'; style = "color: $FontColor" } { $ServiceName } } New-HTMLTag -Tag 'div' -Attributes @{ class = 'middle' } New-HTMLTag -Tag 'div' -Attributes @{ class = 'status'} { New-HTMLTag -Tag 'input' -Attributes @{ name = Get-Random; type = 'radio'; value = 'other-item'; checked = 'true' } -SelfClosing - New-HTMLTag -Tag 'span' -Attributes @{ class = "performance $IconType" } { + New-HTMLTag -Tag 'span' -Attributes @{ class = 'performance'; style = "color: $FontColor" } { $ServiceStatus + New-HTMLTag -Tag 'span' -Attributes @{ class = 'icon' } { + $IconType + } } } } diff --git a/Resources/CSS/status.css b/Resources/CSS/status.css index 6a474762..b84a5f23 100644 --- a/Resources/CSS/status.css +++ b/Resources/CSS/status.css @@ -17,13 +17,10 @@ box-shadow: 0 2px 4px -1px rgba(25, 25, 25, 0.2); } - .buttonical input { display: none; } - - .buttonical .label { display: table; float: left; @@ -61,31 +58,6 @@ display: table-cell; vertical-align: middle; font-weight: 300; - color: #fff; -} - -.buttonical .performance:after { - content: "\2714"; - margin-left: -10px; - display: inline-block; - -webkit-transform: scale(0); - transform: scale(0); -} - -.buttonical .performanceProblem:after { - content: "\2639"; - margin-left: -10px; - display: inline-block; - -webkit-transform: scale(0); - transform: scale(0); -} - -.buttonical .performanceDead:after { - content: "\2620"; - margin-left: -10px; - display: inline-block; - -webkit-transform: scale(0); - transform: scale(0); } .buttonical .first { @@ -96,12 +68,9 @@ border-radius: 0 40px 40px 0; } -.buttonical input:checked+.performance { - color: #5f6982; -} - -.buttonical input:checked+.performance:after { - margin-left: 12px; - -webkit-transform: scale(1.25); - transform: scale(1.25); +.buttonical .icon { + margin-left: 12px; + display: inline-block; + -webkit-transform: scale(1.35); + transform: scale(1.35; } \ No newline at end of file From fdb6dc3f7f703bb8dd1e230f013c4d1abc478f81 Mon Sep 17 00:00:00 2001 From: Joshua Chase Date: Mon, 10 Feb 2020 21:32:37 -0500 Subject: [PATCH 2/3] typo: forgot ; --- Public/New-HTMLStatusItem.ps1 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Public/New-HTMLStatusItem.ps1 b/Public/New-HTMLStatusItem.ps1 index c06f9762..67aedcaf 100644 --- a/Public/New-HTMLStatusItem.ps1 +++ b/Public/New-HTMLStatusItem.ps1 @@ -50,7 +50,7 @@ function New-HTMLStatusItem { } } elseif ($PSCmdlet.ParameterSetName -eq 'Hex') { - $Colors = "background-color: $BackgroundColor" + $Colors = "background-color: $BackgroundColor;" } New-HTMLTag -Tag 'div' -Attributes @{ class = 'buttonical'; style = $Colors } -Value { From 829b34141f058ce089d00b6a206cf5ba92fc6c04 Mon Sep 17 00:00:00 2001 From: Joshua Chase Date: Tue, 11 Feb 2020 19:19:19 -0500 Subject: [PATCH 3/3] FontAwesome Icon support, $Script:RGBColor support, new parameter set names, deprecation warning of parameter set. --- Public/New-HTMLStatusItem.ps1 | 128 +++++++++++++++++++++++++--------- Resources/CSS/status.css | 2 +- 2 files changed, 96 insertions(+), 34 deletions(-) diff --git a/Public/New-HTMLStatusItem.ps1 b/Public/New-HTMLStatusItem.ps1 index 67aedcaf..ebe2aa3c 100644 --- a/Public/New-HTMLStatusItem.ps1 +++ b/Public/New-HTMLStatusItem.ps1 @@ -1,73 +1,135 @@ function New-HTMLStatusItem { - [CmdletBinding(DefaultParameterSetName = 'Percent')] + [CmdletBinding(DefaultParameterSetName = 'Statusimo')] param( [string] $ServiceName, - [string] $ServiceStatus, [ValidateSet('Dead', 'Bad', 'Good')] - [string]$Icon = 'Good', + [Parameter(ParameterSetName = 'Statusimo')] + $Icon = 'Good', [ValidateSet('0%', '10%', '30%', '70%', '100%')] - [Parameter(ParameterSetName = 'Percent')] - [string]$Percentage = '100%', + [Parameter(ParameterSetName = 'Statusimo')] + [string] $Percentage = '100%', + + [string]$FontColor = '#5f6982', - [ValidatePattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')] + [parameter(ParameterSetName = 'FontAwesomeBrands')] + [parameter(ParameterSetName = 'FontAwesomeRegular')] + [parameter(ParameterSetName = "FontAwesomeSolid")] [Parameter(ParameterSetName = 'Hex')] - [string]$BackgroundColor, + [string]$BackgroundColor = '#0ef49b', - [ValidatePattern('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')] - [string]$FontColor = '#5f6982', + # ICON BRANDS + [ArgumentCompleter( + { + param($CommandName, $ParameterName, $WordToComplete, $CommandAst, $FakeBoundParameters) + ($Global:HTMLIcons.FontAwesomeBrands.Keys) + } + )] + [ValidateScript( + { + $_ -in (($Global:HTMLIcons.FontAwesomeBrands.Keys)) + } + )] + [parameter(ParameterSetName = 'FontAwesomeBrands')] + [string] $IconBrands, + + # ICON REGULAR + [ArgumentCompleter( + { + param($CommandName, $ParameterName, $WordToComplete, $CommandAst, $FakeBoundParameters) + ($Global:HTMLIcons.FontAwesomeRegular.Keys) + } + )] + [ValidateScript( + { + $_ -in (($Global:HTMLIcons.FontAwesomeRegular.Keys)) + } + )] + [parameter(ParameterSetName = 'FontAwesomeRegular')] + [string] $IconRegular, - [ValidatePattern('^&#x[A-Fa-f0-9]{4,5}')] + # ICON SOLID + [ArgumentCompleter( + { + param($CommandName, $ParameterName, $WordToComplete, $CommandAst, $FakeBoundParameters) + ($Global:HTMLIcons.FontAwesomeSolid.Keys) + } + )] + [ValidateScript( + { + $_ -in (($Global:HTMLIcons.FontAwesomeSolid.Keys)) + } + )] + [parameter(ParameterSetName = 'FontAwesomeSolid')] + [string] $IconSolid, + + [Parameter(ParameterSetName = 'Hex')] + [ValidatePattern('^&#x[A-Fa-f0-9]{4,5}$')] [string]$IconHex ) #$Script:HTMLSchema.Features.StatusButtonical = $true - if ($IconHex) { - $IconType = $IconHex - } - else { + if ($PSCmdlet.ParameterSetName -eq 'Statusimo') { + Write-Warning 'This parameter set has been deprecated. It will be removed in a future release. Look to move to the other parameter sets with customization options.' + + if ($Percentage -eq '100%') { + $BackgroundColor = '#0ef49b' + } elseif ($Percentage -eq '70%') { + $BackgroundColor = '#d2dc69' + } elseif ($Percentage -eq '30%') { + $BackgroundColor = '#faa04b' + } elseif ($Percentage -eq '10%') { + $BackgroundColor = '#ff9035' + } elseif ($Percentage -eq '0%') { + $BackgroundColor = '#ff5a64' + } + if ($Icon -eq 'Dead') { $IconType = '☠' - } elseif ($Icon -eq 'Bad') { + } + elseif ($Icon -eq 'Bad') { $IconType = '☹' - } elseif ($Icon -eq 'Good') { + } + elseif ($Icon -eq 'Good') { $IconType = '✔' } } + elseif ($PSCmdlet.ParameterSetName -like 'FontAwesome*') { + $BackgroundColor = Convert-FromColor -Color $BackgroundColor - if ($PSCmdlet.ParameterSetName -eq 'Percent') { - if ($Percentage -eq '100%') { - $Colors = 'background-color: #0ef49b;' - } elseif ($Percentage -eq '70%') { - $Colors = 'background-color: #d2dc69;' - } elseif ($Percentage -eq '30%') { - $Colors = 'background-color: #faa04b;' - } elseif ($Percentage -eq '10%') { - $Colors = 'background-color: #ff9035;' - } elseif ($Percentage -eq '0%') { - $Colors = 'background-color: #ff5a64;' + if ($IconBrands) { + $IconClass = "fab fa-$IconBrands" + } + elseif ($IconRegular) { + $IconClass = "far fa-$IconRegular" + } + elseif ($IconSolid) { + $IconClass = "fas fa-$IconSolid" } } elseif ($PSCmdlet.ParameterSetName -eq 'Hex') { - $Colors = "background-color: $BackgroundColor;" + $IconType = $IconHex } + $FontColor = Convert-FromColor -Color $FontColor - New-HTMLTag -Tag 'div' -Attributes @{ class = 'buttonical'; style = $Colors } -Value { + New-HTMLTag -Tag 'div' -Attributes @{ class = 'buttonical'; style = "background-color: $BackgroundColor" } -Value { New-HTMLTag -Tag 'div' -Attributes @{ class = 'label' } { - New-HTMLTag -Tag 'span' -Attributes @{ class = 'performance'; style = "color: $FontColor" } { + New-HTMLTag -Tag 'span' -Attributes @{ class = 'performance'; style = "color: $FontColor"} { $ServiceName } } New-HTMLTag -Tag 'div' -Attributes @{ class = 'middle' } New-HTMLTag -Tag 'div' -Attributes @{ class = 'status'} { New-HTMLTag -Tag 'input' -Attributes @{ name = Get-Random; type = 'radio'; value = 'other-item'; checked = 'true' } -SelfClosing - New-HTMLTag -Tag 'span' -Attributes @{ class = 'performance'; style = "color: $FontColor" } { + New-HTMLTag -Tag 'span' -Attributes @{ class = "performance"; style = "color: $FontColor" } { $ServiceStatus - New-HTMLTag -Tag 'span' -Attributes @{ class = 'icon' } { + New-HtmlTag -Tag 'span' -Attributes @{ class = "icon $IconClass" } { $IconType } } } } -} \ No newline at end of file +} +Register-ArgumentCompleter -CommandName New-HTMLStatusItem -ParameterName FontColor -ScriptBlock { $Script:RGBColors.Keys } +Register-ArgumentCompleter -CommandName New-HTMLStatusItem -ParameterName BackgroundColor -ScriptBlock { $Script:RGBColors.Keys } \ No newline at end of file diff --git a/Resources/CSS/status.css b/Resources/CSS/status.css index b84a5f23..f9c9f77d 100644 --- a/Resources/CSS/status.css +++ b/Resources/CSS/status.css @@ -72,5 +72,5 @@ margin-left: 12px; display: inline-block; -webkit-transform: scale(1.35); - transform: scale(1.35; + transform: scale(1.35); } \ No newline at end of file