This commit is contained in:
syuilo 2018-06-08 05:04:21 +09:00
parent e9d6677840
commit e9f79d66e5
2 changed files with 24 additions and 10 deletions

View File

@ -1,7 +1,8 @@
<template> <template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, isActive, isStacked }"> <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, isActive, isStacked }">
<header :class="{ indicate }" @click="toggleActive"> <header :class="{ indicate: count > 0 }" @click="toggleActive">
<slot name="header"></slot> <slot name="header"></slot>
<span class="count" v-if="count > 0">({{ count }})</span>
<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button> <button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
</header> </header>
<div ref="body" v-show="isActive"> <div ref="body" v-show="isActive">
@ -46,16 +47,24 @@ export default Vue.extend({
data() { data() {
return { return {
indicate: false, count: 0,
isActive: this._isActive isActive: this._isActive
}; };
}, },
watch: {
isActive(v) {
if (v && this.isScrollTop()) {
this.$emit('top');
}
}
},
provide() { provide() {
return { return {
column: this, column: this,
isScrollTop: this.isScrollTop, isScrollTop: this.isScrollTop,
indicate: v => this.indicate = v count: v => this.count = v
}; };
}, },
@ -75,7 +84,7 @@ export default Vue.extend({
}, },
isScrollTop() { isScrollTop() {
return this.$refs.body.scrollTop == 0; return this.isActive && this.$refs.body.scrollTop == 0;
}, },
onScroll() { onScroll() {
@ -205,6 +214,10 @@ root(isDark)
[data-fa] [data-fa]
margin-right 8px margin-right 8px
> .count
margin-left 4px
opacity 0.5
> button > button
position absolute position absolute
top 0 top 0

View File

@ -28,8 +28,6 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { url } from '../../../config';
import getNoteSummary from '../../../../../renderers/get-note-summary';
import XNote from './deck.note.vue'; import XNote from './deck.note.vue';
@ -40,7 +38,7 @@ export default Vue.extend({
XNote XNote
}, },
inject: ['column', 'isScrollTop', 'indicate'], inject: ['column', 'isScrollTop', 'count'],
props: { props: {
more: { more: {
@ -55,7 +53,6 @@ export default Vue.extend({
requestInitPromise: null as () => Promise<any[]>, requestInitPromise: null as () => Promise<any[]>,
notes: [], notes: [],
queue: [], queue: [],
unreadCount: 0,
fetching: true, fetching: true,
moreFetching: false moreFetching: false
}; };
@ -73,6 +70,12 @@ export default Vue.extend({
} }
}, },
watch: {
queue(q) {
this.count(q.length);
}
},
created() { created() {
this.column.$on('top', this.onTop); this.column.$on('top', this.onTop);
this.column.$on('bottom', this.onBottom); this.column.$on('bottom', this.onBottom);
@ -141,7 +144,6 @@ export default Vue.extend({
} }
} else { } else {
this.queue.push(note); this.queue.push(note);
this.indicate(true);
} }
}, },
@ -156,7 +158,6 @@ export default Vue.extend({
releaseQueue() { releaseQueue() {
this.queue.forEach(n => this.prepend(n, true)); this.queue.forEach(n => this.prepend(n, true));
this.queue = []; this.queue = [];
this.indicate(false);
}, },
async loadMore() { async loadMore() {