[Client] Improve usability
This commit is contained in:
syuilo
parent
1bb1a02593
commit
1531fa9739
1 changed files with 84 additions and 56 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue