Improvments for dropdown menus

2020-06-25 13:18:43 -04:00
parent 04d582c8e4
commit 7e88de5041
6 changed files with 81 additions and 59 deletions
@@ -1,56 +1,62 @@
@using LeafWeb.WebCms.Controllers
@model LeafInputDetails

-<div class="row">
-    @Html.Partial("DisplayTemplates/_ChartButton", Model.LeafInputId, new ViewDataDictionary {{"Disabled", !Model.HasLeafChart}})
-    
-    <div class="dropdown">
-        <button class="btn btn-outline-secondary dropdown-toggle" id="downloadButton"
-                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            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
-            </a>
-            <a href="@Url.Action("DownloadOutputToUser", "Queue", new {id = Model.LeafInputId})"
-               class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}" >
-                <span class="fa fa-download"></span> ToUser
-            </a>
-            
-            <a href="@Url.Action("DownloadOutputNotToUser", "Queue", new {id = Model.LeafInputId})"
-               class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}" >
-                <span class="fa fa-download"></span> NotToUser
-            </a>
+<div class="row pb-3">
+        @Html.Partial("DisplayTemplates/_ChartButton", Model.LeafInputId, new ViewDataDictionary {{"Disabled", !Model.HasLeafChart}})
+
+        <div class="dropdown pl-3">
+            <button class="btn btn-outline-secondary dropdown-toggle" id="downloadButton"
+                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <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">
+                    Input
+                </a>
+                <a href="@Url.Action("DownloadOutputToUser", "Queue", new {id = Model.LeafInputId})"
+                   class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}">
+                    ToUser
+                </a>
+
+                <a href="@Url.Action("DownloadOutputNotToUser", "Queue", new {id = Model.LeafInputId})"
+                   class="dropdown-item @if (!Model.HasOutputFiles) {<text> disabled</text>}">
+                     NotToUser
+                </a>
+            </div>
        </div>
-    </div>
-    
-    <div class="dropdown">
-        <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" }))
-            {
-                <input type="hidden" name="id" value="@Model.LeafInputId" />
-                <button type="submit" class="dropdown-item text-left"
-                        @{if (!Model.HasOutputFiles) { <text> disabled="disabled" </text>  }}>
-                    <span class="fa fa-send"></span> Email User Download link
-                </button>
-            }
+
+        <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"}))
+                {
+                    <input type="hidden" name="id" value="@Model.LeafInputId"/>
+                    <button type="submit" class="dropdown-item text-left"
+                            @{if (!Model.HasOutputFiles)
+                            {
+                                <text> disabled="disabled" </text>
+                            }}>
+                        <span class="fa fa-send"></span> Email User Download link
+                    </button>
+                }
+            </div>
        </div>
-    </div>

-    @if (Model.IsCancellable)
-    {
-        @CancelLink(Model)
-    }
-
-    @DeleteLink(Model)
+        @if (Model.IsCancellable)
+        {
+            <div class="pl-3">
+                @CancelLink(Model)
+            </div>
+        }

+        <div class="pl-3">
+            @DeleteLink(Model)
+        </div>
 </div>
 <div class="row">
    <div class="container">
@@ -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>
-                <button class="dropdown-item @DisableItem(!item.HasLeafChart)">@ChartLink(item)</button>
+                @DetailsLink(item)
+                @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)
@@ -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>
@@ -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>
@@ -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>
+    }
+}
@@ -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>