This commit is contained in:
こぴなたみぽ 2018-02-21 12:27:01 +09:00
parent 91d8a0d22e
commit 73820245f6
2 changed files with 64 additions and 62 deletions

View File

@ -1,62 +0,0 @@
<mk-twitter-setting>
<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" v-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" @click="connect">{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
<span v-if="I.twitter"> or </span>
<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" v-if="I.twitter" @click="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
</p>
<p class="id" v-if="I.twitter">Twitter ID: { I.twitter.user_id }</p>
<style lang="stylus" scoped>
:scope
display block
color #4a535a
.account
border solid 1px #e1e8ed
border-radius 4px
padding 16px
a
font-weight bold
color inherit
.id
color #8899a6
</style>
<script lang="typescript">
this.mixin('i');
this.form = null;
this.on('mount', () => {
this.$root.$data.os.i.on('updated', this.onMeUpdated);
});
this.on('unmount', () => {
this.$root.$data.os.i.off('updated', this.onMeUpdated);
});
this.onMeUpdated = () => {
if (this.$root.$data.os.i.twitter) {
if (this.form) this.form.close();
}
};
this.connect = e => {
e.preventDefault();
this.form = window.open(_API_URL_ + '/connect/twitter',
'twitter_connect_window',
'height=570,width=520');
return false;
};
this.disconnect = e => {
e.preventDefault();
window.open(_API_URL_ + '/disconnect/twitter',
'twitter_disconnect_window',
'height=570,width=520');
return false;
};
</script>
</mk-twitter-setting>

View File

@ -0,0 +1,64 @@
<template>
<div class="mk-twitter-setting">
<p>%i18n:common.tags.mk-twitter-setting.description%<a :href="`${docsUrl}/link-to-twitter`" target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
<p class="account" v-if="os.i.twitter" :title="`Twitter ID: ${os.i.twitter.user_id}`">%i18n:common.tags.mk-twitter-setting.connected-to%: <a :href="`https://twitter.com/${os.i.twitter.screen_name}`" target="_blank">@{{ I.twitter.screen_name }}</a></p>
<p>
<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ os.i.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }}</a>
<span v-if="os.i.twitter"> or </span>
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="os.i.twitter" @click.prevent="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
</p>
<p class="id" v-if="os.i.twitter">Twitter ID: {{ os.i.twitter.user_id }}</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { apiUrl, docsUrl } from '../../../config';
export default Vue.extend({
data() {
return {
form: null,
apiUrl,
docsUrl
};
},
watch: {
'os.i'() {
if ((this as any).os.i.twitter) {
if (this.form) this.form.close();
}
}
},
methods: {
connect() {
this.form = window.open(apiUrl + '/connect/twitter',
'twitter_connect_window',
'height=570, width=520');
},
disconnect() {
window.open(apiUrl + '/disconnect/twitter',
'twitter_disconnect_window',
'height=570, width=520');
}
}
});
</script>
<style lang="stylus" scoped>
.mk-twitter-setting
color #4a535a
.account
border solid 1px #e1e8ed
border-radius 4px
padding 16px
a
font-weight bold
color inherit
.id
color #8899a6
</style>