Adds support for background image & images as seen on materializecss …

…website for New-UDSideNav. Issue #713.
ironmansoftware · Aug 30, 2019 · 0739550 · 0739550
1 parent 6d84975
commit 0739550
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx b/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx
@@ -153,6 +153,8 @@ class UDSideNavItem extends React.Component {
             icon,
             href = '#!',
             waves,
+			image,
+			background,
             text,
             name,
             ...props
@@ -161,16 +163,33 @@ class UDSideNavItem extends React.Component {
             subheader: subheader,
             'waves-effect': waves
           };
-
+		  
           var linkText = text ? text : name;
-
           return (
             <li {...props}>
-              {(
-                <a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
-                  {icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
-                </a>
-              )}
+			{(background != '' && background != null) &&
+				<div class='user-view'><div class='background'><img src={background}/></div>
+				{image &&
+					<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}><img src={image} class='circle'/></a>
+				}
+				<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
+					{icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
+				</a>
+				</div>
+			}
+			{((background == '' || background == null) && (image != null && image != '')) &&
+				<div class='user-view'>
+					<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}><img src={image} class='circle'/></a>
+				<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
+					{icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
+				</a>
+				</div>
+			}
+			{((background == '' || background == null) && (image == null || image == '')) &&
+				<a className={cx(linkClasses)} href={href} onClick={this.onItemClick.bind(this)}>
+					{icon && <UdIcon icon={icon} style={{width: '30px'}}/>}   {linkText}
+				</a>
+			}
             </li>
           );
     }

diff --git a/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs b/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs
@@ -55,6 +55,11 @@ public class NewSidNavItemCommand : ComponentCmdlet
         [Alias("PageName")]
         public string Url { get; set; }
 
+        [Parameter()]
+        public string Image { get; set; }
+        [Parameter()]
+        public string Background { get; set; }
+
         [Parameter(ParameterSetName = "SubHeader")]
         [Parameter(ParameterSetName = "Url")]
         [Parameter(ParameterSetName = "OnClick")]
@@ -77,6 +82,8 @@ protected override void BeginProcessing()
                 SubHeader = SubHeader.IsPresent,
                 Children = GetItemsFromScriptBlock<SideNavItem>(Children)?.ToArray(),
                 Text = Text,
+                Image = Image,
+                Background = Background,
                 Url = Url,
                 Icon = Icon.GetIconName(),
                 Callback = OnClick.TryGenerateEndpoint(Id, SessionState)

diff --git a/src/UniversalDashboard/Models/SideNav.cs b/src/UniversalDashboard/Models/SideNav.cs
@@ -31,6 +31,12 @@ public class SideNavItem : Component
         [JsonProperty("icon")]
         public string Icon { get; set; }
 
+        [JsonProperty("image")]
+        public string Image { get; set; }
+
+        [JsonProperty("background")]
+        public string Background { get; set; }
+
         [JsonProperty("text")]
         public string Text { get; set; }