wip
This commit is contained in:
		
							parent
							
								
									359855f2cc
								
							
						
					
					
						commit
						50a6bcb693
					
				|  | @ -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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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 }/> | ||||
|  |  | |||
|  | @ -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> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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 }/> | ||||
|  |  | |||
|  | @ -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' }> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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%' } | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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 }> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
|  | @ -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"> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue