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

Implement new representation for et2_selectbox widget of multi tags with limited single row

Browse Source
This commit is contained in:
Hadi Nategh 2016-07-11 17:22:26 +02:00
parent 96b1f54e40
commit 791d1f1d74
2 changed files with 67 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
api/js/etemplate/et2_widget_selectbox.js
View File

@ -708,6 +708,44 @@ var et2_selectbox = (function(){ "use strict"; return et2_inputWidget.extend(
width: _width || size.w + "px"
})
.change(this.onchange);
// multi selection with limited show line of single row
if (this.options.multiple && this.options.rows == 1 && this.options.height)
{
var $chosen_div = jQuery(this.input.siblings());
var self = this;
/**
* A function to set counter for multi tags limited for single row
* @returns {undefined}
*/
var _update_item_counter = function ()
{
$chosen_div.find('ul.chzn-choices').attr('data-after',self.getValue().length);
};
// Update the item counter
_update_item_counter();
// Initialize the single row class
$chosen_div.toggleClass('et2_selectbox_single_row', true);
// bind hover actions
$chosen_div
.off()
.hover(
//mouseIn
function(e){
jQuery(this).toggleClass('et2_selectbox_multi_row', true);
jQuery(this).toggleClass('et2_selectbox_single_row', false);
},
//mouseOut
function(e){
jQuery(this).toggleClass('et2_selectbox_multi_row', false);
jQuery(this).toggleClass('et2_selectbox_single_row', true);
_update_item_counter();
}
);
}
}
},

28
api/templates/default/etemplate2.css
View File

@ -2726,3 +2726,31 @@ tr.dialogHeader2 td {padding-top:15px;}
min-width: 160px;
}
.nextmatch_header_row .et2_selectbox.select-cat.chzn-container .chzn-results {max-height: 340px;}
/* Implementation for et2_selectbox mulit tags with single row*/
.et2_selectbox_multi_row ul.chzn-choices {
height: auto;
}
.nextmatch_header_row .et2_selectbox.chzn-container-multi { margin-top: 1px;}
.et2_selectbox_single_row ul.chzn-choices {
height: 24px !important;
}
.et2_selectbox_single_row ul.chzn-choices:after {
content: attr(data-after);
width: 30px;
background: #fafafa;
z-index: 10000;
position: absolute;
right: 0;
height: 100%;
background-position: center;
background-size: 6px;
background-repeat: no-repeat;
border-left: dotted 1px silver;
font-size: 10pt;
font-weight: bold;
color: #888888;
text-align: center;
padding-top: 2px;
box-shadow: 0px 0px 10px 2px #888888;
}