Bootstrap 5 in admin

src/OrchardCore.Modules/OrchardCore.Admin/Views/AdminSettings.Edit.cshtml

@@ -1,33 +1,33 @@
 @model OrchardCore.Admin.ViewModels.AdminSettingsViewModel
 
-<fieldset class="form-group" asp-validation-class-for="DisplayDarkMode">
-    <div class="custom-control custom-checkbox">
-        <input asp-for="DisplayDarkMode" class="custom-control-input" type="checkbox" />
-        <label asp-for="DisplayDarkMode" class="custom-control-label">@T["Enable dark mode admin theme"]</label>
+<fieldset class="mb-3" asp-validation-class-for="DisplayDarkMode">
+    <div class="form-check">
+        <input asp-for="DisplayDarkMode" class="form-check-input" type="checkbox" />
+        <label asp-for="DisplayDarkMode" class="form-check-label">@T["Enable dark mode admin theme"]</label>
     </div>
     <span class="hint">@T["Whether a dark mode admin theme can be displayed."]</span>
 </fieldset>
 
-<fieldset class="form-group" asp-validation-class-for="DisplayMenuFilter">
-    <div class="custom-control custom-checkbox">
-        <input asp-for="DisplayMenuFilter" class="custom-control-input" type="checkbox" />
-        <label asp-for="DisplayMenuFilter" class="custom-control-label">@T["Enable Admin Menu filter"]</label>
+<fieldset class="mb-3" asp-validation-class-for="DisplayMenuFilter">
+    <div class="form-check">
+        <input asp-for="DisplayMenuFilter" class="form-check-input" type="checkbox" />
+        <label asp-for="DisplayMenuFilter" class="form-check-label">@T["Enable Admin Menu filter"]</label>
     </div>
     <span class="hint">@T["Whether a quick search to filter the admin menu is displayed."]</span>
 </fieldset>
 
-<fieldset class="form-group" asp-validation-class-for="DisplayNewMenu">
-    <div class="custom-control custom-checkbox">
-        <input asp-for="DisplayNewMenu" class="custom-control-input" type="checkbox" />
-        <label asp-for="DisplayNewMenu" class="custom-control-label">@T["Display New menu"]</label>
+<fieldset class="mb-3" asp-validation-class-for="DisplayNewMenu">
+    <div class="form-check">
+        <input asp-for="DisplayNewMenu" class="form-check-input" type="checkbox" />
+        <label asp-for="DisplayNewMenu" class="form-check-label">@T["Display New menu"]</label>
     </div>
     <span class="hint">@T["Whether a New menu is displayed in the admin menu."]</span>
 </fieldset>
 
-<fieldset class="form-group" asp-validation-class-for="DisplayTitlesInTopbar">
-    <div class="custom-control custom-checkbox">
-        <input asp-for="DisplayTitlesInTopbar" class="custom-control-input" type="checkbox" />
-        <label asp-for="DisplayTitlesInTopbar" class="custom-control-label">@T["Display titles in top bar"]</label>
+<fieldset class="mb-3" asp-validation-class-for="DisplayTitlesInTopbar">
+    <div class="form-check">
+        <input asp-for="DisplayTitlesInTopbar" class="form-check-input" type="checkbox" />
+        <label asp-for="DisplayTitlesInTopbar" class="form-check-label">@T["Display titles in top bar"]</label>
     </div>
     <span class="hint">@T["Whether the titles are displayed in the top bar."]</span>
 </fieldset>

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/Dashboard/Index.cshtml

@@ -22,14 +22,14 @@
 
 @if (hasManageDashboardPermission)
 {
-    <div class="btn-group float-right mb-3">
+    <div class="btn-group float-end mb-3">
         <a class="btn btn-primary btn-sm" asp-action="Manage">
             @T["Manage Dashboard"]
         </a>
     </div>
 }
 
