diff --git a/src/web/app/common/tags/index.js b/src/web/app/common/tags/index.js
index 692a7070a..21d817dbd 100644
--- a/src/web/app/common/tags/index.js
+++ b/src/web/app/common/tags/index.js
@@ -20,3 +20,7 @@ require('./twitter-setting.tag');
require('./authorized-apps.tag');
require('./poll.tag');
require('./poll-editor.tag');
+require('./messaging/room.tag');
+require('./messaging/message.tag');
+require('./messaging/index.tag');
+require('./messaging/form.tag');
diff --git a/src/web/app/desktop/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag
similarity index 98%
rename from src/web/app/desktop/tags/messaging/form.tag
rename to src/web/app/common/tags/messaging/form.tag
index 79aa9e2ac..8979edf28 100644
--- a/src/web/app/desktop/tags/messaging/form.tag
+++ b/src/web/app/common/tags/messaging/form.tag
@@ -113,8 +113,6 @@
<script>
@mixin \api
- @user = @opts.user
-
@onpaste = (e) ~>
data = e.clipboard-data
items = data.items
@@ -143,7 +141,7 @@
@send = ~>
@sending = true
@api \messaging/messages/create do
- user_id: @user.id
+ user_id: @opts.user.id
text: @refs.text.value
.then (message) ~>
@clear!
diff --git a/src/web/app/desktop/tags/messaging/index.tag b/src/web/app/common/tags/messaging/index.tag
similarity index 53%
rename from src/web/app/desktop/tags/messaging/index.tag
rename to src/web/app/common/tags/messaging/index.tag
index 1c41c4001..2950f2a88 100644
--- a/src/web/app/desktop/tags/messaging/index.tag
+++ b/src/web/app/common/tags/messaging/index.tag
@@ -6,31 +6,42 @@
</div>
<div class="result">
<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>
</div>
</div>
- <div class="main">
- <div class="history" if={ history.length > 0 }>
- <virtual each={ history }><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=""/>
- <header><span class="name">{ is_me ? recipient.name : user.name }</span><span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
- <mk-time time={ created_at }></mk-time>
- </header>
- <div class="body">
- <p class="text"><span class="me" if={ is_me }>あなた:</span>{ text }</p>
- </div>
- </div></a></virtual>
- </div>
- <p class="no-history" if={ history.length == 0 }>履歴はありません。<br/>ユーザーを検索して、いつでもメッセージを送受信できます。</p>
+ <div class="history" if={ history.length > 0 }>
+ <virtual each={ history }>
+ <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=""/>
+ <header>
+ <span class="name">{ is_me ? recipient.name : user.name }</span>
+ <span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
+ <mk-time time={ created_at }></mk-time>
+ </header>
+ <div class="body">
+ <p class="text"><span class="me" if={ is_me }>あなた:</span>{ text }</p>
+ </div>
+ </div>
+ </a>
+ </virtual>
</div>
+ <p class="no-history" if={ history.length == 0 }>履歴はありません。<br/>ユーザーを検索して、いつでもメッセージを送受信できます。</p>
<style type="stylus">
:scope
display block
> .search
display block
- position absolute
+ position -webkit-sticky
+ position sticky
top 0
left 0
z-index 1
@@ -153,110 +164,126 @@
font-weight normal
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
- padding 20px 30px
- text-decoration none
- background #fff
- border-bottom solid 1px #eee
+ clear both
- *
- pointer-events none
- user-select none
+ > div
+ max-width 500px
+ margin 0 auto
- &:hover
- background #fafafa
+ > header
+ margin-bottom 2px
+ white-space nowrap
+ overflow hidden
- > .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
- 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
+ > .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
- > .body
+ > .username
+ text-align left
+ margin 0 0 0 8px
+ color rgba(0, 0, 0, 0.5)
- > .text
- display block
- margin 0 0 0 0
- padding 0
- overflow hidden
- overflow-wrap break-word
- font-size 1.1em
- color rgba(0, 0, 0, 0.8)
+ > mk-time
+ position absolute
+ top 0
+ right 0
+ display inline
+ color rgba(0, 0, 0, 0.5)
+ font-size 80%
- .me
- color rgba(0, 0, 0, 0.4)
+ > .avatar
+ float left
+ width 54px
+ height 54px
+ margin 0 16px 0 0
+ border-radius 8px
+ transition all 0.1s ease
- > .image
- display block
- max-width 100%
- max-height 512px
+ > .body
- > .no-history
- margin 0
- padding 2em 1em
- text-align center
- color #999
- font-weight 500
+ > .text
+ display block
+ margin 0 0 0 0
+ padding 0
+ overflow hidden
+ 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>
<script>
diff --git a/src/web/app/desktop/tags/messaging/message.tag b/src/web/app/common/tags/messaging/message.tag
similarity index 100%
rename from src/web/app/desktop/tags/messaging/message.tag
rename to src/web/app/common/tags/messaging/message.tag
diff --git a/src/web/app/desktop/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag
similarity index 97%
rename from src/web/app/desktop/tags/messaging/room.tag
rename to src/web/app/common/tags/messaging/room.tag
index 2e0c19156..3acfc14b0 100644
--- a/src/web/app/desktop/tags/messaging/room.tag
+++ b/src/web/app/common/tags/messaging/room.tag
@@ -18,12 +18,8 @@
display block
> .stream
- position absolute
- top 0
- left 0
- width 100%
- height calc(100% - 100px)
- overflow auto
+ max-width 600px
+ margin 0 auto
> .empty
width 100%
@@ -77,11 +73,12 @@
background #fff
> footer
- position absolute
+ position -webkit-sticky
+ position sticky
z-index 2
bottom 0
- width 600px
- max-width 100%
+ width 100%
+ max-width 600px
margin 0 auto
padding 0
background rgba(255, 255, 255, 0.95)
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index e88d8d27e..297f28ac2 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -45,11 +45,7 @@ require('./home-widgets/broadcast.tag');
require('./stream-indicator.tag');
require('./timeline.tag');
require('./messaging/window.tag');
-require('./messaging/room.tag');
require('./messaging/room-window.tag');
-require('./messaging/message.tag');
-require('./messaging/index.tag');
-require('./messaging/form.tag');
require('./following-setuper.tag');
require('./ellipsis-icon.tag');
require('./ui.tag');
diff --git a/src/web/app/desktop/tags/messaging/room-window.tag b/src/web/app/desktop/tags/messaging/room-window.tag
index f66bab45d..e735f7c78 100644
--- a/src/web/app/desktop/tags/messaging/room-window.tag
+++ b/src/web/app/desktop/tags/messaging/room-window.tag
@@ -1,7 +1,9 @@
<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>
-<yield to="content">
- <mk-messaging-room user={ parent.user }></mk-messaging-room></yield>
+ <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
+ <yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield>
+ <yield to="content">
+ <mk-messaging-room user={ parent.user }></mk-messaging-room>
+ </yield>
</mk-window>
<style type="stylus">
:scope
@@ -13,6 +15,7 @@
[data-yield='content']
> mk-messaging-room
height 100%
+ overflow auto
</style>
<script>
diff --git a/src/web/app/desktop/tags/messaging/window.tag b/src/web/app/desktop/tags/messaging/window.tag
index 72d297016..b4cf123b0 100644
--- a/src/web/app/desktop/tags/messaging/window.tag
+++ b/src/web/app/desktop/tags/messaging/window.tag
@@ -1,7 +1,9 @@
<mk-messaging-window>
- <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }><yield to="header"><i class="fa fa-comments"></i>メッセージ</yield>
-<yield to="content">
- <mk-messaging ref="index"></mk-messaging></yield>
+ <mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
+ <yield to="header"><i class="fa fa-comments"></i>メッセージ</yield>
+ <yield to="content">
+ <mk-messaging ref="index"></mk-messaging>
+ </yield>
</mk-window>
<style type="stylus">
:scope
@@ -13,6 +15,7 @@
[data-yield='content']
> mk-messaging
height 100%
+ overflow auto
</style>
<script>
diff --git a/src/web/app/mobile/router.ls b/src/web/app/mobile/router.ls
index ae68f2177..3c0cb4223 100644
--- a/src/web/app/mobile/router.ls
+++ b/src/web/app/mobile/router.ls
@@ -12,6 +12,8 @@ module.exports = (me) ~>
route \/ index
route \/i/notifications notifications
+ route \/i/messaging messaging
+ route \/i/messaging/:username messaging
route \/i/drive drive
route \/i/drive/folder/:folder drive
route \/i/drive/file/:file drive
@@ -49,6 +51,15 @@ module.exports = (me) ~>
function notifications
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
mount document.create-element \mk-new-post-page
diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 281036444..903a66017 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -1,9 +1,11 @@
<mk-drive>
<nav>
<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>
- </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>
</nav>
<div class="browser { loading: loading }" if={ file == null }>
diff --git a/src/web/app/mobile/tags/index.js b/src/web/app/mobile/tags/index.js
index a4374d4e1..2a8f2161c 100644
--- a/src/web/app/mobile/tags/index.js
+++ b/src/web/app/mobile/tags/index.js
@@ -19,6 +19,8 @@ require('./page/settings/signin.tag');
require('./page/settings/api.tag');
require('./page/settings/authorized-apps.tag');
require('./page/settings/twitter.tag');
+require('./page/messaging.tag');
+require('./page/messaging-room.tag');
require('./home.tag');
require('./home-timeline.tag');
require('./timeline.tag');
diff --git a/src/web/app/mobile/tags/page/messaging-room.tag b/src/web/app/mobile/tags/page/messaging-room.tag
new file mode 100644
index 000000000..3373085bd
--- /dev/null
+++ b/src/web/app/mobile/tags/page/messaging-room.tag
@@ -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>
diff --git a/src/web/app/mobile/tags/page/messaging.tag b/src/web/app/mobile/tags/page/messaging.tag
new file mode 100644
index 000000000..e8bd85950
--- /dev/null
+++ b/src/web/app/mobile/tags/page/messaging.tag
@@ -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>
diff --git a/src/web/app/mobile/tags/ui-nav.tag b/src/web/app/mobile/tags/ui-nav.tag
index 01bfac660..a3ec3352c 100644
--- a/src/web/app/mobile/tags/ui-nav.tag
+++ b/src/web/app/mobile/tags/ui-nav.tag
@@ -9,7 +9,7 @@
<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="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>
<li class="settings"><a onclick={ search }><i class="icon fa fa-search"></i>検索<i class="angle fa fa-angle-right"></i></a></li>