mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-04 11:54:49 +01:00
[Client] Messagingをいろいろ
This commit is contained in:
syuilo
parent
4c498320c2
commit
3d38356a91
14 changed files with 223 additions and 132 deletions
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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!
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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)
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 }>
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
27
src/web/app/mobile/tags/page/messaging-room.tag
Normal file
27
src/web/app/mobile/tags/page/messaging-room.tag
Normal 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>
|
||||||
21
src/web/app/mobile/tags/page/messaging.tag
Normal file
21
src/web/app/mobile/tags/page/messaging.tag
Normal 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>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue