Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/mew content display #171

Merged
merged 8 commits into from
Aug 8, 2023
2 changes: 1 addition & 1 deletion ui/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div
v-else
class="bg-base w-full flex justify-center items-center relative font-content cursor-default"
class="w-full flex justify-center items-center relative font-content cursor-default"
>
<profiles-context :store="profilesStore">
<HoloLogin v-if="IS_HOLO_HOSTED">
Expand Down
3 changes: 1 addition & 2 deletions ui/src/components/BaseLinkProfilePopup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,8 @@
>
<div class="flex justify-center">
<div
class="w-full max-w-screen-md flex justify-start items-center sm:space-x-10 px-2 sm:px-8"
class="w-full max-w-screen-md flex justify-start items-center sm:space-x-10"
>
<div class="block w-0 sm:w-14 h-14 flex-none"></div>
<div
class="bg-neutral/5 backdrop-blur-md rounded-3xl flex-initial"
style="-webkit-backdrop-filter: blur(10px)"
Expand Down
67 changes: 46 additions & 21 deletions ui/src/components/BaseMewContent.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
<template>
<div class="text-content text-left">
<template v-for="(contentPart, index) of partsDisplayed" :key="index">
<BaseMewContentTag
v-if="contentPart.tagType !== undefined"
:content-part="contentPart"
/>
<div v-else class="inline-block whitespace-pre-line pr-1">
{{ contentPart.text }}
</div>
</template>

<span v-if="contentRequiresTruncation">
<span v-if="truncate">...</span>
<a @click.stop="truncate = !truncate">
Show {{ truncate ? "More" : "Less" }}
</a>
</span>
<div class="w-full relative">
<div class="w-full text-content text-left break-words">
<template v-for="(contentPart, index) of partsDisplayed" :key="index">
<BaseMewContentTag
v-if="contentPart.tagType !== undefined"
:content-part="contentPart"
/>
<span v-else class="whitespace-pre-line">
{{ contentPart.text }}
</span>
</template>
<span v-if="!disableTruncate && truncate && contentRequiresTruncation"
>...</span
>
</div>
<div
v-if="!disableTruncate && contentRequiresTruncation && truncate"
class="w-full h-8 bg-gradient-to-b from-base-100/0 to-base-100 absolute bottom-0 text-center flex flex-col justify-end items-end"
>
<button class="btn btn-xs btn-ghost" @click.stop="truncate = false">
Show More
</button>
</div>
</div>
</template>

Expand All @@ -25,9 +31,15 @@ import { splitMewTextIntoContentParts } from "@/utils/mewText";
import { computed, ref } from "vue";
import BaseMewContentTag from "./BaseMewContentTag.vue";

const props = defineProps<{
mew: Mew;
}>();
const props = withDefaults(
defineProps<{
mew: Mew;
disableTruncate?: boolean;
}>(),
{
disableTruncate: false,
}
);

const TRUNCATED_MEW_LENGTH = 300;

Expand Down Expand Up @@ -56,6 +68,17 @@ const partsTruncated = computed(() => {
totalTextLength += part.text.length;
}

// Break very long word at limit (leaving room for ellipses and 'show more' button)
else if (
part.tagType === undefined &&
part.text.length > TRUNCATED_MEW_LENGTH
) {
partsSlice.push({
...part,
text: part.text.slice(0, TRUNCATED_MEW_LENGTH - 15),
});
}

// Split plain text into words, append words unless limit reached
else if (part.tagType === undefined) {
const words = part.text.split(" ");
Expand All @@ -81,6 +104,8 @@ const partsTruncated = computed(() => {
});

const partsDisplayed = computed(() => {
return truncate.value ? partsTruncated.value : parts.value;
return !props.disableTruncate && truncate.value
? partsTruncated.value
: parts.value;
});
</script>
8 changes: 4 additions & 4 deletions ui/src/components/BaseMewContentTag.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
v-if="contentPart.href && contentPart.tagType === MewTagType.RawUrl"
target="_blank"
:href="contentPart.href"
class="text-primary pr-1 hover:underline"
class="text-primary hover:underline"
@click.stop="(e) => openLink(e, contentPart.href as string)"
>
{{ contentPart.text }}
Expand All @@ -18,7 +18,7 @@
}"
:href="contentPart.href"
target="_blank"
class="text-primary pr-1 hover:underline"
class="text-primary hover:underline"
@click.stop="(e) => openLink(e, contentPart.href as string)"
>
{{ contentPart.text }}
Expand All @@ -27,7 +27,7 @@
v-else-if="contentPart.route && contentPart.tagType === MewTagType.Mention"
:agentPubKey="decodeHashFromBase64((contentPart.route as RouteLocationNamedRaw).params?.agentPubKey as LocationQueryValueRaw as string)"
:to="contentPart.route"
class="pr-1"
class="hover:underline"
popup-class="mt-0"
>
{{ contentPart.text }}
Expand All @@ -39,7 +39,7 @@
contentPart.tagType === MewTagType.Hashtag)
"
:to="contentPart.route"
class="text-primary text-bold pr-1"
class="text-primary hover:underline text-bold pr-1"
@click.stop
>
{{ contentPart.text }}
Expand Down
29 changes: 22 additions & 7 deletions ui/src/components/BaseMewListItem.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="w-full flex flex-col justify-start items-start cursor-pointer"
class="flex flex-col justify-start items-start cursor-pointer"
@click.passive="navigateToYarn(feedMew.action_hash)"
>
<div
Expand Down Expand Up @@ -47,10 +47,10 @@
</div>
</div>

