This commit is contained in:
syuilo 2018-02-20 22:53:34 +09:00
parent 3cc45145fe
commit e1259409e9
16 changed files with 89 additions and 61 deletions

View File

@ -5,6 +5,7 @@ declare const _DOCS_URL_: string;
declare const _STATS_URL_: string; declare const _STATS_URL_: string;
declare const _STATUS_URL_: string; declare const _STATUS_URL_: string;
declare const _DEV_URL_: string; declare const _DEV_URL_: string;
declare const _CH_URL_: string;
declare const _LANG_: string; declare const _LANG_: string;
declare const _RECAPTCHA_SITEKEY_: string; declare const _RECAPTCHA_SITEKEY_: string;
declare const _SW_PUBLICKEY_: string; declare const _SW_PUBLICKEY_: string;
@ -19,6 +20,7 @@ export const docsUrl = _DOCS_URL_;
export const statsUrl = _STATS_URL_; export const statsUrl = _STATS_URL_;
export const statusUrl = _STATUS_URL_; export const statusUrl = _STATUS_URL_;
export const devUrl = _DEV_URL_; export const devUrl = _DEV_URL_;
export const chUrl = _CH_URL_;
export const lang = _LANG_; export const lang = _LANG_;
export const recaptchaSitekey = _RECAPTCHA_SITEKEY_; export const recaptchaSitekey = _RECAPTCHA_SITEKEY_;
export const swPublickey = _SW_PUBLICKEY_; export const swPublickey = _SW_PUBLICKEY_;

View File

@ -0,0 +1,6 @@
import PostFormWindow from '../views/components/post-form-window.vue';
export default function() {
const vm = new PostFormWindow().$mount();
document.body.appendChild(vm.$el);
}

View File

