fix: move list view selection options to after list in focus order
This commit is contained in:
Mike Masey
committed by
Michael Latouche
Michael Latouche
parent
eb9f9c68dd
commit
3ebd15b67e
@@ -30,16 +30,18 @@ Use this directive make an element sticky and follow the page when scrolling. `u
|
||||
/**
|
||||
Toggle `umb-sticky-bar--active` class on the sticky-bar element
|
||||
**/
|
||||
const setClass = (addClass, current) => current.classList.toggle('umb-sticky-bar--active', addClass);
|
||||
const setClass = (addClass, current) => current.classList.toggle('umb-sticky-bar--active', addClass);
|
||||
|
||||
/**
|
||||
Inserts two elements in the umbStickyBar parent element
|
||||
These are used by the IntersectionObserve to calculate scroll position
|
||||
**/
|
||||
const addSentinel = current => {
|
||||
const sentinel = document.createElement('div');
|
||||
sentinel.classList.add('umb-sticky-sentinel', '-top');
|
||||
if (current.parentElement.querySelector(".umb-sticky-sentinel") === null) {
|
||||
const sentinel = document.createElement("div");
|
||||
sentinel.classList.add("umb-sticky-sentinel", "-top");
|
||||
current.parentElement.prepend(sentinel);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -219,6 +219,16 @@
|
||||
display: none !important
|
||||
}
|
||||
|
||||
/* Sticky sub header with correct focus ordering */
|
||||
.umb-listview .umb-listview__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.umb-listview .umb-listview__container .umb-editor-sub-header {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
/* ---------- LAYOUTS ---------- */
|
||||
|
||||
.list-view-layout {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row-fluid" ng-switch-when="false">
|
||||
<div class="row-fluid umb-listview__container" ng-switch-when="false">
|
||||
|
||||
<umb-editor-sub-header ng-class="{'--state-selection':(selection.length > 0)}">
|
||||
<umb-editor-sub-header ng-if="(selection.length == 0)">
|
||||
|
||||
<umb-editor-sub-header-content-left>
|
||||
|
||||
@@ -88,30 +88,12 @@
|
||||
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
<umb-editor-sub-header-section ng-show="(selection.length > 0)">
|
||||
<umb-button
|
||||
type="button"
|
||||
label="Clear selection"
|
||||
label-key="buttons_clearSelection"
|
||||
button-style="white"
|
||||
action="clearSelection()"
|
||||
disabled="actionInProgress">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
<umb-editor-sub-header-section ng-show="(selection.length > 0)">
|
||||
<strong ng-show="!actionInProgress">{{ selectedItemsCount() }} <localize key="general_of">of</localize> {{ listViewResultSet.items.length }} <localize key="general_selected">selected</localize></strong>
|
||||
<strong ng-show="actionInProgress" ng-bind="bulkStatus"></strong>
|
||||
|
||||
<umb-loader position="bottom" ng-show="actionInProgress"></umb-loader>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
|
||||
<umb-editor-sub-header-content-right>
|
||||
|
||||
<umb-editor-sub-header-section ng-show="(selection.length == 0)">
|
||||
<umb-editor-sub-header-section>
|
||||
|
||||
<umb-layout-selector
|
||||
ng-show="options.layout.layouts"
|
||||
@@ -122,81 +104,12 @@
|
||||
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
<umb-editor-sub-header-section ng-show="(selection.length == 0)">
|
||||
<umb-editor-sub-header-section>
|
||||
|
||||
<umb-mini-search model="options.filter" on-search="makeSearch()" on-start-typing="onSearchStartTyping()">
|
||||
</umb-mini-search>
|
||||
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
<umb-editor-sub-header-section ng-show="(selection.length > 0)">
|
||||
|
||||
<umb-button
|
||||
ng-if="options.allowBulkPublish && (buttonPermissions == null || buttonPermissions.canPublish)"
|
||||
style="margin-right: 5px;"
|
||||
type="button"
|
||||
button-style="white"
|
||||
label-key="actions_publish"
|
||||
icon="icon-globe"
|
||||
action="publish()"
|
||||
disabled="actionInProgress"
|
||||
size="xs"
|
||||
add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="options.allowBulkUnpublish && (buttonPermissions == null || buttonPermissions.canUnpublish)"
|
||||
style="margin-right: 5px;"
|
||||
type="button"
|
||||
button-style="white"
|
||||
label-key="actions_unpublish"
|
||||
icon="icon-block"
|
||||
action="unpublish()"
|
||||
disabled="actionInProgress"
|
||||
size="xs"
|
||||
add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="options.allowBulkCopy && (buttonPermissions == null || buttonPermissions.canCopy)"
|
||||
style="margin-right: 5px;"
|
||||
type="button"
|
||||
button-style="white"
|
||||
label-key="actions_copy"
|
||||
icon="icon-documents"
|
||||
action="copy()"
|
||||
disabled="actionInProgress"
|
||||
size="xs"
|
||||
add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="options.allowBulkMove && (buttonPermissions == null || buttonPermissions.canMove)"
|
||||
style="margin-right: 5px;"
|
||||
type="button"
|
||||
button-style="white"
|
||||
label-key="actions_move"
|
||||
icon="icon-enter"
|
||||
action="move()"
|
||||
disabled="actionInProgress"
|
||||
size="xs"
|
||||
add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="options.allowBulkDelete && (buttonPermissions == null || buttonPermissions.canDelete)"
|
||||
type="button"
|
||||
button-style="white"
|
||||
label-key="actions_delete"
|
||||
icon="icon-trash"
|
||||
action="delete(selection.length, listViewResultSet.items.length)"
|
||||
disabled="actionInProgress"
|
||||
size="xs"
|
||||
add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
@@ -216,6 +129,64 @@
|
||||
|
||||
<div ng-if="viewLoaded && viewLoadedError" class="umb-alert umb-alert--warning">{{viewLoadedError}}</div>
|
||||
|
||||
<umb-editor-sub-header class="--state-selection" ng-if="(selection.length > 0)">
|
||||
|
||||
<umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-button type="button" label="Clear selection" label-key="buttons_clearSelection" button-style="white"
|
||||
action="clearSelection()" disabled="actionInProgress">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
<umb-editor-sub-header-section>
|
||||
<strong ng-show="!actionInProgress">{{ selectedItemsCount() }}
|
||||
<localize key="general_of">of</localize> {{
|
||||
listViewResultSet.items.length }}
|
||||
<localize key="general_selected">selected</localize>
|
||||
</strong>
|
||||
<strong ng-show="actionInProgress" ng-bind="bulkStatus"></strong>
|
||||
<umb-loader position="bottom" ng-show="actionInProgress"></umb-loader>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
|
||||
<umb-editor-sub-header-content-right>
|
||||
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-button ng-if="options.allowBulkPublish && (buttonPermissions == null || buttonPermissions.canPublish)"
|
||||
style="margin-right: 5px" type="button" button-style="white" label-key="actions_publish" icon="icon-globe"
|
||||
action="publish()" disabled="actionInProgress" size="xs" add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="options.allowBulkUnpublish && (buttonPermissions == null || buttonPermissions.canUnpublish)"
|
||||
style="margin-right: 5px" type="button" button-style="white" label-key="actions_unpublish" icon="icon-block"
|
||||
action="unpublish()" disabled="actionInProgress" size="xs" add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button ng-if="options.allowBulkCopy && (buttonPermissions == null || buttonPermissions.canCopy)"
|
||||
style="margin-right: 5px" type="button" button-style="white" label-key="actions_copy" icon="icon-documents"
|
||||
action="copy()" disabled="actionInProgress" size="xs" add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button ng-if="options.allowBulkMove && (buttonPermissions == null || buttonPermissions.canMove)"
|
||||
style="margin-right: 5px" type="button" button-style="white" label-key="actions_move" icon="icon-enter"
|
||||
action="move()" disabled="actionInProgress" size="xs" add-ellipsis="true">
|
||||
</umb-button>
|
||||
|
||||
<umb-button ng-if="options.allowBulkDelete && (buttonPermissions == null || buttonPermissions.canDelete)"
|
||||
type="button" button-style="white" label-key="actions_delete" icon="icon-trash"
|
||||
action="delete(selection.length, listViewResultSet.items.length)" disabled="actionInProgress" size="xs"
|
||||
add-ellipsis="true">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-show="listViewResultSet.totalPages"
|
||||
|
||||
Reference in New Issue
Block a user