From 83f7a1031c19d423902f68849ea643dd54c1c10a Mon Sep 17 00:00:00 2001 From: Coleman Watts <coleman@civicrm.org> Date: Tue, 9 Nov 2021 19:43:34 -0500 Subject: [PATCH] SearchKit - Animated loading skeleton --- .../crmSearchAdminResultsTable.html | 2 +- ext/search_kit/ang/crmSearchDisplay.ang.php | 3 ++ .../crmSearchDisplayGrid.html | 2 +- .../crmSearchDisplayGridLoading.html | 4 ++ .../crmSearchDisplayList.html | 4 +- .../crmSearchDisplayListLoading.html | 4 ++ .../crmSearchDisplayTable.html | 2 +- .../crmSearchDisplayTableLoading.html | 9 +++++ ext/search_kit/css/crmSearchDisplay.css | 40 +++++++++++++++++++ ext/search_kit/css/crmSearchTasks.css | 10 ----- 10 files changed, 65 insertions(+), 15 deletions(-) create mode 100644 ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html create mode 100644 ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html create mode 100644 ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html create mode 100644 ext/search_kit/css/crmSearchDisplay.css diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html index f8c04f2f6cfe..aff0c96b795a 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html +++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html @@ -25,7 +25,7 @@ </th> </tr> </thead> - <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTableBody.html'"></tbody> + <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTable' + ($ctrl.loading ? 'Loading' : 'Body') + '.html'"></tbody> </table> <div ng-include="'~/crmSearchDisplay/Pager.html'"></div> </div> diff --git a/ext/search_kit/ang/crmSearchDisplay.ang.php b/ext/search_kit/ang/crmSearchDisplay.ang.php index a70d2f1ec263..0dbdeb3526e2 100644 --- a/ext/search_kit/ang/crmSearchDisplay.ang.php +++ b/ext/search_kit/ang/crmSearchDisplay.ang.php @@ -9,6 +9,9 @@ 'partials' => [ 'ang/crmSearchDisplay', ], + 'css' => [ + 'css/crmSearchDisplay.css', + ], 'basePages' => [], 'requires' => ['api4', 'ngSanitize'], 'exports' => [ diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html index 5d8c3b719642..46c09304ed63 100644 --- a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html +++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html @@ -2,7 +2,7 @@ <div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div> <div class="crm-search-display-grid-container crm-search-display-grid-layout-{{$ctrl.settings.colno}}" - ng-include="'~/crmSearchDisplayGrid/crmSearchDisplayGridItems.html'" + ng-include="'~/crmSearchDisplayGrid/crmSearchDisplayGrid' + ($ctrl.loading ? 'Loading' : 'Items') + '.html'" ></div> <div ng-include="'~/crmSearchDisplay/Pager.html'"></div> </div> diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html new file mode 100644 index 000000000000..b63dd058f7fa --- /dev/null +++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html @@ -0,0 +1,4 @@ +<!-- Placeholder shown during ajax loading --> +<div ng-repeat="num in [1,2,3,4,5] track by $index" style="width: 100px; height: 50px;"> + <div class="crm-search-loading-placeholder"></div> +</div> diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html index 5428a7713d1e..1b20b52b6d18 100644 --- a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html +++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html @@ -1,6 +1,6 @@ <div class="crm-search-display crm-search-display-list"> <div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div> - <ol ng-if=":: $ctrl.settings.style === 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayListItems.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ol> - <ul ng-if=":: $ctrl.settings.style !== 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayListItems.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ul> + <ol ng-if=":: $ctrl.settings.style === 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayList' + ($ctrl.loading ? 'Loading' : 'Items') + '.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ol> + <ul ng-if=":: $ctrl.settings.style !== 'ol'" ng-include="'~/crmSearchDisplayList/crmSearchDisplayList' + ($ctrl.loading ? 'Loading' : 'Items') + '.html'" ng-style="{'list-style': $ctrl.settings.symbol}"></ul> <div ng-include="'~/crmSearchDisplay/Pager.html'"></div> </div> diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html new file mode 100644 index 000000000000..af84f53ea46e --- /dev/null +++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html @@ -0,0 +1,4 @@ +<!-- Placeholder shown during ajax loading --> +<li ng-repeat="num in [1,2,3,4,5] track by $index"> + <div class="crm-search-loading-placeholder"></div> +</li> diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html index 5857239c1368..b5e28566f74d 100644 --- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html +++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html @@ -15,7 +15,7 @@ </th> </tr> </thead> - <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTableBody.html'"></tbody> + <tbody ng-include="'~/crmSearchDisplayTable/crmSearchDisplayTable' + ($ctrl.loading ? 'Loading' : 'Body') + '.html'"></tbody> </table> <div ng-include="'~/crmSearchDisplay/Pager.html'"></div> </div> diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html new file mode 100644 index 000000000000..a3d01656ae73 --- /dev/null +++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html @@ -0,0 +1,9 @@ +<!-- Placeholder table rows shown during ajax loading --> +<tr ng-repeat="num in [1,2,3,4,5] track by $index"> + <td ng-if=":: $ctrl.settings.actions"> + <input type="checkbox" disabled> + </td> + <td ng-repeat="col in $ctrl.settings.columns"> + <div class="crm-search-loading-placeholder"></div> + </td> +</tr> diff --git a/ext/search_kit/css/crmSearchDisplay.css b/ext/search_kit/css/crmSearchDisplay.css new file mode 100644 index 000000000000..631f3d74a008 --- /dev/null +++ b/ext/search_kit/css/crmSearchDisplay.css @@ -0,0 +1,40 @@ +/* Sortable headers */ +#bootstrap-theme .crm-search-display th[ng-click] { + cursor: pointer; +} +#bootstrap-theme .crm-search-display th i.fa-sort-desc, +#bootstrap-theme .crm-search-display th i.fa-sort-asc { + color: #1a5a82; +} +#bootstrap-theme .crm-search-display th:not(:hover) i.fa-sort { + opacity: .5; +} + +/* Loading placeholders */ +#bootstrap-theme .crm-search-loading-placeholder { + height: 2em; + width: 80%; + position: relative; + overflow: hidden; + background-color: rgba(0,0,0,.04); + display: inline-block; +} +#bootstrap-theme .crm-search-loading-placeholder::before { + content: ''; + display: block; + position: absolute; + left: -150px; + top: 0; + height: 100%; + width: 150px; + background: linear-gradient(to right, transparent 0%, rgba(0,0,0,.1) 50%, transparent 100%); + animation: searchKitLoadingAnimation 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; +} +@keyframes searchKitLoadingAnimation { + from { + left: -150px; + } + to { + left: 100%; + } +} diff --git a/ext/search_kit/css/crmSearchTasks.css b/ext/search_kit/css/crmSearchTasks.css index dbd48542e1c2..89fada1d5909 100644 --- a/ext/search_kit/css/crmSearchTasks.css +++ b/ext/search_kit/css/crmSearchTasks.css @@ -26,13 +26,3 @@ bottom: -22px; left: 0; } -#bootstrap-theme .crm-search-display th[ng-click] { - cursor: pointer; -} -#bootstrap-theme .crm-search-display th i.fa-sort-desc, -#bootstrap-theme .crm-search-display th i.fa-sort-asc { - color: #1a5a82; -} -#bootstrap-theme .crm-search-display th:not(:hover) i.fa-sort { - opacity: .5; -}