libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

[KEYCLOAK-10018] Adding search highlight with text match

Browse source
This commit is contained in:
Martin Reinhardt 2019-06-07 10:26:39 +02:00 committed by Stan Silvert
parent ed4af9baba
commit b32a9debce
3 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
themes/src/main/resources/theme/base/admin/resources/js/controllers/groups.js
View file

@ -66,6 +66,16 @@ module.controller('GroupListCtrl', function($scope, $route, $q, realm, Groups, G
"subGroups": sortGroups('name', groups)
}
];
if (angular.isDefined(search) && search !== '') {
// Add highlight for concrete text match
setTimeout(function () {
document.querySelectorAll('span').forEach(function (element) {
if (element.textContent.indexOf(search) != -1) {
angular.element(element).addClass('highlight');
}
});
}, 500);
}
}, function (failed) {
Notifications.error(failed);
});

4
themes/src/main/resources/theme/base/admin/resources/partials/group-list.html
View file

@ -8,7 +8,7 @@
<div class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
<input type="text" autofocus placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
<div class="input-group-addon">
<i class="fa fa-search" id="groupSearch" ng-click="searchGroup()"></i>
</div>
@ -47,4 +47,4 @@
</div>
</div>
<kc-menu></kc-menu>
<kc-menu></kc-menu>

8
themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css
View file

@ -220,7 +220,7 @@ th.w-40 {
.sidebar-pf .nav-pills > li > a:hover{
background: #393f44;
border-color:#292e34;
border-color:#292e34;
border-left-color: #393f44;
color: #fff;
}
@ -423,3 +423,9 @@ div[tree-model] li .deactivate_selected {
font-weight: bold;
padding: 1px 5px;
}
/* search highlighting */
div[tree-model] li .highlight {
background-color: #aaddff;
}