implemented search in icon-picker

Signed-off-by: fnuesse <felix.nuesse@t-online.de>
This commit is contained in:
fnuesse 2018-12-15 13:05:58 +01:00
parent 1989efbb63
commit 67fbba1a84
No known key found for this signature in database
GPG key ID: 2089A3431243E819
4 changed files with 46 additions and 0 deletions

View file

@ -140,6 +140,7 @@ class TranslationController extends ApiController {
'password.r' => $this->trans->t('Repeat password'),
'add.tag' => $this->trans->t('Add tag'),
'pick.icon' => $this->trans->t('Pick an icon'),
'pick.icon.search' => $this->trans->t('Search icons'),
'use.icon' => $this->trans->t('Use this icon'),
'selected.icon' => $this->trans->t('Selected icon'),

View file

@ -52,6 +52,47 @@
$('.iconList').scrollTop(offset.top);
};
var search = document.getElementById("iconPicker-Search");
search.addEventListener('keypress', function (e) {
if(e.keyCode === 13){
e.preventDefault();
}
});
search.addEventListener('keyup', function (e) {
var g={};
g.Numix=[];
scope.iconGroupsAll.Numix.forEach(function(element) {
if(scope.isAllowedIcon(element))
g.Numix.push(element);
});
g["essential-collection"]=[];
scope.iconGroupsAll["essential-collection"].forEach(function(element) {
if(scope.isAllowedIcon(element))
g["essential-collection"].push(element);
});
g["font-awesome"]=[];
scope.iconGroupsAll["font-awesome"].forEach(function(element) {
if(scope.isAllowedIcon(element))
g["font-awesome"].push(element);
});
scope.iconGroups=g;
scope.$apply();
});
scope.isAllowedIcon = function(IconElement) {
var searchval=search.value.toLowerCase();
var urlCropped = IconElement.url.substring(IconElement.url.lastIndexOf("/")+1, IconElement.url.length);
if(urlCropped.includes(searchval) || IconElement.pack.toLowerCase() ===searchval){
return true;
}
return false;
};
scope.useIcon = function() {
$http.get(scope.selectedIcon.url).then(function(result) {
var base64Data = window.btoa(result.data);

View file

@ -589,4 +589,7 @@
float: right;
width: calc(40% - 10px);
}
.iconSearch {
width: 100%;
}
}

View file

@ -12,6 +12,7 @@
</div>
</div>
<div class="iconModifier">
<input id="iconPicker-Search" class="iconSearch" type="text" placeholder="{{ 'pick.icon.search' | translate }}">
<!--
<div ng-repeat="(groupName, icons) in iconGroups">
<a ng-click="jumpToGroup(groupName)">{{groupName}}</a>