mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-12-13 06:08:12 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Client] Improve usability

Browse Source
This commit is contained in:
syuilo 2017-02-16 11:21:04 +09:00
parent 560aa90054
commit 20b392ac33
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="form">
<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 class="result">
<ol class="users" if={ searchResult.length > 0 }>
<li each={ user in searchResult }>
<a onclick={ user._click }>
<ol class="users" if={ searchResult.length > 0 } ref="searchResult">
<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } onclick={ user._click } tabindex="-1">
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
<span class="name">{ user.name }</span>
<span class="username">@{ user.username }</span>
</a>
</li>
</ol>
</div>
@ -113,7 +111,6 @@
list-style none
> li
> a
display inline-block
z-index 1
width 100%
@ -124,8 +121,10 @@
color rgba(0, 0, 0, 0.8)
text-decoration none
transition none
cursor pointer
&:hover
&:focus
color #fff
background $theme-color
@ -274,7 +273,6 @@
> .result
> .users
> li
> a
padding 8px 16px
> .history
@ -310,12 +308,13 @@
console.error err
@search = ~>
q = @refs.search-input.value
q = @refs.search.value
if q == ''
@search-result = []
else
@api \users/search do
query: q
max: 5
.then (users) ~>
users.for-each (user) ~>
user._click = ~>
@ -325,5 +324,34 @@
@update!
.catch (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>
</mk-messaging>