From 80e7cea1d07804627e397013314813cac68956b5 Mon Sep 17 00:00:00 2001 From: colemanw Date: Sat, 16 Dec 2023 22:36:10 -0500 Subject: [PATCH 1/5] SearchKit - Rearrange 'compose search' into multiple tabs --- .../ang/crmSearchAdmin/compose.html | 87 ------------------- .../crmSearchAdmin/crmSearch-conditions.html | 8 ++ .../ang/crmSearchAdmin/crmSearch-fields.html | 8 ++ .../ang/crmSearchAdmin/crmSearch-for.html | 45 ++++++++++ .../{group.html => crmSearch-group.html} | 0 .../crmSearchAdmin/crmSearch-settings.html | 11 +++ .../crmSearchAdmin.component.js | 25 +++++- .../ang/crmSearchAdmin/crmSearchAdmin.html | 50 +++++++---- ext/search_kit/ang/crmSearchAdmin/tabs.html | 25 +----- ext/search_kit/css/crmSearchAdmin.css | 4 - 10 files changed, 135 insertions(+), 128 deletions(-) delete mode 100644 ext/search_kit/ang/crmSearchAdmin/compose.html create mode 100644 ext/search_kit/ang/crmSearchAdmin/crmSearch-conditions.html create mode 100644 ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html create mode 100644 ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html rename ext/search_kit/ang/crmSearchAdmin/{group.html => crmSearch-group.html} (100%) create mode 100644 ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html diff --git a/ext/search_kit/ang/crmSearchAdmin/compose.html b/ext/search_kit/ang/crmSearchAdmin/compose.html deleted file mode 100644 index 45f0e208e4ed..000000000000 --- a/ext/search_kit/ang/crmSearchAdmin/compose.html +++ /dev/null @@ -1,87 +0,0 @@ -
-
-
-
-
- - - -
-
- -
-
-
-
- - -
-
-
-
-
- - - - - -
-
-
- -
-
-
-
-
- -
-
- -
-
-
-
-
- - - {{:: ts('View Results') }} - - - -
-
-
- - {{:: ts('Field Transformations') }} - -
- -
- -
-
-
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-conditions.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-conditions.html new file mode 100644 index 000000000000..ef69b61a8c1e --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-conditions.html @@ -0,0 +1,8 @@ +
+ +
+
+ +
+ + diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html new file mode 100644 index 000000000000..c02e30b1407f --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html @@ -0,0 +1,8 @@ +
+
+ +
+ +
+
+
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html new file mode 100644 index 000000000000..e09ee67efdd7 --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html @@ -0,0 +1,45 @@ +
+
+ + +
+
+
+
+
+ + + +
+
+ +
+
+
+
+ + +
+
+
+
+
+ + + + + +
+
+
+ +
+
diff --git a/ext/search_kit/ang/crmSearchAdmin/group.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-group.html similarity index 100% rename from ext/search_kit/ang/crmSearchAdmin/group.html rename to ext/search_kit/ang/crmSearchAdmin/crmSearch-group.html diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html new file mode 100644 index 000000000000..46a0bceaf2a8 --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html @@ -0,0 +1,11 @@ +
+ +
+
+ +
+
+ +
+
+ diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js index 9f0062392c7e..57691eaa8cfc 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js @@ -29,7 +29,30 @@ this.searchDisplayPath = CRM.url('civicrm/search'); this.afformPath = CRM.url('civicrm/admin/afform'); - $scope.controls = {tab: 'compose', joinType: 'LEFT'}; + this.tabs = [ + { + key: 'for', + title: ts('Search For'), + icon: 'fa-search', + }, + { + key: 'conditions', + title: ts('Conditions'), + icon: 'fa-filter', + }, + { + key: 'fields', + title: ts('Select Fields'), + icon: 'fa-columns', + }, + { + key: 'settings', + title: ts('Configure Settings'), + icon: 'fa-gears', + }, + ]; + + $scope.controls = {tab: this.tabs[0].key, joinType: 'LEFT'}; $scope.joinTypes = [ {k: 'LEFT', v: ts('With (optional)')}, {k: 'INNER', v: ts('With (required)')}, diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html index 235c6773d05b..f3cfeb1f0a31 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html @@ -13,12 +13,18 @@

{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

-
+
-
- - +
+
+ +
@@ -55,29 +61,42 @@

{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

-
- +
+
    -
    -
    +
    +
    -
    -
    -
    @@ -85,5 +104,6 @@

    {{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

    +
    diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html index 7592b5001e5f..511780128239 100644 --- a/ext/search_kit/ang/crmSearchAdmin/tabs.html +++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html @@ -1,24 +1,7 @@ -
  • - -
    • -
  • -
    -
    - -
    -
    - -
    -
    -
    -
    • -
  • - -
    • -
  • - - - {{:: ts('Compose Search') }} +
  • + + + {{:: tab.title }}
  • diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css index 02a8e323f692..41bcc4b2a2df 100644 --- a/ext/search_kit/css/crmSearchAdmin.css +++ b/ext/search_kit/css/crmSearchAdmin.css @@ -1,7 +1,3 @@ -#bootstrap-theme .crm-search-criteria-column { - min-width: 500px; -} - #bootstrap-theme .crm-search-nav-tabs { position: relative; } From a9867bc3cf8294e7c04286dbeda73dd45a1f7bb8 Mon Sep 17 00:00:00 2001 From: colemanw Date: Sun, 17 Dec 2023 11:30:41 -0500 Subject: [PATCH 2/5] SearchKit - Place search results below tabbed interface, full-width --- .../debug.html => crmSearch-query.html} | 11 +++-------- .../crmSearchAdmin.component.js | 19 ++++++++++++++++--- .../ang/crmSearchAdmin/crmSearchAdmin.html | 15 ++++++++++----- .../crmSearchAdminResultsTable.component.js | 15 +++++++-------- .../crmSearchAdminResultsTable.html | 1 - ext/search_kit/ang/crmSearchAdmin/tabs.html | 3 ++- ext/search_kit/css/crmSearchAdmin.css | 15 ++++++++------- 7 files changed, 46 insertions(+), 33 deletions(-) rename ext/search_kit/ang/crmSearchAdmin/{resultsTable/debug.html => crmSearch-query.html} (78%) diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/debug.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html similarity index 78% rename from ext/search_kit/ang/crmSearchAdmin/resultsTable/debug.html rename to ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html index 63d15daf0fff..d22e34909a10 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/debug.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html @@ -1,17 +1,12 @@ -
    - - {{:: ts('Query Info') }} - -
    - 
    {{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}
    +
    API: 
    {{ $ctrl.debug.apiParams }}
    + 
    {{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}
    SQL: 
    {{:: ts('Run search to view SQL') }}
    {{ query }}
    -
    -
    + diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js index 57691eaa8cfc..1414ba4bd204 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js @@ -28,8 +28,9 @@ this.displayTypes = _.indexBy(CRM.crmSearchAdmin.displayTypes, 'id'); this.searchDisplayPath = CRM.url('civicrm/search'); this.afformPath = CRM.url('civicrm/admin/afform'); + this.debug = {}; - this.tabs = [ + this.mainTabs = [ { key: 'for', title: ts('Search For'), @@ -37,7 +38,7 @@ }, { key: 'conditions', - title: ts('Conditions'), + title: ts('Filter Conditions'), icon: 'fa-filter', }, { @@ -50,9 +51,20 @@ title: ts('Configure Settings'), icon: 'fa-gears', }, + { + key: 'query', + title: ts('Query Info'), + icon: 'fa-info-circle', + }, ]; - $scope.controls = {tab: this.tabs[0].key, joinType: 'LEFT'}; + $scope.controls = {tab: this.mainTabs[0].key, joinType: 'LEFT'}; + + this.selectedDisplay = function() { + // Could return the display but for now we don't need it + return $scope.controls.tab.startsWith('display_'); + }; + $scope.joinTypes = [ {k: 'LEFT', v: ts('With (optional)')}, {k: 'INNER', v: ts('With (required)')}, @@ -61,6 +73,7 @@ $scope.getEntity = searchMeta.getEntity; $scope.getField = searchMeta.getField; this.perm = { + viewDebugOutput: CRM.checkPerm('view debug output'), editGroups: CRM.checkPerm('edit groups') }; diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html index f3cfeb1f0a31..e5501d23b86b 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html @@ -91,13 +91,14 @@

    {{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

    • -
      -
      -
      + +
      +
      -
      -
      +
      @@ -105,5 +106,9 @@

      {{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

      +
      + +
      +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js index b682eaa65791..b55816ee87ce 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js @@ -4,7 +4,8 @@ // Specialized searchDisplay, only used by Admins angular.module('crmSearchAdmin').component('crmSearchAdminResultsTable', { bindings: { - search: '<' + search: '<', + debug: '<' }, require: { crmSearchAdmin: '^crmSearchAdmin' @@ -23,12 +24,9 @@ ctrl.settings.columns = _.transform(ctrl.search.api_params.select, function(columns, fieldExpr) { columns.push(searchMeta.fieldToColumn(fieldExpr, {label: true, sortable: true})); }).concat(ctrl.settings.columns); - ctrl.debug = { - apiParams: JSON.stringify(ctrl.search.api_params, null, 2) - }; - ctrl.perm = { - viewDebugOutput: CRM.checkPerm('view debug output'), - }; + ctrl.debug.apiParams = JSON.stringify(ctrl.search.api_params, null, 2); + delete ctrl.debug.sql; + delete ctrl.debug.timeIndex; ctrl.results = null; ctrl.rowCount = null; ctrl.page = 1; @@ -49,7 +47,8 @@ this.onPostRun.push(function(apiResults) { // Add debug output (e.g. raw SQL) to the "Query Info" tab - ctrl.debug = _.extend(_.pick(ctrl.debug, 'apiParams'), apiResults.run.debug); + ctrl.debug.sql = apiResults.run.debug.sql; + ctrl.debug.timeIndex = apiResults.run.debug.timeIndex; }); $scope.sortableColumnOptions = { diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html index 34fcf8dd8478..f4a1c86fdfbe 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html +++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html @@ -1,5 +1,4 @@
      -
      diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html index 511780128239..73fc1ad860b9 100644 --- a/ext/search_kit/ang/crmSearchAdmin/tabs.html +++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html @@ -1,9 +1,10 @@ -
    • +
    • {{:: tab.title }}
      • +
    • diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css index 41bcc4b2a2df..9e2f10ada74d 100644 --- a/ext/search_kit/css/crmSearchAdmin.css +++ b/ext/search_kit/css/crmSearchAdmin.css @@ -11,13 +11,8 @@ min-width: 66px; } -#bootstrap-theme.crm-search .nav-stacked { - margin-left: 0; - margin-right: 20px; -} - -#bootstrap-theme.crm-search ul.nav-stacked { - margin-top: 20px; +#bootstrap-theme.crm-search .crm-search-admin-main-tabs { + margin: 10px 20px 20px 0; } #bootstrap-theme.crm-search .help-block.bg-warning { @@ -51,6 +46,12 @@ cursor: default; } +#bootstrap-theme.crm-search ul.nav-stacked li[role=separator] { + height: 8px; + border-top: 1px solid lightgrey; + margin-top: 8px; +} + #bootstrap-theme.crm-search ul.nav-stacked li a[disabled] { text-decoration: line-through !important; color: grey; From eab8ba76619cc62da29b11b5007e7f4f08e83cd5 Mon Sep 17 00:00:00 2001 From: colemanw Date: Sun, 17 Dec 2023 21:34:14 -0500 Subject: [PATCH 3/5] SearchKit - Convert 'Field Transformations' accordion into 'Select Fields' tab --- .../ang/crmSearchAdmin/crmSearch-fields.html | 9 +-- .../crmSearchAdmin.component.js | 16 +++--- .../crmSearchAdminFields.component.js | 56 +++++++++++++++++++ .../crmSearchAdmin/crmSearchAdminFields.html | 13 +++++ .../crmSearchAdminResultsTable.component.js | 7 +-- .../crmSearchAdminResultsTable.html | 2 +- 6 files changed, 81 insertions(+), 22 deletions(-) create mode 100644 ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.component.js create mode 100644 ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html index c02e30b1407f..e699ea56e22e 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html @@ -1,8 +1,3 @@ -
      -
      - -
      - -
      -
      +
      +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js index 1414ba4bd204..48e8f31f7bd9 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js @@ -508,17 +508,9 @@ // Deletes an item from an array param this.clearParam = function(name, idx) { - if (name === 'select') { - // Function selectors use `ng-repeat` with `track by $index` so must be refreshed when splicing the array - ctrl.hideFuncitons(); - } ctrl.savedSearch.api_params[name].splice(idx, 1); }; - this.hideFuncitons = function() { - $scope.controls.showFunctions = false; - }; - function onChangeSelect(newSelect, oldSelect) { // When removing a column from SELECT, also remove from ORDER BY & HAVING _.each(_.difference(oldSelect, newSelect), function(col) { @@ -579,6 +571,14 @@ return {results: ctrl.getSelectFields()}; }; + this.fieldsForSelect = function() { + return { + results: ctrl.getAllFields(':label', ['Field', 'Custom', 'Extra', 'Pseudo'], (key) => { + ctrl.savedSearch.api_params.select.includes(key); + }) + }; + }; + this.getAllFields = function(suffix, allowedTypes, disabledIf, topJoin) { disabledIf = disabledIf || _.noop; allowedTypes = allowedTypes || ['Field', 'Custom', 'Extra', 'Filter']; diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.component.js new file mode 100644 index 000000000000..9b8422353f86 --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.component.js @@ -0,0 +1,56 @@ +(function(angular, $, _) { + "use strict"; + + angular.module('crmSearchAdmin').component('crmSearchAdminFields', { + bindings: { + }, + require: { + crmSearchAdmin: '^crmSearchAdmin' + }, + templateUrl: '~/crmSearchAdmin/crmSearchAdminFields.html', + controller: function ($scope, $element) { + var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), + ctrl = this; + + // savedSearch.api_params.select is an array of strings. + // ui-sortable (and angularJs loops in general) don't work well with primitives + // So this controller converts the strings into objects and maintains 2-way sync between + // the two arrays. + this.select = []; + + $scope.$watchCollection('$ctrl.crmSearchAdmin.savedSearch.api_params.select', function(flatSelect) { + ctrl.select.length = flatSelect.length; + flatSelect.forEach((key, index) => { + ctrl.select[index] = ctrl.select[index] || {}; + ctrl.select[index].key = key; + ctrl.select[index].label = ctrl.crmSearchAdmin.getFieldLabel(key); + ctrl.select[index].isPseudoField = ctrl.crmSearchAdmin.isPseudoField(key); + }); + }); + + $scope.$watch('$ctrl.select', function(selectObject, oldSelect) { + if (oldSelect && oldSelect.length && selectObject) { + ctrl.crmSearchAdmin.savedSearch.api_params.select.length = selectObject.length; + selectObject.forEach((item, index) => { + ctrl.crmSearchAdmin.savedSearch.api_params.select[index] = item.key; + }); + } + }, true); + + // Drag-n-drop settings for reordering search fields + this.sortableOptions = { + containment: '.crm-search-select-fields', + axis: 'y', + forcePlaceholderSize: true, + update: function(e, ui) { + // Don't allow items to be moved to position 0 if locked + if (!ui.item.sortable.dropindex && ctrl.crmSearchAdmin.groupExists) { + ui.item.sortable.cancel(); + } + } + }; + + } + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html new file mode 100644 index 000000000000..9bb43b853dc0 --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html @@ -0,0 +1,13 @@ +
      +
      + + + + +
      +
      + diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js index b55816ee87ce..b44da215eeca 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.component.js @@ -59,16 +59,11 @@ if (!ui.item.sortable.dropindex && ctrl.crmSearchAdmin.groupExists) { ui.item.sortable.cancel(); } - // Function selectors use `ng-repeat` with `track by $index` so must be refreshed when rearranging the array - ctrl.crmSearchAdmin.hideFuncitons(); } }; $scope.fieldsForSelect = function() { - return {results: ctrl.crmSearchAdmin.getAllFields(':label', ['Field', 'Custom', 'Extra', 'Pseudo'], function(key) { - return _.contains(ctrl.search.api_params.select, key); - }) - }; + return ctrl.crmSearchAdmin.fieldsForSelect(); }; $scope.addColumn = function(col) { diff --git a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html index f4a1c86fdfbe..b6b0e653cbfb 100644 --- a/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html +++ b/ext/search_kit/ang/crmSearchAdmin/resultsTable/crmSearchAdminResultsTable.html @@ -19,7 +19,7 @@ From 1cb1bd5055327b057bbe0f09283dd1a085a5d356 Mon Sep 17 00:00:00 2001 From: colemanw Date: Mon, 18 Dec 2023 12:03:14 -0500 Subject: [PATCH 4/5] SearchKit - add/fix role & aria properties for main tabs --- ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html | 6 +++--- ext/search_kit/ang/crmSearchAdmin/tabs.html | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html index e5501d23b86b..1e16b9e1d139 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html @@ -92,13 +92,13 @@

      {{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

      -
      +
      -
      +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html index 73fc1ad860b9..93505c382805 100644 --- a/ext/search_kit/ang/crmSearchAdmin/tabs.html +++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html @@ -1,11 +1,11 @@ -
    • +
    • {{:: tab.title }}
      • -
    • +
    • {{:: ts('Smart Group') }} {{ $ctrl.savedSearch.groups[0].title }} @@ -14,7 +14,7 @@
      • -
    • +
    • {{ display.label || ts('Untitled') }} @@ -26,7 +26,7 @@
      • -
    • +
    • From 8e597f9d348d28ccc21809b4f0e27d474a4c9f04 Mon Sep 17 00:00:00 2001 From: colemanw Date: Mon, 18 Dec 2023 13:52:58 -0500 Subject: [PATCH 5/5] SearchKit - Update tab styling --- .../ang/crmSearchAdmin/crmSearch-fields.html | 4 +-- .../ang/crmSearchAdmin/crmSearch-for.html | 10 +++--- .../ang/crmSearchAdmin/crmSearch-query.html | 22 ++++++------- .../crmSearchAdmin/crmSearch-settings.html | 4 +-- .../ang/crmSearchAdmin/crmSearchAdmin.html | 10 +++--- ext/search_kit/ang/crmSearchAdmin/tabs.html | 2 +- ext/search_kit/css/crmSearchAdmin.css | 32 +++++++++++++++++-- 7 files changed, 52 insertions(+), 32 deletions(-) diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html index e699ea56e22e..1aff32f0109a 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html @@ -1,3 +1,3 @@ -
      +
      -
      +
      • diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html index e09ee67efdd7..deaa53466d60 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html @@ -1,9 +1,7 @@ -
      -
      - - -
      -
      +
      + + +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html index d22e34909a10..9968ff7f881a 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html @@ -1,12 +1,10 @@ -
      -
      - API: -
      - 
      {{ $ctrl.debug.apiParams }}
      - 
      {{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}
      -
      - SQL: - 
      {{:: ts('Run search to view SQL') }}
      - 
      {{ query }}
      -
      -
      +
      + API: +
      +
      {{ $ctrl.debug.apiParams }}
      +
      {{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}
      +
      + SQL: + 
      {{:: ts('Run search to view SQL') }}
      + 
      {{ query }}
      +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html index 46a0bceaf2a8..ee4bb9bd1487 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html @@ -1,6 +1,4 @@ -
      - -
      +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html index 1e16b9e1d139..2bb1a7b94156 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html @@ -12,7 +12,7 @@

      {{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

      -
      +
      @@ -90,15 +90,15 @@

      {{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}

      -
      +
      -
      -
      +
      +
      -
      +
      diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html index 93505c382805..4ba77099dbf4 100644 --- a/ext/search_kit/ang/crmSearchAdmin/tabs.html +++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html @@ -10,7 +10,7 @@ {{:: ts('Smart Group') }} {{ $ctrl.savedSearch.groups[0].title }} -
      • diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css index 9e2f10ada74d..71093879f496 100644 --- a/ext/search_kit/css/crmSearchAdmin.css +++ b/ext/search_kit/css/crmSearchAdmin.css @@ -7,12 +7,16 @@ top: 0; } +#bootstrap-theme #crm-saved-search-label { + width: calc(100% - 1rem); +} + #bootstrap-theme .crm-search-admin-search-listing-buttons { min-width: 66px; } -#bootstrap-theme.crm-search .crm-search-admin-main-tabs { - margin: 10px 20px 20px 0; +#bootstrap-theme.crm-search .crm-search-admin-outer { + margin-bottom: 20px; } #bootstrap-theme.crm-search .help-block.bg-warning { @@ -42,14 +46,36 @@ color: #8a1f11; } +#bootstrap-theme.crm-search .crm-search-admin-main-tabs { + margin-top: 10px; +} + #bootstrap-theme.crm-search ul.nav-stacked li { cursor: default; + margin: 0; + padding: 0; +} + +#bootstrap-theme.crm-search ul.nav-stacked li.active { + border-right: 0 none; + width: calc(100% + 1px); +} +#bootstrap-theme.crm-search ul.nav-stacked li.active a { + background-color: white; + color: inherit; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + border: 1px solid lightgrey; + border-right: 0 none; + box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } #bootstrap-theme.crm-search ul.nav-stacked li[role=separator] { - height: 8px; + height: 12px; border-top: 1px solid lightgrey; margin-top: 8px; + margin-left: 15px; + margin-right: 30px; } #bootstrap-theme.crm-search ul.nav-stacked li a[disabled] {