graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 18:23:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

[Client] Improve usability

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/web/app/common/tags/messaging/index.tag
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,7 +111,6 @@
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%
@ -124,8 +121,10 @@
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
&:focus
color #fff color #fff
background $theme-color background $theme-color
@ -274,7 +273,6 @@
> .result > .result
> .users > .users
> li > li
> a
padding 8px 16px padding 8px 16px
> .history > .history
@ -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>