Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Textmodule widget: dynamically increase width

Browse source 
Only use as much space as needed but allow the dropdown to grow as big as possible (textarea width) to show as much as possible of the text module name.
This commit is contained in:
Felix Niklas 2018-11-19 14:37:04 +01:00 committed by Martin Edenhofer
parent 1f36b5b65f
commit f2644cd622
2 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/assets/javascripts/app/lib/base/jquery.textmodule.js
View file

@ -20,15 +20,14 @@
this.options = $.extend({}, defaults, options) this.options = $.extend({}, defaults, options)
this._defaults = defaults this._defaults = defaults
this._name = pluginName this._name = pluginName
this._fixedWidth = true
this.collection = [] this.collection = []
this.active = false this.active = false
this.buffer = '' this.buffer = ''
this._width = 380
// check if ce exists // check if ce exists
if ( $.data(element, 'plugin_ce') ) { if ( $.data(element, 'plugin_ce') ) {
this.ce = $.data(element, 'plugin_ce') this.ce = $.data(element, 'plugin_ce')
@ -194,6 +193,7 @@
// create base template // create base template
Plugin.prototype.renderBase = function() { Plugin.prototype.renderBase = function() {
this.untouched = true
this.$element.after('<div class="shortcut dropdown"><ul class="dropdown-menu" style="max-height: 200px;"></ul></div>') this.$element.after('<div class="shortcut dropdown"><ul class="dropdown-menu" style="max-height: 200px;"></ul></div>')
this.$widget = this.$element.next() this.$widget = this.$element.next()
this.$widget.on('mousedown', 'li', $.proxy(this.onEntryClick, this)) this.$widget.on('mousedown', 'li', $.proxy(this.onEntryClick, this))
@ -209,19 +209,19 @@
var top = -( widgetHeight + height ) + this._position.top var top = -( widgetHeight + height ) + this._position.top
var start = this._position.left - 6 var start = this._position.left - 6
var availableWidth = this.$element.innerWidth() var availableWidth = this.$element.innerWidth()
var width = this.$widget.find('.dropdown-menu').width()
if(rtl){ if(rtl){
start = availableWidth - start start = availableWidth - start
} }
// position the element further left if it would break out of the textarea width // position the element further left if it would break out of the textarea width
if (start + this._width > availableWidth) { if (start + width > availableWidth) {
start = this.$element.innerWidth() - this._width start = availableWidth - width
} }
var css = { var css = {
top: top, top: top
width: this._width
} }
css[rtl ? 'right' : 'left'] = start css[rtl ? 'right' : 'left'] = start
@ -417,6 +417,13 @@
} }
this.$widget.find('ul').append(elements).scrollTop(9999) this.$widget.find('ul').append(elements).scrollTop(9999)
// keep the width of the dropdown the same even when longer items got filtered out
if(this._fixedWidth && this.untouched){
this.$widget.find('ul').css('width', this.$widget.find('ul').width());
this.untouched = false;
}
this.movePosition() this.movePosition()
} }

1
app/assets/stylesheets/zammad.scss
View file

@ -5188,6 +5188,7 @@ footer {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
max-width: 100%; max-width: 100%;
min-width: 0;
} }
.editControls { .editControls {