fix/refactor: move new posts button to MkTimeline

This commit is contained in:
freeplay 2023-07-01 21:35:05 -04:00
parent ba6502a45b
commit aead731e63
4 changed files with 89 additions and 163 deletions

View File

@ -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>

View File

@ -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);

View File

@ -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>

View File

@ -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);