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

strenghen dropdown arrow selektor

Browse source 
more explicit class for the dropdown arrow: 'dropdown-arrow' instead of '.form-control + icon-arrow-down'

e.g. icon-arrow-down had to be the direct next neighbour of a form control - now they are independet with the dropdown-arrow class.
This commit is contained in:
Felix Niklas 2015-08-22 21:01:21 +03:00
parent 05e68e04de
commit d87d781db5
13 changed files with 40 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee
View file

@ -59,6 +59,7 @@ class App.SearchableSelect extends Spine.Controller
switch event.keyCode switch event.keyCode
when 40 then @nudge event, 1 # down when 40 then @nudge event, 1 # down
when 38 then @nudge event, -1 # up when 38 then @nudge event, -1 # up
when 39 then @pickSuggestion event # right
when 13 then @onEnter event when 13 then @onEnter event
when 27 then @onEscape() when 27 then @onEscape()
when 9 then @onTab event when 9 then @onTab event
@ -83,18 +84,26 @@ class App.SearchableSelect extends Spine.Controller
visibleOptions.eq(currentPosition).addClass('is-active') visibleOptions.eq(currentPosition).addClass('is-active')
@clearAutocomplete() @clearAutocomplete()
pickSuggestion: (event) ->
if not @suggestion
return
# check if the cursor is at the end of the text
# pick autocompleteSuggestion
autocomplete: (text) -> autocomplete: (text) ->
@suggestion = text
startIndex = text.indexOf(@query) startIndex = text.indexOf(@query)
if !@query or startIndex != 0 if !@query or startIndex != 0
return @clearAutocomplete() return @clearAutocomplete()
console.log "startIndex", startIndex
@invisiblePart.text(@query) @invisiblePart.text(@query)
@visiblePart.text(text.slice(@query.length)) @visiblePart.text(text.slice(@query.length))
clearAutocomplete: -> clearAutocomplete: ->
@suggestion = null
@visiblePart.text('') @visiblePart.text('')
@invisiblePart.text('') @invisiblePart.text('')

2
app/assets/javascripts/app/views/generic/searchable_select.jst.eco
View file

@ -16,7 +16,7 @@
<span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span> <span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span>
<span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span> <span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span>
</div> </div>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
<div class="small loading icon"></div> <div class="small loading icon"></div>
</div> </div>
<ul class="dropdown-menu dropdown-menu-left js-optionsList" role="menu"> <ul class="dropdown-menu dropdown-menu-left js-optionsList" role="menu">

2
app/assets/javascripts/app/views/generic/select.jst.eco
View file

@ -7,6 +7,6 @@
<% end %> <% end %>
</select> </select>
<% if not @attribute.multiple: %> <% if not @attribute.multiple: %>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
<% end %> <% end %>
</div> </div>

2
app/assets/javascripts/app/views/generic/user_search/input.jst.eco
View file

@ -1,7 +1,7 @@
<div class="u-positionOrigin"> <div class="u-positionOrigin">
<input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>"> <input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
<input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> <input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="dropdown-menu" aria-labelledby="customer_id"> <div class="dropdown-menu" aria-labelledby="customer_id">

2
app/assets/javascripts/app/views/layout_ref/content.jst.eco
View file

@ -81,7 +81,7 @@
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown"> <div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
<input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organization/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> <input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organization/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="dropdown-menu" aria-labelledby="customer_id"> <div class="dropdown-menu" aria-labelledby="customer_id">

2
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
View file

@ -57,7 +57,7 @@
<option>Znuny</option> <option>Znuny</option>
<option>Max &amp; Moritz</option> <option>Max &amp; Moritz</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
</div> </div>

4
app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
View file

@ -120,7 +120,7 @@
</select> </select>
<svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
@ -279,7 +279,7 @@
</select> </select>
<svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
</div> </div>

6
app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
View file

