wip
This commit is contained in:
parent
18e1628e2a
commit
0c2b79aced
88 changed files with 474 additions and 460 deletions
|
@ -26,8 +26,8 @@
|
|||
</section>
|
||||
</div>
|
||||
<div class="action">
|
||||
<button onclick={ cancel }>キャンセル</button>
|
||||
<button onclick={ accept }>アクセスを許可</button>
|
||||
<button @click="cancel">キャンセル</button>
|
||||
<button @click="accept">アクセスを許可</button>
|
||||
</div>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
<h1>{ channel.title }</h1>
|
||||
|
||||
<div if={ SIGNIN }>
|
||||
<p if={ channel.is_watching }>このチャンネルをウォッチしています <a onclick={ unwatch }>ウォッチ解除</a></p>
|
||||
<p if={ !channel.is_watching }><a onclick={ watch }>このチャンネルをウォッチする</a></p>
|
||||
<p if={ channel.is_watching }>このチャンネルをウォッチしています <a @click="unwatch">ウォッチ解除</a></p>
|
||||
<p if={ !channel.is_watching }><a @click="watch">このチャンネルをウォッチする</a></p>
|
||||
</div>
|
||||
|
||||
<div class="share">
|
||||
|
@ -164,7 +164,7 @@
|
|||
|
||||
<mk-channel-post>
|
||||
<header>
|
||||
<a class="index" onclick={ reply }>{ post.index }:</a>
|
||||
<a class="index" @click="reply">{ post.index }:</a>
|
||||
<a class="name" href={ _URL_ + '/' + post.user.username }><b>{ post.user.name }</b></a>
|
||||
<mk-time time={ post.created_at }/>
|
||||
<mk-time time={ post.created_at } mode="detail"/>
|
||||
|
@ -241,12 +241,12 @@
|
|||
</mk-channel-post>
|
||||
|
||||
<mk-channel-form>
|
||||
<p if={ reply }><b>>>{ reply.index }</b> ({ reply.user.name }): <a onclick={ clearReply }>[x]</a></p>
|
||||
<p if={ reply }><b>>>{ reply.index }</b> ({ reply.user.name }): <a @click="clearReply">[x]</a></p>
|
||||
<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea>
|
||||
<div class="actions">
|
||||
<button onclick={ selectFile }>%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button>
|
||||
<button onclick={ drive }>%fa:cloud%%i18n:ch.tags.mk-channel-form.drive%</button>
|
||||
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
|
||||
<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">
|
||||
<virtual if={ !wait }>%fa:paper-plane%</virtual>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-index>
|
||||
<mk-header/>
|
||||
<hr>
|
||||
<button onclick={ n }>%i18n:ch.tags.mk-index.new%</button>
|
||||
<button @click="n">%i18n:ch.tags.mk-index.new%</button>
|
||||
<hr>
|
||||
<ul if={ channels }>
|
||||
<li each={ channels }><a href={ '/' + this.id }>{ this.title }</a></li>
|
||||
|
|
|
@ -3,12 +3,12 @@
|
|||
<h1>%i18n:common.tags.mk-error.title%</h1>
|
||||
<p class="text">{
|
||||
'%i18n:common.tags.mk-error.description%'.substr(0, '%i18n:common.tags.mk-error.description%'.indexOf('{'))
|
||||
}<a onclick={ reload }>{
|
||||
}<a @click="reload">{
|
||||
'%i18n:common.tags.mk-error.description%'.match(/\{(.+?)\}/)[1]
|
||||
}</a>{
|
||||
'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1)
|
||||
}</p>
|
||||
<button if={ !troubleshooting } onclick={ troubleshoot }>%i18n:common.tags.mk-error.troubleshoot%</button>
|
||||
<button if={ !troubleshooting } @click="troubleshoot">%i18n:common.tags.mk-error.troubleshoot%</button>
|
||||
<mk-troubleshooter if={ troubleshooting }/>
|
||||
<p class="thanks">%i18n:common.tags.mk-error.thanks%</p>
|
||||
<style>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="%i18n:common.input-message-here%"></textarea>
|
||||
<div class="files"></div>
|
||||
<mk-uploader ref="uploader"/>
|
||||
<button class="send" onclick={ send } disabled={ sending } title="%i18n:common.send%">
|
||||
<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
|
||||
<virtual if={ !sending }>%fa:paper-plane%</virtual><virtual if={ sending }>%fa:spinner .spin%</virtual>
|
||||
</button>
|
||||
<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
<div class="result">
|
||||
<ol class="users" if={ searchResult.length > 0 } ref="searchResult">
|
||||
<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } onclick={ user._click } tabindex="-1">
|
||||
<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } @click="user._click" tabindex="-1">
|
||||
<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
|
||||
<span class="name">{ user.name }</span>
|
||||
<span class="username">@{ user.username }</span>
|
||||
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div class="history" if={ history.length > 0 }>
|
||||
<virtual each={ history }>
|
||||
<a class="user" data-is-me={ is_me } data-is-read={ is_read } onclick={ _click }>
|
||||
<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="_click">
|
||||
<div>
|
||||
<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
|
||||
<header>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<p class="init" if={ init }>%fa:spinner .spin%%i18n:common.loading%</p>
|
||||
<p class="empty" if={ !init && messages.length == 0 }>%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
|
||||
<p class="no-history" if={ !init && messages.length > 0 && !moreMessagesIsInStock }>%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
|
||||
<button class="more { fetching: fetchingMoreMessages }" if={ moreMessagesIsInStock } onclick={ fetchMoreMessages } disabled={ fetchingMoreMessages }>
|
||||
<button class="more { fetching: fetchingMoreMessages }" if={ moreMessagesIsInStock } @click="fetchMoreMessages" disabled={ fetchingMoreMessages }>
|
||||
<virtual if={ fetchingMoreMessages }>%fa:spinner .pulse .fw%</virtual>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
|
||||
</button>
|
||||
<virtual each={ message, i in messages }>
|
||||
|
|
|
@ -5,13 +5,13 @@
|
|||
<ul ref="choices">
|
||||
<li each={ choice, i in choices }>
|
||||
<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
|
||||
<button onclick={ remove.bind(null, i) } title="%i18n:common.tags.mk-poll-editor.remove%">
|
||||
<button @click="remove.bind(null, i)" title="%i18n:common.tags.mk-poll-editor.remove%">
|
||||
%fa:times%
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="add" if={ choices.length < 10 } onclick={ add }>%i18n:common.tags.mk-poll-editor.add%</button>
|
||||
<button class="destroy" onclick={ destroy } title="%i18n:common.tags.mk-poll-editor.destroy%">
|
||||
<button class="add" if={ choices.length < 10 } @click="add">%i18n:common.tags.mk-poll-editor.add%</button>
|
||||
<button class="destroy" @click="destroy" title="%i18n:common.tags.mk-poll-editor.destroy%">
|
||||
%fa:times%
|
||||
</button>
|
||||
<style>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-poll data-is-voted={ isVoted }>
|
||||
<ul>
|
||||
<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted } title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }>
|
||||
<li each={ poll.choices } @click="vote.bind(null, id)" class={ voted: 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 if={ is_voted }>%fa:check%</virtual>
|
||||
|
@ -12,7 +12,7 @@
|
|||
<p if={ total > 0 }>
|
||||
<span>{ '%i18n:common.tags.mk-poll.total-users%'.replace('{}', total) }</span>
|
||||
・
|
||||
<a if={ !isVoted } onclick={ toggleResult }>{ result ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }</a>
|
||||
<a if={ !isVoted } @click="toggleResult">{ result ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }</a>
|
||||
<span if={ isVoted }>%i18n:common.tags.mk-poll.voted%</span>
|
||||
</p>
|
||||
<style>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-post-menu>
|
||||
<div class="backdrop" ref="backdrop" onclick={ close }></div>
|
||||
<div class="backdrop" ref="backdrop" @click="close"></div>
|
||||
<div class="popover { compact: opts.compact }" ref="popover">
|
||||
<button if={ post.user_id === I.id } onclick={ pin }>%i18n:common.tags.mk-post-menu.pin%</button>
|
||||
<button if={ post.user_id === I.id } @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
|
||||
<div if={ I.is_pro && !post.is_category_verified }>
|
||||
<select ref="categorySelect">
|
||||
<option value="">%i18n:common.tags.mk-post-menu.select%</option>
|
||||
|
@ -12,7 +12,7 @@
|
|||
<option value="gadgets">%i18n:common.post_categories.gadgets%</option>
|
||||
<option value="photography">%i18n:common.post_categories.photography%</option>
|
||||
</select>
|
||||
<button onclick={ categorize }>%i18n:common.tags.mk-post-menu.categorize%</button>
|
||||
<button @click="categorize">%i18n:common.tags.mk-post-menu.categorize%</button>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
@ -1,184 +0,0 @@
|
|||
<mk-reaction-picker>
|
||||
<div class="backdrop" ref="backdrop" onclick={ close }></div>
|
||||
<div class="popover { compact: opts.compact }" ref="popover">
|
||||
<p if={ !opts.compact }>{ title }</p>
|
||||
<div>
|
||||
<button onclick={ react.bind(null, 'like') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
|
||||
<button onclick={ react.bind(null, 'love') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
|
||||
<button onclick={ react.bind(null, 'laugh') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
|
||||
<button onclick={ react.bind(null, 'hmm') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
|
||||
<button onclick={ react.bind(null, 'surprise') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
|
||||
<button onclick={ react.bind(null, 'congrats') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
|
||||
<button onclick={ react.bind(null, 'angry') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="4" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
|
||||
<button onclick={ react.bind(null, 'confused') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="5" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
|
||||
<button onclick={ react.bind(null, 'pudding') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="6" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
:scope
|
||||
display block
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(0, 0, 0, 0.1)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
position absolute
|
||||
z-index 10001
|
||||
background #fff
|
||||
border 1px solid $border-color
|
||||
border-radius 4px
|
||||
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
||||
transform scale(0.5)
|
||||
opacity 0
|
||||
|
||||
$balloon-size = 16px
|
||||
|
||||
&:not(.compact)
|
||||
margin-top $balloon-size
|
||||
transform-origin center -($balloon-size)
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2)
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size $border-color
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2) + 1.5px
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size #fff
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 14px
|
||||
color #586069
|
||||
border-bottom solid 1px #e1e4e8
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
width 240px
|
||||
text-align center
|
||||
|
||||
> button
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 24px
|
||||
border-radius 2px
|
||||
|
||||
&:hover
|
||||
background #eee
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import anime from 'animejs';
|
||||
|
||||
this.mixin('api');
|
||||
|
||||
this.post = this.opts.post;
|
||||
this.source = this.opts.source;
|
||||
|
||||
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
|
||||
|
||||
this.title = placeholder;
|
||||
|
||||
this.onmouseover = e => {
|
||||
this.update({
|
||||
title: e.target.title
|
||||
});
|
||||
};
|
||||
|
||||
this.onmouseout = () => {
|
||||
this.update({
|
||||
title: placeholder
|
||||
});
|
||||
};
|
||||
|
||||
this.on('mount', () => {
|
||||
const rect = this.source.getBoundingClientRect();
|
||||
const width = this.refs.popover.offsetWidth;
|
||||
const height = this.refs.popover.offsetHeight;
|
||||
if (this.opts.compact) {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||
this.refs.popover.style.left = (x - (width / 2)) + 'px';
|
||||
this.refs.popover.style.top = (y - (height / 2)) + 'px';
|
||||
} else {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
||||
this.refs.popover.style.left = (x - (width / 2)) + 'px';
|
||||
this.refs.popover.style.top = y + 'px';
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: this.refs.backdrop,
|
||||
opacity: 1,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.refs.popover,
|
||||
opacity: 1,
|
||||
scale: [0.5, 1],
|
||||
duration: 500
|
||||
});
|
||||
});
|
||||
|
||||
this.react = reaction => {
|
||||
this.api('posts/reactions/create', {
|
||||
post_id: this.post.id,
|
||||
reaction: reaction
|
||||
}).then(() => {
|
||||
if (this.opts.cb) this.opts.cb();
|
||||
this.unmount();
|
||||
});
|
||||
};
|
||||
|
||||
this.close = () => {
|
||||
this.refs.backdrop.style.pointerEvents = 'none';
|
||||
anime({
|
||||
targets: this.refs.backdrop,
|
||||
opacity: 0,
|
||||
duration: 200,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
this.refs.popover.style.pointerEvents = 'none';
|
||||
anime({
|
||||
targets: this.refs.popover,
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 200,
|
||||
easing: 'easeInBack',
|
||||
complete: () => this.unmount()
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-reaction-picker>
|
202
src/web/app/common/tags/reaction-picker.vue
Normal file
202
src/web/app/common/tags/reaction-picker.vue
Normal file
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="backdrop" ref="backdrop" @click="close"></div>
|
||||
<div class="popover" :data-compact="compact" ref="popover">
|
||||
<p if={ !opts.compact }>{ title }</p>
|
||||
<div>
|
||||
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
|
||||
<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
|
||||
<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
|
||||
<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
|
||||
<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
|
||||
<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
|
||||
<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
|
||||
<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
|
||||
<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import anime from 'animejs';
|
||||
import api from '../scripts/api';
|
||||
|
||||
export default {
|
||||
props: ['post', 'cb'],
|
||||
methods: {
|
||||
react: function (reaction) {
|
||||
api('posts/reactions/create', {
|
||||
post_id: this.post.id,
|
||||
reaction: reaction
|
||||
}).then(() => {
|
||||
if (this.cb) this.cb();
|
||||
this.$destroy();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.mixin('api');
|
||||
|
||||
this.post = this.opts.post;
|
||||
this.source = this.opts.source;
|
||||
|
||||
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
|
||||
|
||||
this.title = placeholder;
|
||||
|
||||
this.onmouseover = e => {
|
||||
this.update({
|
||||
title: e.target.title
|
||||
});
|
||||
};
|
||||
|
||||
this.onmouseout = () => {
|
||||
this.update({
|
||||
title: placeholder
|
||||
});
|
||||
};
|
||||
|
||||
this.on('mount', () => {
|
||||
const rect = this.source.getBoundingClientRect();
|
||||
const width = this.refs.popover.offsetWidth;
|
||||
const height = this.refs.popover.offsetHeight;
|
||||
if (this.opts.compact) {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||
this.refs.popover.style.left = (x - (width / 2)) + 'px';
|
||||
this.refs.popover.style.top = (y - (height / 2)) + 'px';
|
||||
} else {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
||||
this.refs.popover.style.left = (x - (width / 2)) + 'px';
|
||||
this.refs.popover.style.top = y + 'px';
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: this.refs.backdrop,
|
||||
opacity: 1,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.refs.popover,
|
||||
opacity: 1,
|
||||
scale: [0.5, 1],
|
||||
duration: 500
|
||||
});
|
||||
});
|
||||
|
||||
this.react = reaction => {
|
||||
|
||||
};
|
||||
|
||||
this.close = () => {
|
||||
this.refs.backdrop.style.pointerEvents = 'none';
|
||||
anime({
|
||||
targets: this.refs.backdrop,
|
||||
opacity: 0,
|
||||
duration: 200,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
this.refs.popover.style.pointerEvents = 'none';
|
||||
anime({
|
||||
targets: this.refs.popover,
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 200,
|
||||
easing: 'easeInBack',
|
||||
complete: () => this.unmount()
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<mk-reaction-picker>
|
||||
|
||||
<style>
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
:scope
|
||||
display block
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(0, 0, 0, 0.1)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
position absolute
|
||||
z-index 10001
|
||||
background #fff
|
||||
border 1px solid $border-color
|
||||
border-radius 4px
|
||||
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
||||
transform scale(0.5)
|
||||
opacity 0
|
||||
|
||||
$balloon-size = 16px
|
||||
|
||||
&:not(.compact)
|
||||
margin-top $balloon-size
|
||||
transform-origin center -($balloon-size)
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2)
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size $border-color
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2) + 1.5px
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size #fff
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 14px
|
||||
color #586069
|
||||
border-bottom solid 1px #e1e4e8
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
width 240px
|
||||
text-align center
|
||||
|
||||
> button
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 24px
|
||||
border-radius 2px
|
||||
|
||||
&:hover
|
||||
background #eee
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
|
||||
|
||||
</style>
|
||||
|
||||
</mk-reaction-picker>
|
|
@ -42,7 +42,7 @@
|
|||
</mk-signin-history>
|
||||
|
||||
<mk-signin-record>
|
||||
<header onclick={ toggle }>
|
||||
<header @click="toggle">
|
||||
<virtual if={ rec.success }>%fa:check%</virtual>
|
||||
<virtual if={ !rec.success }>%fa:times%</virtual>
|
||||
<span class="ip">{ rec.ip }</span>
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
|
||||
<p><a href={ touUrl } target="_blank">利用規約</a>に同意する</p>
|
||||
</label>
|
||||
<button onclick={ onsubmit }>%i18n:common.tags.mk-signup.create%</button>
|
||||
<button @click="onsubmit">%i18n:common.tags.mk-signup.create%</button>
|
||||
</form>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,78 +0,0 @@
|
|||
<mk-stream-indicator>
|
||||
<p if={ connection.state == 'initializing' }>
|
||||
%fa:spinner .pulse%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
|
||||
</p>
|
||||
<p if={ connection.state == 'reconnecting' }>
|
||||
%fa:spinner .pulse%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
|
||||
</p>
|
||||
<p if={ connection.state == 'connected' }>
|
||||
%fa:check%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
|
||||
</p>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
pointer-events none
|
||||
position fixed
|
||||
z-index 16384
|
||||
bottom 8px
|
||||
right 8px
|
||||
margin 0
|
||||
padding 6px 12px
|
||||
font-size 0.9em
|
||||
color #fff
|
||||
background rgba(0, 0, 0, 0.8)
|
||||
border-radius 4px
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
|
||||
> [data-fa]
|
||||
margin-right 0.25em
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import anime from 'animejs';
|
||||
|
||||
this.mixin('i');
|
||||
|
||||
this.mixin('stream');
|
||||
this.connection = this.stream.getConnection();
|
||||
this.connectionId = this.stream.use();
|
||||
|
||||
this.on('before-mount', () => {
|
||||
if (this.connection.state == 'connected') {
|
||||
this.root.style.opacity = 0;
|
||||
}
|
||||
|
||||
this.connection.on('_connected_', () => {
|
||||
this.update();
|
||||
setTimeout(() => {
|
||||
anime({
|
||||
targets: this.root,
|
||||
opacity: 0,
|
||||
easing: 'linear',
|
||||
duration: 200
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
this.connection.on('_closed_', () => {
|
||||
this.update();
|
||||
anime({
|
||||
targets: this.root,
|
||||
opacity: 1,
|
||||
easing: 'linear',
|
||||
duration: 100
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
this.on('unmount', () => {
|
||||
this.stream.dispose(this.connectionId);
|
||||
});
|
||||
</script>
|
||||
</mk-stream-indicator>
|
74
src/web/app/common/tags/stream-indicator.vue
Normal file
74
src/web/app/common/tags/stream-indicator.vue
Normal file
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<p v-if=" stream.state == 'initializing' ">
|
||||
%fa:spinner .pulse%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
|
||||
</p>
|
||||
<p v-if=" stream.state == 'reconnecting' ">
|
||||
%fa:spinner .pulse%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
|
||||
</p>
|
||||
<p v-if=" stream.state == 'connected' ">
|
||||
%fa:check%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import anime from 'animejs';
|
||||
import Ellipsis from './ellipsis.vue';
|
||||
|
||||
export default {
|
||||
props: ['stream'],
|
||||
created: function() {
|
||||
if (this.stream.state == 'connected') {
|
||||
this.root.style.opacity = 0;
|
||||
}
|
||||
|
||||
this.stream.on('_connected_', () => {
|
||||
setTimeout(() => {
|
||||
anime({
|
||||
targets: this.root,
|
||||
opacity: 0,
|
||||
easing: 'linear',
|
||||
duration: 200
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
this.stream.on('_closed_', () => {
|
||||
anime({
|
||||
targets: this.root,
|
||||
opacity: 1,
|
||||
easing: 'linear',
|
||||
duration: 100
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
> div
|
||||
display block
|
||||
pointer-events none
|
||||
position fixed
|
||||
z-index 16384
|
||||
bottom 8px
|
||||
right 8px
|
||||
margin 0
|
||||
padding 6px 12px
|
||||
font-size 0.9em
|
||||
color #fff
|
||||
background rgba(0, 0, 0, 0.8)
|
||||
border-radius 4px
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
|
||||
> [data-fa]
|
||||
margin-right 0.25em
|
||||
|
||||
</style>
|
|
@ -2,9 +2,9 @@
|
|||
<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _DOCS_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
|
||||
<p class="account" if={ I.twitter } title={ 'Twitter ID: ' + I.twitter.user_id }>%i18n:common.tags.mk-twitter-setting.connected-to%: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
|
||||
<p>
|
||||
<a href={ _API_URL_ + '/connect/twitter' } target="_blank" onclick={ connect }>{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
|
||||
<a href={ _API_URL_ + '/connect/twitter' } target="_blank" @click="connect">{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
|
||||
<span if={ I.twitter }> or </span>
|
||||
<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" if={ I.twitter } onclick={ disconnect }>%i18n:common.tags.mk-twitter-setting.disconnect%</a>
|
||||
<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" if={ I.twitter } @click="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
|
||||
</p>
|
||||
<p class="id" if={ I.twitter }>Twitter ID: { I.twitter.user_id }</p>
|
||||
<style>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-autocomplete-suggestion>
|
||||
<ol class="users" ref="users" if={ users.length > 0 }>
|
||||
<li each={ users } onclick={ parent.onClick } onkeydown={ parent.onKeydown } tabindex="-1">
|
||||
<li each={ users } @click="parent.onClick" onkeydown={ parent.onKeydown } tabindex="-1">
|
||||
<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/>
|
||||
<span class="name">{ name }</span>
|
||||
<span class="username">@{ username }</span>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-big-follow-button>
|
||||
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
|
||||
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
|
||||
<span if={ !wait && user.is_following }>%fa:minus%フォロー解除</span>
|
||||
<span if={ !wait && !user.is_following }>%fa:plus%フォロー</span>
|
||||
<virtual if={ wait }>%fa:spinner .pulse .fw%</virtual>
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
<yield to="content">
|
||||
<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
|
||||
<div class="action">
|
||||
<button class="skip" onclick={ parent.skip }>クロップをスキップ</button>
|
||||
<button class="cancel" onclick={ parent.cancel }>キャンセル</button>
|
||||
<button class="ok" onclick={ parent.ok }>決定</button>
|
||||
<button class="skip" @click="parent.skip">クロップをスキップ</button>
|
||||
<button class="cancel" @click="parent.cancel">キャンセル</button>
|
||||
<button class="ok" @click="parent.ok">決定</button>
|
||||
</div>
|
||||
</yield>
|
||||
</mk-window>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-detailed-post-window>
|
||||
<div class="bg" ref="bg" onclick={ bgClick }></div>
|
||||
<div class="bg" ref="bg" @click="bgClick"></div>
|
||||
<div class="main" ref="main" if={ !fetching }>
|
||||
<mk-post-detail ref="detail" post={ post }/>
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<mk-dialog>
|
||||
<div class="bg" ref="bg" onclick={ bgClick }></div>
|
||||
<div class="bg" ref="bg" @click="bgClick"></div>
|
||||
<div class="main" ref="main">
|
||||
<header ref="header"></header>
|
||||
<div class="body" ref="body"></div>
|
||||
<div class="buttons">
|
||||
<virtual each={ opts.buttons }>
|
||||
<button onclick={ _onclick }>{ text }</button>
|
||||
<button @click="_onclick">{ text }</button>
|
||||
</virtual>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-donation>
|
||||
<button class="close" onclick={ close }>閉じる x</button>
|
||||
<button class="close" @click="close">閉じる x</button>
|
||||
<div class="message">
|
||||
<p>利用者の皆さま、</p>
|
||||
<p>
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
<mk-drive-browser-base-contextmenu>
|
||||
<mk-contextmenu ref="ctx">
|
||||
<ul>
|
||||
<li onclick={ parent.createFolder }>
|
||||
<li @click="parent.createFolder">
|
||||
<p>%fa:R folder%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.create-folder%</p>
|
||||
</li>
|
||||
<li onclick={ parent.upload }>
|
||||
<li @click="parent.upload">
|
||||
<p>%fa:upload%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.upload%</p>
|
||||
</li>
|
||||
<li onclick={ parent.urlUpload }>
|
||||
<li @click="parent.urlUpload">
|
||||
<p>%fa:cloud-upload-alt%%i18n:desktop.tags.mk-drive-browser-base-contextmenu.url-upload%</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
</virtual>
|
||||
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
|
||||
<div class="padding" each={ Array(10).fill(16) }></div>
|
||||
<button if={ moreFiles } onclick={ fetchMoreFiles }>%i18n:desktop.tags.mk-drive-browser.load-more%</button>
|
||||
<button if={ moreFiles } @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
|
||||
</div>
|
||||
<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
|
||||
<p if={ draghover }>%i18n:desktop.tags.mk-drive-browser.empty-draghover%</p>
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
<mk-drive-browser-file-contextmenu>
|
||||
<mk-contextmenu ref="ctx">
|
||||
<ul>
|
||||
<li onclick={ parent.rename }>
|
||||
<li @click="parent.rename">
|
||||
<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%</p>
|
||||
</li>
|
||||
<li onclick={ parent.copyUrl }>
|
||||
<li @click="parent.copyUrl">
|
||||
<p>%fa:link%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%</p>
|
||||
</li>
|
||||
<li><a href={ parent.file.url + '?download' } download={ parent.file.name } onclick={ parent.download }>%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
|
||||
<li><a href={ parent.file.url + '?download' } download={ parent.file.name } @click="parent.download">%fa:download%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%</a></li>
|
||||
<li class="separator"></li>
|
||||
<li onclick={ parent.delete }>
|
||||
<li @click="parent.delete">
|
||||
<p>%fa:R trash-alt%%i18n:common.delete%</p>
|
||||
</li>
|
||||
<li class="separator"></li>
|
||||
<li class="has-child">
|
||||
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%%fa:caret-right%</p>
|
||||
<ul>
|
||||
<li onclick={ parent.setAvatar }>
|
||||
<li @click="parent.setAvatar">
|
||||
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%</p>
|
||||
</li>
|
||||
<li onclick={ parent.setBanner }>
|
||||
<li @click="parent.setBanner">
|
||||
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -27,7 +27,7 @@
|
|||
<li class="has-child">
|
||||
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%...%fa:caret-right%</p>
|
||||
<ul>
|
||||
<li onclick={ parent.addApp }>
|
||||
<li @click="parent.addApp">
|
||||
<p>%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<mk-drive-browser-file data-is-selected={ isSelected } data-is-contextmenu-showing={ isContextmenuShowing.toString() } onclick={ onclick } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
|
||||
<mk-drive-browser-file data-is-selected={ isSelected } data-is-contextmenu-showing={ isContextmenuShowing.toString() } @click="onclick" oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
|
||||
<div class="label" if={ I.avatar_id == file.id }><img src="/assets/label.svg"/>
|
||||
<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
|
||||
</div>
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
<mk-drive-browser-folder-contextmenu>
|
||||
<mk-contextmenu ref="ctx">
|
||||
<ul>
|
||||
<li onclick={ parent.move }>
|
||||
<li @click="parent.move">
|
||||
<p>%fa:arrow-right%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%</p>
|
||||
</li>
|
||||
<li onclick={ parent.newWindow }>
|
||||
<li @click="parent.newWindow">
|
||||
<p>%fa:R window-restore%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%</p>
|
||||
</li>
|
||||
<li class="separator"></li>
|
||||
<li onclick={ parent.rename }>
|
||||
<li @click="parent.rename">
|
||||
<p>%fa:i-cursor%%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%</p>
|
||||
</li>
|
||||
<li class="separator"></li>
|
||||
<li onclick={ parent.delete }>
|
||||
<li @click="parent.delete">
|
||||
<p>%fa:R trash-alt%%i18n:common.delete%</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } onclick={ onclick } onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
|
||||
<mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } @click="onclick" onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
|
||||
<p class="name"><virtual if={ hover }>%fa:R folder-open .fw%</virtual><virtual if={ !hover }>%fa:R folder .fw%</virtual>{ folder.name }</p>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<mk-drive-browser-nav-folder data-draghover={ draghover } onclick={ onclick } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
|
||||
<mk-drive-browser-nav-folder data-draghover={ draghover } @click="onclick" ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
|
||||
<virtual if={ folder == null }>%fa:cloud%</virtual><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-follow-button>
|
||||
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
|
||||
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
|
||||
<virtual if={ !wait && user.is_following }>%fa:minus%</virtual>
|
||||
<virtual if={ !wait && !user.is_following }>%fa:plus%</virtual>
|
||||
<virtual if={ wait }>%fa:spinner .pulse .fw%</virtual>
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
</div>
|
||||
<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
|
||||
<p class="fetching" if={ fetching }>%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
|
||||
<a class="refresh" onclick={ refresh }>もっと見る</a>
|
||||
<button class="close" onclick={ close } title="閉じる">%fa:times%</button>
|
||||
<a class="refresh" @click="refresh">もっと見る</a>
|
||||
<button class="close" @click="close" title="閉じる">%fa:times%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
broadcasts.length == 0 ? '%i18n:desktop.tags.mk-broadcast-home-widget.no-broadcasts%' : broadcasts[i].title
|
||||
}</h1>
|
||||
<p if={ !fetching }><mk-raw if={ broadcasts.length != 0 } content={ broadcasts[i].text }/><virtual if={ broadcasts.length == 0 }>%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</virtual></p>
|
||||
<a if={ broadcasts.length > 1 } onclick={ next }>%i18n:desktop.tags.mk-broadcast-home-widget.next% >></a>
|
||||
<a if={ broadcasts.length > 1 } @click="next">%i18n:desktop.tags.mk-broadcast-home-widget.next% >></a>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<p class="title">%fa:tv%{
|
||||
channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
|
||||
}</p>
|
||||
<button onclick={ settings } title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
|
||||
<button @click="settings" title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
|
||||
</virtual>
|
||||
<p class="get-started" if={ this.data.channel == null }>%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
|
||||
<mk-channel ref="channel" show={ this.data.channel }/>
|
||||
|
@ -192,7 +192,7 @@
|
|||
|
||||
<mk-channel-post>
|
||||
<header>
|
||||
<a class="index" onclick={ reply }>{ post.index }:</a>
|
||||
<a class="index" @click="reply">{ post.index }:</a>
|
||||
<a class="name" href={ _URL_ + '/' + post.user.username }><b>{ post.user.name }</b></a>
|
||||
<span>ID:<i>{ post.user.username }</i></span>
|
||||
</header>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-mentions-home-widget>
|
||||
<header><span data-is-active={ mode == 'all' } onclick={ setMode.bind(this, 'all') }>すべて</span><span data-is-active={ mode == 'following' } onclick={ setMode.bind(this, 'following') }>フォロー中</span></header>
|
||||
<header><span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて</span><span data-is-active={ mode == 'following' } @click="setMode.bind(this, 'following')">フォロー中</span></header>
|
||||
<div class="loading" if={ isLoading }>
|
||||
<mk-ellipsis-icon/>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-notifications-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
|
||||
<button onclick={ settings } title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
|
||||
<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
|
||||
</virtual>
|
||||
<mk-notifications/>
|
||||
<style>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
|
||||
</virtual>
|
||||
<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
|
||||
<button onclick={ post } disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
|
||||
<button @click="post" disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
|
||||
</virtual>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-profile-home-widget data-compact={ data.design == 1 || data.design == 2 } data-melt={ data.design == 2 }>
|
||||
<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" onclick={ setBanner }></div>
|
||||
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=96' } onclick={ setAvatar } alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/>
|
||||
<div class="banner" style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=256)' : '' } title="クリックでバナー編集" @click="setBanner"></div>
|
||||
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=96' } @click="setAvatar" alt="avatar" title="クリックでアバター編集" data-user-preview={ I.id }/>
|
||||
<a class="name" href={ '/' + I.username }>{ I.name }</a>
|
||||
<p class="username">@{ I.username }</p>
|
||||
<style>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-recommended-polls-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
|
||||
<button onclick={ fetch } title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
|
||||
<button @click="fetch" title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
|
||||
</virtual>
|
||||
<div class="poll" if={ !loading && poll != null }>
|
||||
<p if={ poll.text }><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-rss-reader-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title">%fa:rss-square%RSS</p>
|
||||
<button onclick={ settings } title="設定">%fa:cog%</button>
|
||||
<button @click="settings" title="設定">%fa:cog%</button>
|
||||
</virtual>
|
||||
<div class="feed" if={ !initializing }>
|
||||
<virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-server-home-widget data-melt={ data.design == 2 }>
|
||||
<virtual if={ data.design == 0 }>
|
||||
<p class="title">%fa:server%%i18n:desktop.tags.mk-server-home-widget.title%</p>
|
||||
<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
|
||||
<button @click="toggle" title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
|
||||
</virtual>
|
||||
<p class="initializing" if={ initializing }>%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<mk-slideshow-home-widget>
|
||||
<div onclick={ choose }>
|
||||
<div @click="choose">
|
||||
<p if={ data.folder === undefined }>クリックしてフォルダを指定してください</p>
|
||||
<p if={ data.folder !== undefined && images.length == 0 && !fetching }>このフォルダには画像がありません</p>
|
||||
<div ref="slideA" class="slide a"></div>
|
||||
<div ref="slideB" class="slide b"></div>
|
||||
</div>
|
||||
<button onclick={ resize }>%fa:expand%</button>
|
||||
<button @click="resize">%fa:expand%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-trends-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
|
||||
<button onclick={ fetch } title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
|
||||
<button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
|
||||
</virtual>
|
||||
<div class="post" if={ !loading && post != null }>
|
||||
<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-user-recommendation-home-widget>
|
||||
<virtual if={ !data.compact }>
|
||||
<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
|
||||
<button onclick={ refresh } title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
|
||||
<button @click="refresh" title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
|
||||
</virtual>
|
||||
<div class="user" if={ !loading && users.length != 0 } each={ _user in users }>
|
||||
<a class="avatar-anchor" href={ '/' + _user.username }>
|
||||
|
|
|
@ -27,7 +27,7 @@
|
|||
<option value="nav">ナビゲーション</option>
|
||||
<option value="tips">ヒント</option>
|
||||
</select>
|
||||
<button onclick={ addWidget }>追加</button>
|
||||
<button @click="addWidget">追加</button>
|
||||
</div>
|
||||
<div class="trash">
|
||||
<div ref="trash"></div>
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
onmousemove={ mousemove }
|
||||
onmouseleave={ mouseleave }
|
||||
style={ styles }
|
||||
onclick={ click }
|
||||
@click="click"
|
||||
title={ image.name }></a>
|
||||
<style>
|
||||
:scope
|
||||
|
@ -110,7 +110,7 @@
|
|||
</mk-images-image>
|
||||
|
||||
<mk-image-dialog>
|
||||
<div class="bg" ref="bg" onclick={ close }></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } onclick={ close }/>
|
||||
<div class="bg" ref="bg" @click="close"></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } @click="close"/>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
<input ref="text" type={ parent.type } oninput={ parent.onInput } onkeydown={ parent.onKeydown } placeholder={ parent.placeholder }/>
|
||||
</div>
|
||||
<div class="action">
|
||||
<button class="cancel" onclick={ parent.cancel }>キャンセル</button>
|
||||
<button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } onclick={ parent.ok }>決定</button>
|
||||
<button class="cancel" @click="parent.cancel">キャンセル</button>
|
||||
<button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } @click="parent.ok">決定</button>
|
||||
</div>
|
||||
</yield>
|
||||
</mk-window>
|
||||
|
|
|
@ -78,7 +78,7 @@
|
|||
</p>
|
||||
</virtual>
|
||||
</div>
|
||||
<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||
<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } @click="fetchMoreNotifications" disabled={ fetchingMoreNotifications }>
|
||||
<virtual if={ fetchingMoreNotifications }>%fa:spinner .pulse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
|
||||
</button>
|
||||
<p class="empty" if={ notifications.length == 0 && !loading }>ありません!</p>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<mk-entrance-signup if={ mode == 'signup' }/>
|
||||
<div class="introduction" if={ mode == 'introduction' }>
|
||||
<mk-introduction/>
|
||||
<button onclick={ signin }>わかった</button>
|
||||
<button @click="signin">わかった</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
@ -159,7 +159,7 @@
|
|||
</div>
|
||||
<a href={ _API_URL_ + '/signin/twitter' }>Twitterでサインイン</a>
|
||||
<div class="divider"><span>or</span></div>
|
||||
<button class="signup" onclick={ parent.signup }>新規登録</button><a class="introduction" onclick={ introduction }>Misskeyについて</a>
|
||||
<button class="signup" @click="parent.signup">新規登録</button><a class="introduction" @click="introduction">Misskeyについて</a>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
@ -295,7 +295,7 @@
|
|||
|
||||
<mk-entrance-signup>
|
||||
<mk-signup/>
|
||||
<button class="cancel" type="button" onclick={ parent.signin } title="キャンセル">%fa:times%</button>
|
||||
<button class="cancel" type="button" @click="parent.signin" title="キャンセル">%fa:times%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<mk-selectdrive-page>
|
||||
<mk-drive-browser ref="browser" multiple={ multiple }/>
|
||||
<div>
|
||||
<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" onclick={ upload }>%fa:upload%</button>
|
||||
<button class="cancel" onclick={ close }>%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
|
||||
<button class="ok" onclick={ ok }>%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
|
||||
<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
|
||||
<button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
|
||||
<button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-post-detail title={ title }>
|
||||
<div class="main">
|
||||
<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } title="会話をもっと読み込む" onclick={ loadContext } disabled={ contextFetching }>
|
||||
<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } title="会話をもっと読み込む" @click="loadContext" disabled={ contextFetching }>
|
||||
<virtual if={ !contextFetching }>%fa:ellipsis-v%</virtual>
|
||||
<virtual if={ contextFetching }>%fa:spinner .pulse%</virtual>
|
||||
</button>
|
||||
|
@ -43,16 +43,16 @@
|
|||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p }/>
|
||||
<button onclick={ reply } title="返信">
|
||||
<button @click="reply" title="返信">
|
||||
%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost">
|
||||
<button @click="repost" title="Repost">
|
||||
%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション">
|
||||
<button class={ reacted: p.my_reaction != null } @click="react" ref="reactButton" title="リアクション">
|
||||
%fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button onclick={ menu } ref="menuButton">
|
||||
<button @click="menu" ref="menuButton">
|
||||
%fa:ellipsis-h%
|
||||
</button>
|
||||
</footer>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<ul ref="media">
|
||||
<li each={ files } data-id={ id }>
|
||||
<div class="img" style="background-image: url({ url + '?thumbnail&size=64' })" title={ name }></div>
|
||||
<img class="remove" onclick={ removeFile } src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
|
||||
<img class="remove" @click="removeFile" src="/assets/desktop/remove.png" title="%i18n:desktop.tags.mk-post-form.attach-cancel%" alt=""/>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="remain">{ 4 - files.length }/4</p>
|
||||
|
@ -13,12 +13,12 @@
|
|||
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
|
||||
</div>
|
||||
<mk-uploader ref="uploader"/>
|
||||
<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" onclick={ selectFile }>%fa:upload%</button>
|
||||
<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" onclick={ selectFileFromDrive }>%fa:cloud%</button>
|
||||
<button class="kao" title="%i18n:desktop.tags.mk-post-form.insert-a-kao%" onclick={ kao }>%fa:R smile%</button>
|
||||
<button class="poll" title="%i18n:desktop.tags.mk-post-form.create-poll%" onclick={ addPoll }>%fa:chart-pie%</button>
|
||||
<button ref="upload" title="%i18n:desktop.tags.mk-post-form.attach-media-from-local%" @click="selectFile">%fa:upload%</button>
|
||||
<button ref="drive" title="%i18n:desktop.tags.mk-post-form.attach-media-from-drive%" @click="selectFileFromDrive">%fa:cloud%</button>
|
||||
<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) } onclick={ 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 if={ wait }/>
|
||||
</button>
|
||||
<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" onchange={ changeFile }/>
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
<mk-post-preview post={ opts.post }/>
|
||||
<virtual if={ !quote }>
|
||||
<footer>
|
||||
<a class="quote" if={ !quote } onclick={ onquote }>%i18n:desktop.tags.mk-repost-form.quote%</a>
|
||||
<button class="cancel" onclick={ cancel }>%i18n:desktop.tags.mk-repost-form.cancel%</button>
|
||||
<button class="ok" onclick={ ok } disabled={ wait }>{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }</button>
|
||||
<a class="quote" if={ !quote } @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a>
|
||||
<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
|
||||
<button class="ok" @click="ok" disabled={ wait }>{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }</button>
|
||||
</footer>
|
||||
</virtual>
|
||||
<virtual if={ quote }>
|
||||
|
|
|
@ -7,9 +7,9 @@
|
|||
<yield to="content">
|
||||
<mk-drive-browser ref="browser" multiple={ parent.multiple }/>
|
||||
<div>
|
||||
<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ parent.upload }>%fa:upload%</button>
|
||||
<button class="cancel" onclick={ parent.close }>キャンセル</button>
|
||||
<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } onclick={ parent.ok }>決定</button>
|
||||
<button class="upload" title="PCからドライブにファイルをアップロード" @click="parent.upload">%fa:upload%</button>
|
||||
<button class="cancel" @click="parent.close">キャンセル</button>
|
||||
<button class="ok" disabled={ parent.multiple && parent.files.length == 0 } @click="parent.ok">決定</button>
|
||||
</div>
|
||||
</yield>
|
||||
</mk-window>
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
<yield to="content">
|
||||
<mk-drive-browser ref="browser"/>
|
||||
<div>
|
||||
<button class="cancel" onclick={ parent.close }>キャンセル</button>
|
||||
<button class="ok" onclick={ parent.ok }>決定</button>
|
||||
<button class="cancel" @click="parent.close">キャンセル</button>
|
||||
<button class="ok" @click="parent.ok">決定</button>
|
||||
</div>
|
||||
</yield>
|
||||
</mk-window>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-set-avatar-suggestion onclick={ set }>
|
||||
<mk-set-avatar-suggestion @click="set">
|
||||
<p><b>アバターを設定</b>してみませんか?
|
||||
<button onclick={ close }>%fa:times%</button>
|
||||
<button @click="close">%fa:times%</button>
|
||||
</p>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-set-banner-suggestion onclick={ set }>
|
||||
<mk-set-banner-suggestion @click="set">
|
||||
<p><b>バナーを設定</b>してみませんか?
|
||||
<button onclick={ close }>%fa:times%</button>
|
||||
<button @click="close">%fa:times%</button>
|
||||
</p>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -131,7 +131,7 @@
|
|||
<mk-profile-setting>
|
||||
<label class="avatar ui from group">
|
||||
<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
<button class="ui" onclick={ avatar }>%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
|
||||
<button class="ui" @click="avatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button>
|
||||
</label>
|
||||
<label class="ui from group">
|
||||
<p>%i18n:desktop.tags.mk-profile-setting.name%</p>
|
||||
|
@ -149,7 +149,7 @@
|
|||
<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p>
|
||||
<input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/>
|
||||
</label>
|
||||
<button class="ui primary" onclick={ updateAccount }>%i18n:desktop.tags.mk-profile-setting.save%</button>
|
||||
<button class="ui primary" @click="updateAccount">%i18n:desktop.tags.mk-profile-setting.save%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
@ -195,7 +195,7 @@
|
|||
<p>%i18n:desktop.tags.mk-api-info.intro%</p>
|
||||
<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
|
||||
<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
|
||||
<button class="ui" onclick={ regenerateToken }>%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
|
||||
<button class="ui" @click="regenerateToken">%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
@ -225,7 +225,7 @@
|
|||
</mk-api-info>
|
||||
|
||||
<mk-password-setting>
|
||||
<button onclick={ reset } class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
|
||||
<button @click="reset" class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
@ -265,10 +265,10 @@
|
|||
<mk-2fa-setting>
|
||||
<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
|
||||
<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
|
||||
<p if={ !data && !I.two_factor_enabled }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
|
||||
<p if={ !data && !I.two_factor_enabled }><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
|
||||
<virtual if={ I.two_factor_enabled }>
|
||||
<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
|
||||
<button onclick={ unregister } class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
|
||||
<button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
|
||||
</virtual>
|
||||
<div if={ data }>
|
||||
<ol>
|
||||
|
@ -276,7 +276,7 @@
|
|||
<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li>
|
||||
<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
|
||||
<input type="number" ref="token" class="ui">
|
||||
<button onclick={ submit } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
|
||||
<button @click="submit" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="ui info"><p>%fa:info-circle%%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
|
||||
|
|
|
@ -129,19 +129,19 @@
|
|||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
|
||||
<button onclick={ reply } title="%i18n:desktop.tags.mk-timeline-post.reply%">
|
||||
<button @click="reply" title="%i18n:desktop.tags.mk-timeline-post.reply%">
|
||||
%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="%i18n:desktop.tags.mk-timeline-post.repost%">
|
||||
<button @click="repost" title="%i18n:desktop.tags.mk-timeline-post.repost%">
|
||||
%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ 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" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button onclick={ menu } ref="menuButton">
|
||||
<button @click="menu" ref="menuButton">
|
||||
%fa:ellipsis-h%
|
||||
</button>
|
||||
<button onclick={ toggleDetail } title="%i18n:desktop.tags.mk-timeline-post.detail">
|
||||
<button @click="toggleDetail" title="%i18n:desktop.tags.mk-timeline-post.detail">
|
||||
<virtual if={ !isDetailOpened }>%fa:caret-down%</virtual>
|
||||
<virtual if={ isDetailOpened }>%fa:caret-up%</virtual>
|
||||
</button>
|
||||
|
|
|
@ -186,7 +186,7 @@
|
|||
</mk-ui-header-search>
|
||||
|
||||
<mk-ui-header-post-button>
|
||||
<button onclick={ post } title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
|
||||
<button @click="post" title="%i18n:desktop.tags.mk-ui-header-post-button.post%">%fa:pencil-alt%</button>
|
||||
<style>
|
||||
:scope
|
||||
display inline-block
|
||||
|
@ -229,7 +229,7 @@
|
|||
</mk-ui-header-post-button>
|
||||
|
||||
<mk-ui-header-notifications>
|
||||
<button data-active={ isOpen } onclick={ toggle } title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
|
||||
<button data-active={ isOpen } @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
|
||||
%fa:R bell%<virtual if={ hasUnreadNotifications }>%fa:circle%</virtual>
|
||||
</button>
|
||||
<div class="notifications" if={ isOpen }>
|
||||
|
@ -400,7 +400,7 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="messaging">
|
||||
<a onclick={ messaging }>
|
||||
<a @click="messaging">
|
||||
%fa:comments%
|
||||
<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
|
||||
<virtual if={ hasUnreadMessagingMessages }>%fa:circle%</virtual>
|
||||
|
@ -629,7 +629,7 @@
|
|||
</mk-ui-header-clock>
|
||||
|
||||
<mk-ui-header-account>
|
||||
<button class="header" data-active={ isOpen.toString() } onclick={ toggle }>
|
||||
<button class="header" data-active={ isOpen.toString() } @click="toggle">
|
||||
<span class="username">{ I.username }<virtual if={ !isOpen }>%fa:angle-down%</virtual><virtual if={ isOpen }>%fa:angle-up%</virtual></span>
|
||||
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||
</button>
|
||||
|
@ -638,7 +638,7 @@
|
|||
<li>
|
||||
<a href={ '/' + I.username }>%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
|
||||
</li>
|
||||
<li onclick={ drive }>
|
||||
<li @click="drive">
|
||||
<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
|
||||
</li>
|
||||
<li>
|
||||
|
@ -646,12 +646,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li onclick={ settings }>
|
||||
<li @click="settings">
|
||||
<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li onclick={ signout }>
|
||||
<li @click="signout">
|
||||
<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-user-timeline>
|
||||
<header>
|
||||
<span data-is-active={ mode == 'default' } onclick={ setMode.bind(this, 'default') }>投稿</span><span data-is-active={ mode == 'with-replies' } onclick={ setMode.bind(this, 'with-replies') }>投稿と返信</span>
|
||||
<span data-is-active={ mode == 'default' } @click="setMode.bind(this, 'default')">投稿</span><span data-is-active={ mode == 'with-replies' } @click="setMode.bind(this, 'with-replies')">投稿と返信</span>
|
||||
</header>
|
||||
<div class="loading" if={ isLoading }>
|
||||
<mk-ellipsis-icon/>
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<mk-user-header data-is-dark-background={ user.banner_url != null }>
|
||||
<div class="banner-container" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' }>
|
||||
<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' } onclick={ onUpdateBanner }></div>
|
||||
<div class="banner" ref="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=2048)' : '' } @click="onUpdateBanner"></div>
|
||||
</div>
|
||||
<div class="fade"></div>
|
||||
<div class="container">
|
||||
|
@ -227,8 +227,8 @@
|
|||
<div class="friend-form" if={ SIGNIN && I.id != user.id }>
|
||||
<mk-big-follow-button user={ user }/>
|
||||
<p class="followed" if={ user.is_followed }>%i18n:desktop.tags.mk-user.follows-you%</p>
|
||||
<p if={ user.is_muted }>%i18n:desktop.tags.mk-user.muted% <a onclick={ unmute }>%i18n:desktop.tags.mk-user.unmute%</a></p>
|
||||
<p if={ !user.is_muted }><a onclick={ mute }>%i18n:desktop.tags.mk-user.mute%</a></p>
|
||||
<p if={ user.is_muted }>%i18n:desktop.tags.mk-user.muted% <a @click="unmute">%i18n:desktop.tags.mk-user.unmute%</a></p>
|
||||
<p if={ !user.is_muted }><a @click="mute">%i18n:desktop.tags.mk-user.mute%</a></p>
|
||||
</div>
|
||||
<div class="description" if={ user.description }>{ user.description }</div>
|
||||
<div class="birthday" if={ user.profile.birthday }>
|
||||
|
@ -239,8 +239,8 @@
|
|||
</div>
|
||||
<div class="status">
|
||||
<p class="posts-count">%fa:angle-right%<a>{ user.posts_count }</a><b>ポスト</b></p>
|
||||
<p class="following">%fa:angle-right%<a onclick={ showFollowing }>{ user.following_count }</a>人を<b>フォロー</b></p>
|
||||
<p class="followers">%fa:angle-right%<a onclick={ showFollowers }>{ user.followers_count }</a>人の<b>フォロワー</b></p>
|
||||
<p class="following">%fa:angle-right%<a @click="showFollowing">{ user.following_count }</a>人を<b>フォロー</b></p>
|
||||
<p class="followers">%fa:angle-right%<a @click="showFollowers">{ user.followers_count }</a>人の<b>フォロワー</b></p>
|
||||
</div>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<mk-users-list>
|
||||
<nav>
|
||||
<div>
|
||||
<span data-is-active={ mode == 'all' } onclick={ setMode.bind(this, 'all') }>すべて<span>{ opts.count }</span></span>
|
||||
<span if={ SIGNIN && opts.youKnowCount } data-is-active={ mode == 'iknow' } onclick={ setMode.bind(this, 'iknow') }>知り合い<span>{ opts.youKnowCount }</span></span>
|
||||
<span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて<span>{ opts.count }</span></span>
|
||||
<span if={ SIGNIN && opts.youKnowCount } data-is-active={ mode == 'iknow' } @click="setMode.bind(this, 'iknow')">知り合い<span>{ opts.youKnowCount }</span></span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="users" if={ !fetching && users.length != 0 }>
|
||||
|
@ -10,7 +10,7 @@
|
|||
<mk-list-user user={ this }/>
|
||||
</div>
|
||||
</div>
|
||||
<button class="more" if={ !fetching && next != null } onclick={ more } disabled={ moreFetching }>
|
||||
<button class="more" if={ !fetching && next != null } @click="more" disabled={ moreFetching }>
|
||||
<span if={ !moreFetching }>もっと</span>
|
||||
<span if={ moreFetching }>読み込み中<mk-ellipsis/></span>
|
||||
</button>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<mk-activity-widget data-melt={ design == 2 }>
|
||||
<virtual if={ design == 0 }>
|
||||
<p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
|
||||
<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
|
||||
<button @click="toggle" title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
|
||||
</virtual>
|
||||
<p class="initializing" if={ initializing }>%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<mk-activity-widget-calender if={ !initializing && view == 0 } data={ [].concat(activity) }/>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
|
||||
<virtual if={ opts.design == 0 || opts.design == 1 }>
|
||||
<button onclick={ prev } title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
|
||||
<button @click="prev" title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
|
||||
<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
|
||||
<button onclick={ next } title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
|
||||
<button @click="next" title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
|
||||
</virtual>
|
||||
|
||||
<div class="calendar">
|
||||
|
@ -15,7 +15,7 @@
|
|||
data-selected={ isSelected(i + 1) }
|
||||
data-is-out-of-range={ isOutOfRange(i + 1) }
|
||||
data-is-donichi={ isDonichi(i + 1) }
|
||||
onclick={ go.bind(null, i + 1) }
|
||||
@click="go.bind(null, i + 1)"
|
||||
title={ isOutOfRange(i + 1) ? null : '%i18n:desktop.tags.mk-calendar-widget.go%' }><div>{ i + 1 }</div></div>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<mk-window data-flexible={ isFlexible } ondragover={ ondragover }>
|
||||
<div class="bg" ref="bg" show={ isModal } onclick={ bgClick }></div>
|
||||
<div class="bg" ref="bg" show={ isModal } @click="bgClick"></div>
|
||||
<div class="main" ref="main" tabindex="-1" data-is-modal={ isModal } onmousedown={ onBodyMousedown } onkeydown={ onKeydown }>
|
||||
<div class="body">
|
||||
<header ref="header" onmousedown={ onHeaderMousedown }>
|
||||
<h1 data-yield="header"><yield from="header"/></h1>
|
||||
<div>
|
||||
<button class="popout" if={ popoutUrl } onmousedown={ repelMove } onclick={ popout } title="ポップアウト">%fa:R window-restore%</button>
|
||||
<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる">%fa:times%</button>
|
||||
<button class="popout" if={ popoutUrl } onmousedown={ repelMove } @click="popout" title="ポップアウト">%fa:R window-restore%</button>
|
||||
<button class="close" if={ canClose } onmousedown={ repelMove } @click="close" title="閉じる">%fa:times%</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content" data-yield="content"><yield from="content"/></div>
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
</div>
|
||||
<p>%fa:exclamation-triangle%アプリ作成後も変更できますが、新たな権限を付与する場合、その時点で関連付けられているユーザーキーはすべて無効になります。</p>
|
||||
</section>
|
||||
<button onclick={ onsubmit }>アプリ作成</button>
|
||||
<button @click="onsubmit">アプリ作成</button>
|
||||
</form>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
<div class="body">
|
||||
<header>
|
||||
<h1>%i18n:mobile.tags.mk-drive-folder-selector.select-folder%</h1>
|
||||
<button class="close" onclick={ cancel }>%fa:times%</button>
|
||||
<button class="ok" onclick={ ok }>%fa:check%</button>
|
||||
<button class="close" @click="cancel">%fa:times%</button>
|
||||
<button class="ok" @click="ok">%fa:check%</button>
|
||||
</header>
|
||||
<mk-drive ref="browser" select-folder={ true }/>
|
||||
</div>
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
<div class="body">
|
||||
<header>
|
||||
<h1>%i18n:mobile.tags.mk-drive-selector.select-file%<span class="count" if={ files.length > 0 }>({ files.length })</span></h1>
|
||||
<button class="close" onclick={ cancel }>%fa:times%</button>
|
||||
<button if={ opts.multiple } class="ok" onclick={ ok }>%fa:check%</button>
|
||||
<button class="close" @click="cancel">%fa:times%</button>
|
||||
<button if={ opts.multiple } class="ok" @click="ok">%fa:check%</button>
|
||||
</header>
|
||||
<mk-drive ref="browser" select-file={ true } multiple={ opts.multiple }/>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<mk-drive>
|
||||
<nav ref="nav">
|
||||
<a onclick={ goRoot } href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
|
||||
<a @click="goRoot" href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
|
||||
<virtual each={ folder in hierarchyFolders }>
|
||||
<span>%fa:angle-right%</span>
|
||||
<a onclick={ move } href="/i/drive/folder/{ folder.id }">{ folder.name }</a>
|
||||
<a @click="move" href="/i/drive/folder/{ folder.id }">{ folder.name }</a>
|
||||
</virtual>
|
||||
<virtual if={ folder != null }>
|
||||
<span>%fa:angle-right%</span>
|
||||
|
@ -34,7 +34,7 @@
|
|||
<virtual each={ file in files }>
|
||||
<mk-drive-file file={ file }/>
|
||||
</virtual>
|
||||
<button class="more" if={ moreFiles } onclick={ fetchMoreFiles }>
|
||||
<button class="more" if={ moreFiles } @click="fetchMoreFiles">
|
||||
{ fetchingMoreFiles ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-drive.load-more%' }
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
<span class="separator"></span>
|
||||
<span class="data-size">{ bytesToSize(file.datasize) }</span>
|
||||
<span class="separator"></span>
|
||||
<span class="created-at" onclick={ showCreatedAt }>%fa:R clock%<mk-time time={ file.created_at }/></span>
|
||||
<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time time={ file.created_at }/></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu">
|
||||
|
@ -36,10 +36,10 @@
|
|||
<a href={ file.url + '?download' } download={ file.name }>
|
||||
%fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
|
||||
</a>
|
||||
<button onclick={ rename }>
|
||||
<button @click="rename">
|
||||
%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
|
||||
</button>
|
||||
<button onclick={ move }>
|
||||
<button @click="move">
|
||||
%fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-drive-file data-is-selected={ isSelected }>
|
||||
<a onclick={ onclick } href="/i/drive/file/{ file.id }">
|
||||
<a @click="onclick" href="/i/drive/file/{ file.id }">
|
||||
<div class="container">
|
||||
<div class="thumbnail" style={ thumbnail }></div>
|
||||
<div class="body">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-drive-folder>
|
||||
<a onclick={ onclick } href="/i/drive/folder/{ folder.id }">
|
||||
<a @click="onclick" href="/i/drive/folder/{ folder.id }">
|
||||
<div class="container">
|
||||
<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-follow-button>
|
||||
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } onclick={ onclick } disabled={ wait }>
|
||||
<button class={ wait: wait, follow: !user.is_following, unfollow: user.is_following } if={ !init } @click="onclick" disabled={ wait }>
|
||||
<virtual if={ !wait && user.is_following }>%fa:minus%</virtual>
|
||||
<virtual if={ !wait && !user.is_following }>%fa:plus%</virtual>
|
||||
<virtual if={ wait }>%fa:spinner .pulse .fw%</virtual>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }
|
||||
|
|
|
@ -7,8 +7,8 @@
|
|||
</div>
|
||||
<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
|
||||
<p class="fetching" if={ fetching }>%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
|
||||
<a class="refresh" onclick={ refresh }>もっと見る</a>
|
||||
<button class="close" onclick={ close } title="閉じる">%fa:times%</button>
|
||||
<a class="refresh" @click="refresh">もっと見る</a>
|
||||
<button class="close" @click="close" title="閉じる">%fa:times%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
|
||||
</virtual>
|
||||
</div>
|
||||
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||
<button class="more" if={ moreNotifications } @click="fetchMoreNotifications" disabled={ fetchingMoreNotifications }>
|
||||
<virtual if={ fetchingMoreNotifications }>%fa:spinner .pulse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
|
||||
</button>
|
||||
<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<mk-entrance-signup if={ mode == 'signup' }/>
|
||||
<div class="introduction" if={ mode == 'introduction' }>
|
||||
<mk-introduction/>
|
||||
<button onclick={ signin }>%i18n:common.ok%</button>
|
||||
<button @click="signin">%i18n:common.ok%</button>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<mk-signin/>
|
||||
<a href={ _API_URL_ + '/signin/twitter' }>Twitterでサインイン</a>
|
||||
<div class="divider"><span>or</span></div>
|
||||
<button class="signup" onclick={ parent.signup }>%i18n:mobile.tags.mk-entrance-signin.signup%</button><a class="introduction" onclick={ parent.introduction }>%i18n:mobile.tags.mk-entrance-signin.about%</a>
|
||||
<button class="signup" @click="parent.signup">%i18n:mobile.tags.mk-entrance-signin.signup%</button><a class="introduction" @click="parent.introduction">%i18n:mobile.tags.mk-entrance-signin.about%</a>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<mk-entrance-signup>
|
||||
<mk-signup/>
|
||||
<button class="cancel" type="button" onclick={ parent.signin } title="%i18n:mobile.tags.mk-entrance-signup.cancel%">%fa:times%</button>
|
||||
<button class="cancel" type="button" @click="parent.signin" title="%i18n:mobile.tags.mk-entrance-signup.cancel%">%fa:times%</button>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<mk-selectdrive-page>
|
||||
<header>
|
||||
<h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" if={ files.length > 0 }>({ files.length })</span></h1>
|
||||
<button class="upload" onclick={ upload }>%fa:upload%</button>
|
||||
<button if={ multiple } class="ok" onclick={ ok }>%fa:check%</button>
|
||||
<button class="upload" @click="upload">%fa:upload%</button>
|
||||
<button if={ multiple } class="ok" @click="ok">%fa:check%</button>
|
||||
</header>
|
||||
<mk-drive ref="browser" select-file={ true } multiple={ multiple } is-naked={ true } top={ 42 }/>
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
<li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a onclick={ signout }>%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
|
||||
<li><a @click="signout">%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
|
||||
</ul>
|
||||
<p><small>ver { _VERSION_ } (葵 aoi)</small></p>
|
||||
<style>
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
<div>
|
||||
<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
|
||||
<div class="form">
|
||||
<div style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=1024)' : '' } onclick={ clickBanner }>
|
||||
<img src={ I.avatar_url + '?thumbnail&size=200' } alt="avatar" onclick={ clickAvatar }/>
|
||||
<div style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=1024)' : '' } @click="clickBanner">
|
||||
<img src={ I.avatar_url + '?thumbnail&size=200' } alt="avatar" @click="clickAvatar"/>
|
||||
</div>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
|
||||
|
@ -42,14 +42,14 @@
|
|||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
|
||||
<button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
|
||||
<button @click="setAvatar" disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
|
||||
</label>
|
||||
<label>
|
||||
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
|
||||
<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
|
||||
<button @click="setBanner" disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
|
||||
</label>
|
||||
</div>
|
||||
<button class="save" onclick={ save } disabled={ saving }>%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
|
||||
<button class="save" @click="save" disabled={ saving }>%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
|
||||
</div>
|
||||
<style>
|
||||
:scope
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mk-post-detail>
|
||||
<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } onclick={ loadContext } disabled={ loadingContext }>
|
||||
<button class="read-more" if={ p.reply && p.reply.reply_id && context == null } @click="loadContext" disabled={ loadingContext }>
|
||||
<virtual if={ !contextFetching }>%fa:ellipsis-v%</virtual>
|
||||
<virtual if={ contextFetching }>%fa:spinner .pulse%</virtual>
|
||||
</button>
|
||||
|
@ -43,16 +43,16 @@
|
|||
</a>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p }/>
|
||||
<button onclick={ reply } title="%i18n:mobile.tags.mk-post-detail.reply%">
|
||||
<button @click="reply" title="%i18n:mobile.tags.mk-post-detail.reply%">
|
||||
%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost">
|
||||
<button @click="repost" title="Repost">
|
||||
%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ 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" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button onclick={ menu } ref="menuButton">
|
||||
<button @click="menu" ref="menuButton">
|
||||
%fa:ellipsis-h%
|
||||
</button>
|
||||
</footer>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<mk-post-form>
|
||||
<header>
|
||||
<button class="cancel" onclick={ cancel }>%fa:times%</button>
|
||||
<button class="cancel" @click="cancel">%fa:times%</button>
|
||||
<div>
|
||||
<span if={ refs.text } class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
|
||||
<button class="submit" onclick={ post }>%i18n:mobile.tags.mk-post-form.submit%</button>
|
||||
<button class="submit" @click="post">%i18n:mobile.tags.mk-post-form.submit%</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="form">
|
||||
|
@ -12,16 +12,16 @@
|
|||
<div class="attaches" show={ files.length != 0 }>
|
||||
<ul class="files" ref="attaches">
|
||||
<li class="file" each={ files } data-id={ id }>
|
||||
<div class="img" style="background-image: url({ url + '?thumbnail&size=128' })" onclick={ removeFile }></div>
|
||||
<div class="img" style="background-image: url({ url + '?thumbnail&size=128' })" @click="removeFile"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<mk-poll-editor if={ poll } ref="poll" ondestroy={ onPollDestroyed }/>
|
||||
<mk-uploader ref="uploader"/>
|
||||
<button ref="upload" onclick={ selectFile }>%fa:upload%</button>
|
||||
<button ref="drive" onclick={ selectFileFromDrive }>%fa:cloud%</button>
|
||||
<button class="kao" onclick={ kao }>%fa:R smile%</button>
|
||||
<button class="poll" onclick={ addPoll }>%fa:chart-pie%</button>
|
||||
<button ref="upload" @click="selectFile">%fa:upload%</button>
|
||||
<button ref="drive" @click="selectFileFromDrive">%fa:cloud%</button>
|
||||
<button class="kao" @click="kao">%fa:R smile%</button>
|
||||
<button class="poll" @click="addPoll">%fa:chart-pie%</button>
|
||||
<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</p>
|
||||
</virtual>
|
||||
<footer if={ !init }>
|
||||
<button if={ canFetchMore } onclick={ more } disabled={ fetching }>
|
||||
<button if={ canFetchMore } @click="more" disabled={ fetching }>
|
||||
<span if={ !fetching }>%i18n:mobile.tags.mk-timeline.load-more%</span>
|
||||
<span if={ fetching }>%i18n:common.loading%<mk-ellipsis/></span>
|
||||
</button>
|
||||
|
@ -182,16 +182,16 @@
|
|||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer post={ p } ref="reactionsViewer"/>
|
||||
<button onclick={ reply }>
|
||||
<button @click="reply">
|
||||
%fa:reply%<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
|
||||
</button>
|
||||
<button onclick={ repost } title="Repost">
|
||||
<button @click="repost" title="Repost">
|
||||
%fa:retweet%<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
|
||||
</button>
|
||||
<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton">
|
||||
<button class={ reacted: p.my_reaction != null } @click="react" ref="reactButton">
|
||||
%fa:plus%<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
|
||||
</button>
|
||||
<button class="menu" onclick={ menu } ref="menuButton">
|
||||
<button class="menu" @click="menu" ref="menuButton">
|
||||
%fa:ellipsis-h%
|
||||
</button>
|
||||
</footer>
|
||||
|
|
|
@ -52,10 +52,10 @@
|
|||
<div class="main">
|
||||
<div class="backdrop"></div>
|
||||
<div class="content">
|
||||
<button class="nav" onclick={ parent.toggleDrawer }>%fa:bars%</button>
|
||||
<button class="nav" @click="parent.toggleDrawer">%fa:bars%</button>
|
||||
<virtual if={ hasUnreadNotifications || hasUnreadMessagingMessages }>%fa:circle%</virtual>
|
||||
<h1 ref="title">Misskey</h1>
|
||||
<button if={ func } onclick={ func }><mk-raw content={ funcIcon }/></button>
|
||||
<button if={ func } @click="func"><mk-raw content={ funcIcon }/></button>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
@ -225,7 +225,7 @@
|
|||
</mk-ui-header>
|
||||
|
||||
<mk-ui-nav>
|
||||
<div class="backdrop" onclick={ parent.toggleDrawer }></div>
|
||||
<div class="backdrop" @click="parent.toggleDrawer"></div>
|
||||
<div class="body">
|
||||
<a class="me" if={ SIGNIN } href={ '/' + I.username }>
|
||||
<img class="avatar" src={ I.avatar_url + '?thumbnail&size=128' } alt="avatar"/>
|
||||
|
@ -242,7 +242,7 @@
|
|||
<li><a href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a onclick={ search }>%fa:search%%i18n:mobile.tags.mk-ui-nav.search%%fa:angle-right%</a></li>
|
||||
<li><a @click="search">%fa:search%%i18n:mobile.tags.mk-ui-nav.search%%fa:angle-right%</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</a></li>
|
||||
|
|
|
@ -39,9 +39,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<a data-is-active={ page == 'overview' } onclick={ go.bind(null, 'overview') }>%i18n:mobile.tags.mk-user.overview%</a>
|
||||
<a data-is-active={ page == 'posts' } onclick={ go.bind(null, 'posts') }>%i18n:mobile.tags.mk-user.timeline%</a>
|
||||
<a data-is-active={ page == 'media' } onclick={ go.bind(null, 'media') }>%i18n:mobile.tags.mk-user.media%</a>
|
||||
<a data-is-active={ page == 'overview' } @click="go.bind(null, 'overview')">%i18n:mobile.tags.mk-user.overview%</a>
|
||||
<a data-is-active={ page == 'posts' } @click="go.bind(null, 'posts')">%i18n:mobile.tags.mk-user.timeline%</a>
|
||||
<a data-is-active={ page == 'media' } @click="go.bind(null, 'media')">%i18n:mobile.tags.mk-user.media%</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="body">
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<mk-users-list>
|
||||
<nav>
|
||||
<span data-is-active={ mode == 'all' } onclick={ setMode.bind(this, 'all') }>%i18n:mobile.tags.mk-users-list.all%<span>{ opts.count }</span></span>
|
||||
<span if={ SIGNIN && opts.youKnowCount } data-is-active={ mode == 'iknow' } onclick={ setMode.bind(this, 'iknow') }>%i18n:mobile.tags.mk-users-list.known%<span>{ opts.youKnowCount }</span></span>
|
||||
<span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">%i18n:mobile.tags.mk-users-list.all%<span>{ opts.count }</span></span>
|
||||
<span if={ SIGNIN && opts.youKnowCount } data-is-active={ mode == 'iknow' } @click="setMode.bind(this, 'iknow')">%i18n:mobile.tags.mk-users-list.known%<span>{ opts.youKnowCount }</span></span>
|
||||
</nav>
|
||||
<div class="users" if={ !fetching && users.length != 0 }>
|
||||
<mk-user-preview each={ users } user={ this }/>
|
||||
</div>
|
||||
<button class="more" if={ !fetching && next != null } onclick={ more } disabled={ moreFetching }>
|
||||
<button class="more" if={ !fetching && next != null } @click="more" disabled={ moreFetching }>
|
||||
<span if={ !moreFetching }>%i18n:mobile.tags.mk-users-list.load-more%</span>
|
||||
<span if={ moreFetching }>%i18n:common.loading%<mk-ellipsis/></span></button>
|
||||
<p class="no" if={ !fetching && users.length == 0 }>{ opts.noUsers }</p>
|
||||
|
|
Loading…
Reference in a new issue