[Client] Messagingをいろいろ

This commit is contained in:
syuilo 2017-02-15 15:45:01 +09:00
parent 4c498320c2
commit 3d38356a91
14 changed files with 223 additions and 132 deletions

View file

@ -20,3 +20,7 @@ require('./twitter-setting.tag');
require('./authorized-apps.tag'); require('./authorized-apps.tag');
require('./poll.tag'); require('./poll.tag');
require('./poll-editor.tag'); require('./poll-editor.tag');
require('./messaging/room.tag');
require('./messaging/message.tag');
require('./messaging/index.tag');
require('./messaging/form.tag');

View file

@ -113,8 +113,6 @@
<script> <script>
@mixin \api @mixin \api
@user = @opts.user
@onpaste = (e) ~> @onpaste = (e) ~>
data = e.clipboard-data data = e.clipboard-data
items = data.items items = data.items
@ -143,7 +141,7 @@
@send = ~> @send = ~>
@sending = true @sending = true
@api \messaging/messages/create do @api \messaging/messages/create do
user_id: @user.id user_id: @opts.user.id
text: @refs.text.value text: @refs.text.value
.then (message) ~> .then (message) ~>
@clear! @clear!

View file

@ -6,31 +6,42 @@
</div> </div>
<div class="result"> <div class="result">
<ol class="users" if={ searchResult.length > 0 }> <ol class="users" if={ searchResult.length > 0 }>
<li each={ user in searchResult }><a onclick={ user._click }><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> <li each={ user in searchResult }>
<a onclick={ user._click }>
<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> </ol>
</div> </div>
</div> </div>
<div class="main"> <div class="history" if={ history.length > 0 }>
<div class="history" if={ history.length > 0 }> <virtual each={ history }>
<virtual each={ history }><a class="user" data-is-me={ is_me } data-is-read={ is_read } onclick={ _click }> <a class="user" data-is-me={ is_me } data-is-read={ is_read } onclick={ _click }>
<div><img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/> <div>
<header><span class="name">{ is_me ? recipient.name : user.name }</span><span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span> <img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
<mk-time time={ created_at }></mk-time> <header>
</header> <span class="name">{ is_me ? recipient.name : user.name }</span>
<div class="body"> <span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
<p class="text"><span class="me" if={ is_me }>あなた:</span>{ text }</p> <mk-time time={ created_at }></mk-time>
</div> </header>
</div></a></virtual> <div class="body">
</div> <p class="text"><span class="me" if={ is_me }>あなた:</span>{ text }</p>
<p class="no-history" if={ history.length == 0 }>履歴はありません。<br/>ユーザーを検索して、いつでもメッセージを送受信できます。</p> </div>
</div>
</a>
</virtual>
</div> </div>
<p class="no-history" if={ history.length == 0 }>履歴はありません。<br/>ユーザーを検索して、いつでもメッセージを送受信できます。</p>
<style type="stylus"> <style type="stylus">
:scope :scope
display block display block
> .search > .search
display block display block
position absolute position -webkit-sticky
position sticky
top 0 top 0
left 0 left 0
z-index 1 z-index 1
@ -153,110 +164,126 @@
font-weight normal font-weight normal
color rgba(0, 0, 0, 0.3) color rgba(0, 0, 0, 0.3)
> .main
padding-top 56px
> .history > .history
> a > a
display block
padding 20px 30px
text-decoration none
background #fff
border-bottom solid 1px #eee
*
pointer-events none
user-select none
&:hover
background #fafafa
> .avatar
filter saturate(200%)
&:active
background #eee
&[data-is-read]
&[data-is-me]
opacity 0.8
&:not([data-is-me]):not([data-is-read])
background-image url("/_/resources/desktop/unread.svg")
background-repeat no-repeat
background-position 0 center
&:after
content ""
display block display block
padding 20px 30px clear both
text-decoration none
background #fff
border-bottom solid 1px #eee
* > div
pointer-events none max-width 500px
user-select none margin 0 auto
&:hover > header
background #fafafa margin-bottom 2px
white-space nowrap
overflow hidden
> .avatar > .name
filter saturate(200%) text-align left
display inline
&:active margin 0
background #eee padding 0
font-size 1em
&[data-is-read] color rgba(0, 0, 0, 0.9)
&[data-is-me] font-weight bold
opacity 0.8
&:not([data-is-me]):not([data-is-read])
background-image url("/_/resources/desktop/unread.svg")
background-repeat no-repeat
background-position 0 center
&:after
content ""
display block
clear both
> div
max-width 500px
margin 0 auto
> header
margin-bottom 2px
white-space nowrap
overflow hidden
> .name
text-align left
display inline
margin 0
padding 0
font-size 1em
color rgba(0, 0, 0, 0.9)
font-weight bold
transition all 0.1s ease
> .username
text-align left
margin 0 0 0 8px
color rgba(0, 0, 0, 0.5)
> mk-time
position absolute
top 0
right 0
display inline
color rgba(0, 0, 0, 0.5)
font-size small
> .avatar
float left
width 54px
height 54px
margin 0 16px 0 0
border-radius 8px
transition all 0.1s ease transition all 0.1s ease
> .body > .username
text-align left
margin 0 0 0 8px
color rgba(0, 0, 0, 0.5)
> .text > mk-time
display block position absolute
margin 0 0 0 0 top 0
padding 0 right 0
overflow hidden display inline
overflow-wrap break-word color rgba(0, 0, 0, 0.5)
font-size 1.1em font-size 80%
color rgba(0, 0, 0, 0.8)
.me > .avatar
color rgba(0, 0, 0, 0.4) float left
width 54px
height 54px
margin 0 16px 0 0
border-radius 8px
transition all 0.1s ease
> .image > .body
display block
max-width 100%
max-height 512px
> .no-history > .text
margin 0 display block
padding 2em 1em margin 0 0 0 0
text-align center padding 0
color #999 overflow hidden
font-weight 500 overflow-wrap break-word
font-size 1.1em
color rgba(0, 0, 0, 0.8)
.me
color rgba(0, 0, 0, 0.4)
> .image
display block
max-width 100%
max-height 512px
> .no-history
margin 0
padding 2em 1em
text-align center
color #999
font-weight 500
// TODO: element base media query
@media (max-width 400px)
> .search
> .result
> .users
> li
> a
padding 8px 16px
> .history
> a
padding 16px
font-size 14px
> div
> .avatar
margin 0 12px 0 0
</style> </style>
<script> <script>

