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 @@ - +
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 @@
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 @@ + +
+
+
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 @@
-
    - +
      +
      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 @@ + +
    1. +
      +
    2. 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 @@ - +
      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 @@ + + + + + + +
      + + 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; -}