From 45d47fc001395d0417d68bc05dfe9eaa1b30caf4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 15 Feb 2017 08:14:26 +0900
Subject: [PATCH] =?UTF-8?q?[Client]=20=E8=89=AF=E3=81=84=E6=84=9F=E3=81=98?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/app/common/tags/poll-editor.tag |  80 +++++++-
 src/web/app/desktop/tags/post-form.tag  | 253 +++++++++++++-----------
 src/web/app/mobile/tags/post-form.tag   |  16 +-
 3 files changed, 215 insertions(+), 134 deletions(-)

diff --git a/src/web/app/common/tags/poll-editor.tag b/src/web/app/common/tags/poll-editor.tag
index 04c712b61..66a6e74d9 100644
--- a/src/web/app/common/tags/poll-editor.tag
+++ b/src/web/app/common/tags/poll-editor.tag
@@ -1,14 +1,31 @@
 <mk-poll-editor>
-	<ul>
+	<p class="caution" if={ choices.length < 2 }>
+		<i class="fa fa-exclamation-triangle"></i>投票には、選択肢が最低2つ必要です
+	</p>
+	<ul ref="choices">
 		<li each={ choice, i in choices }>
-			<input value={ choice } oninput={ oninput.bind(null, i) }>
-			<button onclick={ remove.bind(null, i) }>削除</button>
+			<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '選択肢' + (i + 1) }>
+			<button onclick={ remove.bind(null, i) } title="この選択肢を削除">
+				<i class="fa fa-times"></i>
+			</button>
 		</li>
 	</ul>
-	<button onclick={ add }>選択肢を追加</button>
+	<button class="add" if={ choices.length < 10 } onclick={ add }>+選択肢を追加</button>
+	<button class="destroy" onclick={ destroy } title="投票を破棄">
+		<i class="fa fa-times"></i>
+	</button>
 	<style type="stylus">
 		:scope
 			display block
+			padding 8px
+
+			> .caution
+				margin 0 0 8px 0
+				font-size 0.8em
+				color #f00
+
+				> i
+					margin-right 4px
 
 			> ul
 				display block
@@ -18,10 +35,55 @@
 
 				> li
 					display block
-					margin 4px
-					padding 8px 12px
+					margin 8px 0
+					padding 0
 					width 100%
 
+					&:first-child
+						margin-top 0
+
+					&:last-child
+						margin-bottom 0
+
+					> input
+						padding 6px
+						border solid 1px rgba($theme-color, 0.1)
+						border-radius 4px
+
+						&:hover
+							border-color rgba($theme-color, 0.2)
+
+						&:focus
+							border-color rgba($theme-color, 0.5)
+
+					> button
+						padding 4px 8px
+						color rgba($theme-color, 0.4)
+
+						&:hover
+							color rgba($theme-color, 0.6)
+
+						&:active
+							color darken($theme-color, 30%)
+
+			> .add
+				margin 8px 0 0 0
+				vertical-align top
+				color $theme-color
+
+			> .destroy
+				position absolute
+				top 0
+				right 0
+				padding 4px 8px
+				color rgba($theme-color, 0.4)
+
+				&:hover
+					color rgba($theme-color, 0.6)
+
+				&:active
+					color darken($theme-color, 30%)
+
 	</style>
 	<script>
 		@choices = ['', '']
@@ -32,13 +94,15 @@
 		@add = ~>
 			@choices.push ''
 			@update!
+			@refs.choices.child-nodes[@choices.length - 1].child-nodes[0].focus!
 
 		@remove = (i) ~>
-			console.log i
-			console.log @choices.filter((_, _i) -> _i != i)
 			@choices = @choices.filter((_, _i) -> _i != i)
 			@update!
 
+		@destroy = ~>
+			@opts.ondestroy!
+
 		@get = ~>
 			return {
 				choices: @choices.filter (choice) -> choice != ''
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
index dc80677d3..285f22fcf 100644
--- a/src/web/app/desktop/tags/post-form.tag
+++ b/src/web/app/desktop/tags/post-form.tag
@@ -1,16 +1,18 @@
 <mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
-	<textarea class={ withfiles: files.length != 0 } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? 'この投稿への返信...' : 'いまどうしてる？' }></textarea>
-	<div class="attaches" if={ files.length != 0 }>
-		<ul class="files" ref="attaches">
-			<li class="file" each={ files }>
-				<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div><img class="remove" onclick={ _remove } src="/_/resources/desktop/remove.png" title="添付取り消し" alt=""/>
-			</li>
-			<li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
-		</ul>
-		<p class="remain">残り{ 4 - files.length }</p>
+	<div class="content">
+		<textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? 'この投稿への返信...' : 'いまどうしてる？' }></textarea>
+		<div class="medias { with: poll }" if={ files.length != 0 }>
+			<ul>
+				<li each={ files }>
+					<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div><img class="remove" onclick={ _remove } src="/_/resources/desktop/remove.png" title="添付取り消し" alt=""/>
+				</li>
+				<li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
+			</ul>
+			<p class="remain">残り{ 4 - files.length }</p>
+		</div>
+		<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }></mk-poll-editor>
 	</div>
 	<mk-uploader ref="uploader"></mk-uploader>
-	<div ref="pollZone"></div>
 	<button ref="upload" title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-upload"></i></button>
 	<button ref="drive" title="ドライブからファイルを添付" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
 	<button class="cat" title="Insert The Cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
@@ -32,82 +34,140 @@
 				display block
 				clear both
 
-			> .attaches
-				margin 0
-				padding 0
-				background lighten($theme-color, 98%)
-				border solid 1px rgba($theme-color, 0.1)
-				border-top none
-				border-radius 0 0 4px 4px
-				transition border-color .3s ease
+			> .content
 
-				> .remain
+				[ref='text']
 					display block
-					position absolute
-					top 8px
-					right 8px
+					padding 12px
+					margin 0
+					width 100%
+					max-width 100%
+					min-width 100%
+					min-height calc(16px + 12px + 12px)
+					font-size 16px
+					color #333
+					background #fff
+					outline none
+					border solid 1px rgba($theme-color, 0.1)
+					border-radius 4px
+					transition border-color .3s ease
+
+					&:hover
+						border-color rgba($theme-color, 0.2)
+						transition border-color .1s ease
+
+						& + *
+						& + * + *
+							border-color rgba($theme-color, 0.2)
+							transition border-color .1s ease
+
+					&:focus
+						color $theme-color
+						border-color rgba($theme-color, 0.5)
+						transition border-color 0s ease
+
+						& + *
+						& + * + *
+							border-color rgba($theme-color, 0.5)
+							transition border-color 0s ease
+
+					&:disabled
+						opacity 0.5
+
+					&::-webkit-input-placeholder
+						color rgba($theme-color, 0.3)
+
+					&.with
+						border-bottom solid 1px rgba($theme-color, 0.1) !important
+						border-radius 4px 4px 0 0
+
+				> .medias
 					margin 0
 					padding 0
-					color rgba($theme-color, 0.4)
+					background lighten($theme-color, 98%)
+					border solid 1px rgba($theme-color, 0.1)
+					border-top none
+					border-radius 0 0 4px 4px
+					transition border-color .3s ease
 
-				> .files
-					display block
-					margin 0
-					padding 4px
-					list-style none
+					&.with
+						border-bottom solid 1px rgba($theme-color, 0.1) !important
+						border-radius 4px 4px 0 0
 
-					&:after
-						content ""
+					> .remain
 						display block
-						clear both
-
-					> .file
-						display block
-						float left
-						margin 4px
+						position absolute
+						top 8px
+						right 8px
+						margin 0
 						padding 0
-						cursor move
+						color rgba($theme-color, 0.4)
 
-						&:hover > .remove
+					> ul
+						display block
+						margin 0
+						padding 4px
+						list-style none
+
+						&:after
+							content ""
 							display block
+							clear both
 
-						> .img
-							width 64px
-							height 64px
-							background-size cover
-							background-position center center
+						> li
+							display block
+							float left
+							margin 4px
+							padding 0
+							cursor move
 
-						> .remove
-							display none
-							position absolute
-							top -6px
-							right -6px
-							width 16px
-							height 16px
+							&:hover > .remove
+								display block
+
+							> .img
+								width 64px
+								height 64px
+								background-size cover
+								background-position center center
+
+							> .remove
+								display none
+								position absolute
+								top -6px
+								right -6px
+								width 16px
+								height 16px
+								cursor pointer
+
+						> .add
+							display block
+							float left
+							margin 4px
+							padding 0
+							border dashed 2px rgba($theme-color, 0.2)
 							cursor pointer
 
-					> .add
-						display block
-						float left
-						margin 4px
-						padding 0
-						border dashed 2px rgba($theme-color, 0.2)
-						cursor pointer
+							&:hover
+								border-color rgba($theme-color, 0.3)
 
-						&:hover
-							border-color rgba($theme-color, 0.3)
+								> i
+									color rgba($theme-color, 0.4)
 
 							> i
-								color rgba($theme-color, 0.4)
+								display block
+								width 60px
+								height 60px
+								line-height 60px
+								text-align center
+								font-size 1.2em
+								color rgba($theme-color, 0.2)
 
-						> i
-							display block
-							width 60px
-							height 60px
-							line-height 60px
-							text-align center
-							font-size 1.2em
-							color rgba($theme-color, 0.2)
+				> mk-poll-editor
+					background lighten($theme-color, 98%)
+					border solid 1px rgba($theme-color, 0.1)
+					border-top none
+					border-radius 0 0 4px 4px
+					transition border-color .3s ease
 
 			> mk-uploader
 				margin 8px 0 0 0
@@ -118,49 +178,6 @@
 			[ref='file']
 				display none
 
-			[ref='text']
-				display block
-				padding 12px
-				margin 0
-				width 100%
-				max-width 100%
-				min-width 100%
-				min-height calc(16px + 12px + 12px)
-				font-size 16px
-				color #333
-				background #fff
-				outline none
-				border solid 1px rgba($theme-color, 0.1)
-				border-radius 4px
-				transition border-color .3s ease
-
-				&:hover
-					border-color rgba($theme-color, 0.2)
-					transition border-color .1s ease
-
-				&:focus
-					color $theme-color
-					border-color rgba($theme-color, 0.5)
-					transition border-color 0s ease
-
-				&:disabled
-					opacity 0.5
-
-				&::-webkit-input-placeholder
-					color rgba($theme-color, 0.3)
-
-				&.withfiles
-					border-bottom solid 1px rgba($theme-color, 0.1) !important
-					border-radius 4px 4px 0 0
-
-					&:hover + .attaches
-						border-color rgba($theme-color, 0.2)
-						transition border-color .1s ease
-
-					&:focus + .attaches
-						border-color rgba($theme-color, 0.5)
-						transition border-color 0s ease
-
 			.text-count
 				pointer-events none
 				display block
@@ -298,7 +315,7 @@
 		@uploadings = []
 		@files = []
 		@autocomplete = null
-		@poll = null
+		@poll = false
 
 		@in-reply-to-post = @opts.reply
 
@@ -414,11 +431,11 @@
 			@update!
 
 		@add-poll = ~>
-			if @poll?
-				@poll.unmount!
-				@poll = null
-				return
-			@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0
+			@poll = true
+
+		@on-poll-destroyed = ~>
+			@update do
+				poll: false
 
 		@post = (e) ~>
 			@wait = true
@@ -431,7 +448,7 @@
 				text: @refs.text.value
 				media_ids: files
 				reply_to_id: if @in-reply-to-post? then @in-reply-to-post.id else undefined
-				poll: if @poll? then @poll.get! else undefined
+				poll: if @poll then @refs.poll.get! else undefined
 			.then (data) ~>
 				@trigger \post
 				@notify if @in-reply-to-post? then '返信しました！' else '投稿しました！'
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index cfed7c1a8..6dc50150a 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -18,8 +18,8 @@
 				<li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
 			</ul>
 		</div>
+		<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }></mk-poll-editor>
 		<mk-uploader ref="uploader"></mk-uploader>
-		<div ref="pollZone"></div>
 		<button ref="upload" onclick={ selectFile }><i class="fa fa-upload"></i></button>
 		<button ref="drive" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
 		<button class="cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
@@ -188,7 +188,7 @@
 		@wait = false
 		@uploadings = []
 		@files = []
-		@poll = null
+		@poll = false
 
 		@on \mount ~>
 			@refs.uploader.on \uploaded (file) ~>
@@ -246,11 +246,11 @@
 			@update!
 
 		@add-poll = ~>
-			if @poll?
-				@poll.unmount!
-				@poll = null
-				return
-			@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0
+			@poll = true
+
+		@on-poll-destroyed = ~>
+			@update do
+				poll: false
 
 		@post = ~>
 			@wait = true
@@ -263,7 +263,7 @@
 				text: @refs.text.value
 				media_ids: files
 				reply_to_id: if @opts.reply? then @opts.reply.id else undefined
-				poll: if @poll? then @poll.get! else undefined
+				poll: if @poll then @refs.poll.get! else undefined
 			.then (data) ~>
 				@trigger \post
 				@unmount!