From 83f7a1031c19d423902f68849ea643dd54c1c10a Mon Sep 17 00:00:00 2001 From: Coleman Watts 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 f8c04f2f6c..aff0c96b79 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html +++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html @@ -25,7 +25,7 @@ - +
diff --git a/ext/search_kit/ang/crmSearchDisplay.ang.php b/ext/search_kit/ang/crmSearchDisplay.ang.php index a70d2f1ec2..0dbdeb3526 100644 --- a/ext/search_kit/ang/crmSearchDisplay.ang.php +++ b/ext/search_kit/ang/crmSearchDisplay.ang.php @@ -9,6 +9,9 @@ return [ '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 5d8c3b7196..46c09304ed 100644 --- a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html +++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html @@ -2,7 +2,7 @@
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html new file mode 100644 index 0000000000..b63dd058f7 --- /dev/null +++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridLoading.html @@ -0,0 +1,4 @@ + +
+
+
diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html index 5428a7713d..1b20b52b6d 100644 --- a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html +++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.html @@ -1,6 +1,6 @@
-
    - +
      +
      diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html new file mode 100644 index 0000000000..af84f53ea4 --- /dev/null +++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListLoading.html @@ -0,0 +1,4 @@ + +
    1. +
      +
      2. diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html index 5857239c13..b5e28566f7 100644 --- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html +++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html @@ -15,7 +15,7 @@ - +
      diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html new file mode 100644 index 0000000000..a3d01656ae --- /dev/null +++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTableLoading.html @@ -0,0 +1,9 @@ + + + + + + +
      + + diff --git a/ext/search_kit/css/crmSearchDisplay.css b/ext/search_kit/css/crmSearchDisplay.css new file mode 100644 index 0000000000..631f3d74a0 --- /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 dbd48542e1..89fada1d59 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; -} -- 2.25.1