From 95e66730c43a3d458d3e60b723ce6f42a3998db6 Mon Sep 17 00:00:00 2001 From: nathangray Date: Wed, 13 Sep 2017 10:09:19 -0600 Subject: [PATCH] Etemplate - add 'app_icons' option for link-entry to show app selection as a list with icons --- api/js/etemplate/et2_widget_link.js | 103 ++++++++++++++++++++++++++- api/templates/default/etemplate2.css | 33 ++++++++- pixelegg/css/pixelegg.css | 7 ++ pixelegg/less/etemplate2.less | 9 +++ 4 files changed, 150 insertions(+), 2 deletions(-) diff --git a/api/js/etemplate/et2_widget_link.js b/api/js/etemplate/et2_widget_link.js index 55c173c27d..71d6f8c23b 100644 --- a/api/js/etemplate/et2_widget_link.js +++ b/api/js/etemplate/et2_widget_link.js @@ -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( "", { + "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( "
  • ", {class:"et2_link_entry_app_option"}), + wrapper = jQuery( "
    ", {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( "", { + 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"); }, diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 399ccc1512..bb69165717 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -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; } diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index c9a564f1ea..49c841bd3b 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -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; } diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index ceb31a47a4..6fa3936332 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -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;