Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-08 14:02:08 +09:00
parent 359855f2cc
commit 50a6bcb693
15 changed files with 73 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/app/ch/tags/channel.tag
View file

@ -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>

88
src/web/app/common/tags/poll.tag → src/web/app/common/tags/poll.vue
View file

@ -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>

2
src/web/app/common/tags/signin.tag
View file

@ -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>

2
src/web/app/desktop/tags/big-follow-button.tag
View file

@ -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>

2
src/web/app/desktop/tags/drive/browser.tag
View file

@ -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 }/>

2
src/web/app/desktop/tags/follow-button.tag
View file

@ -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>

2
src/web/app/desktop/tags/post-detail.tag
View file

@ -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">

4
src/web/app/desktop/tags/post-form.tag
View file

@ -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 }/>

20
src/web/app/desktop/tags/settings.tag
View file

@ -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' }>

2
src/web/app/desktop/tags/timeline.tag
View file

@ -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">

2
src/web/app/mobile/tags/follow-button.tag
View file

@ -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%' }

2
src/web/app/mobile/tags/notification-preview.tag
View file

@ -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">

2
src/web/app/mobile/tags/notification.tag
View file

@ -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 }>

2
src/web/app/mobile/tags/post-detail.tag
View file

@ -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">

4
src/web/app/mobile/tags/timeline.tag
View file

@ -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">