@ -14,6 +14,7 @@ import chooseDriveFolder from './api/choose-drive-folder';
import chooseDriveFile from './api/choose-drive-file'; import chooseDriveFile from './api/choose-drive-file';
import dialog from './api/dialog'; import dialog from './api/dialog';
import input from './api/input'; import input from './api/input';
import post from './api/post';
import MkIndex from './views/pages/index.vue'; import MkIndex from './views/pages/index.vue';
import MkUser from './views/pages/user/user.vue'; import MkUser from './views/pages/user/user.vue';
@ -37,7 +38,8 @@ init(async (launch) => {
chooseDriveFolder, chooseDriveFolder,
chooseDriveFile, chooseDriveFile,
dialog, dialog,
input input,
post
}); });
/** /**

View File

@ -1,13 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import ui from './ui.vue'; import ui from './ui.vue';
import uiHeader from './ui-header.vue';
import uiHeaderAccount from './ui-header-account.vue';
import uiHeaderClock from './ui-header-clock.vue';
import uiHeaderNav from './ui-header-nav.vue';
import uiHeaderNotifications from './ui-header-notifications.vue';
import uiHeaderPostButton from './ui-header-post-button.vue';
import uiHeaderSearch from './ui-header-search.vue';
import uiNotification from './ui-notification.vue'; import uiNotification from './ui-notification.vue';
import home from './home.vue'; import home from './home.vue';
import timeline from './timeline.vue'; import timeline from './timeline.vue';
@ -46,13 +39,6 @@ import wBroadcast from './widgets/broadcast.vue';
import wTimemachine from './widgets/timemachine.vue'; import wTimemachine from './widgets/timemachine.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-ui-header', uiHeader);
Vue.component('mk-ui-header-account', uiHeaderAccount);
Vue.component('mk-ui-header-clock', uiHeaderClock);
Vue.component('mk-ui-header-nav', uiHeaderNav);
Vue.component('mk-ui-header-notifications', uiHeaderNotifications);
Vue.component('mk-ui-header-post-button', uiHeaderPostButton);
Vue.component('mk-ui-header-search', uiHeaderSearch);
Vue.component('mk-ui-notification', uiNotification); Vue.component('mk-ui-notification', uiNotification);
Vue.component('mk-home', home); Vue.component('mk-home', home);
Vue.component('mk-timeline', timeline); Vue.component('mk-timeline', timeline);

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-ui-header-account"> <div class="account">
<button class="header" :data-active="isOpen" @click="toggle"> <button class="header" :data-active="isOpen" @click="toggle">
<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span> <span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
@ -81,7 +81,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header-account .account
> .header > .header
display block display block
margin 0 margin 0

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-ui-header-clock"> <div class="clock">
<div class="header"> <div class="header">
<time ref="time"> <time ref="time">
<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span> <span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
@ -56,7 +56,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header-clock .clock
display inline-block display inline-block
overflow visible overflow visible

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-ui-header-nav"> <div class="nav">
<ul> <ul>
<template v-if="os.isSignedIn"> <template v-if="os.isSignedIn">
<li class="home" :class="{ active: page == 'home' }"> <li class="home" :class="{ active: page == 'home' }">
@ -17,7 +17,7 @@
</li> </li>
</template> </template>
<li class="ch"> <li class="ch">
<a :href="_CH_URL_" target="_blank"> <a :href="chUrl" target="_blank">
%fa:tv% %fa:tv%
<p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p> <p>%i18n:desktop.tags.mk-ui-header-nav.ch%</p>
</a> </a>
@ -34,6 +34,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { chUrl } from '../../../config';
import MkMessagingWindow from './messaging-window.vue'; import MkMessagingWindow from './messaging-window.vue';
export default Vue.extend({ export default Vue.extend({
@ -41,7 +42,8 @@ export default Vue.extend({
return { return {
hasUnreadMessagingMessages: false, hasUnreadMessagingMessages: false,
connection: null, connection: null,
connectionId: null connectionId: null,
chUrl
}; };
}, },
mounted() { mounted() {
@ -84,7 +86,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header-nav .nav
display inline-block display inline-block
margin 0 margin 0
padding 0 padding 0

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="mk-ui-header-notifications"> <div class="notifications">
<button :data-active="isOpen" @click="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%<template v-if="hasUnreadNotifications">%fa:circle%</template> %fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
</button> </button>
<div class="notifications" v-if="isOpen"> <div class="pop" v-if="isOpen">
<mk-notifications/> <mk-notifications/>
</div> </div>
</div> </div>
@ -82,7 +82,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header-notifications .notifications
> button > button
display block display block
@ -114,7 +114,7 @@ export default Vue.extend({
font-size 10px font-size 10px
color $theme-color color $theme-color
> .notifications > .pop
display block display block
position absolute position absolute
top 56px top 56px

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-ui-header-post-button"> <div class="post">
<button @click="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>
</div> </div>
</template> </template>
@ -17,7 +17,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header-post-button .post
display inline-block display inline-block
padding 8px padding 8px
height 100% height 100%

View File

@ -1,5 +1,5 @@
<template> <template>
<form class="mk-ui-header-search" @submit.prevent="onSubmit"> <form class="search" @submit.prevent="onSubmit">
%fa:search% %fa:search%
<input v-model="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/> <input v-model="q" type="search" placeholder="%i18n:desktop.tags.mk-ui-header-search.placeholder%"/>
<div class="result"></div> <div class="result"></div>
@ -24,7 +24,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header-search .search
> [data-fa] > [data-fa]
display block display block

View File

@ -1,19 +1,19 @@
<template> <template>
<div class="mk-ui-header"> <div class="header">
<mk-special-message/> <mk-special-message/>
<div class="main"> <div class="main">
<div class="backdrop"></div> <div class="backdrop"></div>
<div class="main"> <div class="main">
<div class="container"> <div class="container">
<div class="left"> <div class="left">
<mk-ui-header-nav/> <x-nav/>
</div> </div>
<div class="right"> <div class="right">
<mk-ui-header-search/> <x-search/>
<mk-ui-header-account v-if="os.isSignedIn"/> <x-account v-if="os.isSignedIn"/>
<mk-ui-header-notifications v-if="os.isSignedIn"/> <x-notifications v-if="os.isSignedIn"/>
<mk-ui-header-post-button v-if="os.isSignedIn"/> <x-post v-if="os.isSignedIn"/>
<mk-ui-header-clock/> <x-clock/>
</div> </div>
</div> </div>
</div> </div>
@ -21,9 +21,30 @@
</div> </div>
</template> </template>
<script lang="ts">
import Vue from 'vue';
import XNav from './ui.header.nav.vue';
import XSearch from './ui.header.search.vue';
import XAccount from './ui.header.account.vue';
import XNotifications from './ui.header.notifications.vue';
import XPost from './ui.header.post.vue';
import XClock from './ui.header.clock.vue';
export default Vue.extend({
components: {
'x-nav': XNav,
'x-search': XSearch,
'x-account': XAccount,
'x-notifications': XNotifications,
'x-post': XPost,
'x-clock': XClock,
}
});
</script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-ui-header .header
display block
position -webkit-sticky position -webkit-sticky
position sticky position sticky
top 0 top 0

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<mk-ui-header/> <x-header/>
<div class="content"> <div class="content">
<slot></slot> <slot></slot>
</div> </div>
@ -10,9 +10,12 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkPostFormWindow from './post-form-window.vue'; import XHeader from './ui.header.vue';
export default Vue.extend({ export default Vue.extend({
components: {
'x-header': XHeader
},
mounted() { mounted() {
document.addEventListener('keydown', this.onKeydown); document.addEventListener('keydown', this.onKeydown);
}, },
@ -20,17 +23,12 @@ export default Vue.extend({
document.removeEventListener('keydown', this.onKeydown); document.removeEventListener('keydown', this.onKeydown);
}, },
methods: { methods: {
openPostForm() {
document.body.appendChild(new MkPostFormWindow({
parent: this
}).$mount().$el);
},
onKeydown(e) { onKeydown(e) {
if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return; if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
if (e.which == 80 || e.which == 78) { // p or n if (e.which == 80 || e.which == 78) { // p or n
e.preventDefault(); e.preventDefault();
this.openPostForm(); (this as any).apis.post();
} }
} }
} }

View File

@ -3,7 +3,7 @@
<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p> <p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0"> <div v-if="!fetching && users.length > 0">
<router-link v-for="user in users" to="`/${user.username}`" :key="user.id"> <router-link v-for="user in users" :to="`/${user.username}`" :key="user.id">
<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/> <img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name" v-user-preview="user.id"/>
</router-link> </router-link>
</div> </div>

View File

@ -4,11 +4,11 @@
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p> <p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.frequently-replied-users.loading%<mk-ellipsis/></p>
<template v-if="!fetching && users.length != 0"> <template v-if="!fetching && users.length != 0">
<div class="user" v-for="friend in users"> <div class="user" v-for="friend in users">
<router-link class="avatar-anchor" to="`/${friend.username}`"> <router-link class="avatar-anchor" :to="`/${friend.username}`">
<img class="avatar" :src="`${friend.avatar_url}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/> <img class="avatar" :src="`${friend.avatar_url}?thumbnail&size=42`" alt="" v-user-preview="friend.id"/>
</router-link> </router-link>
<div class="body"> <div class="body">
<router-link class="name" to="`/${friend.username}`" v-user-preview="friend.id">{{ friend.name }}</router-link> <router-link class="name" :to="`/${friend.username}`" v-user-preview="friend.id">{{ friend.name }}</router-link>
<p class="username">@{{ friend.username }}</p> <p class="username">@{{ friend.username }}</p>
</div> </div>
<mk-follow-button :user="friend"/> <mk-follow-button :user="friend"/>

View File

@ -30,7 +30,15 @@ export default Vue.extend({
user: null user: null
}; };
}, },
mounted() { created() {
this.fetch();
},
watch: {
$route: 'fetch'
},
methods: {
fetch() {
this.fetching = true;
Progress.start(); Progress.start();
(this as any).api('users/show', { (this as any).api('users/show', {
username: this.$route.params.user username: this.$route.params.user
@ -41,6 +49,7 @@ export default Vue.extend({
document.title = user.name + ' | Misskey'; document.title = user.name + ' | Misskey';
}); });
} }
}
}); });
</script> </script>

View File

@ -105,6 +105,8 @@ type API = {
placeholder?: string; placeholder?: string;
default?: string; default?: string;
}) => Promise<string>; }) => Promise<string>;
post: () => void;
}; };
// MiOSを初期化してコールバックする // MiOSを初期化してコールバックする