Commit 9a47222e authored by Michael Danielczok's avatar Michael Danielczok

feat: Added icon filter in FontAwesome select popup.

#853
parent 82ea20ac
.window-iconSelect-searchContainer {
margin: 0 auto;
padding: 10px 0;
width: 300px;
position: relative;
}
.window-iconSelect-search-prefix {
height: 100%;
left: 0;
opacity: 0.4;
padding: 7px 0;
position: absolute;
text-align: center;
top: calc(50% - 15px);
width: 30px;
}
.window-iconSelect-search {
padding-left: 30px;
width: 100%;
}
.window-iconSelect-search:focus + .window-iconSelect-search-prefix {
opacity: 1;
}
\ No newline at end of file
......@@ -9,7 +9,9 @@ define('controls/icons/Confirm', [
'qui/QUI',
'qui/controls/windows/Confirm',
'Locale'
'Locale',
'css!controls/icons/Confirm.css'
], function (QUI, QUIConfirm, QUILocale) {
"use strict";
......@@ -25,6 +27,7 @@ define('controls/icons/Confirm', [
options: {
title : QUILocale.get('quiqqer/quiqqer', 'control.icons.confirm.title'),
icon : 'fa fa-css3',
'class' : 'qui-window-popup-icons',
maxHeight: 600,
maxWidth : 800
},
......@@ -32,7 +35,12 @@ define('controls/icons/Confirm', [
initialize: function (options) {
this.parent(options);
this.$Frame = null;
this.$Frame = null;
this.$Search = null;
this.$IconContainer = null;
this.icons = null;
this.allIconsVisible = true;
this.NoResultsInfo = null;
this.addEvents({
onOpen: this.$onOpen
......@@ -45,16 +53,33 @@ define('controls/icons/Confirm', [
$onOpen: function () {
this.getContent().set('html', '');
var id = this.getId();
var self = this,
id = this.getId(),
SearchContainer = this.createSearch();
SearchContainer.inject(this.getContent(), 'top');
if (this.$Search) {
this.$Search.focus();
}
var frameHeight = SearchContainer.getSize().y + 10;
this.$Frame = new Element('iframe', {
'class' : 'window-iconSelect-iframe',
src : URL_OPT_DIR + 'quiqqer/quiqqer/bin/QUI/controls/icons/iconList.php?quiid=' + id,
border : 0,
frameborder: 0,
styles : {
border: '0px solid #fff',
height: 'calc(100% - 10px)',
height: 'calc(100% - ' + frameHeight + 'px)',
width : '100%'
},
events : {
load: function () {
self.$IconContainer = self.$Frame.contentDocument.getElement('div.icons');
self.icons = self.$Frame.contentDocument.getElements('.icons-entry');
}
}
}).inject(this.getContent());
},
......@@ -91,6 +116,169 @@ define('controls/icons/Confirm', [
if (this.getAttribute('autoclose')) {
this.close();
}
},
/**
* Create search HTML Nodes - outer div with icon and input field
*
* @returns HTML Node {Element}
*/
createSearch: function () {
var SearchContainer = new Element('div', {
'class': 'window-iconSelect-searchContainer',
html : '<span class="fa fa-search window-iconSelect-search-prefix"></span>'
});
var self = this,
inputEsc = false;
this.$Search = new Element('input', {
'class' : 'window-iconSelect-search',
type : 'text',
placeholder: QUILocale.get('quiqqer/quiqqer', 'control.icons.confirm.filterIcons'),
events : {
keydown: function (event) {
if (event.key === 'esc') {
event.stop();
inputEsc = true;
return;
}
inputEsc = false;
},
keyup : function (event) {
// Esc clears the input field
if (inputEsc) {
event.stop();
this.value = '';
if (!self.allIconsVisible) {
self.showAllIcons();
}
return;
}
self.execSearch(this.value.trim());
}
}
}).inject(SearchContainer, 'top');
return SearchContainer;
},
/**
* Start search with delay
*
* @param searchTerm {string}
*/
execSearch: function (searchTerm) {
var self = this;
if (searchTerm === '') {
if (!this.allIconsVisible) {
this.showAllIcons();
}
return;
}
// prevents the search from being execute
// after action-less keys (alt, shift, ctrl, etc.)
if (searchTerm === this.searchTerm) {
return;
}
if (this.$Timer) {
clearInterval(this.$Timer);
}
this.$Timer = (function () {
self.searchTerm = searchTerm;
self.hideAllIcons();
self.findAndShowIcons(searchTerm.toLowerCase());
}).delay(400);
},
/**
* Hide all icons
*/
hideAllIcons: function () {
this.icons.forEach(function (Icon) {
Icon.setStyle('display', 'none');
});
this.allIconsVisible = false;
},
/**
* Show all icons
*/
showAllIcons: function () {
this.hideNoResultsInfo();
this.icons.forEach(function (Icon) {
Icon.setStyle('display', '');
});
this.allIconsVisible = true;
},
/**
* Find and show any icon that matches to search term
*
* @param searchTerm {string}
*/
findAndShowIcons: function (searchTerm) {
var self = this,
founded = false;
this.icons.forEach(function (Icon) {
var name = Icon.getAttribute('data-icon');
if (name.indexOf(searchTerm) >= 0) {
Icon.setStyle('display', '');
founded = true;
self.allIconsVisible = false;
}
});
if (!founded) {
this.showNoResultsInfo();
return;
}
this.hideNoResultsInfo()
},
/**
* Create and show no-results-info div
*/
showNoResultsInfo: function () {
if (this.NoResultsInfo) {
return;
}
this.NoResultsInfo = new Element('div', {
'class': 'no-results-info',
html : '<p>' + QUILocale.get('quiqqer/quiqqer', 'control.icons.confirm.noResultsInfo') + '</p><span class="fa fa-css3"></span>'
}).inject(this.$IconContainer);
moofx(this.NoResultsInfo).animate({
opacity: 0.25
}, {
duration: 300
});
},
/**
* Hide / destroy no-results-info
*/
hideNoResultsInfo: function () {
if (this.NoResultsInfo) {
this.NoResultsInfo.destroy();
this.NoResultsInfo = null;
}
}
});
});
\ No newline at end of file
......@@ -33,6 +33,7 @@ $files = $Icons->getCSSFiles();
.icons {
width: 100%;
height: 100%;
}
.icons-entry {
......@@ -73,6 +74,21 @@ $files = $Icons->getCSSFiles();
cursor: pointer;
color: #fff;
}
.no-results-info {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: center;
opacity: 0;
font-family: 'Open Sans', sans-serif;
}
.no-results-info .fa {
margin-top: 20px;
font-size: 40px;
}
</style>
<?php foreach ($files as $file) { ?>
......
......@@ -1780,6 +1780,12 @@
<locale name="control.icons.confirm.title">
<de><![CDATA[Icon-Auswahl]]></de>
</locale>
<locale name="control.icons.confirm.filterIcons">
<de><![CDATA[Icons durchsuchen]]></de>
</locale>
<locale name="control.icons.confirm.noResultsInfo">
<de><![CDATA[Es gibt keine Icons, die der Suchanfrage entsprechen]]></de>
</locale>
<locale name="control.grid.menu.button">
<de><![CDATA[Menü]]></de>
</locale>
......
......@@ -1756,6 +1756,12 @@
<locale name="control.icons.confirm.title">
<en><![CDATA[Icon-Select]]></en>
</locale>
<locale name="control.icons.confirm.filterIcons">
<en><![CDATA[Search icons]]></en>
</locale>
<locale name="control.icons.confirm.noResultsInfo">
<en><![CDATA[There are no icons that match the search query]]></en>
</locale>
<locale name="control.grid.menu.button">
<en><![CDATA[Menu]]></en>
</locale>
......
......@@ -48,6 +48,13 @@
<locale name="packages.panel.category.systemcheck.checksum.cacheForThisPackageNotFound">
<pl><![CDATA[Cache dla <strong>[cacheForThisPackage]</strong> nie zostal znaleziony.]]></pl>
</locale>
<locale name="control.icons.confirm.filterIcons">
<pl><![CDATA[Szukaj ikony]]></pl>
</locale>
<locale name="control.icons.confirm.noResultsInfo">
<pl><![CDATA[Brak wyników dla szukanej frazy]]></pl>
</locale>
</groups>
</locales>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment