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>