This commit is contained in:
syuilo 2018-05-17 23:53:55 +09:00
parent 89a58dc596
commit 4ad51672c1
3 changed files with 20 additions and 9 deletions

View File

@ -1,7 +1,5 @@
<template> <template>
<div class="mk-notes"> <div class="mk-notes">
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
<slot name="head"></slot> <slot name="head"></slot>
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot> <slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
@ -71,6 +69,16 @@ export default Vue.extend({
} }
}, },
watch: {
queue(x) {
if (x.length > 0) {
this.$store.commit('indicate', true);
} else {
this.$store.commit('indicate', false);
}
}
},
mounted() { mounted() {
document.addEventListener('visibilitychange', this.onVisibilitychange, false); document.addEventListener('visibilitychange', this.onVisibilitychange, false);
window.addEventListener('scroll', this.onScroll); window.addEventListener('scroll', this.onScroll);
@ -238,13 +246,6 @@ root(isDark)
[data-fa] [data-fa]
margin-right 8px margin-right 8px
> .newer-indicator
position -webkit-sticky
position sticky
z-index 100
height 3px
background $theme-color
> .init > .init
padding 64px 0 padding 64px 0
text-align center text-align center

View File

@ -13,6 +13,7 @@
<slot name="func"></slot> <slot name="func"></slot>
</div> </div>
</div> </div>
<div class="indicator" v-show="$store.state.indicate"></div>
</div> </div>
</template> </template>
@ -156,6 +157,10 @@ root(isDark)
&, * &, *
user-select none user-select none
> .indicator
height 3px
background $theme-color
> .main > .main
color rgba(#fff, 0.9) color rgba(#fff, 0.9)

View File

@ -24,10 +24,15 @@ export default (os: MiOS) => new Vuex.Store({
}], }],
state: { state: {
indicate: false,
uiHeaderHeight: 0 uiHeaderHeight: 0
}, },
mutations: { mutations: {
indicate(state, x) {
state.indicate = x;
},
setUiHeaderHeight(state, height) { setUiHeaderHeight(state, height) {
state.uiHeaderHeight = height; state.uiHeaderHeight = height;
} }