mirror of
https://github.com/hotomoe/hotomoe
synced 2024-12-12 13:48:12 +09:00
[Client] 良い感じした
This commit is contained in:
syuilo
parent
1dc34359c4
commit
435fcd7db7
@ -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 != ''
|
||||||
|
|||||||
@ -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>
|
||||||
<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 each={ files }>
|
||||||
</li>
|
<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 class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
|
</li>
|
||||||
</ul>
|
<li class="add" if={ files.length < 4 } title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-plus"></i></li>
|
||||||
<p class="remain">残り{ 4 - files.length }</p>
|
</ul>
|
||||||
|
<p class="remain">残り{ 4 - files.length }</p>
|
||||||
|
</div>
|
||||||
|
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }></mk-poll-editor>
|
||||||
</div>
|
</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,82 +34,140 @@
|
|||||||
display block
|
display block
|
||||||
clear both
|
clear both
|
||||||
|
|
||||||
> .attaches
|
> .content
|
||||||
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
|
|
||||||
|
|
||||||
> .remain
|
[ref='text']
|
||||||
display block
|
display block
|
||||||
position absolute
|
padding 12px
|
||||||
top 8px
|
margin 0
|
||||||
right 8px
|
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
|
||||||
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
|
&.with
|
||||||
display block
|
border-bottom solid 1px rgba($theme-color, 0.1) !important
|
||||||
margin 0
|
border-radius 4px 4px 0 0
|
||||||
padding 4px
|
|
||||||
list-style none
|
|
||||||
|
|
||||||
&:after
|
> .remain
|
||||||
content ""
|
|
||||||
display block
|
display block
|
||||||
clear both
|
position absolute
|
||||||
|
top 8px
|
||||||
> .file
|
right 8px
|
||||||
display block
|
margin 0
|
||||||
float left
|
|
||||||
margin 4px
|
|
||||||
padding 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
|
display block
|
||||||
|
clear both
|
||||||
|
|
||||||
> .img
|
> li
|
||||||
width 64px
|
display block
|
||||||
height 64px
|
float left
|
||||||
background-size cover
|
margin 4px
|
||||||
background-position center center
|
padding 0
|
||||||
|
cursor move
|
||||||
|
|
||||||
> .remove
|
&:hover > .remove
|
||||||
display none
|
display block
|
||||||
position absolute
|
|
||||||
top -6px
|
> .img
|
||||||
right -6px
|
width 64px
|
||||||
width 16px
|
height 64px
|
||||||
height 16px
|
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
|
cursor pointer
|
||||||
|
|
||||||
> .add
|
&:hover
|
||||||
display block
|
border-color rgba($theme-color, 0.3)
|
||||||
float left
|
|
||||||
margin 4px
|
|
||||||
padding 0
|
|
||||||
border dashed 2px rgba($theme-color, 0.2)
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
&:hover
|
> i
|
||||||
border-color rgba($theme-color, 0.3)
|
color rgba($theme-color, 0.4)
|
||||||
|
|
||||||
> i
|
> 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
|
> mk-poll-editor
|
||||||
display block
|
background lighten($theme-color, 98%)
|
||||||
width 60px
|
border solid 1px rgba($theme-color, 0.1)
|
||||||
height 60px
|
border-top none
|
||||||
line-height 60px
|
border-radius 0 0 4px 4px
|
||||||
text-align center
|
transition border-color .3s ease
|
||||||
font-size 1.2em
|
|
||||||
color rgba($theme-color, 0.2)
|
|
||||||
|
|
||||||
> mk-uploader
|
> mk-uploader
|
||||||
margin 8px 0 0 0
|
margin 8px 0 0 0
|
||||||
@ -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 '投稿しました！'
|
||||||
|
|||||||
@ -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!
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user