graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-25 03:53:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-17 02:24:10 +09:00
parent fe1d6a1b09
commit 7d377925a0
15 changed files with 115 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/app/common/views/components/index.ts
View file

@ -10,6 +10,7 @@ import reactionsViewer from './reactions-viewer.vue';
import time from './time.vue'; import time from './time.vue';
import images from './images.vue'; import images from './images.vue';
import uploader from './uploader.vue'; import uploader from './uploader.vue';
import specialMessage from './special-message.vue';
Vue.component('mk-signin', signin); Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup); Vue.component('mk-signup', signup);
@ -21,3 +22,4 @@ Vue.component('mk-reactions-viewer', reactionsViewer);
Vue.component('mk-time', time); Vue.component('mk-time', time);
Vue.component('mk-images', images); Vue.component('mk-images', images);
Vue.component('mk-uploader', uploader); Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage);

4
src/web/app/common/views/components/special-message.vue
View file

@ -15,10 +15,10 @@ export default Vue.extend({
}, },
computed: { computed: {
d(): number { d(): number {
return now.getDate(); return this.now.getDate();
}, },
m(): number { m(): number {
return now.getMonth() + 1; return this.now.getMonth() + 1;
} }
} }
}); });

2
src/web/app/common/views/components/widgets/profile.vue
View file

@ -13,7 +13,7 @@
@click="wapi_setAvatar" @click="wapi_setAvatar"
alt="avatar" alt="avatar"
title="クリックでアバター編集" title="クリックでアバター編集"
:v-user-preview={ I.id } v-user-preview={ I.id }
/> />
<a class="name" href={ '/' + I.username }>{ I.name }</a> <a class="name" href={ '/' + I.username }>{ I.name }</a>
<p class="username">@{ I.username }</p> <p class="username">@{ I.username }</p>

3
src/web/app/desktop/script.ts
View file

@ -21,6 +21,9 @@ init(async (launch) => {
*/ */
fuckAdBlock(); fuckAdBlock();
// Register directives
require('./views/directives');
// Register components // Register components
require('./views/components'); require('./views/components');

2
src/web/app/desktop/views/components/index.ts
View file

@ -25,6 +25,7 @@ import imagesImageDialog from './images-image-dialog.vue';
import notifications from './notifications.vue'; import notifications from './notifications.vue';
import postForm from './post-form.vue'; import postForm from './post-form.vue';
import repostForm from './repost-form.vue'; import repostForm from './repost-form.vue';
import followButton from './follow-button.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-ui-header', uiHeader); Vue.component('mk-ui-header', uiHeader);
@ -51,3 +52,4 @@ Vue.component('mk-images-image-dialog', imagesImageDialog);
Vue.component('mk-notifications', notifications); Vue.component('mk-notifications', notifications);
Vue.component('mk-post-form', postForm); Vue.component('mk-post-form', postForm);
Vue.component('mk-repost-form', repostForm); Vue.component('mk-repost-form', repostForm);
Vue.component('mk-follow-button', followButton);

28
src/web/app/desktop/views/components/notifications.vue
View file

@ -5,13 +5,13 @@
<div class="notification" :class="notification.type" :key="notification.id"> <div class="notification" :class="notification.type" :key="notification.id">
<mk-time :time="notification.created_at"/> <mk-time :time="notification.created_at"/>
<template v-if="notification.type == 'reaction'"> <template v-if="notification.type == 'reaction'">
<a class="avatar-anchor" :href="`/${notification.user.username}`" :v-user-preview="notification.user.id"> <a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p> <p>
<mk-reaction-icon reaction={ notification.reaction }/> <mk-reaction-icon reaction={ notification.reaction }/>
<a :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">{{ notification.user.name }}</a> <a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
@ -19,12 +19,12 @@
</div> </div>
</template> </template>
<template v-if="notification.type == 'repost'"> <template v-if="notification.type == 'repost'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id"> <a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:retweet% <p>%fa:retweet%
<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
@ -32,54 +32,54 @@
</div> </div>
</template> </template>
<template v-if="notification.type == 'quote'"> <template v-if="notification.type == 'quote'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id"> <a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:quote-left% <p>%fa:quote-left%
<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
</div> </div>
</template> </template>
<template v-if="notification.type == 'follow'"> <template v-if="notification.type == 'follow'">
<a class="avatar-anchor" :href="`/${notification.user.username}`" :v-user-preview="notification.user.id"> <a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:user-plus% <p>%fa:user-plus%
<a :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">{{ notification.user.name }}</a> <a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
</p> </p>
</div> </div>
</template> </template>
<template v-if="notification.type == 'reply'"> <template v-if="notification.type == 'reply'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id"> <a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:reply% <p>%fa:reply%
<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
</div> </div>
</template> </template>
<template v-if="notification.type == 'mention'"> <template v-if="notification.type == 'mention'">
<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id"> <a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:at% <p>%fa:at%
<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a> <a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
</p> </p>
<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a> <a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
</div> </div>
</template> </template>
<template v-if="notification.type == 'poll_vote'"> <template v-if="notification.type == 'poll_vote'">
<a class="avatar-anchor" :href="`/${notification.user.username}`" :v-user-preview="notification.user.id"> <a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/> <img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
</a> </a>
<div class="text"> <div class="text">
<p>%fa:chart-pie%<a :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">{{ notification.user.name }}</a></p> <p>%fa:chart-pie%<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right% %fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
</a> </a>

4
src/web/app/desktop/views/components/post-preview.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="mk-post-preview" :title="title"> <div class="mk-post-preview" :title="title">
<a class="avatar-anchor" :href="`/${post.user.username}`"> <a class="avatar-anchor" :href="`/${post.user.username}`">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="post.user_id"/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
</a> </a>
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a> <a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
<span class="username">@{ post.user.username }</span> <span class="username">@{ post.user.username }</span>
<a class="time" :href="`/${post.user.username}/${post.id}`"> <a class="time" :href="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/></a> <mk-time :time="post.created_at"/></a>

4
src/web/app/desktop/views/components/posts-post-sub.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="mk-posts-post-sub" :title="title"> <div class="mk-posts-post-sub" :title="title">
<a class="avatar-anchor" :href="`/${post.user.username}`"> <a class="avatar-anchor" :href="`/${post.user.username}`">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="post.user_id"/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
</a> </a>
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a> <a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
<span class="username">@{{ post.user.username }}</span> <span class="username">@{{ post.user.username }}</span>
<a class="created-at" :href="`/${post.user.username}/${post.id}`"> <a class="created-at" :href="`/${post.user.username}/${post.id}`">
<mk-time :time="post.created_at"/> <mk-time :time="post.created_at"/>

8
src/web/app/desktop/views/components/posts-post.vue
View file

@ -5,20 +5,20 @@
</div> </div>
<div class="repost" v-if="isRepost"> <div class="repost" v-if="isRepost">
<p> <p>
<a class="avatar-anchor" :href="`/${post.user.username}`" :v-user-preview="post.user_id"> <a class="avatar-anchor" :href="`/${post.user.username}`" v-user-preview="post.user_id">
<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/> <img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
</a> </a>
%fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a>{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}} %fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}}
</p> </p>
<mk-time :time="post.created_at"/> <mk-time :time="post.created_at"/>
</div> </div>
<article> <article>
<a class="avatar-anchor" :href="`/${p.user.username}`"> <a class="avatar-anchor" :href="`/${p.user.username}`">
<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="p.user.id"/> <img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
</a> </a>
<div class="main"> <div class="main">
<header> <header>
<a class="name" :href="`/${p.user.username}`" :v-user-preview="p.user.id">{{ p.user.name }}</a> <a class="name" :href="`/${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</a>
<span class="is-bot" v-if="p.user.is_bot">bot</span> <span class="is-bot" v-if="p.user.is_bot">bot</span>
<span class="username">@{{ p.user.username }}</span> <span class="username">@{{ p.user.username }}</span>
<div class="info"> <div class="info">

4
src/web/app/desktop/views/components/user-preview.vue
View file

@ -45,7 +45,9 @@ export default Vue.extend({
mounted() { mounted() {
if (typeof this.user == 'object') { if (typeof this.user == 'object') {
this.u = this.user; this.u = this.user;
this.open(); this.$nextTick(() => {
this.open();
});
} else { } else {
this.$root.$data.os.api('users/show', { this.$root.$data.os.api('users/show', {
user_id: this.user[0] == '@' ? undefined : this.user, user_id: this.user[0] == '@' ? undefined : this.user,

6
src/web/app/desktop/views/directives/index.ts Normal file
View file

@ -0,0 +1,6 @@
import Vue from 'vue';
import userPreview from './user-preview';
Vue.directive('userPreview', userPreview);
Vue.directive('user-preview', userPreview);

63
src/web/app/desktop/views/directives/user-preview.ts Normal file
View file

@ -0,0 +1,63 @@
import MkUserPreview from '../components/user-preview.vue';
export default {
bind(el, binding, vn) {
const self = vn.context._userPreviewDirective_ = {} as any;
self.user = binding.value;
let tag = null;
self.showTimer = null;
self.hideTimer = null;
self.close = () => {
if (tag) {
tag.close();
tag = null;
}
};
const show = () => {
if (tag) return;
tag = new MkUserPreview({
parent: vn.context,
propsData: {
user: self.user
}
}).$mount();
const preview = tag.$el;
const rect = el.getBoundingClientRect();
const x = rect.left + el.offsetWidth + window.pageXOffset;
const y = rect.top + window.pageYOffset;
preview.style.top = y + 'px';
preview.style.left = x + 'px';
preview.addEventListener('mouseover', () => {
clearTimeout(self.hideTimer);
});
preview.addEventListener('mouseleave', () => {
clearTimeout(self.showTimer);
self.hideTimer = setTimeout(self.close, 500);
});
document.body.appendChild(preview);
};
el.addEventListener('mouseover', () => {
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.showTimer = setTimeout(show, 500);
});
el.addEventListener('mouseleave', () => {
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.hideTimer = setTimeout(self.close, 500);
});
},
unbind(el, binding, vn) {
const self = vn.context._userPreviewDirective_;
console.log('unbound:', self.user);
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.close();
}
};

3
src/web/app/mobile/script.ts
View file

@ -12,6 +12,9 @@ import init from '../init';
* init * init
*/ */
init((launch) => { init((launch) => {
// Register directives
require('./views/directives');
// http://qiita.com/junya/items/3ff380878f26ca447f85 // http://qiita.com/junya/items/3ff380878f26ca447f85
document.body.setAttribute('ontouchstart', ''); document.body.setAttribute('ontouchstart', '');

6
src/web/app/mobile/views/directives/index.ts Normal file
View file

@ -0,0 +1,6 @@
import Vue from 'vue';
import userPreview from './user-preview';
Vue.directive('userPreview', userPreview);
Vue.directive('user-preview', userPreview);

2
src/web/app/mobile/views/directives/user-preview.ts Normal file
View file

@ -0,0 +1,2 @@
// nope
export default {};