Skip to content

Commit

Permalink
Bootstrap 5 in admin (#9371)
Browse files Browse the repository at this point in the history
Co-authored-by: Jasmin Savard <[email protected]>
Co-authored-by: Sébastien Ros <[email protected]>
  • Loading branch information
3 people authored May 5, 2022
1 parent 2367504 commit ef76b6f
Show file tree
Hide file tree
Showing 653 changed files with 64,610 additions and 48,848 deletions.
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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));">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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++)
{
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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="[email protected]">
<label class="custom-control-label" for="[email protected]"></label>
<div class="form-check float-start">
<input type="checkbox" class="form-check-input" value="@contentItem.Id" name="itemIds" id="[email protected]">
<label class="form-check-label" for="[email protected]"></label>
</div>
@if (await AuthorizationService.AuthorizeAsync(User, CommonPermissions.EditContent, contentItem))
{
Expand All @@ -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>
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
"name": "orchardcore.admindashboard",
"version": "1.0.0",
"dependencies": {
"bootstrap": "4.6.1"
"bootstrap": "5.1.3"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

},
Expand All @@ -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();
}
}
})
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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() });
Expand All @@ -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"
Expand All @@ -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"
Expand Down
Loading

0 comments on commit ef76b6f

Please sign in to comment.