bring back Show More component
This commit is contained in:
Freeplay
parent
f759476a4a
commit
f34c224a10
4 changed files with 75 additions and 63 deletions
|
|
@ -85,7 +85,6 @@ defineExpose({
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
> span {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
|
|
@ -94,8 +93,7 @@ defineExpose({
|
|||
border-radius: 999px;
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
&:hover {
|
||||
> span {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
|
|
|
|||
68
packages/client/src/components/MkShowMoreButton.vue
Normal file
68
packages/client/src/components/MkShowMoreButton.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<button
|
||||
v-if="modelValue"
|
||||
class="fade _button"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<span>{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="!modelValue"
|
||||
class="showLess _button"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<span>{{ i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: "update:modelValue", v: boolean): void;
|
||||
}>();
|
||||
|
||||
const toggle = () => {
|
||||
emit("update:modelValue", !props.modelValue);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fade {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
> span {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
padding: 0.4em 1em;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
&:hover {
|
||||
> span {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
.showLess {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
position: sticky;
|
||||
bottom: var(--stickyBottom);
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 0 7px 7px var(--bg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -115,15 +115,8 @@
|
|||
v-on:focus="cwButton?.focus()"
|
||||
></div>
|
||||
</div>
|
||||
<XShowMoreButton
|
||||
v-if="isLong"
|
||||
v-model="collapsed"
|
||||
></XShowMoreButton>
|
||||
<XCwButton
|
||||
v-if="note.cw && showContent"
|
||||
v-model="showContent"
|
||||
:note="note"
|
||||
/>
|
||||
<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
|
||||
<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -136,6 +129,7 @@ import XNoteSimple from "@/components/MkNoteSimple.vue";
|
|||
import XMediaList from "@/components/MkMediaList.vue";
|
||||
import XPoll from "@/components/MkPoll.vue";
|
||||
import MkUrlPreview from "@/components/MkUrlPreview.vue";
|
||||
import XShowMoreButton from "./MkShowMoreButton.vue";
|
||||
import XCwButton from "@/components/MkCwButton.vue";
|
||||
import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
|
||||
import { i18n } from "@/i18n";
|
||||
|
|
@ -160,6 +154,7 @@ const isLong =
|
|||
props.note.text != null &&
|
||||
(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
|
||||
const collapsed = $ref(props.note.cw == null && isLong);
|
||||
|
||||
const urls = props.note.text
|
||||
? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
|
||||
: null;
|
||||
|
|
@ -287,43 +282,6 @@ function focusFooter(ev) {
|
|||
top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.fade) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
> span {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
padding: 0.4em 1em;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
&:hover {
|
||||
> span {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.showLess) {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
position: sticky;
|
||||
bottom: var(--stickyBottom);
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 0 7px 7px var(--bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,20 +58,7 @@
|
|||
:custom-emojis="user.emojis"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
v-if="isLong && collapsed"
|
||||
class="fade _button"
|
||||
@click.stop="collapsed = false"
|
||||
>
|
||||
<span>{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="isLong && !collapsed"
|
||||
class="showLess _button"
|
||||
@click.stop="collapsed = true"
|
||||
>
|
||||
<span>{{ i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
|
||||
<div v-if="user.fields.length > 0" class="fields">
|
||||
<dl
|
||||
v-for="(field, i) in user.fields"
|
||||
|
|
@ -131,6 +118,7 @@ import * as Acct from "calckey-js/built/acct";
|
|||
import type * as misskey from "calckey-js";
|
||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||
import { userPage } from "@/filters/user";
|
||||
import XShowMoreButton from "./MkShowMoreButton.vue";
|
||||
import * as os from "@/os";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
|
|
|
|||
Loading…
Reference in a new issue