columnSelect: cut off long names

This commit is contained in:
Felix Niklas 2016-02-09 18:09:50 +01:00
parent a224110448
commit 07925e665c
4 changed files with 17 additions and 12 deletions

View file

@ -1521,7 +1521,7 @@ class InputsRef extends App.ControllerContent
attribute: attribute:
name: 'company-name' name: 'company-name'
id: 'company-name-12345' 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() ) @$('.columnSelectPlaceholder').replaceWith( columnSelectObject.element() )
App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' ) App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' )

View file

@ -68,7 +68,7 @@ class App.ColumnSelect extends Spine.Controller
@poolOptions.each (i, el) -> @poolOptions.each (i, el) ->
return if $(el).hasClass('is-hidden') return if $(el).hasClass('is-hidden')
if $(el).text().indexOf(filter) > -1 if $(el).text().toLowerCase().indexOf(filter.toLowerCase()) > -1
$(el).removeClass 'is-filtered' $(el).removeClass 'is-filtered'
else else
$(el).addClass 'is-filtered' $(el).addClass 'is-filtered'

View file

@ -12,7 +12,7 @@
<% end %> <% end %>
</select> </select>
<div class="columnSelect-column columnSelect-column--selected js-selected"> <div class="columnSelect-column columnSelect-column--selected js-selected">
<div class="u-placeholder js-placeholder"><%- @T('Nothing selected') %></div> <div class="u-placeholder u-unselectable js-placeholder"><%- @T('Nothing selected') %></div>
<% for option in @options: %> <% for option in @options: %>
<div class="columnSelect-option is-hidden js-remove js-option" data-value="<%= option.value %>"><%= option.name %></div> <div class="columnSelect-option is-hidden js-remove js-option" data-value="<%= option.value %>"><%= option.name %></div>
<% end %> <% end %>
@ -29,7 +29,7 @@
<% end %> <% end %>
<div class="columnSelect-pool js-pool"> <div class="columnSelect-pool js-pool">
<% for option in @options: %> <% for option in @options: %>
<div class="columnSelect-option js-select js-option" data-value="<%= option.value %>"><%= option.name %></div> <div class="columnSelect-option js-select js-option" data-value="<%= option.value %>" title="<%= option.name %>"><%= option.name %></div>
<% end %> <% end %>
</div> </div>
</div> </div>

View file

@ -123,6 +123,11 @@ blockquote {
user-select: none; user-select: none;
} }
.u-unselectable {
pointer-events: none;
user-select: none;
}
.u-textTruncate { .u-textTruncate {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -7791,12 +7796,9 @@ output {
} }
} }
.columnSelect { .columnSelect {
height: 234px;
display: flex; display: flex;
height: auto;
line-height: 25px;
max-height: 300px;
padding: 0; padding: 0;
line-height: 22px; line-height: 22px;
@ -7805,8 +7807,7 @@ output {
} }
.columnSelect-column--selected { .columnSelect-column--selected {
flex-basis: 66%; flex: 1 1 66%;
flex-grow: 1;
overflow: auto; overflow: auto;
padding: 7px; padding: 7px;
} }
@ -7817,10 +7818,11 @@ output {
border-left: 1px dotted hsl(0,0%,90%); border-left: 1px dotted hsl(0,0%,90%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
} }
.columnSelect-pool { .columnSelect-pool {
flex: 1; flex: 1 1 auto;
overflow: auto; overflow: auto;
padding: 7px; padding: 7px;
} }
@ -7830,6 +7832,9 @@ output {
user-select: none; user-select: none;
padding: 0 5px; padding: 0 5px;
border-radius: 1px; border-radius: 1px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover { &:hover {
background: hsl(0,0%,96%); background: hsl(0,0%,96%);