[Client] 良い感じした

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 != ''