From 50a6bcb693806bacaac0ad339ca3dc46de350f65 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 8 Feb 2018 14:02:08 +0900 Subject: [PATCH] wip --- src/web/app/ch/tags/channel.tag | 2 +- .../app/common/tags/{poll.tag => poll.vue} | 88 ++++++++++--------- src/web/app/common/tags/signin.tag | 2 +- .../app/desktop/tags/big-follow-button.tag | 2 +- src/web/app/desktop/tags/drive/browser.tag | 2 +- src/web/app/desktop/tags/follow-button.tag | 2 +- src/web/app/desktop/tags/post-detail.tag | 2 +- src/web/app/desktop/tags/post-form.tag | 4 +- src/web/app/desktop/tags/settings.tag | 20 ++--- src/web/app/desktop/tags/timeline.tag | 2 +- src/web/app/mobile/tags/follow-button.tag | 2 +- .../app/mobile/tags/notification-preview.tag | 2 +- src/web/app/mobile/tags/notification.tag | 2 +- src/web/app/mobile/tags/post-detail.tag | 2 +- src/web/app/mobile/tags/timeline.tag | 4 +- 15 files changed, 73 insertions(+), 65 deletions(-) rename src/web/app/common/tags/{poll.tag => poll.vue} (58%) diff --git a/src/web/app/ch/tags/channel.tag b/src/web/app/ch/tags/channel.tag index a706a247f..d71837af4 100644 --- a/src/web/app/ch/tags/channel.tag +++ b/src/web/app/ch/tags/channel.tag @@ -246,7 +246,7 @@ <div class="actions"> <button @click="selectFile">%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button> <button @click="drive">%fa:cloud%%i18n:ch.tags.mk-channel-form.drive%</button> - <button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } @click="post"> + <button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0) } @click="post"> <virtual v-if="!wait">%fa:paper-plane%</virtual>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis v-if="wait"/> </button> </div> diff --git a/src/web/app/common/tags/poll.tag b/src/web/app/common/tags/poll.vue similarity index 58% rename from src/web/app/common/tags/poll.tag rename to src/web/app/common/tags/poll.vue index c0605d890..638fa1cbe 100644 --- a/src/web/app/common/tags/poll.tag +++ b/src/web/app/common/tags/poll.vue @@ -1,6 +1,7 @@ -<mk-poll data-is-voted={ isVoted }> +<template> +<div :data-is-voted="isVoted"> <ul> - <li each={ poll.choices } @click="vote.bind(null, id)" class={ voted: voted } title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }> + <li v-for="choice in poll.choices" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }> <div class="backdrop" style={ 'width:' + (parent.result ? (votes / parent.total * 100) : 0) + '%' }></div> <span> <virtual v-if="is_voted">%fa:check%</virtual> @@ -15,6 +16,51 @@ <a v-if="!isVoted" @click="toggleResult">{ result ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }</a> <span v-if="isVoted">%i18n:common.tags.mk-poll.voted%</span> </p> +</div> +</template> + +<script lang="typescript"> + this.mixin('api'); + + this.init = post => { + this.post = post; + this.poll = this.post.poll; + this.total = this.poll.choices.reduce((a, b) => a + b.votes, 0); + this.isVoted = this.poll.choices.some(c => c.is_voted); + this.result = this.isVoted; + this.update(); + }; + + this.init(this.opts.post); + + this.toggleResult = () => { + this.result = !this.result; + }; + + this.vote = id => { + if (this.poll.choices.some(c => c.is_voted)) return; + this.api('posts/polls/vote', { + post_id: this.post.id, + choice: id + }).then(() => { + this.poll.choices.forEach(c => { + if (c.id == id) { + c.votes++; + c.is_voted = true; + } + }); + this.update({ + poll: this.poll, + isVoted: true, + result: true, + total: this.total + 1 + }); + }); + }; +</script> + +<mk-poll data-is-voted={ isVoted }> + <style lang="stylus" scoped> :scope display block @@ -67,43 +113,5 @@ background transparent </style> - <script lang="typescript"> - this.mixin('api'); - this.init = post => { - this.post = post; - this.poll = this.post.poll; - this.total = this.poll.choices.reduce((a, b) => a + b.votes, 0); - this.isVoted = this.poll.choices.some(c => c.is_voted); - this.result = this.isVoted; - this.update(); - }; - - this.init(this.opts.post); - - this.toggleResult = () => { - this.result = !this.result; - }; - - this.vote = id => { - if (this.poll.choices.some(c => c.is_voted)) return; - this.api('posts/polls/vote', { - post_id: this.post.id, - choice: id - }).then(() => { - this.poll.choices.forEach(c => { - if (c.id == id) { - c.votes++; - c.is_voted = true; - } - }); - this.update({ - poll: this.poll, - isVoted: true, - result: true, - total: this.total + 1 - }); - }); - }; - </script> </mk-poll> diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag index 441a8ec56..76a55c7e0 100644 --- a/src/web/app/common/tags/signin.tag +++ b/src/web/app/common/tags/signin.tag @@ -1,5 +1,5 @@ <mk-signin> - <form class={ signing: signing } onsubmit={ onsubmit }> + <form :class="{ signing: signing }" onsubmit={ onsubmit }> <label class="user-name"> <input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at% </label> diff --git a/src/web/app/desktop/tags/big-follow-button.tag b/src/web/app/desktop/tags/big-follow-button.tag index 6d43e4abe..09b587c37 100644 --- a/src/web/app/desktop/tags/big-follow-button.tag +++ b/src/web/app/desktop/tags/big-follow-button.tag @@ -1,5 +1,5 @@ <mk-big-follow-button> - <button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }> + <button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }> <span v-if="!wait && user.is_following">%fa:minus%フォロー解除</span> <span v-if="!wait && !user.is_following">%fa:plus%フォロー</span> <virtual v-if="wait">%fa:spinner .pulse .fw%</virtual> diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag index 15c9bb569..9fdb27054 100644 --- a/src/web/app/desktop/tags/drive/browser.tag +++ b/src/web/app/desktop/tags/drive/browser.tag @@ -1,7 +1,7 @@ <mk-drive-browser> <nav> <div class="path" oncontextmenu={ pathOncontextmenu }> - <mk-drive-browser-nav-folder class={ current: folder == null } folder={ null }/> + <mk-drive-browser-nav-folder :class="{ current: folder == null }" folder={ null }/> <virtual each={ folder in hierarchyFolders }> <span class="separator">%fa:angle-right%</span> <mk-drive-browser-nav-folder folder={ folder }/> diff --git a/src/web/app/desktop/tags/follow-button.tag b/src/web/app/desktop/tags/follow-button.tag index 843774ad0..9a01b0831 100644 --- a/src/web/app/desktop/tags/follow-button.tag +++ b/src/web/app/desktop/tags/follow-button.tag @@ -1,5 +1,5 @@ <mk-follow-button> - <button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }> + <button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }> <virtual v-if="!wait && user.is_following">%fa:minus%</virtual> <virtual v-if="!wait && !user.is_following">%fa:plus%</virtual> <virtual v-if="wait">%fa:spinner .pulse .fw%</virtual> diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag index 34b34b6a5..2225733f7 100644 --- a/src/web/app/desktop/tags/post-detail.tag +++ b/src/web/app/desktop/tags/post-detail.tag @@ -49,7 +49,7 @@ <button @click="repost" title="Repost"> %fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p> </button> - <button class={ reacted: p.my_reaction != null } @click="react" ref="reactButton" title="リアクション"> + <button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="リアクション"> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p> </button> <button @click="menu" ref="menuButton"> diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag index c2da85885..358deb82f 100644 --- a/src/web/app/desktop/tags/post-form.tag +++ b/src/web/app/desktop/tags/post-form.tag @@ -1,6 +1,6 @@ <mk-post-form ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }> <div class="content"> - <textarea class={ with: (files.length != 0 || poll) } ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea> + <textarea :class="{ with: (files.length != 0 || poll) }" ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ placeholder }></textarea> <div class="medias { with: poll }" show={ files.length != 0 }> <ul ref="media"> <li each={ files } data-id={ id }> @@ -18,7 +18,7 @@ <button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" @click="kao">%fa:R smile%</button> <button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" @click="addPoll">%fa:chart-pie%</button> <p class="text-count { over: refs.text.value.length > 1000 }">{ '%i18n:desktop.tags.mk-post-form.text-remain%'.replace('{}', 1000 - refs.text.value.length) }</p> - <button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll && !repost) } @click="post"> + <button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0 && !poll && !repost) } @click="post"> { wait ? '%i18n:desktop.tags.mk-post-form.posting%' : submitText }<mk-ellipsis v-if="wait"/> </button> <input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange={ changeFile }/> diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag index 3288ba721..191d1d754 100644 --- a/src/web/app/desktop/tags/settings.tag +++ b/src/web/app/desktop/tags/settings.tag @@ -1,15 +1,15 @@ <mk-settings> <div class="nav"> - <p class={ active: page == 'profile' } onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p> - <p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p> - <p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p> - <p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p> - <p class={ active: page == 'mute' } onmousedown={ setPage.bind(null, 'mute') }>%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p> - <p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p> - <p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p> - <p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p> - <p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p> - <p class={ active: page == 'other' } onmousedown={ setPage.bind(null, 'other') }>%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p> + <p :class="{ active: page == 'profile' }" onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p> + <p :class="{ active: page == 'web' }" onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p> + <p :class="{ active: page == 'notification' }" onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p> + <p :class="{ active: page == 'drive' }" onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p> + <p :class="{ active: page == 'mute' }" onmousedown={ setPage.bind(null, 'mute') }>%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p> + <p :class="{ active: page == 'apps' }" onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p> + <p :class="{ active: page == 'twitter' }" onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p> + <p :class="{ active: page == 'security' }" onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p> + <p :class="{ active: page == 'api' }" onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p> + <p :class="{ active: page == 'other' }" onmousedown={ setPage.bind(null, 'other') }>%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p> </div> <div class="pages"> <section class="profile" show={ page == 'profile' }> diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag index 485353346..772140dcc 100644 --- a/src/web/app/desktop/tags/timeline.tag +++ b/src/web/app/desktop/tags/timeline.tag @@ -135,7 +135,7 @@ <button @click="repost" title="%i18n:desktop.tags.mk-timeline-post.repost%"> %fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p> </button> - <button class={ reacted: p.my_reaction != null } @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%"> + <button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:desktop.tags.mk-timeline-post.add-reaction%"> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p> </button> <button @click="menu" ref="menuButton"> diff --git a/src/web/app/mobile/tags/follow-button.tag b/src/web/app/mobile/tags/follow-button.tag index bd4ecbaf9..5f746c46b 100644 --- a/src/web/app/mobile/tags/follow-button.tag +++ b/src/web/app/mobile/tags/follow-button.tag @@ -1,5 +1,5 @@ <mk-follow-button> - <button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } v-if="!init" @click="onclick" disabled={ wait }> + <button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait }> <virtual v-if="!wait && user.is_following">%fa:minus%</virtual> <virtual v-if="!wait && !user.is_following">%fa:plus%</virtual> <virtual v-if="wait">%fa:spinner .pulse .fw%</virtual>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' } diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag index 06f4fb511..bd4f633f8 100644 --- a/src/web/app/mobile/tags/notification-preview.tag +++ b/src/web/app/mobile/tags/notification-preview.tag @@ -1,4 +1,4 @@ -<mk-notification-preview class={ notification.type }> +<mk-notification-preview :class="{ notification.type }"> <virtual v-if="notification.type == 'reaction'"> <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <div class="text"> diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag index 9aca50cb4..d4f6ca92e 100644 --- a/src/web/app/mobile/tags/notification.tag +++ b/src/web/app/mobile/tags/notification.tag @@ -1,4 +1,4 @@ -<mk-notification class={ notification.type }> +<mk-notification :class="{ notification.type }"> <mk-time time={ notification.created_at }/> <virtual v-if="notification.type == 'reaction'"> <a class="avatar-anchor" href={ '/' + notification.user.username }> diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag index 6b70b2313..124a707d2 100644 --- a/src/web/app/mobile/tags/post-detail.tag +++ b/src/web/app/mobile/tags/post-detail.tag @@ -49,7 +49,7 @@ <button @click="repost" title="Repost"> %fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p> </button> - <button class={ reacted: p.my_reaction != null } @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%"> + <button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton" title="%i18n:mobile.tags.mk-post-detail.reaction%"> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p> </button> <button @click="menu" ref="menuButton"> diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag index 47862a126..b1ff03547 100644 --- a/src/web/app/mobile/tags/timeline.tag +++ b/src/web/app/mobile/tags/timeline.tag @@ -136,7 +136,7 @@ </script> </mk-timeline> -<mk-timeline-post class={ repost: isRepost }> +<mk-timeline-post :class="{ repost: isRepost }"> <div class="reply-to" v-if="p.reply"> <mk-timeline-post-sub post={ p.reply }/> </div> @@ -188,7 +188,7 @@ <button @click="repost" title="Repost"> %fa:retweet%<p class="count" v-if="p.repost_count > 0">{ p.repost_count }</p> </button> - <button class={ reacted: p.my_reaction != null } @click="react" ref="reactButton"> + <button :class="{ reacted: p.my_reaction != null }" @click="react" ref="reactButton"> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{ p.reactions_count }</p> </button> <button class="menu" @click="menu" ref="menuButton">