holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use et2-select webcomponent for quick add button

Browse Source
This commit is contained in:
Hadi Nategh 2022-07-19 16:50:02 +02:00
parent 656e6561d9
commit 5038d060fe
4 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
api/js/jsapi/egw_links.js
View File

@ -484,18 +484,17 @@ egw.extend('links', egw.MODULE_GLOBAL, function()
// check if quick-add selectbox is alread there, only create it again if not
if (document.getElementById('quick_add_selectbox')) return;
const select = jQuery(document.createElement('select')).attr('id', 'quick_add_selectbox');
jQuery(typeof _parent === 'string' ? '#'+_parent : _parent).append(select);
const select = document.createElement('et2-select');
select.setAttribute('id', 'quick_add_selectbox');
document.getElementById(_parent).append(select);
const self = this;
// bind change handler
select.change(function(){
select.addEventListener('change', function(){
if (this.value) self.open('', this.value, 'add', {}, undefined, this.value, true);
this.value = '';
});
// need to load common translations for app-names
this.langRequire(window, [{app: 'common', lang: this.preference('lang')}], function(){
select.append(jQuery(document.createElement('option')).attr('value', '').text(self.lang('Add')+' ...'));
let options = [];
const apps = self.link_app_list('add');
for(let app in apps)
{
@ -503,10 +502,18 @@ egw.extend('links', egw.MODULE_GLOBAL, function()
{
continue;
}
const option = jQuery(document.createElement('option')).attr('value', app)
.text(self.lang(self.link_get_registry(app,'entry') || apps[app]));
select.append(option);
options.push({
value:app,
label:self.lang(self.link_get_registry(app,'entry') || apps[app]),
icon: `${egw.webserverUrl}/${app}/templates/pixelegg/images/navbar.svg`
});
}
select.select_options = options;
select.updateComplete.then(function(){
select.dropdown.trigger.style.visibility = 'hidden';
select.dropdown.trigger.style.height = '0px';
});
});
}
};

9
pixelegg/css/pixelegg.css
View File

@ -5580,8 +5580,13 @@ span.overlayContainer img.overlay {
#egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container .chzn-results {
max-height: none;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add select#quick_add_selectbox {
visibility: hidden;
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
height: 0px;
float: left;
display: inline-block;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input) {
border: none !important;
}
#egw_fw_topmenu_info_items img#topmenu_info_error {
width: 16px;

30
pixelegg/js/slider.js
View File

@ -17,33 +17,19 @@ egw_ready.then(function()
jQuery('#quick_add').on({
mouseover: function(ev){
// do NOT react on bubbeling events from contained selectbox
var $select = jQuery('#quick_add_selectbox');
if (!$select.children()[0]['value']) $select.children()[0].text = '';
var $chosen_div = $select.next();
if ($chosen_div.hasClass('chzn-container'))
{
$chosen_div.show();
}
else
{
$select.chosen({
disable_search: true,
display_selected_options: false
});
$chosen_div = $select.next();
}
$select.trigger('liszt:open');
$select.on('liszt:hiding_dropdown', function(e){
$chosen_div.hide();
});
var select = document.getElementById('quick_add_selectbox');
select.dropdown.open = true;
ev.stopPropagation();
},
mouseout: function(ev){
var select = document.getElementById('quick_add_selectbox');
// do NOT react on bubbeling events from contained selectbox
if (ev.target && ev.relatedTarget && ev.target.id != 'quick_add_selectbox'
&& !jQuery(ev.relatedTarget).hasClass('chzn-container'))
if (ev.target && ev.relatedTarget && ev.currentTarget.id != "quick_add" && ev.currentTarget.nodeName != 'ET2-SELECT')
{
jQuery('#quick_add_selectbox').next().hide();
}
ev.stopPropagation();
}

9
pixelegg/less/layout_raster_buttons.less
View File

@ -292,8 +292,13 @@
max-height: none;
}
}
select#quick_add_selectbox {
visibility: hidden;
#quick_add_selectbox {
height: 0px;
float: left;
display: inline-block;
}
#quick_add_selectbox::part(form-control-input) {
border: none !important;
}
}