Fix sortable widgets (#14467)

OrchardCMS · Oct 9, 2023 · 24cc439 · 24cc439
1 parent b03eef3
commit 24cc439
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Layers/Views/Admin/Index.cshtml b/src/OrchardCore.Modules/OrchardCore.Layers/Views/Admin/Index.cshtml
@@ -8,9 +8,6 @@
 @inject OrchardCore.ContentManagement.Metadata.IContentDefinitionManager ContentDefinitionManager
 @inject OrchardCore.ContentManagement.Display.IContentItemDisplayManager ContentItemDisplayManager
 
-@{
-    var widgetContentTypes = ContentDefinitionManager.ListTypeDefinitions().Where(t => t.GetStereotype() == "Widget").ToList();
-}
 <script asp-name="jquery-ui" at="Foot"></script>
 
 <zone Name="Title"><h1>@RenderTitleSegments(T["Edit Widgets and Layers"])</h1></zone>
@@ -43,33 +40,37 @@
                             @zone
                         </div>
                         <div class="layer-zone card-body" data-zone="@zone">
-                            @if (Model.Widgets.TryGetValue(zone, out var contentItems) && contentItems.Count > 0)
-                            {
-                                <div class="mb-3">
-                                    <ul class="list-group zones">
-                                        @foreach (var contentItemSummary in contentItems)
-                                        {
-                                            await contentItemSummary.Tags.AddAsync(Html.Raw("<span class=\"badge ta-badge font-weight-normal\"><i class=\"fa fa-bookmark-o text-info\" aria-hidden=\"true\"></i> " + Html.Encode(contentItemSummary.ContentItem.Content.LayerMetadata.Layer) + "</span>"));
-                                            maxPosition = Math.Max(maxPosition, (double)contentItemSummary.ContentItem.Content.LayerMetadata.Position);
-
-                                            <li class="list-group-item">
-                                                <div class="w-100 cursor-move properties">
-                                                    @await DisplayAsync(contentItemSummary)
-                                                </div>
-                                                <input type="hidden"
-                                       class="layer-metadata"
-                                       data-zone="@zone"
-                                       data-layer="@contentItemSummary.ContentItem.Content.LayerMetadata.Layer"
-                                       data-position="@contentItemSummary.ContentItem.Content.LayerMetadata.Position.ToString(CultureInfo.InvariantCulture)"
-                                       data-content-item-id="@contentItemSummary.ContentItem.ContentItemId" />
-                                            </li>
-                                        }
-                                    </ul>
-                                </div>
-                            }
+
+                            <ul class="list-group zones mb-3">
+                                @if (Model.Widgets.TryGetValue(zone, out var contentItems) && contentItems.Count > 0)
+                                {
+                                    foreach (var contentItemSummary in contentItems)
+                                    {
+                                        await contentItemSummary.Tags.AddAsync(Html.Raw("<span class=\"badge ta-badge\"><i class=\"fa-regular fa-bookmark text-info\" aria-hidden=\"true\"></i> " + Html.Encode(contentItemSummary.ContentItem.Content.LayerMetadata.Layer) + "</span>"));
+                                        maxPosition = Math.Max(maxPosition, (double)contentItemSummary.ContentItem.Content.LayerMetadata.Position);
+
+                                        <li class="list-group-item">
+                                            <div class="w-100 cursor-move properties">
+                                                @await DisplayAsync(contentItemSummary)
+                                            </div>
+                                            <input type="hidden"
+                                                   class="layer-metadata"
+                                                   data-zone="@zone"
+                                                   data-layer="@contentItemSummary.ContentItem.Content.LayerMetadata.Layer"
+                                                   data-position="@contentItemSummary.ContentItem.Content.LayerMetadata.Position.ToString(CultureInfo.InvariantCulture)"
+                                                   data-content-item-id="@contentItemSummary.ContentItem.ContentItemId" />
+                                        </li>
+                                    }
+                                }
+                            </ul>
+
                             @if (Model.Layers.Count > 0)
                             {
-                                @if (widgetContentTypes.Count > 0)
+                                var widgetContentTypes = ContentDefinitionManager.ListTypeDefinitions()
+                                .Where(t => t.StereotypeEquals("Widget"))
+                                .ToList();
+
+                                if (widgetContentTypes.Count > 0)
                                 {
                                     var htmlId = Guid.NewGuid().ToString("n");
 
@@ -87,9 +88,9 @@
                                                 createRoute["LayerMetadata.Position"] = maxPosition + 1;
                                                 <li>
                                                     <a class="dropdown-item add-list-widget"
-                                   data-widget-type="@type.Name"
-                                   data-zone="@zone"
-                                   href="@Url.Action((string)createRoute["Action"], (string)createRoute["controller"], createRoute)">@type.DisplayName</a>
+                                                       data-widget-type="@type.Name"
+                                                       data-zone="@zone"
+                                                       href="@Url.Action((string)createRoute["Action"], (string)createRoute["controller"], createRoute)">@type.DisplayName</a>
                                                 </li>
                                             }
                                         </ul>

diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_sortable.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_sortable.scss
@@ -1,5 +1,12 @@
 @import '../_variables';
 
+// Setting a minimum height for sortable containers is necessary to enable the drag-and-drop functionality for items.
+// Be sure to assign a suitable min-height to facilitate the drag-and-drop process.
 .ui-sortable {
     min-height: $font-size-base;
 }
+
+// If the sortable container is empty, ensure it's visually noticeable.
+ul.ui-sortable:not(:has(>li)) {
+    border: var(--bs-border-width) dashed var(--bs-border-color) !important;
+}
diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css
@@ -9345,6 +9345,10 @@ html:not(.fontawesome-i2svg-complete) #left-nav ul.menu-admin > li > .item-label
   min-height: 1rem;
 }
 
+ul.ui-sortable:not(:has(> li)) {
+  border: var(--bs-border-width) dashed var(--bs-border-color) !important;
+}
+
 /* 
     IMPORTANT: Never import Bootstrap directly into the theme. 
     TheAdmin.css will depend on Bootstrap, but we never want to compile it. 

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css