fix/refactor: move new posts button to MkTimeline
This commit is contained in:
freeplay
parent
ba6502a45b
commit
aead731e63
4 changed files with 89 additions and 163 deletions
|
|
@ -9,16 +9,26 @@
|
|||
<template #icon></template>
|
||||
</I18n>
|
||||
</MkInfo>
|
||||
<div v-if="queue > 0" class="new">
|
||||
<button
|
||||
class="_buttonPrimary _shadow"
|
||||
@click="scrollTop"
|
||||
:class="{ instant: !$store.state.animation }"
|
||||
>
|
||||
{{ i18n.ts.newNoteRecived }}
|
||||
<i class="ph-arrow-up ph-bold"></i>
|
||||
</button>
|
||||
</div>
|
||||
<XNotes
|
||||
ref="tlComponent"
|
||||
:no-gap="!$store.state.showGapBetweenNotesInTimeline"
|
||||
:pagination="pagination"
|
||||
@queue="emit('queue', $event)"
|
||||
@queue="(x) => queue = x"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, provide, onUnmounted } from "vue";
|
||||
import { ref, watch, computed, provide, onUnmounted } from "vue";
|
||||
import XNotes from "@/components/MkNotes.vue";
|
||||
import MkInfo from "@/components/MkInfo.vue";
|
||||
import * as os from "@/os";
|
||||
|
|
@ -27,6 +37,7 @@ import * as sound from "@/scripts/sound";
|
|||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
import { defaultStore } from "@/store";
|
||||
import { scroll } from "@/scripts/scroll";
|
||||
|
||||
const props = defineProps<{
|
||||
src: string;
|
||||
|
|
@ -36,6 +47,8 @@ const props = defineProps<{
|
|||
sound?: boolean;
|
||||
}>();
|
||||
|
||||
let queue = $ref(0);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: "note"): void;
|
||||
(ev: "queue", count: number): void;
|
||||
|
|
@ -210,6 +223,9 @@ function closeHint() {
|
|||
break;
|
||||
}
|
||||
}
|
||||
function scrollTop() {
|
||||
scroll(tlComponent, { top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
endpoint: endpoint,
|
||||
|
|
@ -229,3 +245,72 @@ const timetravel = (date?: Date) => {
|
|||
};
|
||||
*/
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@keyframes slideUp {
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.new {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
top: calc(var(--stickyTop, 0px) - 60px);
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
height: 60px;
|
||||
pointer-events: none;
|
||||
margin: auto;
|
||||
margin-top: -60px;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 24px 24px -20px var(--accentedBg);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -2px 0;
|
||||
border: 2px solid var(--accentDarken);
|
||||
mask: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 40% 60%,
|
||||
transparent
|
||||
);
|
||||
-webkit-mask: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 40% 60%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
> button {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
margin-inline: auto;
|
||||
border-radius: 2em;
|
||||
padding: 0.5em 1.2em;
|
||||
background: var(--accentedBg);
|
||||
border: 0;
|
||||
color: var(--accent);
|
||||
overflow: hidden;
|
||||
pointer-events: all;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
animation: reset 0.4s forwards cubic-bezier(0, 0.4, 0, 1.1),
|
||||
slideUp 1s 5s forwards cubic-bezier(1, 0, 1, 1);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--bg);
|
||||
z-index: -1;
|
||||
}
|
||||
i {
|
||||
margin-left: 0.7em;
|
||||
border-left: 1px solid var(--accentedBg);
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,6 @@
|
|||
v-size="{ min: [800] }"
|
||||
class="tqmomfks"
|
||||
>
|
||||
<div v-if="queue > 0" class="new">
|
||||
<button class="_buttonPrimary" @click="top()">
|
||||
{{ i18n.ts.newNoteRecived }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="tl _block">
|
||||
<XTimeline
|
||||
ref="tlEl"
|
||||
|
|
@ -22,7 +17,6 @@
|
|||
src="antenna"
|
||||
:antenna="antennaId"
|
||||
:sound="true"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,7 +26,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, inject, watch } from "vue";
|
||||
import XTimeline from "@/components/MkTimeline.vue";
|
||||
import { scroll } from "@/scripts/scroll";
|
||||
import * as os from "@/os";
|
||||
import { useRouter } from "@/router";
|
||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||
|
|
@ -45,21 +38,12 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
let antenna = $ref(null);
|
||||
let queue = $ref(0);
|
||||
let rootEl = $ref<HTMLElement>();
|
||||
let tlEl = $ref<InstanceType<typeof XTimeline>>();
|
||||
const keymap = $computed(() => ({
|
||||
t: focus,
|
||||
}));
|
||||
|
||||
function queueUpdated(q) {
|
||||
queue = q;
|
||||
}
|
||||
|
||||
function top() {
|
||||
scroll(rootEl, { top: 0 });
|
||||
}
|
||||
|
||||
async function timetravel() {
|
||||
const { canceled, result: date } = await os.inputDate({
|
||||
title: i18n.ts.date,
|
||||
|
|
@ -142,21 +126,7 @@ definePageMetadata(
|
|||
<style lang="scss" scoped>
|
||||
.tqmomfks {
|
||||
padding: var(--margin);
|
||||
|
||||
> .new {
|
||||
position: sticky;
|
||||
top: calc(var(--stickyTop, 0px) + 16px);
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
|
||||
> button {
|
||||
display: block;
|
||||
margin: var(--margin) auto 0 auto;
|
||||
padding: 8px 16px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .tl {
|
||||
background: none;
|
||||
border-radius: var(--radius);
|
||||
|
|
|
|||
|
|
@ -15,17 +15,6 @@
|
|||
class="post-form _block"
|
||||
fixed
|
||||
/>
|
||||
|
||||
<div v-if="queue > 0" class="new">
|
||||
<button
|
||||
class="_buttonPrimary _shadow"
|
||||
@click="top()"
|
||||
:class="{ instant: !$store.state.animation }"
|
||||
>
|
||||
{{ i18n.ts.newNoteRecived }}
|
||||
<i class="ph-arrow-up ph-bold"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div v-if="!isMobile" class="tl _block">
|
||||
<XTimeline
|
||||
ref="tl"
|
||||
|
|
@ -65,7 +54,6 @@
|
|||
class="tl"
|
||||
:src="src"
|
||||
:sound="true"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
|
@ -76,13 +64,12 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, watch, ref, onMounted } from "vue";
|
||||
import { computed, ref, onMounted } from "vue";
|
||||
import { Virtual } from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import XTutorial from "@/components/MkTutorialDialog.vue";
|
||||
import XTimeline from "@/components/MkTimeline.vue";
|
||||
import XPostForm from "@/components/MkPostForm.vue";
|
||||
import { scroll } from "@/scripts/scroll";
|
||||
import * as os from "@/os";
|
||||
import { defaultStore } from "@/store";
|
||||
import { i18n } from "@/i18n";
|
||||
|
|
@ -137,7 +124,6 @@ window.addEventListener("resize", () => {
|
|||
const tlComponent = $ref<InstanceType<typeof XTimeline>>();
|
||||
const rootEl = $ref<HTMLElement>();
|
||||
|
||||
let queue = $ref(0);
|
||||
const src = $computed({
|
||||
get: () => defaultStore.reactiveState.tl.value.src,
|
||||
set: (x) => {
|
||||
|
|
@ -146,16 +132,6 @@ const src = $computed({
|
|||
},
|
||||
});
|
||||
|
||||
watch($$(src), () => (queue = 0));
|
||||
|
||||
function queueUpdated(q: number): void {
|
||||
queue = q;
|
||||
}
|
||||
|
||||
function top(): void {
|
||||
scroll(rootEl, { top: 0 });
|
||||
}
|
||||
|
||||
const lists = os.api("users/lists/list");
|
||||
async function chooseList(ev: MouseEvent) {
|
||||
await lists.then((res) => {
|
||||
|
|
@ -332,84 +308,10 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes slideUp {
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.cmuxhskf {
|
||||
--swiper-theme-color: var(--accent);
|
||||
|
||||
> .new {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
top: calc(var(--stickyTop, 0px) - 60px);
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
height: 60px;
|
||||
pointer-events: none;
|
||||
margin: auto;
|
||||
margin-bottom: -60px;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 24px 24px -20px var(--accentedBg);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid var(--accentDarken);
|
||||
mask: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 40% 60%,
|
||||
transparent
|
||||
);
|
||||
-webkit-mask: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
black 40% 60%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
> button {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
margin-inline: auto;
|
||||
border-radius: 2em;
|
||||
padding: 0.5em 1.2em;
|
||||
background: var(--accentedBg);
|
||||
border: 0;
|
||||
color: var(--accent);
|
||||
overflow: hidden;
|
||||
pointer-events: all;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
animation: reset 0.4s forwards cubic-bezier(0, 0.4, 0, 1.1),
|
||||
slideUp 1s 5s forwards cubic-bezier(1, 0, 1, 1);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--bg);
|
||||
z-index: -1;
|
||||
}
|
||||
i {
|
||||
margin-left: 0.7em;
|
||||
border-left: 1px solid var(--accentedBg);
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .post-form {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
> .tl {
|
||||
background: none;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@
|
|||
><MkPageHeader :actions="headerActions" :tabs="headerTabs"
|
||||
/></template>
|
||||
<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
|
||||
<div v-if="queue > 0" class="new">
|
||||
<button class="_buttonPrimary" @click="top()">
|
||||
{{ i18n.ts.newNoteRecived }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="tl _block">
|
||||
<XTimeline
|
||||
ref="tlEl"
|
||||
|
|
@ -17,7 +12,6 @@
|
|||
src="list"
|
||||
:list="listId"
|
||||
:sound="true"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,7 +21,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, watch, inject } from "vue";
|
||||
import XTimeline from "@/components/MkTimeline.vue";
|
||||
import { scroll } from "@/scripts/scroll";
|
||||
import * as os from "@/os";
|
||||
import { useRouter } from "@/router";
|
||||
import { definePageMetadata } from "@/scripts/page-metadata";
|
||||
|
|
@ -40,7 +33,6 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
let list = $ref(null);
|
||||
let queue = $ref(0);
|
||||
let tlEl = $ref<InstanceType<typeof XTimeline>>();
|
||||
let rootEl = $ref<HTMLElement>();
|
||||
|
||||
|
|
@ -54,14 +46,6 @@ watch(
|
|||
{ immediate: true }
|
||||
);
|
||||
|
||||
function queueUpdated(q) {
|
||||
queue = q;
|
||||
}
|
||||
|
||||
function top() {
|
||||
scroll(rootEl, { top: 0 });
|
||||
}
|
||||
|
||||
function settings() {
|
||||
router.push(`/my/lists/${props.listId}`);
|
||||
}
|
||||
|
|
@ -109,21 +93,6 @@ definePageMetadata(
|
|||
<style lang="scss" scoped>
|
||||
.eqqrhokj {
|
||||
padding: var(--margin);
|
||||
|
||||
> .new {
|
||||
position: sticky;
|
||||
top: calc(var(--stickyTop, 0px) + 16px);
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
|
||||
> button {
|
||||
display: block;
|
||||
margin: var(--margin) auto 0 auto;
|
||||
padding: 8px 16px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
> .tl {
|
||||
background: none;
|
||||
border-radius: var(--radius);
|
||||
|
|
|
|||
Loading…
Reference in a new issue