diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue index 53e232e521..e77698dea9 100644 --- a/src/client/app/mobile/views/components/notes.vue +++ b/src/client/app/mobile/views/components/notes.vue @@ -1,7 +1,5 @@ <template> <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="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() { document.addEventListener('visibilitychange', this.onVisibilitychange, false); window.addEventListener('scroll', this.onScroll); @@ -238,13 +246,6 @@ root(isDark) [data-fa] margin-right 8px - > .newer-indicator - position -webkit-sticky - position sticky - z-index 100 - height 3px - background $theme-color - > .init padding 64px 0 text-align center diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue index 509463333d..a49462b159 100644 --- a/src/client/app/mobile/views/components/ui.header.vue +++ b/src/client/app/mobile/views/components/ui.header.vue @@ -13,6 +13,7 @@ <slot name="func"></slot> </div> </div> + <div class="indicator" v-show="$store.state.indicate"></div> </div> </template> @@ -156,6 +157,10 @@ root(isDark) &, * user-select none + > .indicator + height 3px + background $theme-color + > .main color rgba(#fff, 0.9) diff --git a/src/client/app/store.ts b/src/client/app/store.ts index e9cd952bde..1f1189054d 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -24,10 +24,15 @@ export default (os: MiOS) => new Vuex.Store({ }], state: { + indicate: false, uiHeaderHeight: 0 }, mutations: { + indicate(state, x) { + state.indicate = x; + }, + setUiHeaderHeight(state, height) { state.uiHeaderHeight = height; }