Improvments for dropdown menus

WebCms/Views/Queue/Details.cshtml

@@ -1,43 +1,46 @@
 @using LeafWeb.WebCms.Controllers
 @model LeafInputDetails
 
-<div class="row">
+<div class="row pb-3">
         @Html.Partial("DisplayTemplates/_ChartButton", Model.LeafInputId, new ViewDataDictionary {{"Disabled", !Model.HasLeafChart}})
 
-    <div class="dropdown">
+        <div class="dropdown pl-3">
             <button class="btn btn-outline-secondary dropdown-toggle" id="downloadButton"
                     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Download
+                <span class="fa fa-download"></span> Download
             </button>
             <div class="dropdown-menu" aria-labelledby="downloadButton">
                 <a href="@Url.Action("DownloadInput", "Queue", new {id = Model.LeafInputId})"
                    class="dropdown-item">
-                <span class="fa fa-download"></span> Input
+                    Input
                 </a>
                 <a href="@Url.Action("DownloadOutputToUser", "Queue", new {id = Model.LeafInputId})"
-               class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}" >
+                   class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}">
-                <span class="fa fa-download"></span> ToUser
+                    ToUser
                 </a>
 
                 <a href="@Url.Action("DownloadOutputNotToUser", "Queue", new {id = Model.LeafInputId})"
-               class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}" >
+                   class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}">
-                <span class="fa fa-download"></span> NotToUser
+                     NotToUser
                 </a>
             </div>
         </div>
 
-    <div class="dropdown">
+        <div class="dropdown pl-3">
             <button class="btn btn-outline-secondary dropdown-toggle" id="utilityButton"
                     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Utility
             </button>
             <div class="dropdown-menu" aria-labelledby="utilityButton">
                 @using (Html.BeginUmbracoForm<QueueController>(
-                "SendUserDownloadLink", null, new { @class = "confirm", confirm_msg = "Confirm sending email to user" }))
+                    "SendUserDownloadLink", null, new {@class = "confirm", confirm_msg = "Confirm sending email to user"}))
                 {
-                <input type="hidden" name="id" value="@Model.LeafInputId" />
+                    <input type="hidden" name="id" value="@Model.LeafInputId"/>
                     <button type="submit" class="dropdown-item text-left"
-                        @{if (!Model.HasOutputFiles) { <text> disabled="disabled" </text>  }}>
+                            @{if (!Model.HasOutputFiles)
+                            {
+                                <text> disabled="disabled" </text>
+                            }}>
                         <span class="fa fa-send"></span> Email User Download link
                     </button>
                 }
@@ -46,11 +49,14 @@
 
         @if (Model.IsCancellable)
         {
+            <div class="pl-3">
                 @CancelLink(Model)
+            </div>
         }
 
+        <div class="pl-3">
             @DeleteLink(Model)
-
+        </div>
 </div>
 <div class="row">
     <div class="container">

WebCms/Views/Queue/Index.cshtml

@@ -111,8 +111,8 @@ else
                 <span class="d-none d-sm-inline">Actions</span>
             </button>
             <div class="dropdown-menu" aria-labelledby="actions(@item.Id)">