@ -45,7 +45,7 @@
<option>replace</option> <option>replace</option>
<option>ignore</option> <option>ignore</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
@ -76,7 +76,7 @@
<option selected>add</option> <option selected>add</option>
<option>ignore</option> <option>ignore</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
@ -92,7 +92,7 @@
<option selected>add</option> <option selected>add</option>
<option>ignore</option> <option>ignore</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="merge-arrow"> <div class="merge-arrow">
<svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg> <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>

16
app/assets/javascripts/app/views/layout_ref/scheduler_modal.jst.eco
View file

@ -29,7 +29,7 @@
<option>VIP</option> <option>VIP</option>
</optgroup> </optgroup>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
@ -38,7 +38,7 @@
<option selected>is</option> <option selected>is</option>
<option>is not</option> <option>is not</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
@ -49,7 +49,7 @@
<option>pending close</option> <option>pending close</option>
<option>pending reminder</option> <option>pending reminder</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
</div> </div>
@ -89,7 +89,7 @@
<option>VIP</option> <option>VIP</option>
</optgroup> </optgroup>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
@ -98,7 +98,7 @@
<option selected>is</option> <option selected>is</option>
<option>is not</option> <option>is not</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
@ -109,7 +109,7 @@
<option>Important</option> <option>Important</option>
<option selected>Spam</option> <option selected>Spam</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
</div> </div>
@ -212,7 +212,7 @@
<option>VIP</option> <option>VIP</option>
</optgroup> </optgroup>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="horizontal-filter-text">to</div> <div class="horizontal-filter-text">to</div>
@ -224,7 +224,7 @@
<option>pending close</option> <option>pending close</option>
<option>pending reminder</option> <option>pending reminder</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
</div> </div>

2
app/assets/javascripts/app/views/layout_ref/setup.jst.eco
View file

@ -142,7 +142,7 @@
<option selected>IMAP</option> <option selected>IMAP</option>
<option>POP3</option> <option>POP3</option>
</select> </select>
<svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">

4
app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
View file

@ -29,7 +29,7 @@
<option>VIP</option> <option>VIP</option>
</optgroup> </optgroup>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<div class="controls"> <div class="controls">
@ -42,7 +42,7 @@
<option>is</option> <option>is</option>
<option>is not</option> <option>is not</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
</div> </div>
</div> </div>
<input id="filter_value_1" type="text" class="form-control"> <input id="filter_value_1" type="text" class="form-control">

8
app/assets/javascripts/app/views/ticket_zoom.jst.eco
View file

@ -35,7 +35,7 @@
<option value="2">open</option> <option value="2">open</option>
<option value="3">pending</option> <option value="3">pending</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="form-group is-changed"> <div class="form-group is-changed">
<label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label> <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
@ -44,7 +44,7 @@
<option value="2" selected="">2 normal</option> <option value="2" selected="">2 normal</option>
<option value="3">3 high</option> <option value="3">3 high</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label> <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
@ -54,7 +54,7 @@
<option value="2">Twitter</option> <option value="2">Twitter</option>
<option value="1" selected="">Users</option> <option value="1" selected="">Users</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label> <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
@ -62,7 +62,7 @@
<option value="">-</option> <option value="">-</option>
<option value="3">Felix Niklas</option> <option value="3">Felix Niklas</option>
</select> </select>
<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg> <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
</div> </div>
</form> </form>
<form class="form-inline"> <form class="form-inline">

6
app/assets/stylesheets/zammad.css.scss
View file

@ -1095,7 +1095,8 @@ input.time.time--12 {
} }
} }
.form-control + .icon-arrow-down { .form-control + .icon-arrow-down,
.dropdown-arrow {
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 50%; top: 50%;
@ -1121,7 +1122,8 @@ input.time.time--12 {
*/ */
html.ff-lt-35 .form-control + .icon-arrow-down { html.ff-lt-35 .form-control + .icon-arrow-down,
html.ff-lt-35 .dropdown-arrow {
display: none; display: none;
} }