-<zone Name="Title"><h1 class="float-left">@RenderTitleSegments(T["Dashboard"])</h1></zone>
+<zone Name="Title"><h1 class="float-start">@RenderTitleSegments(T["Dashboard"])</h1></zone>
 <div class="clearfix"></div>
 
 <div class="dashboard-container" style="--dashboard-columns: calc( @(settings.ColumnScale) * var(--dashboard-columns-default));">

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/Dashboard/Manage.cshtml

@@ -19,32 +19,30 @@
 <style asp-src="~/OrchardCore.AdminDashboard/Styles/dashboard.min.css" debug-src="~/OrchardCore.AdminDashboard/Styles/dashboard.css" depends-on="jQuery-ui" at="Head"></style>
 <script asp-name="jQuery-ui" at="Foot"></script>
 
-<div class="float-right mb-3 d-inline-flex">
-    <a class="btn btn-success btn-sm  mr-1" asp-action="Index">
+<div class="float-end mb-3 d-inline-flex">
+    <a class="btn btn-success btn-sm me-1" asp-action="Index">
         @T["Close Editor"]
     </a>
     @if (Model.Creatable.Any())
     {
         <div class="dropdown order-md-1">
-            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="new-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="new-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 @T["Add Widget"]
             </button>
-            <div class="dropdown-menu dropdown-menu-right scrollable" aria-labelledby="bulk-action-menu-button">
+            <ul class="dropdown-menu dropdown-menu-end scrollable" aria-labelledby="bulk-action-menu-button">
                 @foreach (var item in Model.Creatable)
                 {
-                    <a class="dropdown-item add-list-widget btn-sm" href="@Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Create", id = @item.Value, returnUrl = FullRequestPath })">@T[Html.Encode(item.Text)]</a>
+                    <li><a class="dropdown-item add-list-widget btn-sm" href="@Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Create", id = @item.Value, returnUrl = FullRequestPath })">@T[Html.Encode(item.Text)]</a></li>
                 }
-            </div>
+            </ul>
         </div>
     }
 </div>
-<zone Name="Title"><h1 class="float-left">@RenderTitleSegments(T["Dashboard"])</h1></zone>
+<zone Name="Title"><h1 class="float-start">@RenderTitleSegments(T["Dashboard"])</h1></zone>
 <div class="clearfix"></div>
 
 <div id="dashboard-undo-message" class="alert alert-success alert-dismissible show d-none" role="alert">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     <form id="dashboard-undo-form" asp-action="Update" method="POST" class="no-multisubmit">
         @for (int index = 0; index < Model.Dashboards.Count(); index++)
         {

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/DashboardPart.Edit.cshtml

@@ -1,16 +1,16 @@
 @model DashboardPartViewModel
 
-<div class="form-group" asp-validation-class-for="Position">
+<div class="mb-3" asp-validation-class-for="Position">
     <label asp-for="Position">@T["Position"] </label>
     <input asp-for="Position" class="form-control" />
     <span asp-validation-for="Position"></span>
 </div>
-<div class="form-group" asp-validation-class-for="Width">
+<div class="mb-3" asp-validation-class-for="Width">
     <label asp-for="Width">@T["Width"] </label>
     <input asp-for="Width" class="form-control" />
     <span asp-validation-for="Width"></span>
 </div>
-<div class="form-group" asp-validation-class-for="Height">
+<div class="mb-3" asp-validation-class-for="Height">
     <label asp-for="Height">@T["Height"] </label>
     <input asp-for="Height" class="form-control" />
     <span asp-validation-for="Height"></span>

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/DashboardWidget-ContentsMetadata.DetailAdmin.cshtml

@@ -18,15 +18,15 @@
 
     if (contentItem.ModifiedUtc.HasValue)
     {
-        <span class="badge ta-badge font-weight-normal" data-toggle="tooltip" title="@await DisplayAsync(await New.DateTime(Utc: contentItem.ModifiedUtc, Format: "g"))">
+        <span class="badge ta-badge font-weight-normal" data-bs-toggle="tooltip" title="@await DisplayAsync(await New.DateTime(Utc: contentItem.ModifiedUtc, Format: "g"))">
             <i class="fa fa-calendar text-secondary" aria-hidden="true"></i> <time datetime="@modifiedUtc">@await DisplayAsync(await New.Timespan(Utc: contentItem.ModifiedUtc))</time>
         </span>
     }
 
     if (!String.IsNullOrEmpty(contentItem.Author))
     {
-        <span class="badge ta-badge font-weight-normal" data-toggle="tooltip" title="@T["Author"]">
-            <i class="fa fa-user text-secondary mr-1" aria-hidden="true"></i>@contentItem.Author
+        <span class="badge ta-badge font-weight-normal" data-bs-toggle="tooltip" title="@T["Author"]">
+            <i class="fa fa-user text-secondary me-1" aria-hidden="true"></i>@contentItem.Author
         </span>
     }
 }

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/DashboardWidget-ContentsTags.DetailAdmin.cshtml

