columnSelect: cut off long names
This commit is contained in:
parent
a224110448
commit
07925e665c
4 changed files with 17 additions and 12 deletions
|
@ -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' )
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<% end %>
|
||||
</select>
|
||||
<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: %>
|
||||
<div class="columnSelect-option is-hidden js-remove js-option" data-value="<%= option.value %>"><%= option.name %></div>
|
||||
<% end %>
|
||||
|
@ -29,7 +29,7 @@
|
|||
<% end %>
|
||||
<div class="columnSelect-pool js-pool">
|
||||
<% 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 %>
|
||||
</div>
|
||||
</div>
|
|
@ -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;
|
||||
|
||||
|
@ -7805,8 +7807,7 @@ output {
|
|||
}
|
||||
|
||||
.columnSelect-column--selected {
|
||||
flex-basis: 66%;
|
||||
flex-grow: 1;
|
||||
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%);
|
||||
|
|
Loading…
Reference in a new issue