natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
packages/client/src/components/MkTimeline.vue
View File

@ -9,16 +9,26 @@
<template #icon></template> <template #icon></template>
</I18n> </I18n>
</MkInfo> </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 <XNotes
ref="tlComponent" ref="tlComponent"
:no-gap="!$store.state.showGapBetweenNotesInTimeline" :no-gap="!$store.state.showGapBetweenNotesInTimeline"
:pagination="pagination" :pagination="pagination"
@queue="emit('queue', $event)" @queue="(x) => queue = x"
/> />
</template> </template>
<script lang="ts" setup> <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 XNotes from "@/components/MkNotes.vue";
import MkInfo from "@/components/MkInfo.vue"; import MkInfo from "@/components/MkInfo.vue";
import * as os from "@/os"; import * as os from "@/os";
@ -27,6 +37,7 @@ import * as sound from "@/scripts/sound";
import { $i } from "@/account"; import { $i } from "@/account";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { scroll } from "@/scripts/scroll";
const props = defineProps<{ const props = defineProps<{
src: string; src: string;
@ -36,6 +47,8 @@ const props = defineProps<{
sound?: boolean; sound?: boolean;
}>(); }>();
let queue = $ref(0);
const emit = defineEmits<{ const emit = defineEmits<{
(ev: "note"): void; (ev: "note"): void;
(ev: "queue", count: number): void; (ev: "queue", count: number): void;
@ -210,6 +223,9 @@ function closeHint() {
break; break;
} }
} }
function scrollTop() {
scroll(tlComponent, { top: 0, behavior: 'smooth' })
}
const pagination = { const pagination = {
endpoint: endpoint, endpoint: endpoint,
@ -229,3 +245,72 @@ const timetravel = (date?: Date) => {
}; };
*/ */
</script> </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>

32
packages/client/src/pages/antenna-timeline.vue
View File

@ -9,11 +9,6 @@
v-size="{ min: [800] }" v-size="{ min: [800] }"
class="tqmomfks" class="tqmomfks"
> >
<div v-if="queue > 0" class="new">
<button class="_buttonPrimary" @click="top()">
{{ i18n.ts.newNoteRecived }}
</button>
</div>
<div class="tl _block"> <div class="tl _block">
<XTimeline <XTimeline
ref="tlEl" ref="tlEl"
@ -22,7 +17,6 @@
src="antenna" src="antenna"
:antenna="antennaId" :antenna="antennaId"
:sound="true" :sound="true"
@queue="queueUpdated"
/> />
</div> </div>
</div> </div>
@ -32,7 +26,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, watch } from "vue"; import { computed, inject, watch } from "vue";
import XTimeline from "@/components/MkTimeline.vue"; import XTimeline from "@/components/MkTimeline.vue";
import { scroll } from "@/scripts/scroll";
import * as os from "@/os"; import * as os from "@/os";
import { useRouter } from "@/router"; import { useRouter } from "@/router";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
@ -45,21 +38,12 @@ const props = defineProps<{
}>(); }>();
let antenna = $ref(null); let antenna = $ref(null);
let queue = $ref(0);
let rootEl = $ref<HTMLElement>(); let rootEl = $ref<HTMLElement>();
let tlEl = $ref<InstanceType<typeof XTimeline>>(); let tlEl = $ref<InstanceType<typeof XTimeline>>();
const keymap = $computed(() => ({ const keymap = $computed(() => ({
t: focus, t: focus,
})); }));
function queueUpdated(q) {
queue = q;
}
function top() {
scroll(rootEl, { top: 0 });
}
async function timetravel() { async function timetravel() {
const { canceled, result: date } = await os.inputDate({ const { canceled, result: date } = await os.inputDate({
title: i18n.ts.date, title: i18n.ts.date,
@ -142,21 +126,7 @@ definePageMetadata(
<style lang="scss" scoped> <style lang="scss" scoped>
.tqmomfks { .tqmomfks {
padding: var(--margin); 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 { > .tl {
background: none; background: none;
border-radius: var(--radius); border-radius: var(--radius);

100
packages/client/src/pages/timeline.vue
View File

@ -15,17 +15,6 @@
class="post-form _block" class="post-form _block"
fixed 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"> <!-- <div v-if="!isMobile" class="tl _block">
<XTimeline <XTimeline
ref="tl" ref="tl"
@ -65,7 +54,6 @@
class="tl" class="tl"
:src="src" :src="src"
:sound="true" :sound="true"
@queue="queueUpdated"
/> />
</swiper-slide> </swiper-slide>
</swiper> </swiper>
@ -76,13 +64,12 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch, ref, onMounted } from "vue"; import { computed, ref, onMounted } from "vue";
import { Virtual } from "swiper"; import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import XTutorial from "@/components/MkTutorialDialog.vue"; import XTutorial from "@/components/MkTutorialDialog.vue";
import XTimeline from "@/components/MkTimeline.vue"; import XTimeline from "@/components/MkTimeline.vue";
import XPostForm from "@/components/MkPostForm.vue"; import XPostForm from "@/components/MkPostForm.vue";
import { scroll } from "@/scripts/scroll";
import * as os from "@/os"; import * as os from "@/os";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -137,7 +124,6 @@ window.addEventListener("resize", () => {
const tlComponent = $ref<InstanceType<typeof XTimeline>>(); const tlComponent = $ref<InstanceType<typeof XTimeline>>();
const rootEl = $ref<HTMLElement>(); const rootEl = $ref<HTMLElement>();
let queue = $ref(0);
const src = $computed({ const src = $computed({
get: () => defaultStore.reactiveState.tl.value.src, get: () => defaultStore.reactiveState.tl.value.src,
set: (x) => { 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"); const lists = os.api("users/lists/list");
async function chooseList(ev: MouseEvent) { async function chooseList(ev: MouseEvent) {
await lists.then((res) => { await lists.then((res) => {
@ -332,84 +308,10 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes slideUp {
to {
transform: translateY(-100%);
opacity: 0;
}
}
.cmuxhskf { .cmuxhskf {
--swiper-theme-color: var(--accent); --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 { > .tl {
background: none; background: none;
border-radius: var(--radius);
} }
} }
</style> </style>

31
packages/client/src/pages/user-list-timeline.vue
View File

@ -4,11 +4,6 @@
><MkPageHeader :actions="headerActions" :tabs="headerTabs" ><MkPageHeader :actions="headerActions" :tabs="headerTabs"
/></template> /></template>
<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj"> <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"> <div class="tl _block">
<XTimeline <XTimeline
ref="tlEl" ref="tlEl"
@ -17,7 +12,6 @@
src="list" src="list"
:list="listId" :list="listId"
:sound="true" :sound="true"
@queue="queueUpdated"
/> />
</div> </div>
</div> </div>
@ -27,7 +21,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch, inject } from "vue"; import { computed, watch, inject } from "vue";
import XTimeline from "@/components/MkTimeline.vue"; import XTimeline from "@/components/MkTimeline.vue";
import { scroll } from "@/scripts/scroll";
import * as os from "@/os"; import * as os from "@/os";
import { useRouter } from "@/router"; import { useRouter } from "@/router";
import { definePageMetadata } from "@/scripts/page-metadata"; import { definePageMetadata } from "@/scripts/page-metadata";
@ -40,7 +33,6 @@ const props = defineProps<{
}>(); }>();
let list = $ref(null); let list = $ref(null);
let queue = $ref(0);
let tlEl = $ref<InstanceType<typeof XTimeline>>(); let tlEl = $ref<InstanceType<typeof XTimeline>>();
let rootEl = $ref<HTMLElement>(); let rootEl = $ref<HTMLElement>();
@ -54,14 +46,6 @@ watch(
{ immediate: true } { immediate: true }
); );
function queueUpdated(q) {
queue = q;
}
function top() {
scroll(rootEl, { top: 0 });
}
function settings() { function settings() {
router.push(`/my/lists/${props.listId}`); router.push(`/my/lists/${props.listId}`);
} }
@ -109,21 +93,6 @@ definePageMetadata(
<style lang="scss" scoped> <style lang="scss" scoped>
.eqqrhokj { .eqqrhokj {
padding: var(--margin); 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 { > .tl {
background: none; background: none;
border-radius: var(--radius); border-radius: var(--radius);