View file

@ -18,12 +18,8 @@
display block display block
> .stream > .stream
position absolute max-width 600px
top 0 margin 0 auto
left 0
width 100%
height calc(100% - 100px)
overflow auto
> .empty > .empty
width 100% width 100%
@ -77,11 +73,12 @@
background #fff background #fff
> footer > footer
position absolute position -webkit-sticky
position sticky
z-index 2 z-index 2
bottom 0 bottom 0
width 600px width 100%
max-width 100% max-width 600px
margin 0 auto margin 0 auto
padding 0 padding 0
background rgba(255, 255, 255, 0.95) background rgba(255, 255, 255, 0.95)

View file

@ -45,11 +45,7 @@ require('./home-widgets/broadcast.tag');
require('./stream-indicator.tag'); require('./stream-indicator.tag');
require('./timeline.tag'); require('./timeline.tag');
require('./messaging/window.tag'); require('./messaging/window.tag');
require('./messaging/room.tag');
require('./messaging/room-window.tag'); require('./messaging/room-window.tag');
require('./messaging/message.tag');
require('./messaging/index.tag');
require('./messaging/form.tag');
require('./following-setuper.tag'); require('./following-setuper.tag');
require('./ellipsis-icon.tag'); require('./ellipsis-icon.tag');
require('./ui.tag'); require('./ui.tag');

View file

@ -1,7 +1,9 @@
<mk-messaging-room-window> <mk-messaging-room-window>
<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }><yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield> <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
<yield to="content"> <yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield>
<mk-messaging-room user={ parent.user }></mk-messaging-room></yield> <yield to="content">
<mk-messaging-room user={ parent.user }></mk-messaging-room>
</yield>
</mk-window> </mk-window>
<style type="stylus"> <style type="stylus">
:scope :scope
@ -13,6 +15,7 @@
[data-yield='content'] [data-yield='content']
> mk-messaging-room > mk-messaging-room
height 100% height 100%
overflow auto
</style> </style>
<script> <script>

View file

@ -1,7 +1,9 @@
<mk-messaging-window> <mk-messaging-window>
<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }><yield to="header"><i class="fa fa-comments"></i>メッセージ</yield> <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
<yield to="content"> <yield to="header"><i class="fa fa-comments"></i>メッセージ</yield>
<mk-messaging ref="index"></mk-messaging></yield> <yield to="content">
<mk-messaging ref="index"></mk-messaging>
</yield>
</mk-window> </mk-window>
<style type="stylus"> <style type="stylus">
:scope :scope
@ -13,6 +15,7 @@
[data-yield='content'] [data-yield='content']
> mk-messaging > mk-messaging
height 100% height 100%
overflow auto
</style> </style>
<script> <script>

View file

@ -12,6 +12,8 @@ module.exports = (me) ~>
route \/ index route \/ index
route \/i/notifications notifications route \/i/notifications notifications
route \/i/messaging messaging
route \/i/messaging/:username messaging
route \/i/drive drive route \/i/drive drive
route \/i/drive/folder/:folder drive route \/i/drive/folder/:folder drive
route \/i/drive/file/:file drive route \/i/drive/file/:file drive
@ -49,6 +51,15 @@ module.exports = (me) ~>
function notifications function notifications
mount document.create-element \mk-notifications-page mount document.create-element \mk-notifications-page
# メッセージ
function messaging ctx
if ctx.params.username
p = document.create-element \mk-messaging-room-page
p.set-attribute \username ctx.params.username
mount p
else
mount document.create-element \mk-messaging-page
# 新規投稿 # 新規投稿
function new-post function new-post
mount document.create-element \mk-new-post-page mount document.create-element \mk-new-post-page

View file

@ -1,9 +1,11 @@
<mk-drive> <mk-drive>
<nav> <nav>
<p onclick={ goRoot }><i class="fa fa-cloud"></i>ドライブ</p> <p onclick={ goRoot }><i class="fa fa-cloud"></i>ドライブ</p>
<virtual each={ folder in hierarchyFolders }><span><i class="fa fa-angle-right"></i></span> <virtual each={ folder in hierarchyFolders }>
<span><i class="fa fa-angle-right"></i></span>
<p onclick={ _move }>{ folder.name }</p> <p onclick={ _move }>{ folder.name }</p>
</virtual><span if={ folder != null }><i class="fa fa-angle-right"></i></span> </virtual>
<span if={ folder != null }><i class="fa fa-angle-right"></i></span>
<p if={ folder != null }>{ folder.name }</p> <p if={ folder != null }>{ folder.name }</p>
</nav> </nav>
<div class="browser { loading: loading }" if={ file == null }> <div class="browser { loading: loading }" if={ file == null }>

View file

@ -19,6 +19,8 @@ require('./page/settings/signin.tag');
require('./page/settings/api.tag'); require('./page/settings/api.tag');
require('./page/settings/authorized-apps.tag'); require('./page/settings/authorized-apps.tag');
require('./page/settings/twitter.tag'); require('./page/settings/twitter.tag');
require('./page/messaging.tag');
require('./page/messaging-room.tag');
require('./home.tag'); require('./home.tag');
require('./home-timeline.tag'); require('./home-timeline.tag');
require('./timeline.tag'); require('./timeline.tag');

View file

@ -0,0 +1,27 @@
<mk-messaging-room-page>
<mk-ui ref="ui">
<mk-messaging-room if={ !parent.fetching } user={ parent.user }></mk-messaging-room>
</mk-ui>
<style type="stylus">
:scope
display block
</style>
<script>
@mixin \api
@mixin \ui
@fetching = true
@on \mount ~>
@api \users/show do
username: @opts.username
.then (user) ~>
@fetching = false
@user = user
@update!
document.title = 'メッセージ: ' + user.name + ' | Misskey'
# TODO: ユーザー名をエスケープ
@ui.trigger \title '<i class="fa fa-comments-o"></i>' + user.name
</script>
</mk-messaging-room-page>

View file

@ -0,0 +1,21 @@
<mk-messaging-page>
<mk-ui ref="ui">
<mk-messaging ref="index"></mk-messaging>
</mk-ui>
<style type="stylus">
:scope
display block
</style>
<script>
@mixin \ui
@mixin \page
@on \mount ~>
document.title = 'Misskey | メッセージ'
@ui.trigger \title '<i class="fa fa-comments-o"></i>メッセージ'
@refs.ui.refs.index.on \navigate-user (user) ~>
@page '/i/messaging/' + user.username
</script>
</mk-messaging-page>

View file

@ -9,7 +9,7 @@
<ul> <ul>
<li class="home"><a href="/"><i class="icon fa fa-home"></i>ホーム<i class="angle fa fa-angle-right"></i></a></li> <li class="home"><a href="/"><i class="icon fa fa-home"></i>ホーム<i class="angle fa fa-angle-right"></i></a></li>
<li class="notifications"><a href="/i/notifications"><i class="icon fa fa-bell-o"></i>通知<i class="angle fa fa-angle-right"></i></a></li> <li class="notifications"><a href="/i/notifications"><i class="icon fa fa-bell-o"></i>通知<i class="angle fa fa-angle-right"></i></a></li>
<li class="messaging"><a><i class="icon fa fa-comments-o"></i>メッセージ<i class="angle fa fa-angle-right"></i></a></li> <li class="messaging"><a href="/i/messaging"><i class="icon fa fa-comments-o"></i>メッセージ<i class="angle fa fa-angle-right"></i></a></li>
</ul> </ul>
<ul> <ul>
<li class="settings"><a onclick={ search }><i class="icon fa fa-search"></i>検索<i class="angle fa fa-angle-right"></i></a></li> <li class="settings"><a onclick={ search }><i class="icon fa fa-search"></i>検索<i class="angle fa fa-angle-right"></i></a></li>