-                <button class="dropdown-item">@DetailsLink(item)</button>
+                @DetailsLink(item)
-                <button class="dropdown-item @DisableItem(!item.HasLeafChart)">@ChartLink(item)</button>
+                @ChartLink(item)
                 @if (item.IsPending)
                 {
                     <div class="dropdown-divider"></div>
@@ -124,11 +124,11 @@ else
                 @if (item.IsCancellable)
                 {
                     <div class="dropdown-divider"></div>
-                    <button class="dropdown-item">@CancelLink(item)</button>
+                    @CancelLink(item)
                 }
                 <div class="dropdown-divider"></div>
                 <h6 class="dropdown-header">Download</h6>
-                <button class="dropdown-item">@DownloadInput(item)</button>
+                @DownloadInput(item)
                 <button class="dropdown-item @DisableItem(!item.HasOutputFiles)">@DownloadOutputToUser(item)</button>
                 <div class="dropdown-divider"></div>
                 <button class="dropdown-item @DisableItem(!item.IsDeletable)">@DeleteLink(item)</button>
@@ -139,23 +139,28 @@ else
 
 @helper DetailsLink(dynamic item)
 {
-    @Html.Partial("DisplayTemplates/_DetailsLink", (int)item.Id)
+    @Html.Partial("DisplayTemplates/_DetailsLink", (int)item.Id, new ViewDataDictionary {{"cssClass", new[]{"dropdown-item"}}})
 }
 
 @helper ChartLink(dynamic item)
 {
-    @Html.Partial("DisplayTemplates/_ChartLink", (int)item.Id)
+    var classes = new[]{"dropdown-item"};
+    if (!item.HasLeafChart)
+    {
+        classes = classes.Concat(new[] {"disabled"}).ToArray();
+    }
+    @Html.Partial("DisplayTemplates/_ChartLink", (int)item.Id, new ViewDataDictionary {{"cssClass", classes}})
 }
 
 @helper DownloadInput(dynamic item)
 {
-    <a href="@Url.Action("DownloadInput", "Queue", new {id = item.Id})">
+    <a href="@Url.Action("DownloadInput", "Queue", new {id = item.Id})" class="dropdown-item">
         <span class="fa fa-download"></span> Input
     </a>
 }
 @helper DownloadOutputToUser(dynamic item)
 {
-    <a href="@Url.Action("DownloadOutputToUser", "Queue", new {id = item.Id})">
+    <a href="@Url.Action("DownloadOutputToUser", "Queue", new {id = item.Id})" class="dropdown-item">
         <span class="fa fa-download"></span> ToUser
     </a>
 }
@@ -197,17 +202,17 @@ else
 }
 @helper DeleteLink(LeafInput item)
 {
-    @Html.Partial("DisplayTemplates/_DeleteForm", Tuple.Create(item.Id, item.Identifier, item.IsDeletable, true))
+    @Html.Partial("DisplayTemplates/_DeleteForm", Tuple.Create(item.Id, item.Identifier, item.IsDeletable, true), new ViewDataDictionary {{"cssClass", new[]{"dropdown-item"}}})
 }
 
 @helper CancelLink(LeafInput item)
 {
-    @Html.Partial("DisplayTemplates/_CancelForm", Tuple.Create(item.Id, item.Identifier, true))
+    @Html.Partial("DisplayTemplates/_CancelForm", Tuple.Create(item.Id, item.Identifier, true), new ViewDataDictionary {{"cssClass", new[]{"dropdown-item"}}})
 }
 
 @helper PriorityForm(LeafInput item, Priority priority)
 {
-    @Html.Partial("DisplayTemplates/_PriorityForm", Tuple.Create(item.Id, item.PendingPriority, priority))
+    @Html.Partial("DisplayTemplates/_PriorityForm", Tuple.Create(item.Id, item.PendingPriority, priority), new ViewDataDictionary {{"cssClass", new[]{"dropdown-item"}}})
 }
 
 @helper DisableItem(bool disabled)

WebCms/Views/Shared/DisplayTemplates/_ChartLink.cshtml

@@ -3,7 +3,7 @@
 @{
     var url = UmbracoContext.Current.UrlProvider.GetUrl(LeafWebPageIds.Chart);
 }
-<a href="@url?leafInputId=@Model">
+<a href="@url?leafInputId=@Model" @Html.Partial("DisplayTemplates/_ViewDataCssClass", new [] {"dropdown-item"}, ViewData)>
     <span class="fa fa-line-chart"></span>
     Chart
 </a>

WebCms/Views/Shared/DisplayTemplates/_DetailsLink.cshtml

@@ -3,6 +3,7 @@
 @{
     var url = UmbracoContext.Current.UrlProvider.GetUrl(LeafWebPageIds.Details);
 }
-<a href="@url?id=@Model">
+
+<a href="@url?id=@Model" @Html.Partial("DisplayTemplates/_ViewDataCssClass")>
     <span class="fa fa-edit"></span> Details
 </a>

WebCms/Views/Shared/DisplayTemplates/_ViewDataCssClass.cshtml

@@ -0,0 +1,9 @@
+@using System.Collections
+@{
+    // pass in class name via the cssClass key in ViewData
+    if (ViewData.ContainsKey("cssClass"))
+    {
+        var cssClasses = (string[])ViewData["cssClass"];
+        <text>class="@string.Join(" ", cssClasses)"</text>
+    }
+}

WebCms/WebCms.csproj

@@ -1071,6 +1071,7 @@
     <Content Include="Views\MacroPartials\Membership\PasswordResetRequest.cshtml" />
     <Content Include="Views\Membership\PasswordResetRequest.cshtml" />
     <Content Include="Views\Shared\DisplayTemplates\LeafInputDataSiteViewModels.cshtml" />
+    <Content Include="Views\Shared\DisplayTemplates\_ViewDataCssClass.cshtml" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>