Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the action bar on manage contents page #12368

Closed
Closed
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@model ContentOptionsViewModel
@inject OrchardCore.DisplayManagement.IDisplayManager<ContentOptionsViewModel> ContentOptionsDisplayManager

<div class="mb-0" style="display:none" id="actions">
<div class="dropdown mt-1">
<div style="display: none" id="actions">
<div class="dropdown">
<button class="btn btn-sm btn-light dropdown-toggle" type="button" id="bulk-action-menu-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@T["Actions"]
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,25 @@
<input type="submit" name="submit.BulkAction" class="visually-hidden" />
@Html.HiddenFor(o => o.Options.BulkAction)

<div class="card mb-3 position-sticky action-bar">
<div class="card-body bg-primary p-3">
<div class="mb-0">
@await DisplayAsync(Model.Header.Search)
@await DisplayAsync(Model.Header.Create)
<div class="card bg-primary mb-3 position-sticky action-bar">
<div class="card-body">
<div class="row gx-3">
<div class="col">
@await DisplayAsync(Model.Header.Search)
</div>
<div class="col-auto">
@await DisplayAsync(Model.Header.Create)
</div>
</div>
</div>
</div>
<ul class="list-group with-checkbox">
<li class="list-group-item bg-primary">
<div class="row">
<div class="row gx-3">
<div class="col">
@await DisplayAsync(Model.Header.Summary)
</div>
<div class="col d-flex justify-content-start flex-row-reverse">
<div class="col col-md-auto text-end">
@await DisplayAsync(Model.Header.Actions)
</div>
</div>
Expand All @@ -48,26 +52,26 @@
@await DisplayAsync(Model.Pager)

<script at="Foot">
$(function () {
$(function() {
var actions = $("#actions");
var items = $("#items");
var filters = $(".filter");
var selectAllCtrl = $("#select-all");
var selectedItems = $("#selected-items");
var itemsCheckboxes = $(":checkbox[name='itemIds']");

@* This applies to all filter selectpickers on page. Add .nosubmit to not submit *@
$('.selectpicker:not(.nosubmit)').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
$("[name='submit.Filter']").click();
});
@* This applies to all filter selectpickers on page. Add .nosubmit to not submit *@
$('.selectpicker:not(.nosubmit)').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
$("[name='submit.Filter']").click();
});

