Add quote editor and quote previews
This commit is contained in:
parent
8310ae0ff8
commit
e836255215
4 changed files with 85 additions and 2 deletions
|
@ -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",
|
||||
|
|
2
src/assets/tabler/quote.svg
Normal file
2
src/assets/tabler/quote.svg
Normal 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 |
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue