[Client] 良い感じした

This commit is contained in:
syuilo 2017-02-15 08:14:26 +09:00
parent 1dc34359c4
commit 435fcd7db7
3 changed files with 215 additions and 134 deletions

View file

@ -1,14 +1,31 @@
<mk-poll-editor> <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 }> <li each={ choice, i in choices }>
<input value={ choice } oninput={ oninput.bind(null, i) }> <input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '選択肢' + (i + 1) }>
<button onclick={ remove.bind(null, i) }>削除</button> <button onclick={ remove.bind(null, i) } title="この選択肢を削除">
<i class="fa fa-times"></i>
</button>
</li> </li>
</ul> </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"> <style type="stylus">
:scope :scope
display block display block
padding 8px
> .caution
margin 0 0 8px 0
font-size 0.8em
color #f00
> i
margin-right 4px
> ul > ul
display block display block
@ -18,10 +35,55 @@
> li > li
display block display block
margin 4px margin 8px 0
padding 8px 12px padding 0
width 100% 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> </style>
<script> <script>
@choices = ['', ''] @choices = ['', '']
@ -32,13 +94,15 @@
@add = ~> @add = ~>
@choices.push '' @choices.push ''
@update! @update!
@refs.choices.child-nodes[@choices.length - 1].child-nodes[0].focus!
@remove = (i) ~> @remove = (i) ~>
console.log i
console.log @choices.filter((_, _i) -> _i != i)
@choices = @choices.filter((_, _i) -> _i != i) @choices = @choices.filter((_, _i) -> _i != i)
@update! @update!
@destroy = ~>
@opts.ondestroy!
@get = ~> @get = ~>
return { return {
choices: @choices.filter (choice) -> choice != '' choices: @choices.filter (choice) -> choice != ''

View file

@ -1,16 +1,18 @@
<mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }> <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="content">
<div class="attaches" if={ files.length != 0 }> <textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? 'この投稿への返信...' : 'いまどうしてる?' }></textarea>
<ul class="files" ref="attaches"> <div class="medias { with: poll }" if={ files.length != 0 }>
<li class="file" each={ files }> <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=""/> <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>
<li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li> <li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
</ul> </ul>
<p class="remain">残り{ 4 - files.length }</p> <p class="remain">残り{ 4 - files.length }</p>
</div> </div>
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }></mk-poll-editor>
</div>
<mk-uploader ref="uploader"></mk-uploader> <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="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 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> <button class="cat" title="Insert The Cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
@ -32,7 +34,54 @@
display block display block
clear both clear both
> .attaches > .content
[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
& + *
& + * + *
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 margin 0
padding 0 padding 0
background lighten($theme-color, 98%) background lighten($theme-color, 98%)
@ -41,6 +90,10 @@
border-radius 0 0 4px 4px border-radius 0 0 4px 4px
transition border-color .3s ease transition border-color .3s ease
&.with
border-bottom solid 1px rgba($theme-color, 0.1) !important
border-radius 4px 4px 0 0
> .remain > .remain
display block display block
position absolute position absolute
@ -50,7 +103,7 @@
padding 0 padding 0
color rgba($theme-color, 0.4) color rgba($theme-color, 0.4)
> .files > ul
display block display block
margin 0 margin 0
padding 4px padding 4px
@ -61,7 +114,7 @@
display block display block
clear both clear both
> .file > li
display block display block
float left float left
margin 4px margin 4px
@ -109,6 +162,13 @@
font-size 1.2em font-size 1.2em
color rgba($theme-color, 0.2) 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 > mk-uploader
margin 8px 0 0 0 margin 8px 0 0 0
padding 8px padding 8px
@ -118,49 +178,6 @@
[ref='file'] [ref='file']
display none 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 .text-count
pointer-events none pointer-events none
display block display block
@ -298,7 +315,7 @@
@uploadings = [] @uploadings = []
@files = [] @files = []
@autocomplete = null @autocomplete = null
@poll = null @poll = false
@in-reply-to-post = @opts.reply @in-reply-to-post = @opts.reply
@ -414,11 +431,11 @@
@update! @update!
@add-poll = ~> @add-poll = ~>
if @poll? @poll = true
@poll.unmount!
@poll = null @on-poll-destroyed = ~>
return @update do
@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0 poll: false
@post = (e) ~> @post = (e) ~>
@wait = true @wait = true
@ -431,7 +448,7 @@
text: @refs.text.value text: @refs.text.value
media_ids: files media_ids: files
reply_to_id: if @in-reply-to-post? then @in-reply-to-post.id else undefined 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) ~> .then (data) ~>
@trigger \post @trigger \post
@notify if @in-reply-to-post? then '返信しました!' else '投稿しました!' @notify if @in-reply-to-post? then '返信しました!' else '投稿しました!'

View file

@ -18,8 +18,8 @@
<li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li> <li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
</ul> </ul>
</div> </div>
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }></mk-poll-editor>
<mk-uploader ref="uploader"></mk-uploader> <mk-uploader ref="uploader"></mk-uploader>
<div ref="pollZone"></div>
<button ref="upload" onclick={ selectFile }><i class="fa fa-upload"></i></button> <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 ref="drive" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
<button class="cat" onclick={ cat }><i class="fa fa-smile-o"></i></button> <button class="cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
@ -188,7 +188,7 @@
@wait = false @wait = false
@uploadings = [] @uploadings = []
@files = [] @files = []
@poll = null @poll = false
@on \mount ~> @on \mount ~>
@refs.uploader.on \uploaded (file) ~> @refs.uploader.on \uploaded (file) ~>
@ -246,11 +246,11 @@
@update! @update!
@add-poll = ~> @add-poll = ~>
if @poll? @poll = true
@poll.unmount!
@poll = null @on-poll-destroyed = ~>
return @update do
@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0 poll: false
@post = ~> @post = ~>
@wait = true @wait = true
@ -263,7 +263,7 @@
text: @refs.text.value text: @refs.text.value
media_ids: files media_ids: files
reply_to_id: if @opts.reply? then @opts.reply.id else undefined 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) ~> .then (data) ~>
@trigger \post @trigger \post
@unmount! @unmount!