$(".dropdown-menu .dropdown-item").filter(function () {
$(".dropdown-menu .dropdown-item").filter(function() {
return $(this).data("action");
}).on("click", function () {
}).on("click", function() {
if ($(":checkbox[name='itemIds']:checked").length > 1) {
var $this = $(this);
confirmDialog({
...$this.data(), callback: function (r) {
...$this.data(), callback: function(r) {
if (r) {
$("[name='Options.BulkAction']").val($this.data("action"));
$("[name='submit.BulkAction']").click();
Expand All @@ -91,13 +95,13 @@
}
}

selectAllCtrl.click(function(){
selectAllCtrl.click(function() {
itemsCheckboxes.not(this).prop("checked", this.checked);
selectedItems.text($(":checkbox[name='itemIds']:checked").length + ' @T["selected"]');
displayActionsOrFilters();
});

itemsCheckboxes.on("click", function () {
itemsCheckboxes.on("click", function() {
var itemsCount = $(":checkbox[name='itemIds']").length;
var selectedItemsCount = $(":checkbox[name='itemIds']:checked").length;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
@model ContentOptionsViewModel
<div class="d-inline-flex float-end mb-0">
<div class="btn-group">
@if (Model.CreatableTypes.Any())
{
@if (Model.CreatableTypes.Count == 1)
@if (Model.CreatableTypes.Count == 0)
{
return;
}

@if (Model.CreatableTypes.Count == 1)
{
<a class="btn btn-sm btn-secondary" href="@Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Create", id = Model.CreatableTypes.First().Value, returnUrl = FullRequestPath })">@T["New {0}", Model.CreatableTypes.First().Text]</a>
}
else
{
<div class="dropdown">
<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["New"]
</button>
<ul class="dropdown-menu dropdown-menu-end scrollable" aria-labelledby="bulk-action-menu-button">
@foreach (var item in Model.CreatableTypes)
{
<a class="btn btn-sm btn-secondary" href="@Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Create", id = Model.CreatableTypes.First().Value, returnUrl = FullRequestPath })">@T["New {0}", Model.CreatableTypes.First().Text]</a>
<li><a class="dropdown-item" href="@Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Create", id = @item.Value, returnUrl = FullRequestPath })">@T[Html.Encode(item.Text)]</a></li>
}
else
{
<div class="dropdown order-md-1">
<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["New"]
</button>
<ul class="dropdown-menu dropdown-menu-end scrollable" aria-labelledby="bulk-action-menu-button">
@foreach (var item in Model.CreatableTypes)
{
<li><a class="dropdown-item" href="@Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "Create", id = @item.Value, returnUrl = FullRequestPath })">@T[Html.Encode(item.Text)]</a></li>
}
</ul>
</div>
}
}
</ul>
</div>
</div>
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
@{
var formActionWithoutTypeName = Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "List", contentTypeId = "" });
}
<div class="mb-0 filter">
<div class="btn-group mt-1">
@if (Model.ContentTypeOptions.Any())
<div class="filter">
<div class="btn-group">
@if (Model.ContentTypeOptions.Count > 0)
{
<select asp-for="SelectedContentType" asp-items="Model.ContentTypeOptions" class="selectpicker contenttypes-selectpicker show-tick me-2" data-header="@T["Filter by content type"]" data-live-search="true" data-selected-text-format="static" data-width="fit" title="@T["Content Type"]" data-style="btn-sm" data-dropdown-align-right="auto">
</select>
<select asp-for="SelectedContentType" asp-items="Model.ContentTypeOptions" class="selectpicker contenttypes-selectpicker show-tick me-2" data-header="@T["Filter by content type"]" data-selected-text-format="static" data-width="fit" data-dropdown-align-right="auto" title="@T["Content Type"]" data-style="btn-sm" data-live-search="true"></select>
}
<select asp-for="ContentsStatus" asp-items="@Model.ContentStatuses" class="selectpicker contentstatuses-selectpicker show-tick me-2" data-header="@T["Filter by status"]" data-selected-text-format="static" data-width="fit" data-dropdown-align-right="auto" title="@T["Show"]" data-style="btn-sm"></select>
<select asp-for="OrderBy" asp-items="@Model.ContentSorts" class="selectpicker contentsorts-selectpicker show-tick" data-header="@T["Sort by"]" data-width="fit" data-selected-text-format="static" data-dropdown-align-right="true" title="@T["Sort"]" data-style="btn-sm"></select>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,36 @@
@inject IDisplayManager<ContentOptionsViewModel> DisplayManager
@{
var syntaxThumbnail = await DisplayManager.BuildDisplayAsync(Model, null, "Thumbnail");
var dropdownClassList = new List<string>()
{
"dropdown-menu"
};

if (CultureInfo.CurrentUICulture.IsRightToLeft())
{
dropdownClassList.Add("dropdown-menu-start");
}
}
<div class="input-group input-group-sm w-50 d-inline-flex has-filter">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here try w-md-50 or w-lg-50 instead.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Skrypt are you fine to merge this without this suggestion?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Skrypt if you must have a max width set, we could add w-xxl-75 just for super large screens.

<div class="input-group-prepend">
<button class="btn btn-sm dropdown-toggle" style="border:1px solid lightgrey" type="button"
data-bs-toggle="dropdown" id="filter-dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" title="@T["Filters"]" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu @if(CultureInfo.CurrentUICulture.IsRightToLeft()){<text>dropdown-menu-start</text>}"
aria-labelledby="filter-dropdown">
<li><a class="dropdown-item" href="?q=status:Draft">@T["Only draft items"]</a></li>
<li><a class="dropdown-item" href="?q=status:Published">@T["Only published items"]</a></li>
<li><a class="dropdown-item" href="?q=status:Owner">@T["Owned by me"]</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#modalContentOptionsFilterSyntax">@T["Filter syntax"]</a></li>
</ul>
</div>
<div class="input-group input-group-sm has-filter">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" id="filter-dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" title="@T["Filters"]" aria-hidden="true"></i>
</button>
<ul class="@String.Join(' ', dropdownClassList)" aria-labelledby="filter-dropdown">
<li><a class="dropdown-item" href="?q=status:Draft">@T["Only draft items"]</a></li>
<li><a class="dropdown-item" href="?q=status:Published">@T["Only published items"]</a></li>
<li><a class="dropdown-item" href="?q=status:Owner">@T["Owned by me"]</a></li>
<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#modalContentOptionsFilterSyntax">@T["Filter syntax"]</a></li>
</ul>
<input asp-for="OriginalSearchText" type="hidden" />

<label asp-for="SearchText" class="sr-only">@T["Search"]</label>
<i class="fa fa-search form-control-feedback" aria-hidden="true"></i>
<input asp-for="SearchText" class="form-control" placeholder="@T["Search"]" inputmode="search" type="search"
autofocus />
<input asp-for="SearchText" class="form-control" placeholder="@T["Search"]" inputmode="search" type="search" autofocus />
</div>

<zone name="Footer">
<div class="modal fade" id="modalContentOptionsFilterSyntax" tabindex="-1" role="dialog"
aria-labelledby="content-filters-syntax-title" aria-hidden="true">
aria-labelledby="content-filters-syntax-title" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
Expand Down Expand Up @@ -79,7 +83,7 @@
<li>
<span class="hint">" ... "</span>
<span class="hint">@T["Escape operators, e.g."]&nbsp text:"foo bar"</span>
</li>
</li>
</ul>
</li>
</ul>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@model ContentOptionsViewModel

<div class="mb-0 text-nowrap">
<div class="form-check mt-2 me-n2">
<div class="text-nowrap">
<div class="form-check mt-1 mb-0">
<input type="checkbox" class="form-check-input" id="select-all">
<label class="form-check-label" for="select-all" id="select-all-label" title="@T["Select All"]"></label>
<label id="items" for="select-all">@T.Plural((int)Model.ContentItemsCount, "1 item", "{0} items")<span class="text-muted" title="@T["Items {0} to {1}", (int)Model.StartIndex, (int)Model.EndIndex]">@T.Plural((int)Model.TotalItemCount, " / {0} item in total", " / {0} items in total")</span></label>
Expand Down