<div class="flex justify-start items-start w-full space-x-4 p-4">
<div class="w-full flex justify-start items-start space-x-4 p-4">
<BaseAgentProfileLinkAvatar :agentPubKey="feedMew.action.author" />

<div class="w-full">
<div class="min-w-0 flex-1 w-full break-words">
<div class="w-full flex justify-between items-center">
<RouterLink
:to="{
Expand Down Expand Up @@ -78,6 +78,7 @@
(!isDeleted || showIfDeleted) && isMewmew && feedMew.original_mew
"
:mew="(feedMew.original_mew.mew as Mew)"
:disable-truncate="disableTruncateContent"
/>

<div
Expand All @@ -86,20 +87,24 @@
"
class="w-full"
>
<BaseMewContent :mew="(feedMew.mew as Mew)" />
<BaseMewContent
:mew="(feedMew.mew as Mew)"
:disable-truncate="disableTruncateContent"
/>

<div class="flex justify-start my-4">
<div class="flex items-start">
<IconFormatQuoteOpen class="text-base-300 text-2xl" />
</div>
<div class="flex-1 bg-base-200 p-2 rounded-md">
<div class="min-w-0 flex-1 bg-base-200 p-2 rounded-md">
<BaseEmbedMew :embed-mew="feedMew.original_mew" />
</div>
<div class="flex justify-end items-end">
<IconFormatQuoteClose class="text-base-300 text-2xl" />
</div>
</div>
</div>

<div v-else-if="isDeleted" class="w-full">
<a
v-if="!showIfDeleted"
Expand All @@ -108,10 +113,18 @@
>
Show Content
</a>
<BaseMewContent v-if="showIfDeleted" :mew="(feedMew.mew as Mew)" />
<BaseMewContent
v-if="showIfDeleted"
:mew="(feedMew.mew as Mew)"
:disable-truncate="disableTruncateContent"
/>
</div>

<BaseMewContent v-else :mew="(feedMew.mew as Mew)" />
<BaseMewContent
v-else
:mew="(feedMew.mew as Mew)"
:disable-truncate="disableTruncateContent"
/>
</div>

<div class="flex justify-between">
Expand Down Expand Up @@ -337,12 +350,14 @@ const props = withDefaults(
enableYarnLink?: boolean;
showIfDeletedDefault?: boolean;
showButtons?: boolean;
disableTruncateContent?: boolean;
}>(),
{
showYarnLink: true,
enableYarnLink: true,
showIfDeletedDefault: false,
showButtons: true,
disableTruncateContent: false,
}
);
const emit = defineEmits([
Expand Down
6 changes: 5 additions & 1 deletion ui/src/components/CreateMewDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,11 @@
"
class="bg-base-200 rounded-3xl mb-4 mx-4"
>
<BaseMewListItem :feed-mew="originalMew" :show-buttons="false" />
<BaseMewListItem
:feed-mew="originalMew"
:show-buttons="false"
:disable-truncate-content="true"
/>
</div>

<CreateMewInput :mew-type="mewType" @mew-created="onCreateMew" />
Expand Down
2 changes: 1 addition & 1 deletion ui/src/layouts/MainLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
class="sticky mt-16 top-8 left-0 hidden sm:block w-14 flex flex-col justify-start items-start space-y-4"
@click-search="showSearchDialog = true"
/>
<div class="flex-1 w-full h-full pb-32 sm:pb-16" style="width: inherit">
<div class="flex-1 w-full h-full pb-32 sm:pb-16 overflow-hidden relative">
<RouterView :key="`${route.fullPath}-${forceReloadRouterViewKey}`" />
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions ui/src/pages/MewYarn.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<BaseMewListItem
v-if="mew"
:feed-mew="mew"
:disable-truncate-content="true"
class="bg-base-200 rounded-3xl mb-8 !cursor-default"
@mew-deleted="refetchMewAndRepliesPage(0)"
@mew-licked="refetchMewAndRepliesPage(0)"
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/MewsFeed.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"
@load-next="fetchNextPageInfiniteScroll"
>
<div>
<div class="w-full">
<template v-for="(page, i) in data.pages" :key="i">
<template v-for="(mew, j) of page" :key="j">
<BaseMewListItem
Expand Down
Loading