@@ -10,14 +10,14 @@
 
 @if (hasPublished)
 {
-    <span class="badge ta-badge font-weight-normal" data-toggle="tooltip" title="@T["Status"]">
+    <span class="badge ta-badge font-weight-normal" data-bs-toggle="tooltip" title="@T["Status"]">
         <i class="fa fa-check text-success" aria-hidden="true"></i> @T["Published"]
     </span>
 }
 
 @if (hasDraft)
 {
-    <span class="badge ta-badge font-weight-normal" data-toggle="tooltip" title="@T["Status"]">
+    <span class="badge ta-badge font-weight-normal" data-bs-toggle="tooltip" title="@T["Status"]">
         <i class="fa fa-pencil text-primary" aria-hidden="true"></i> @T["Draft"]
     </span>
 }

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/DashboardWidget.DetailAdmin.cshtml

@@ -6,8 +6,8 @@
             @await DisplayAsync(Model.Header)
             @if(Model.ActionsMenu != null )
             {
-                <div class="btn-group float-right" title="@T["Actions"]">
-                    <a type="button" class="btn btn-sm " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div class="btn-group float-end" title="@T["Actions"]">
+                    <a type="button" class="btn btn-sm " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                     </a>
                     <div class="actions-menu dropdown-menu">

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/DashboardWidget.SummaryAdmin.cshtml

@@ -7,9 +7,9 @@
 
 <div class="row">
     <div class="col-xl-9 col-sm-12 title">
-        <div class="custom-control custom-checkbox float-left">
-            <input type="checkbox" class="custom-control-input" value="@contentItem.Id" name="itemIds" id="itemIds-@contentItem.Id">
-            <label class="custom-control-label" for="itemIds-@contentItem.Id"></label>
+        <div class="form-check float-start">
+            <input type="checkbox" class="form-check-input" value="@contentItem.Id" name="itemIds" id="itemIds-@contentItem.Id">
+            <label class="form-check-label" for="itemIds-@contentItem.Id"></label>
         </div>
         @if (await AuthorizationService.AuthorizeAsync(User, CommonPermissions.EditContent, contentItem))
         {
@@ -34,18 +34,18 @@
         }
     </div>
     <div class="col-xl-3 col-sm-12">
-        <div class="float-right button-group">
+        <div class="float-end button-group">
             @if (Model.Actions != null)
             {
                 @await DisplayAsync(Model.Actions)
             }
             @if (Model.ActionsMenu != null)
             {
                 <div class="btn-group">
-                    <button type="button" class="btn btn-sm text-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <button type="button" class="btn btn-sm text-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         @T["Actions"]
                     </button>
-                    <div class="actions-menu dropdown-menu dropdown-menu-right">
+                    <div class="actions-menu dropdown-menu dropdown-menu-end">
                         @await DisplayAsync(Model.ActionsMenu)
                     </div>
                 </div>

src/OrchardCore.Modules/OrchardCore.AdminDashboard/package.json

@@ -2,6 +2,6 @@
   "name": "orchardcore.admindashboard",
   "version": "1.0.0",
   "dependencies": {
-    "bootstrap": "4.6.1"
+    "bootstrap": "5.1.3"
   }
 }

src/OrchardCore.Modules/OrchardCore.AdminMenu/Assets/js/AdminNodeIconPicker.js

@@ -32,7 +32,12 @@ var iconPickerVue = new Vue({
                 $('#' + self.targetIconTag).replaceWith('<i id="' + self.targetIconTag + '" class="'+ selected + '"></i>')                
             }
 
-            $('#iconPickerModal').modal('hide');            
+            var iconPickerModal = new bootstrap.Modal($("#iconPickerModal"), {
+                backdrop: 'static',
+                keyboard: false
+            });
+
+            iconPickerModal.show();
         });
 
     },
