[Client] Improve usability

This commit is contained in:
syuilo 2017-02-16 11:21:04 +09:00
parent 1bb1a02593
commit 1531fa9739
1 changed files with 84 additions and 56 deletions

View File

@ -2,16 +2,14 @@
<div class="search"> <div class="search">
<div class="form"> <div class="form">
<label for="search-input"><i class="fa fa-search"></i></label> <label for="search-input"><i class="fa fa-search"></i></label>
<input ref="searchInput" type="search" oninput={ search } placeholder="ユーザーを探す"/> <input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="ユーザーを探す"/>
</div> </div>
<div class="result"> <div class="result">
<ol class="users" if={ searchResult.length > 0 }> <ol class="users" if={ searchResult.length > 0 } ref="searchResult">
<li each={ user in searchResult }> <li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } onclick={ user._click } tabindex="-1">
<a onclick={ user._click }> <img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/> <span class="name">{ user.name }</span>
<span class="name">{ user.name }</span> <span class="username">@{ user.username }</span>
<span class="username">@{ user.username }</span>
</a>
</li> </li>
</ol> </ol>
</div> </div>
@ -113,56 +111,57 @@
list-style none list-style none
> li > li
> a display inline-block
display inline-block z-index 1
z-index 1 width 100%
width 100% padding 8px 32px
padding 8px 32px vertical-align top
vertical-align top white-space nowrap
white-space nowrap overflow hidden
overflow hidden color rgba(0, 0, 0, 0.8)
color rgba(0, 0, 0, 0.8) text-decoration none
text-decoration none transition none
transition none cursor pointer
&:hover &:hover
color #fff &:focus
background $theme-color color #fff
background $theme-color
.name
color #fff
.username
color #fff
&:active
color #fff
background darken($theme-color, 10%)
.name
color #fff
.username
color #fff
.avatar
vertical-align middle
min-width 32px
min-height 32px
max-width 32px
max-height 32px
margin 0 8px 0 0
border-radius 6px
.name .name
margin 0 8px 0 0 color #fff
/*font-weight bold*/
font-weight normal
color rgba(0, 0, 0, 0.8)
.username .username
font-weight normal color #fff
color rgba(0, 0, 0, 0.3)
&:active
color #fff
background darken($theme-color, 10%)
.name
color #fff
.username
color #fff
.avatar
vertical-align middle
min-width 32px
min-height 32px
max-width 32px
max-height 32px
margin 0 8px 0 0
border-radius 6px
.name
margin 0 8px 0 0
/*font-weight bold*/
font-weight normal
color rgba(0, 0, 0, 0.8)
.username
font-weight normal
color rgba(0, 0, 0, 0.3)
> .history > .history
@ -274,8 +273,7 @@
> .result > .result
> .users > .users
> li > li
> a padding 8px 16px
padding 8px 16px
> .history > .history
> a > a
@ -310,12 +308,13 @@
console.error err console.error err
@search = ~> @search = ~>
q = @refs.search-input.value q = @refs.search.value
if q == '' if q == ''
@search-result = [] @search-result = []
else else
@api \users/search do @api \users/search do
query: q query: q
max: 5
.then (users) ~> .then (users) ~>
users.for-each (user) ~> users.for-each (user) ~>
user._click = ~> user._click = ~>
@ -325,5 +324,34 @@
@update! @update!
.catch (err) ~> .catch (err) ~>
console.error err console.error err
@on-search-keydown = (e) ~>
key = e.which
switch (key)
| 9, 40 => # Key[TAB] or Key[↓]
e.prevent-default!
e.stop-propagation!
@refs.search-result.child-nodes[0].focus!
@on-search-result-keydown = (i, e) ~>
key = e.which
switch (key)
| 10, 13 => # Key[ENTER]
e.prevent-default!
e.stop-propagation!
@search-result[i]._click!
| 27 => # Key[ESC]
e.prevent-default!
e.stop-propagation!
@refs.search.focus!
| 38 => # Key[↑]
e.prevent-default!
e.stop-propagation!
(@refs.search-result.child-nodes[i].previous-element-sibling || @refs.search-result.child-nodes[@search-result.length - 1]).focus!
| 9, 40 => # Key[TAB] or Key[↓]
e.prevent-default!
e.stop-propagation!
(@refs.search-result.child-nodes[i].next-element-sibling || @refs.search-result.child-nodes[0]).focus!
</script> </script>
</mk-messaging> </mk-messaging>