[Client] Messagingをいろいろ

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');

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!

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 }>
-		<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>
+	<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
+						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
 
-							> .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>
 	<script>

src/web/app/common/tags/messaging/room.tag

@@ -18,12 +18,8 @@
 			display block
 
 			> .stream
-				position absolute
+				max-width 600px
-				top 0
+				margin 0 auto
-				left 0
-				width 100%
-				height calc(100% - 100px)
-				overflow 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
+				width 100%
-				max-width 100%
+				max-width 600px
 				margin 0 auto
 				padding 0
 				background rgba(255, 255, 255, 0.95)

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');

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>
+	<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>
 	<style type="stylus">
 		:scope
@@ -13,6 +15,7 @@
 				[data-yield='content']
 					> mk-messaging-room
 						height 100%
+						overflow auto
 
 	</style>
 	<script>

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>
+	<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>
 	<style type="stylus">
 		:scope
@@ -13,6 +15,7 @@
 				[data-yield='content']
 					> mk-messaging
 						height 100%
+						overflow auto
 
 	</style>
 	<script>

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

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 }>

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');

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>

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>

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>