Add quote editor and quote previews

This commit is contained in:
silverpill 2022-10-01 19:35:14 +00:00
parent 8310ae0ff8
commit e836255215
4 changed files with 85 additions and 2 deletions

View file

@ -160,6 +160,7 @@ export interface PostData {
in_reply_to_id: string | null;
visibility: string;
mentions: string[];
links: string[];
attachments: Attachment[];
}
@ -175,6 +176,7 @@ export async function createPost(
in_reply_to_id: postData.in_reply_to_id,
visibility: postData.visibility,
mentions: postData.mentions,
links: postData.links,
}
const response = await http(url, {
method: "POST",

View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg data-name="Layer 1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><path class="cls-1" d="M0,0H24V24H0Z"/><path class="cls-2" d="M9.7,10.85H5.1A1.09,1.09,0,0,1,4,9.7V6.25A1.09,1.09,0,0,1,5.1,5.1H8.55A1.09,1.09,0,0,1,9.7,6.25v6.9c0,3.1-1.49,4.94-4.6,5.75"/><path class="cls-2" d="M20,10.85h-4.6A1.09,1.09,0,0,1,14.3,9.7V6.25A1.09,1.09,0,0,1,15.45,5.1H18.9A1.09,1.09,0,0,1,20,6.25v6.9c0,3.1-1.49,4.94-4.6,5.75"/></svg>

After

Width:  |  Height:  |  Size: 604 B

View file

@ -65,6 +65,20 @@
<a v-else :href="attachment.url">{{ attachment.url }}</a>
</template>
</div>
<a
v-if="post.quote"
class="post-quote"
:href="post.quote.uri"
@click="navigateTo($event, post.quote.id)"
>
<div class="quote-header">
<avatar :profile="post.quote.account"></avatar>
<span class="actor-address">
@{{ getActorAddress(post.quote.account) }}
</span>
</div>
<div class="quote-content" v-html="post.quote.content"></div>
</a>
<div class="post-footer">
<router-link
v-if="!inThread"
@ -684,6 +698,42 @@ async function onMintToken() {
}
}
.post-quote {
border: 1px solid $separator-color;
border-radius: $block-border-radius;
color: inherit;
display: block;
margin: 0 $block-inner-padding $block-inner-padding;
&:hover {
color: inherit;
}
}
.quote-header {
align-items: center;
color: $secondary-text-color;
display: flex;
flex-direction: row;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding $block-inner-padding 0;
.avatar {
height: $icon-size;
width: $icon-size;
}
.actor-address {
overflow: hidden;
text-overflow: ellipsis;
user-select: all;
}
}
.quote-content {
padding: $block-inner-padding;
}
.post-attachment {
padding: 0 $block-inner-padding $block-inner-padding;
word-wrap: break-word;

View file

@ -32,6 +32,12 @@
<img :src="attachment.url">
</div>
</div>
<input
v-if="quoteInputVisible"
id="quote"
v-model="quote"
placeholder="Enter post ID"
>
<div class="toolbar">
<button
type="button"
@ -49,6 +55,15 @@
@change="onAttachmentUpload($event)"
>
</button>
<button
v-if="canAddQuote()"
type="button"
class="icon"
title="Add quote"
@click="quoteInputVisible = !quoteInputVisible"
>
<img :src="require('@/assets/tabler/quote.svg')">
</button>
<div
class="dropdown-menu-wrapper"
v-click-away="hideVisibilityMenu"
@ -143,8 +158,10 @@ const attachmentUploadInputRef = $ref<HTMLInputElement | null>(null)
let content = $ref("")
let attachments = $ref<Attachment[]>([])
let quote = $ref<string | null>(null)
let visibility = $ref(Visibility.Public)
const quoteInputVisible = $ref(false)
let visibilityMenuVisible = $ref(false)
let isLoading = $ref(false)
let errorMessage = $ref<string | null>(null)
@ -203,6 +220,10 @@ function removeAttachment(index: number) {
attachments.splice(index, 1)
}
function canAddQuote(): boolean {
return props.inReplyTo === null && visibility === Visibility.Public
}
function toggleVisibilityMenu() {
visibilityMenuVisible = !visibilityMenuVisible
}
@ -229,6 +250,7 @@ async function publish() {
in_reply_to_id: props.inReplyTo ? props.inReplyTo.id : null,
visibility: visibility,
mentions: [],
links: quote ? [quote] : [],
attachments: attachments,
}
isLoading = true
@ -246,8 +268,9 @@ async function publish() {
// Refresh editor
errorMessage = null
isLoading = false
attachments = []
content = ""
attachments = []
quote = null
if (postFormContentRef) {
await nextTick()
triggerResize(postFormContentRef)
@ -285,7 +308,7 @@ $line-height: 1.5;
border-radius: $block-border-radius;
}
textarea {
#content {
border-radius: $block-border-radius $block-border-radius 0 0;
height: 100px;
line-height: $line-height;
@ -320,6 +343,12 @@ textarea {
}
}
#quote {
border-top: 1px solid $separator-color;
line-height: $line-height;
padding: calc($block-inner-padding / 1.5) $block-inner-padding;
}
.toolbar {
@include post-icon;