@@ -41,7 +46,12 @@ var iconPickerVue = new Vue({
             this.targetInputField = targetInputField;
             this.targetIconTag = targetIconTag;
 
-            $('#iconPickerModal').modal('show');
+            var iconPickerModal = new bootstrap.Modal($("#iconPickerModal"), {
+                backdrop: 'static',
+                keyboard: false
+            });
+
+            iconPickerModal.show();
         }
     }
 })

src/OrchardCore.Modules/OrchardCore.AdminMenu/Views/Items/LinkAdminNode.Fields.TreeEdit.cshtml

@@ -11,26 +11,26 @@
 
 <h5>@T["Link"]</h5>
 
-<div class="form-group" asp-validation-class-for="LinkText">
+<div class="mb-3" asp-validation-class-for="LinkText">
     <label asp-for="LinkText">@T["Link Text"]</label>
     <input asp-for="LinkText" class="form-control" />
     <span asp-validation-for="LinkText"></span>
     <span class="hint">@T["The Link Text as it will be shown in the tree."]</span>
 </div>
 
-<div class="form-group">
+<div class="mb-3">
     <label asp-for="LinkUrl">@T["Link Url"]</label>
     <input asp-for="LinkUrl" class="form-control" />
     <span class="hint">@T["The url of the link. A link will be shown only if it or one of their children have a url. The url will be relative to the root of the admin site"]</span>
 </div>
 
-<div class="form-group">
+<div class="mb-3">
     <label asp-for="IconClass">@T["Icon"]</label>
 
     <div class="input-group mb-3">
         <div class="btn-toolbar" role="toolbar" aria-label="Icon Selector Toolbar">
 
-            <div class="btn-group input-group mr-2" role="group" aria-label="Icon Selector">
+            <div class="btn-group input-group me-2" role="group" aria-label="Icon Selector">
                 <button type="button" class="btn btn-primary sample-icon">
                     <i id="@("sample-icon-" + Html.IdFor(m=>m.IconClass))" class="@Model.IconClass"></i>
                 </button>
@@ -61,9 +61,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">@T["Pick an icon"]</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body p-0">
                     <div id="inline-picker" class="icp icp-auto" data-placement="inline"></div>
@@ -73,7 +71,7 @@
     </div>
 </div>
 
-<div class="form-group">
+<div class="mb-3">
     @{
         var selectedItems = JsonConvert.SerializeObject(Model.SelectedItems, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
         var allItems = JsonConvert.SerializeObject(Model.AllItems, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
@@ -86,7 +84,7 @@
 
     <div id="PermissionPicker" class="vue-multiselect" data-selected-items="@selectedItems" data-all-items="@allItems" v-cloak>
 
-        <div class="form-group">
+        <div class="mb-3">
             <ul class="list-group w-xl-50 permission-picker-default__list" v-show="arrayOfItems.length">
                 <li v-for="(item, i) in arrayOfItems"
                     class="list-group-item permission-picker-default__list-item d-flex align-items-start justify-content-between"
@@ -100,7 +98,7 @@
             </ul>
         </div>
 
-        <div class="form-group">
+        <div class="mb-3">
             <div class="w-xl-50">
                 <input asp-for="SelectedPermissionNames" type="hidden" v-model="selectedNames" />
                 <vue-multiselect v-model="value"