sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-02-22 07:06:47 +09:00
parent f5637205cb
commit 7a97924d01
15 changed files with 265 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,7 @@ import messaging from './messaging.vue';
import messagingRoom from './messaging-room.vue';
import urlPreview from './url-preview.vue';
import twitterSetting from './twitter-setting.vue';
import fileTypeIcon from './file-type-icon.vue';
Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup);
@@ -37,3 +38,4 @@ Vue.component('mk-messaging', messaging);
Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mk-url-preview', urlPreview);
Vue.component('mk-twitter-setting', twitterSetting);
Vue.component('mk-file-type-icon', fileTypeIcon);

4
src/web/app/common/views/components/messaging-room.vue
View File

@@ -15,7 +15,7 @@
</template>
</div>
<footer>
<div ref="notifications"></div>
<div ref="notifications" class="notifications"></div>
<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
<x-form :user="user"/>
</footer>
@@ -278,7 +278,7 @@ export default Vue.extend({
background rgba(255, 255, 255, 0.95)
background-clip content-box
> [ref='notifications']
> .notifications
position absolute
top -48px
width 100%

59
src/web/app/common/views/components/post-menu.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="mk-post-menu">
<div class="backdrop" ref="backdrop" @click="close"></div>
<div class="popover { compact: opts.compact }" ref="popover">
<button v-if="post.user_id === I.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
<div class="popover" :class="{ compact }" ref="popover">
<button v-if="post.user_id == os.i.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
</div>
</div>
</template>
@@ -14,36 +14,38 @@ import * as anime from 'animejs';
export default Vue.extend({
props: ['post', 'source', 'compact'],
mounted() {
const popover = this.$refs.popover as any;
this.$nextTick(() => {
const popover = this.$refs.popover as any;
const rect = this.source.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
const rect = this.source.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
if (this.compact) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
popover.style.left = (x - (width / 2)) + 'px';
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;
popover.style.left = (x - (width / 2)) + 'px';
popover.style.top = y + 'px';
}
if (this.compact) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
popover.style.left = (x - (width / 2)) + 'px';
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;
popover.style.left = (x - (width / 2)) + 'px';
popover.style.top = y + 'px';
}
anime({
targets: this.$refs.backdrop,
opacity: 1,
duration: 100,
easing: 'linear'
});
anime({
targets: this.$refs.backdrop,
opacity: 1,
duration: 100,
easing: 'linear'
});
anime({
targets: this.$refs.popover,
opacity: 1,
scale: [0.5, 1],
duration: 500
anime({
targets: this.$refs.popover,
opacity: 1,
scale: [0.5, 1],
duration: 500
});
});
},
methods: {
@@ -134,5 +136,6 @@ $border-color = rgba(27, 31, 35, 0.15)
> button
display block
padding 16px
</style>