mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-25 09:23:28 +01:00
Etemplate - add 'app_icons' option for link-entry to show app selection as a list with icons
This commit is contained in:
nathangray
parent
516015ac40
commit
95e66730c4
@ -531,6 +531,12 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
|
||||
"default": "",
|
||||
"description": "Limit to the listed applications (comma seperated)"
|
||||
},
|
||||
"app_icons": {
|
||||
"name": "Application icons",
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Show application icons instead of names"
|
||||
},
|
||||
"blur": {
|
||||
"name": "Placeholder",
|
||||
"type": "string",
|
||||
@ -601,6 +607,57 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
|
||||
this.div = jQuery(document.createElement("div")).addClass("et2_link_entry");
|
||||
|
||||
// Application selection
|
||||
jQuery.widget( "custom.iconselectmenu", jQuery.ui.selectmenu, {
|
||||
_setText: function(element, value){
|
||||
if(element === this.buttonText){
|
||||
this._setButtonText(value);
|
||||
} else {
|
||||
this._superApply(element, value);
|
||||
}
|
||||
},
|
||||
|
||||
_setButtonText: function( value ) {
|
||||
|
||||
var _value = this.focusIndex;
|
||||
|
||||
if(typeof this.focusIndex === 'undefined')
|
||||
{
|
||||
_value = this.element.find( "option:selected" ).val();
|
||||
}
|
||||
else
|
||||
{
|
||||
var selected = this.items[_value] || {};
|
||||
_value = selected.value;
|
||||
}
|
||||
var url = self.egw().image('navbar', _value);
|
||||
var buttonItem = jQuery( "<span>", {
|
||||
"class": "ui-selectmenu-text",
|
||||
title: value
|
||||
})
|
||||
|
||||
jQuery('.ui-selectmenu-text', this.button).replaceWith(buttonItem);
|
||||
buttonItem.css('background-image', 'url('+url+')');
|
||||
},
|
||||
_renderItem: function( ul, item ) {
|
||||
var li = jQuery( "<li>", {class:"et2_link_entry_app_option"}),
|
||||
wrapper = jQuery( "<div>", {text: item.label} );
|
||||
|
||||
if ( item.disabled ) {
|
||||
li.addClass( "ui-state-disabled" );
|
||||
}
|
||||
ul.addClass(self.div.class);
|
||||
var url = self.egw().image('navbar', item.value);
|
||||
jQuery( "<span>", {
|
||||
style: 'background-image: url("'+url+'");',
|
||||
"class": "ui-icon " + item.element.attr( "data-class" ),
|
||||
title: item.label
|
||||
})
|
||||
.appendTo( wrapper );
|
||||
|
||||
return li.append( wrapper ).appendTo( ul );
|
||||
}
|
||||
});
|
||||
|
||||
this.app_select = jQuery(document.createElement("select")).appendTo(this.div)
|
||||
.change(function(e) {
|
||||
// Clear cache when app changes
|
||||
@ -624,12 +681,20 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
|
||||
{
|
||||
this.app_select.val(this.options.only_app);
|
||||
this.app_select.hide();
|
||||
if(this.options.app_icons && this.app_select.iconselectmenu('instance'))
|
||||
{
|
||||
this.app_select.iconselectmenu('widget').hide();
|
||||
}
|
||||
this.div.addClass("no_app");
|
||||
}
|
||||
else
|
||||
{
|
||||
// Now that options are in, set to last used app
|
||||
this.app_select.val(this.options.value.app||'');
|
||||
if(this.app_select.iconselectmenu('instance'))
|
||||
{
|
||||
this.app_select.iconselectmenu('update');
|
||||
}
|
||||
}
|
||||
|
||||
// Search input
|
||||
@ -637,8 +702,31 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
|
||||
// .attr("type", "search") // Fake it for all browsers below
|
||||
.focus(function(){if(!self.options.only_app) {
|
||||
// Adjust width, leave room for app select & link button
|
||||
self.div.removeClass("no_app");self.app_select.show();
|
||||
self.div.removeClass("no_app");
|
||||
if(self.options.app_icons)
|
||||
{
|
||||
self.app_select.iconselectmenu('widget').show();
|
||||
}
|
||||
else
|
||||
{
|
||||
self.app_select.show();
|
||||
}
|
||||
}})
|
||||
.blur(function() {
|
||||
if(self.options.app_icons)
|
||||
{
|
||||
// Adjust width, leave room for app select & link button
|
||||
self.div.addClass("no_app");
|
||||
self.app_select.iconselectmenu('widget').hide();
|
||||
}
|
||||
else if (self.search.val())
|
||||
{
|
||||
if(self.options.only_app) {
|
||||
// Adjust width, leave room for app select & link button
|
||||
self.div.addClass("no_app");
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(this.div);
|
||||
|
||||
this.set_blur(this.options.blur ? this.options.blur : this.egw().lang("search"), this.search);
|
||||
@ -795,6 +883,15 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
|
||||
}
|
||||
this.app_select.val(this.options.value.app);
|
||||
}
|
||||
|
||||
if(this.options.app_icons)
|
||||
{
|
||||
this.div.addClass('app_icons');
|
||||
this.app_select.iconselectmenu({width: 50})
|
||||
.iconselectmenu( "menuWidget" );
|
||||
|
||||
this.app_select.iconselectmenu('widget').hide();
|
||||
}
|
||||
return this._super.apply(this,arguments);
|
||||
},
|
||||
|
||||
@ -875,6 +972,10 @@ var et2_link_entry = (function(){ "use strict"; return et2_inputWidget.extend(
|
||||
|
||||
jQuery("option[value='"+_value.app+"']",this.app_select).prop("selected",true);
|
||||
this.app_select.hide();
|
||||
if(this.options.app_icons && this.app_select.iconselectmenu('instance'))
|
||||
{
|
||||
this.app_select.iconselectmenu('widget').hide();
|
||||
}
|
||||
this.div.addClass("no_app");
|
||||
},
|
||||
|
||||
|
||||
@ -698,10 +698,41 @@ div.et2_link_entry:after {
|
||||
.et2_nextmatch .et2_link_entry:after {
|
||||
margin: -12px;
|
||||
}
|
||||
div.et2_link_entry select {
|
||||
div.et2_link_entry select, div.et2_link_entry {
|
||||
width: 40%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* Icons in app selection */
|
||||
div.et2_link_entry span[role="combobox"] {
|
||||
width: 100px;
|
||||
height: 3ex;
|
||||
border: 1px solid #e6e6e6;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
div.et2_link_entry span[role="combobox"] .ui-selectmenu-text, .et2_link_entry_app_option div span {
|
||||
background: transparent;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0px 5px;
|
||||
right: auto;
|
||||
height:100%;
|
||||
}
|
||||
div.et2_link_entry.app_icons:not(.no_app) input {
|
||||
width: calc(100% - 58px);
|
||||
}
|
||||
.et2_link_entry_app_option.ui-state-focus {
|
||||
border: none;
|
||||
transition: width 0s;
|
||||
}
|
||||
.et2_link_entry_app_option {
|
||||
line-height: 34px;
|
||||
}
|
||||
.et2_link_entry_app_option > div {
|
||||
padding-left: 34px;
|
||||
font-weight: normal;
|
||||
}
|
||||
div.et2_link_entry input.ui-autocomplete-input {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
@ -343,6 +343,9 @@
|
||||
background-color: transparent;
|
||||
left: 0px;
|
||||
}
|
||||
.et2_link_to .et2_link_entry .ui-icon-triangle-1-s {
|
||||
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
|
||||
}
|
||||
.et2_link_to .et2_file span {
|
||||
background-position: center;
|
||||
background-size: 16px 16px;
|
||||
@ -351,6 +354,10 @@
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.et2_link_entry .ui-icon-triangle-1-s {
|
||||
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
|
||||
background-size: contain;
|
||||
}
|
||||
.et2_link {
|
||||
color: #0C5DA5;
|
||||
}
|
||||
|
||||
@ -293,6 +293,9 @@ div.et2_file input.et2_file_upload{
|
||||
background-color: transparent;
|
||||
left: 0px;
|
||||
}
|
||||
.ui-icon-triangle-1-s {
|
||||
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
|
||||
}
|
||||
}
|
||||
// BUTTON: make link button
|
||||
button:first-child {
|
||||
@ -313,6 +316,12 @@ div.et2_file input.et2_file_upload{
|
||||
}
|
||||
}
|
||||
|
||||
.et2_link_entry {
|
||||
.ui-icon-triangle-1-s {
|
||||
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.et2_link {
|
||||
color: @egw_color_2_a;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user