mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-27 11:03:08 +02:00
wip
This commit is contained in:
syuilo
parent
b47c847211
commit
44a0952c0f
8 changed files with 357 additions and 569 deletions
|
|
@ -1,157 +0,0 @@
|
||||||
<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 v-if="I.is_pro && !post.is_category_verified">
|
|
||||||
<select ref="categorySelect">
|
|
||||||
<option value="">%i18n:common.tags.mk-post-menu.select%</option>
|
|
||||||
<option value="music">%i18n:common.post_categories.music%</option>
|
|
||||||
<option value="game">%i18n:common.post_categories.game%</option>
|
|
||||||
<option value="anime">%i18n:common.post_categories.anime%</option>
|
|
||||||
<option value="it">%i18n:common.post_categories.it%</option>
|
|
||||||
<option value="gadgets">%i18n:common.post_categories.gadgets%</option>
|
|
||||||
<option value="photography">%i18n:common.post_categories.photography%</option>
|
|
||||||
</select>
|
|
||||||
<button @click="categorize">%i18n:common.tags.mk-post-menu.categorize%</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
$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
|
|
||||||
|
|
||||||
> button
|
|
||||||
display block
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import anime from 'animejs';
|
|
||||||
|
|
||||||
this.mixin('i');
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.post = this.opts.post;
|
|
||||||
this.source = this.opts.source;
|
|
||||||
|
|
||||||
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.pin = () => {
|
|
||||||
this.api('i/pin', {
|
|
||||||
post_id: this.post.id
|
|
||||||
}).then(() => {
|
|
||||||
if (this.opts.cb) this.opts.cb('pinned', '%i18n:common.tags.mk-post-menu.pinned%');
|
|
||||||
this.$destroy();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.categorize = () => {
|
|
||||||
const category = this.$refs.categorySelect.options[this.$refs.categorySelect.selectedIndex].value;
|
|
||||||
this.api('posts/categorize', {
|
|
||||||
post_id: this.post.id,
|
|
||||||
category: category
|
|
||||||
}).then(() => {
|
|
||||||
if (this.opts.cb) this.opts.cb('categorized', '%i18n:common.tags.mk-post-menu.categorized%');
|
|
||||||
this.$destroy();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
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.$destroy()
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-post-menu>
|
|
||||||
138
src/web/app/common/views/components/post-menu.vue
Normal file
138
src/web/app/common/views/components/post-menu.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
props: ['post', 'source', 'compact'],
|
||||||
|
mounted() {
|
||||||
|
const popover = this.$refs.popover as any;
|
||||||
|
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
|
||||||
|
anime({
|
||||||
|
targets: this.$refs.backdrop,
|
||||||
|
opacity: 1,
|
||||||
|
duration: 100,
|
||||||
|
easing: 'linear'
|
||||||
|
});
|
||||||
|
|
||||||
|
anime({
|
||||||
|
targets: this.$refs.popover,
|
||||||
|
opacity: 1,
|
||||||
|
scale: [0.5, 1],
|
||||||
|
duration: 500
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
pin() {
|
||||||
|
this.$root.$data.os.api('i/pin', {
|
||||||
|
post_id: this.post.id
|
||||||
|
}).then(() => {
|
||||||
|
this.$destroy();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
close() {
|
||||||
|
(this.$refs.backdrop as any).style.pointerEvents = 'none';
|
||||||
|
anime({
|
||||||
|
targets: this.$refs.backdrop,
|
||||||
|
opacity: 0,
|
||||||
|
duration: 200,
|
||||||
|
easing: 'linear'
|
||||||
|
});
|
||||||
|
|
||||||
|
(this.$refs.popover as any).style.pointerEvents = 'none';
|
||||||
|
anime({
|
||||||
|
targets: this.$refs.popover,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.5,
|
||||||
|
duration: 200,
|
||||||
|
easing: 'easeInBack',
|
||||||
|
complete: () => this.$destroy()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
$border-color = rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
|
.mk-post-menu
|
||||||
|
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
|
||||||
|
|
||||||
|
> button
|
||||||
|
display block
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="mk-reaction-picker">
|
||||||
<div class="backdrop" ref="backdrop" @click="close"></div>
|
<div class="backdrop" ref="backdrop" @click="close"></div>
|
||||||
<div class="popover" :class="{ compact }" ref="popover">
|
<div class="popover" :class="{ compact }" ref="popover">
|
||||||
<p v-if="!compact">{{ title }}</p>
|
<p v-if="!compact">{{ title }}</p>
|
||||||
|
|
@ -18,37 +18,36 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
import anime from 'animejs';
|
import anime from 'animejs';
|
||||||
import api from '../scripts/api';
|
|
||||||
import MkReactionIcon from './reaction-icon.vue';
|
|
||||||
|
|
||||||
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
|
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
|
||||||
|
|
||||||
export default {
|
export default Vue.extend({
|
||||||
components: {
|
|
||||||
MkReactionIcon
|
|
||||||
},
|
|
||||||
props: ['post', 'source', 'compact', 'cb'],
|
props: ['post', 'source', 'compact', 'cb'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: placeholder
|
title: placeholder
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
mounted() {
|
||||||
|
const popover = this.$refs.popover as any;
|
||||||
|
|
||||||
const rect = this.source.getBoundingClientRect();
|
const rect = this.source.getBoundingClientRect();
|
||||||
const width = this.$refs.popover.offsetWidth;
|
const width = popover.offsetWidth;
|
||||||
const height = this.$refs.popover.offsetHeight;
|
const height = popover.offsetHeight;
|
||||||
|
|
||||||
if (this.compact) {
|
if (this.compact) {
|
||||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||||
this.$refs.popover.style.left = (x - (width / 2)) + 'px';
|
popover.style.left = (x - (width / 2)) + 'px';
|
||||||
this.$refs.popover.style.top = (y - (height / 2)) + 'px';
|
popover.style.top = (y - (height / 2)) + 'px';
|
||||||
} else {
|
} else {
|
||||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||||
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
||||||
this.$refs.popover.style.left = (x - (width / 2)) + 'px';
|
popover.style.left = (x - (width / 2)) + 'px';
|
||||||
this.$refs.popover.style.top = y + 'px';
|
popover.style.top = y + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
|
|
@ -67,7 +66,7 @@
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
react(reaction) {
|
react(reaction) {
|
||||||
api('posts/reactions/create', {
|
this.$root.$data.os.api('posts/reactions/create', {
|
||||||
post_id: this.post.id,
|
post_id: this.post.id,
|
||||||
reaction: reaction
|
reaction: reaction
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
|
|
@ -82,7 +81,7 @@
|
||||||
this.title = placeholder;
|
this.title = placeholder;
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$refs.backdrop.style.pointerEvents = 'none';
|
(this.$refs.backdrop as any).style.pointerEvents = 'none';
|
||||||
anime({
|
anime({
|
||||||
targets: this.$refs.backdrop,
|
targets: this.$refs.backdrop,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
|
|
@ -90,7 +89,7 @@
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$refs.popover.style.pointerEvents = 'none';
|
(this.$refs.popover as any).style.pointerEvents = 'none';
|
||||||
anime({
|
anime({
|
||||||
targets: this.$refs.popover,
|
targets: this.$refs.popover,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
|
|
@ -101,14 +100,13 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
$border-color = rgba(27, 31, 35, 0.15)
|
$border-color = rgba(27, 31, 35, 0.15)
|
||||||
|
|
||||||
:scope
|
.mk-reaction-picker
|
||||||
display block
|
|
||||||
position initial
|
position initial
|
||||||
|
|
||||||
> .backdrop
|
> .backdrop
|
||||||
|
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
require('./contextmenu.tag');
|
|
||||||
require('./dialog.tag');
|
|
||||||
require('./window.tag');
|
|
||||||
require('./input-dialog.tag');
|
|
||||||
require('./follow-button.tag');
|
|
||||||
require('./drive/base-contextmenu.tag');
|
|
||||||
require('./drive/file-contextmenu.tag');
|
|
||||||
require('./drive/folder-contextmenu.tag');
|
|
||||||
require('./drive/file.tag');
|
|
||||||
require('./drive/folder.tag');
|
|
||||||
require('./drive/nav-folder.tag');
|
|
||||||
require('./drive/browser-window.tag');
|
|
||||||
require('./drive/browser.tag');
|
|
||||||
require('./select-file-from-drive-window.tag');
|
|
||||||
require('./select-folder-from-drive-window.tag');
|
|
||||||
require('./crop-window.tag');
|
|
||||||
require('./settings.tag');
|
|
||||||
require('./settings-window.tag');
|
|
||||||
require('./analog-clock.tag');
|
|
||||||
require('./notifications.tag');
|
|
||||||
require('./post-form-window.tag');
|
|
||||||
require('./post-form.tag');
|
|
||||||
require('./post-preview.tag');
|
|
||||||
require('./repost-form-window.tag');
|
|
||||||
require('./home-widgets/user-recommendation.tag');
|
|
||||||
require('./home-widgets/timeline.tag');
|
|
||||||
require('./home-widgets/mentions.tag');
|
|
||||||
require('./home-widgets/calendar.tag');
|
|
||||||
require('./home-widgets/donation.tag');
|
|
||||||
require('./home-widgets/tips.tag');
|
|
||||||
require('./home-widgets/nav.tag');
|
|
||||||
require('./home-widgets/profile.tag');
|
|
||||||
require('./home-widgets/notifications.tag');
|
|
||||||
require('./home-widgets/rss-reader.tag');
|
|
||||||
require('./home-widgets/photo-stream.tag');
|
|
||||||
require('./home-widgets/broadcast.tag');
|
|
||||||
require('./home-widgets/version.tag');
|
|
||||||
require('./home-widgets/recommended-polls.tag');
|
|
||||||
require('./home-widgets/trends.tag');
|
|
||||||
require('./home-widgets/activity.tag');
|
|
||||||
require('./home-widgets/server.tag');
|
|
||||||
require('./home-widgets/slideshow.tag');
|
|
||||||
require('./home-widgets/channel.tag');
|
|
||||||
require('./home-widgets/timemachine.tag');
|
|
||||||
require('./home-widgets/post-form.tag');
|
|
||||||
require('./home-widgets/access-log.tag');
|
|
||||||
require('./home-widgets/messaging.tag');
|
|
||||||
require('./timeline.tag');
|
|
||||||
require('./messaging/window.tag');
|
|
||||||
require('./messaging/room-window.tag');
|
|
||||||
require('./following-setuper.tag');
|
|
||||||
require('./ellipsis-icon.tag');
|
|
||||||
require('./ui.tag');
|
|
||||||
require('./home.tag');
|
|
||||||
require('./user-timeline.tag');
|
|
||||||
require('./user.tag');
|
|
||||||
require('./big-follow-button.tag');
|
|
||||||
require('./pages/entrance.tag');
|
|
||||||
require('./pages/home.tag');
|
|
||||||
require('./pages/home-customize.tag');
|
|
||||||
require('./pages/user.tag');
|
|
||||||
require('./pages/post.tag');
|
|
||||||
require('./pages/search.tag');
|
|
||||||
require('./pages/not-found.tag');
|
|
||||||
require('./pages/selectdrive.tag');
|
|
||||||
require('./pages/drive.tag');
|
|
||||||
require('./pages/messaging-room.tag');
|
|
||||||
require('./autocomplete-suggestion.tag');
|
|
||||||
require('./progress-dialog.tag');
|
|
||||||
require('./user-preview.tag');
|
|
||||||
require('./post-detail.tag');
|
|
||||||
require('./post-detail-sub.tag');
|
|
||||||
require('./search.tag');
|
|
||||||
require('./search-posts.tag');
|
|
||||||
require('./set-avatar-suggestion.tag');
|
|
||||||
require('./set-banner-suggestion.tag');
|
|
||||||
require('./repost-form.tag');
|
|
||||||
require('./sub-post-content.tag');
|
|
||||||
require('./images.tag');
|
|
||||||
require('./donation.tag');
|
|
||||||
require('./users-list.tag');
|
|
||||||
require('./user-following.tag');
|
|
||||||
require('./user-followers.tag');
|
|
||||||
require('./user-following-window.tag');
|
|
||||||
require('./user-followers-window.tag');
|
|
||||||
require('./list-user.tag');
|
|
||||||
require('./detailed-post-window.tag');
|
|
||||||
require('./widgets/calendar.tag');
|
|
||||||
require('./widgets/activity.tag');
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<mk-set-avatar-suggestion @click="set">
|
|
||||||
<p><b>アバターを設定</b>してみませんか？
|
|
||||||
<button @click="close">%fa:times%</button>
|
|
||||||
</p>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
cursor pointer
|
|
||||||
color #fff
|
|
||||||
background #a8cad0
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background #70abb5
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
max-width 1024px
|
|
||||||
|
|
||||||
> a
|
|
||||||
font-weight bold
|
|
||||||
color #fff
|
|
||||||
|
|
||||||
> button
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
padding 8px
|
|
||||||
color #fff
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import updateAvatar from '../scripts/update-avatar';
|
|
||||||
|
|
||||||
this.mixin('i');
|
|
||||||
|
|
||||||
this.set = () => {
|
|
||||||
updateAvatar(this.I);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.close = e => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
this.$destroy();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-set-avatar-suggestion>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<mk-set-banner-suggestion @click="set">
|
|
||||||
<p><b>バナーを設定</b>してみませんか？
|
|
||||||
<button @click="close">%fa:times%</button>
|
|
||||||
</p>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
cursor pointer
|
|
||||||
color #fff
|
|
||||||
background #a8cad0
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background #70abb5
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 8px
|
|
||||||
max-width 1024px
|
|
||||||
|
|
||||||
> a
|
|
||||||
font-weight bold
|
|
||||||
color #fff
|
|
||||||
|
|
||||||
> button
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
padding 8px
|
|
||||||
color #fff
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import updateBanner from '../scripts/update-banner';
|
|
||||||
|
|
||||||
this.mixin('i');
|
|
||||||
|
|
||||||
this.set = () => {
|
|
||||||
updateBanner(this.I);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.close = e => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
this.$destroy();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-set-banner-suggestion>
|
|
||||||
|
|
@ -2,8 +2,9 @@
|
||||||
<div class="mk-sub-post-content">
|
<div class="mk-sub-post-content">
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<a class="reply" v-if="post.reply_id">%fa:reply%</a>
|
<a class="reply" v-if="post.reply_id">%fa:reply%</a>
|
||||||
<span ref="text"></span>
|
<mk-post-html :ast="post.ast" :i="$root.$data.os.i"/>
|
||||||
<a class="quote" v-if="post.repost_id" :href="`/post:${post.repost_id}`">RP: ...</a>
|
<a class="quote" v-if="post.repost_id" :href="`/post:${post.repost_id}`">RP: ...</a>
|
||||||
|
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||||
</div>
|
</div>
|
||||||
<details v-if="post.media">
|
<details v-if="post.media">
|
||||||
<summary>({{ post.media.length }}つのメディア)</summary>
|
<summary>({{ post.media.length }}つのメディア)</summary>
|
||||||
|
|
@ -16,21 +17,21 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="ts">
|
||||||
import compile from '../../common/scripts/text-compiler';
|
import Vue from 'vue';
|
||||||
|
|
||||||
this.mixin('user-preview');
|
export default Vue.extend({
|
||||||
|
props: ['post'],
|
||||||
this.post = this.opts.post;
|
computed: {
|
||||||
|
urls(): string[] {
|
||||||
this.on('mount', () => {
|
if (this.post.ast) {
|
||||||
if (this.post.text) {
|
return this.post.ast
|
||||||
const tokens = this.post.ast;
|
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
|
||||||
this.$refs.text.innerHTML = compile(tokens, false);
|
.map(t => t.url);
|
||||||
|
} else {
|
||||||
Array.from(this.$refs.text.children).forEach(e => {
|
return null;
|
||||||
if (e.tagName == 'MK-URL') riot.mount(e);
|
}
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -76,6 +76,19 @@ import Vue from 'vue';
|
||||||
import dateStringify from '../../../common/scripts/date-stringify';
|
import dateStringify from '../../../common/scripts/date-stringify';
|
||||||
import MkPostFormWindow from './post-form-window.vue';
|
import MkPostFormWindow from './post-form-window.vue';
|
||||||
import MkRepostFormWindow from './repost-form-window.vue';
|
import MkRepostFormWindow from './repost-form-window.vue';
|
||||||
|
import MkPostMenu from '../../../common/views/components/post-menu.vue';
|
||||||
|
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
|
||||||
|
|
||||||
|
function focus(el, fn) {
|
||||||
|
const target = fn(el);
|
||||||
|
if (target) {
|
||||||
|
if (target.hasAttribute('tabindex')) {
|
||||||
|
target.focus();
|
||||||
|
} else {
|
||||||
|
focus(target, fn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: ['post'],
|
props: ['post'],
|
||||||
|
|
@ -171,42 +184,37 @@ export default Vue.extend({
|
||||||
post: this.p
|
post: this.p
|
||||||
}
|
}
|
||||||
}).$mount().$el);
|
}).$mount().$el);
|
||||||
}
|
},
|
||||||
}
|
react() {
|
||||||
});
|
document.body.appendChild(new MkReactionPicker({
|
||||||
</script>
|
propsData: {
|
||||||
|
|
||||||
<script lang="typescript">
|
|
||||||
|
|
||||||
|
|
||||||
this.react = () => {
|
|
||||||
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
|
|
||||||
source: this.$refs.reactButton,
|
|
||||||
post: this.p
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.menu = () => {
|
|
||||||
riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
|
|
||||||
source: this.$refs.menuButton,
|
source: this.$refs.menuButton,
|
||||||
post: this.p
|
post: this.p
|
||||||
});
|
}
|
||||||
};
|
}).$mount().$el);
|
||||||
|
},
|
||||||
this.onKeyDown = e => {
|
menu() {
|
||||||
|
document.body.appendChild(new MkPostMenu({
|
||||||
|
propsData: {
|
||||||
|
source: this.$refs.menuButton,
|
||||||
|
post: this.p
|
||||||
|
}
|
||||||
|
}).$mount().$el);
|
||||||
|
},
|
||||||
|
onKeydown(e) {
|
||||||
let shouldBeCancel = true;
|
let shouldBeCancel = true;
|
||||||
|
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case e.which == 38: // [↑]
|
case e.which == 38: // [↑]
|
||||||
case e.which == 74: // [j]
|
case e.which == 74: // [j]
|
||||||
case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
|
case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
|
||||||
focus(this.root, e => e.previousElementSibling);
|
focus(this.$el, e => e.previousElementSibling);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case e.which == 40: // [↓]
|
case e.which == 40: // [↓]
|
||||||
case e.which == 75: // [k]
|
case e.which == 75: // [k]
|
||||||
case e.which == 9: // [Tab]
|
case e.which == 9: // [Tab]
|
||||||
focus(this.root, e => e.nextElementSibling);
|
focus(this.$el, e => e.nextElementSibling);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case e.which == 81: // [q]
|
case e.which == 81: // [q]
|
||||||
|
|
@ -216,7 +224,7 @@ this.onKeyDown = e => {
|
||||||
|
|
||||||
case e.which == 70: // [f]
|
case e.which == 70: // [f]
|
||||||
case e.which == 76: // [l]
|
case e.which == 76: // [l]
|
||||||
this.like();
|
//this.like();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case e.which == 82: // [r]
|
case e.which == 82: // [r]
|
||||||
|
|
@ -228,24 +236,9 @@ this.onKeyDown = e => {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (shouldBeCancel) e.preventDefault();
|
if (shouldBeCancel) e.preventDefault();
|
||||||
};
|
}
|
||||||
|
}
|
||||||
this.onDblClick = () => {
|
|
||||||
riot.mount(document.body.appendChild(document.createElement('mk-detailed-post-window')), {
|
|
||||||
post: this.p.id
|
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
function focus(el, fn) {
|
|
||||||
const target = fn(el);
|
|
||||||
if (target) {
|
|
||||||
if (target.hasAttribute('tabindex')) {
|
|
||||||
target.focus();
|
|
||||||
} else {
|
|
||||||
focus(target, fn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue