From 07925e665c36fe454b8a0cdf62488fe0f0611a03 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 9 Feb 2016 18:09:50 +0100 Subject: [PATCH 1/2] columnSelect: cut off long names --- .../app/controllers/layout_ref.coffee | 2 +- .../app/lib/app_post/column_select.coffee | 2 +- .../app/views/generic/column_select.jst.eco | 4 ++-- app/assets/stylesheets/zammad.scss | 21 ++++++++++++------- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee index bf01f7693..ac2c9397f 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.coffee @@ -1521,7 +1521,7 @@ class InputsRef extends App.ControllerContent attribute: name: 'company-name' id: 'company-name-12345' - options: [{value:0,name:'Apple'},{value:1,name:'Microsoft',selected:true},{value:2,name:'Google'},{value:3,name:'Deutsche Bahn'},{value:4,name:'Sparkasse'},{value:5,name:'Deutsche Post'},{value:6,name:'Mitfahrzentrale'},{value:7,name:'Starbucks'},{value:8,name:'Mac Donalds'},{value:9,name:'Flixbus'},{value:10,name:'Betahaus'},{value:11,name:'Bruno Banani'},{value:12,name:'Alpina'},{value:13,name:'Samsung'},{value:14,name:'ChariTea'},{value:15,name:'fritz-kola'},{value:16,name:'Vitamin Water'},{value:17,name:'Znuny'},{value:18,name:'Max & Moritz'}] + options: [{value:0,name:'Apple'},{value:1,name:'Microsoft',selected:true},{value:2,name:'Google'},{value:3,name:'Deutsche Bahn'},{value:4,name:'Sparkasse'},{value:5,name:'Deutsche Post'},{value:6,name:'Mitfahrzentrale'},{value:7,name:'Starbucks'},{value:8,name:'Mac Donalds'},{value:9,name:'Flixbus'},{value:10,name:'Betahaus'},{value:11,name:'Bruno Banani'},{value:12,name:'Alpina'},{value:13,name:'Samsung'},{value:14,name:'ChariTea'},{value:15,name:'fritz-kola'},{value:16,name:'Vitamin Water'},{value:17,name:'Znuny'},{value:18,name:'Max & Moritz'},{value:19,name:'Telefónica Deutschland Holding GmbH'}] @$('.columnSelectPlaceholder').replaceWith( columnSelectObject.element() ) App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' ) diff --git a/app/assets/javascripts/app/lib/app_post/column_select.coffee b/app/assets/javascripts/app/lib/app_post/column_select.coffee index d7a7fa24c..a6d7e37bb 100644 --- a/app/assets/javascripts/app/lib/app_post/column_select.coffee +++ b/app/assets/javascripts/app/lib/app_post/column_select.coffee @@ -68,7 +68,7 @@ class App.ColumnSelect extends Spine.Controller @poolOptions.each (i, el) -> return if $(el).hasClass('is-hidden') - if $(el).text().indexOf(filter) > -1 + if $(el).text().toLowerCase().indexOf(filter.toLowerCase()) > -1 $(el).removeClass 'is-filtered' else $(el).addClass 'is-filtered' diff --git a/app/assets/javascripts/app/views/generic/column_select.jst.eco b/app/assets/javascripts/app/views/generic/column_select.jst.eco index bb5b27480..5b2a8da44 100644 --- a/app/assets/javascripts/app/views/generic/column_select.jst.eco +++ b/app/assets/javascripts/app/views/generic/column_select.jst.eco @@ -12,7 +12,7 @@ <% end %>
-
<%- @T('Nothing selected') %>
+
<%- @T('Nothing selected') %>
<% for option in @options: %> <% end %> @@ -29,7 +29,7 @@ <% end %>
<% for option in @options: %> -
<%= option.name %>
+
<%= option.name %>
<% end %>
\ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index b10a3e635..3b54b8ab7 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -123,6 +123,11 @@ blockquote { user-select: none; } +.u-unselectable { + pointer-events: none; + user-select: none; +} + .u-textTruncate { white-space: nowrap; overflow: hidden; @@ -7791,12 +7796,9 @@ output { } } - .columnSelect { + height: 234px; display: flex; - height: auto; - line-height: 25px; - max-height: 300px; padding: 0; line-height: 22px; @@ -7804,9 +7806,8 @@ output { display: none; } - .columnSelect-column--selected { - flex-basis: 66%; - flex-grow: 1; + .columnSelect-column--selected { + flex: 1 1 66%; overflow: auto; padding: 7px; } @@ -7817,10 +7818,11 @@ output { border-left: 1px dotted hsl(0,0%,90%); display: flex; flex-direction: column; + min-width: 0; } .columnSelect-pool { - flex: 1; + flex: 1 1 auto; overflow: auto; padding: 7px; } @@ -7830,6 +7832,9 @@ output { user-select: none; padding: 0 5px; border-radius: 1px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; &:hover { background: hsl(0,0%,96%); From d6c78469addb9a046facfe46a0831ccbd771ea67 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 9 Feb 2016 18:31:37 +0100 Subject: [PATCH 2/2] searchableSelect: fix autocomp. pos and --- .../app/lib/app_post/searchable_select.coffee | 20 ++++++++++++++----- app/assets/stylesheets/zammad.scss | 2 +- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/app/lib/app_post/searchable_select.coffee b/app/assets/javascripts/app/lib/app_post/searchable_select.coffee index 7f6be4444..3c429192b 100644 --- a/app/assets/javascripts/app/lib/app_post/searchable_select.coffee +++ b/app/assets/javascripts/app/lib/app_post/searchable_select.coffee @@ -3,6 +3,7 @@ class App.SearchableSelect extends Spine.Controller events: 'input .js-input': 'onInput' 'blur .js-input': 'onBlur' + 'focus .js-input': 'onFocus' 'click .js-option': 'selectItem' 'mouseenter .js-option': 'highlightItem' 'shown.bs.dropdown': 'onDropdownShown' @@ -97,14 +98,16 @@ class App.SearchableSelect extends Spine.Controller caretPosition = @invisiblePart.text().length + 1 @input.val @suggestion + @shadowInput.val @suggestionValue @clearAutocomplete() @toggle() @input.prop('selectionStart', caretPosition) @input.prop('selectionEnd', caretPosition) - autocomplete: (text) -> + autocomplete: (value, text) -> @suggestion = text + @suggestionValue = value startIndex = text.indexOf(@query) if !@query or startIndex != 0 @@ -146,7 +149,12 @@ class App.SearchableSelect extends Spine.Controller @toggle() onBlur: -> - # @clearAutocomplete() + @clearAutocomplete() + + onFocus: -> + textEnd = @input.val().length + @input.prop('selectionStart', textEnd) + @input.prop('selectionEnd', textEnd) onInput: (event) => @toggle() if not @isOpen @@ -163,12 +171,14 @@ class App.SearchableSelect extends Spine.Controller @textContent.match(regex) .removeClass 'is-hidden' - @highlightFirst() + @highlightFirst(true) - highlightFirst: -> + highlightFirst: (autocomplete) -> first = @option_items.removeClass('is-active').not('.is-hidden').first() first.addClass 'is-active' - @autocomplete first.text().trim() + + if autocomplete + @autocomplete first.attr('data-value'), first.text().trim() highlightItem: (event) => @option_items.removeClass('is-active') diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 3b54b8ab7..740eb5143 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -7041,7 +7041,7 @@ output { .searchableSelect-autocomplete { position: absolute; left: 13px; - top: 10px; + top: 11px; right: 37px; white-space: nowrap; overflow: hidden;