restructure for sveltekit
This commit is contained in:
parent
7deea47857
commit
9ef27fd2a2
GPG key ID:
CF99829C92678188
73 changed files with 469 additions and 28 deletions
91
src/lib/ui/post/ActionButton.svelte
Normal file
91
src/lib/ui/post/ActionButton.svelte
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<script>
|
||||
import { play_sound } from '../../sound.js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let type = "action";
|
||||
export let label = "Action";
|
||||
export let title = label;
|
||||
export let count = 0;
|
||||
export let active = false;
|
||||
export let disabled = false;
|
||||
export let sound = "default";
|
||||
|
||||
function click() {
|
||||
if (disabled) return;
|
||||
play_sound(sound);
|
||||
dispatch('click');
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class={[
|
||||
type,
|
||||
active ? "active" : "",
|
||||
disabled ? "disabled" : "",
|
||||
].join(' ')}
|
||||
aria-label="{label}"
|
||||
title="{title}"
|
||||
on:click={click}>
|
||||
<span class="icon">
|
||||
<slot/>
|
||||
</span>
|
||||
{#if count}
|
||||
<span class="count">{count}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
height: 32px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: background-color .1s, color .1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: color-mix(in srgb, transparent, var(--accent) 50%);
|
||||
color: var(--bg-1000);
|
||||
}
|
||||
|
||||
button:not(.disabled):hover {
|
||||
background-color: var(--bg-600);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button:not(.disabled):active {
|
||||
background-color: var(--bg-1000);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button.disabled {
|
||||
opacity: .5;
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.count {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
button:hover .count {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
230
src/lib/ui/post/Body.svelte
Normal file
230
src/lib/ui/post/Body.svelte
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<script>
|
||||
export let post;
|
||||
|
||||
let rich_text;
|
||||
post.rich_text().then(res => {rich_text = res});
|
||||
let open_warned = false;
|
||||
</script>
|
||||
|
||||
<div class="post-body">
|
||||
{#if post.warning}
|
||||
<button class="post-warning" on:click|stopPropagation={() => { open_warned = !open_warned }}>
|
||||
<strong>
|
||||
{post.warning}
|
||||
<span class="warning-instructions">
|
||||
{#if !open_warned}
|
||||
(click to reveal)
|
||||
{:else}
|
||||
(click to hide)
|
||||
{/if}
|
||||
</span>
|
||||
</strong>
|
||||
</button>
|
||||
{/if}
|
||||
{#if !post.warning || open_warned}
|
||||
{#if post.text}
|
||||
<span class="post-text">{@html rich_text}</span>
|
||||
{/if}
|
||||
<div class="post-media-container" data-count={post.files.length}>
|
||||
{#each post.files as file}
|
||||
<div class="post-media {file.type}" on:click|stopPropagation={null}>
|
||||
{#if file.type === "image"}
|
||||
<a href={file.url} target="_blank">
|
||||
<img src={file.url} alt={file.description} title={file.description} height="200" loading="lazy" decoding="async">
|
||||
</a>
|
||||
{:else if file.type === "video"}
|
||||
<video controls height="200">
|
||||
<source src={file.url} alt={file.description} title={file.description} type={file.url.endsWith('.mp4') ? 'video/mp4' : 'video/webm'}>
|
||||
<p>{file.description}   <a href={file.url}>[link]</a></p>
|
||||
<!-- <media src={file.url} alt={file.description} loading="lazy" decoding="async"> -->
|
||||
</video>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#if post.boost && post.text}
|
||||
<p class="post-warning"><strong>this is quoting a post! quotes are not supported yet.</strong></p>
|
||||
<!-- TODO: quotes support -->
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.post-body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.post-warning {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 4px 8px;
|
||||
--warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%);
|
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
outline-color: var(--warn-bg);
|
||||
transition: outline .05s, box-shadow .05s;
|
||||
}
|
||||
|
||||
.post-warning:hover {
|
||||
outline: 1px solid var(--warn-bg);
|
||||
box-shadow: 0 0 8px var(--warn-bg);
|
||||
}
|
||||
|
||||
.post-warning .warning-instructions {
|
||||
font-weight: normal;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.post-text {
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.post-text :global(.emoji) {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
margin-top: -10px;
|
||||
height: 24px!important;
|
||||
}
|
||||
|
||||
.post-text :global(blockquote) {
|
||||
margin: .4em 0;
|
||||
padding: .1em 0 .1em 1em;
|
||||
border-left: 4px solid #8888;
|
||||
}
|
||||
|
||||
.post-text :global(blockquote span) {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.post-text :global(code) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.post-text :global(pre:has(code)) {
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
display: block;
|
||||
overflow-x: scroll;
|
||||
border-radius: 8px;
|
||||
background-color: #080808;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.post-text :global(pre code) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-text :global(a) {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.post-text :global(a.mention) {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
padding: 3px 6px;
|
||||
background: var(--bg-700);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-text :global(a.mention:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.post-text :global(a.hashtag) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.post-text :global(.mention-avatar) {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.post-media-container {
|
||||
max-height: 540px;
|
||||
margin: 16px 0 4px 0;
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
}
|
||||
|
||||
.post-media-container[data-count="1"] {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.post-media-container[data-count="2"] {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.post-media-container[data-count="3"] {
|
||||
grid-template-columns: 1fr .5fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
.post-media-container[data-count="4"] {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
.post-media {
|
||||
border-radius: 12px;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-media a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.post-media img,
|
||||
.post-media video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.post-media-container > :nth-child(1) {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.post-media-container[data-count="3"] > :nth-child(1) {
|
||||
grid-row: 1/3;
|
||||
}
|
||||
|
||||
.post-media-container > :nth-child(2) {
|
||||
grid-column: 2/2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
.post-media-container > :nth-child(3) {
|
||||
grid-column: 1/2;
|
||||
grid-row: 2/2;
|
||||
}
|
||||
|
||||
.post-media-container[data-count="3"] > :nth-child(3) {
|
||||
grid-column: 2/2;
|
||||
grid-row: 2/2;
|
||||
}
|
||||
|
||||
.post-media-container > :nth-child(4) {
|
||||
grid-column: 2/2;
|
||||
grid-row: 2/2;
|
||||
}
|
||||
</style>
|
||||
52
src/lib/ui/post/BoostContext.svelte
Normal file
52
src/lib/ui/post/BoostContext.svelte
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
import { parseText as parseEmojis } from '../../emoji.js';
|
||||
import { shorthand as short_time } from '../../time.js';
|
||||
|
||||
export let post;
|
||||
|
||||
let time_string = post.created_at.toLocaleString();
|
||||
</script>
|
||||
|
||||
<div class="post-context">
|
||||
<span class="post-context-icon">🔁</span>
|
||||
<span class="post-context-action">
|
||||
<a href={post.user.url} target="_blank">{@html parseEmojis(post.user.rich_name)}</a> boosted this post.
|
||||
</span>
|
||||
<span class="post-context-time">
|
||||
<time title="{time_string}">{short_time(post.created_at)}</time>
|
||||
{#if post.visibility !== "public"}
|
||||
<span class="post-visibility">({post.visibility})</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.post-context {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 58px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
opacity: .8;
|
||||
transition: opacity .1s;
|
||||
}
|
||||
|
||||
.post-context-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.post-context a,
|
||||
.post-context a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.post-context a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.post-context-time {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
182
src/lib/ui/post/Post.svelte
Normal file
182
src/lib/ui/post/Post.svelte
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<script>
|
||||
import BoostContext from './BoostContext.svelte';
|
||||
import ReplyContext from './ReplyContext.svelte';
|
||||
import PostHeader from './PostHeader.svelte';
|
||||
import Body from './Body.svelte';
|
||||
import ReactionButton from './ReactionButton.svelte';
|
||||
import ActionButton from './ActionButton.svelte';
|
||||
import { parseOne as parseEmoji } from '../../emoji.js';
|
||||
import { play_sound } from '../../sound.js';
|
||||
import { onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import { Client } from '../../client/client.js';
|
||||
import * as api from '../../client/api.js';
|
||||
|
||||
export let post_data;
|
||||
export let focused = false;
|
||||
|
||||
let post_context = undefined;
|
||||
let post = post_data;
|
||||
let is_boost = false;
|
||||
if (post_data.boost) {
|
||||
is_boost = true;
|
||||
post_context = post_data;
|
||||
post = post_data.boost;
|
||||
}
|
||||
|
||||
function gotoPost() {
|
||||
location = `/post/${post.id}`;
|
||||
}
|
||||
|
||||
async function toggleBoost() {
|
||||
let client = get(Client.get());
|
||||
let data;
|
||||
if (post.boosted)
|
||||
data = await client.unboostPost(post.id);
|
||||
else
|
||||
data = await client.boostPost(post.id);
|
||||
if (!data) {
|
||||
console.error(`Failed to boost post ${post.id}`);
|
||||
return;
|
||||
}
|
||||
post.boosted = data.boosted;
|
||||
post.boost_count = data.reblogs_count;
|
||||
}
|
||||
|
||||
async function toggleFavourite() {
|
||||
let client = get(Client.get());
|
||||
let data;
|
||||
if (post.favourited)
|
||||
data = await client.unfavouritePost(post.id);
|
||||
else
|
||||
data = await client.favouritePost(post.id);
|
||||
if (!data) {
|
||||
console.error(`Failed to favourite post ${post.id}`);
|
||||
return;
|
||||
}
|
||||
post.favourited = data.favourited;
|
||||
post.favourite_count = data.favourites_count;
|
||||
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
|
||||
}
|
||||
|
||||
async function toggleReaction(reaction) {
|
||||
if (reaction.name.includes('@')) return;
|
||||
let client = get(Client.get());
|
||||
|
||||
let data;
|
||||
if (reaction.me)
|
||||
data = await client.unreactPost(post.id, reaction.name);
|
||||
else
|
||||
data = await client.reactPost(post.id, reaction.name);
|
||||
if (!data) {
|
||||
console.error(`Failed to favourite post ${post.id}`);
|
||||
return;
|
||||
}
|
||||
post.favourited = data.favourited;
|
||||
post.favourite_count = data.favourites_count;
|
||||
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
|
||||
}
|
||||
|
||||
let el;
|
||||
onMount(() => {
|
||||
if (focused) {
|
||||
window.scrollTo(0, el.scrollHeight - 700);
|
||||
}
|
||||
});
|
||||
|
||||
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
||||
</script>
|
||||
|
||||
<div class="post-container" aria-label={aria_label} bind:this={el}>
|
||||
{#if post.reply}
|
||||
<ReplyContext post={post.reply} />
|
||||
{/if}
|
||||
{#if is_boost && !post_context.text}
|
||||
<BoostContext post={post_context} />
|
||||
{/if}
|
||||
<article class={"post" + (focused ? " focused" : "")} on:click={!focused ? gotoPost() : null}>
|
||||
<PostHeader post={post} />
|
||||
<Body post={post} />
|
||||
<footer class="post-footer">
|
||||
<div class="post-reactions" on:click|stopPropagation>
|
||||
{#each post.reactions as reaction}
|
||||
<ReactionButton
|
||||
type="reaction"
|
||||
on:click={() => toggleReaction(reaction)}
|
||||
bind:active={reaction.me}
|
||||
bind:count={reaction.count}
|
||||
disabled={reaction.name.includes('@')}
|
||||
title={reaction.name}
|
||||
label="">
|
||||
{#if reaction.url}
|
||||
<img src={reaction.url} class="emoji" height="20" title={reaction.name} alt={reaction.name}>
|
||||
{:else}
|
||||
{reaction.name}
|
||||
{/if}
|
||||
</ReactionButton>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="post-actions" on:click|stopPropagation>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
|
||||
<ActionButton type="react" label="React" disabled>😃</ActionButton>
|
||||
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
|
||||
<ActionButton type="more" label="More" disabled>🛠️</ActionButton>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.post-container {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
background-color: var(--bg-800);
|
||||
transition: background-color .1s;
|
||||
}
|
||||
|
||||
.post-container:hover {
|
||||
background-color: color-mix(in srgb, var(--bg-800), black 5%);
|
||||
}
|
||||
|
||||
.post-container:hover :global(.post-context) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.post:not(.focused) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post.focused {
|
||||
padding: 16px;
|
||||
margin: -16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid color-mix(in srgb, transparent, var(--accent) 20%);
|
||||
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 20%);
|
||||
}
|
||||
|
||||
:global(.post-reactions) {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
:global(.post-actions) {
|
||||
width: fit-content;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.post-container :global(.emoji) {
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
107
src/lib/ui/post/PostHeader.svelte
Normal file
107
src/lib/ui/post/PostHeader.svelte
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<script>
|
||||
import { parseText as parseEmojis } from '../../emoji.js';
|
||||
import { shorthand as short_time } from '../../time.js';
|
||||
|
||||
export let post;
|
||||
export let reply = undefined;
|
||||
|
||||
let time_string = post.created_at.toLocaleString();
|
||||
</script>
|
||||
|
||||
<div class={"post-header-container" + (reply ? " reply" : "")}>
|
||||
<a href={post.user.url} target="_blank" class="post-avatar-container">
|
||||
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
|
||||
</a>
|
||||
<header class="post-header">
|
||||
<div class="post-user-info">
|
||||
<a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
|
||||
<span class="username">{post.user.mention}</span>
|
||||
</div>
|
||||
<div class="post-info">
|
||||
<a href={post.url} target="_blank" class="created-at">
|
||||
<time title={time_string}>{short_time(post.created_at)}</time>
|
||||
{#if post.visibility !== "public"}
|
||||
<br>
|
||||
<span class="post-visibility">{post.visibility}</span>
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.post-header-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.post-header-container.reply {
|
||||
width: calc(100% + 60px);
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
.post-header-container a,
|
||||
.post-header-container a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.post-header-container a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.post-avatar-container {
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.post-avatar {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-user-info {
|
||||
margin-top: -2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.post-user-info a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-user-info .name :global(.emoji) {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.post-user-info .username {
|
||||
opacity: .8;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.post-info .created-at {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.post-visibility {
|
||||
font-size: .9em;
|
||||
opacity: .8;
|
||||
}
|
||||
</style>
|
||||
88
src/lib/ui/post/ReactionButton.svelte
Normal file
88
src/lib/ui/post/ReactionButton.svelte
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<script>
|
||||
import { play_sound } from '../../sound.js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let type = "react";
|
||||
export let label = "React";
|
||||
export let title = label;
|
||||
export let count = 0;
|
||||
export let active = false;
|
||||
export let disabled = false;
|
||||
export let sound = "default";
|
||||
|
||||
function click() {
|
||||
play_sound(sound);
|
||||
dispatch('click');
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class={[
|
||||
type,
|
||||
active ? "active" : "",
|
||||
disabled ? "disabled" : "",
|
||||
].join(' ')}
|
||||
aria-label="{label}"
|
||||
title="{title}"
|
||||
on:click={click}>
|
||||
<span class="icon">
|
||||
<slot/>
|
||||
</span>
|
||||
{#if count}
|
||||
<span class="count">{count}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
height: 32px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
font-size: 1em;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: background-color .1s, color .1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: color-mix(in srgb, transparent, var(--accent) 50%);
|
||||
color: var(--bg-1000);
|
||||
}
|
||||
|
||||
button:not(.disabled):hover {
|
||||
background-color: var(--bg-600);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button:not(.disabled):active {
|
||||
background-color: var(--bg-1000);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button.disabled {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.count {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
button:hover .count {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
146
src/lib/ui/post/ReplyContext.svelte
Normal file
146
src/lib/ui/post/ReplyContext.svelte
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<script>
|
||||
import PostHeader from './PostHeader.svelte';
|
||||
import Body from './Body.svelte';
|
||||
import ReactionButton from './ReactionButton.svelte';
|
||||
import ActionButton from './ActionButton.svelte';
|
||||
import Post from './Post.svelte';
|
||||
import { parseText as parseEmojis, parseOne as parseEmoji } from '../../emoji.js';
|
||||
import { shorthand as short_time } from '../../time.js';
|
||||
import { get } from 'svelte/store';
|
||||
import { Client } from '../../client/client.js';
|
||||
import * as api from '../../client/api.js';
|
||||
|
||||
export let post;
|
||||
let time_string = post.created_at.toLocaleString();
|
||||
|
||||
function gotoPost() {
|
||||
location = `/post/${post.id}`;
|
||||
}
|
||||
|
||||
async function toggleBoost() {
|
||||
let client = get(Client.get());
|
||||
let data;
|
||||
if (post.boosted)
|
||||
data = await client.unboostPost(post.id);
|
||||
else
|
||||
data = await client.boostPost(post.id);
|
||||
if (!data) {
|
||||
console.error(`Failed to boost post ${post.id}`);
|
||||
return;
|
||||
}
|
||||
post.boosted = data.boosted;
|
||||
post.boost_count = data.reblogs_count;
|
||||
}
|
||||
|
||||
async function toggleFavourite() {
|
||||
let client = get(Client.get());
|
||||
let data;
|
||||
if (post.favourited)
|
||||
data = await client.unfavouritePost(post.id);
|
||||
else
|
||||
data = await client.favouritePost(post.id);
|
||||
if (!data) {
|
||||
console.error(`Failed to favourite post ${post.id}`);
|
||||
return;
|
||||
}
|
||||
post.favourited = data.favourited;
|
||||
post.favourite_count = data.favourites_count;
|
||||
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
|
||||
}
|
||||
|
||||
async function toggleReaction(reaction) {
|
||||
if (reaction.name.includes('@')) return;
|
||||
let client = get(Client.get());
|
||||
|
||||
let data;
|
||||
if (reaction.me)
|
||||
data = await client.unreactPost(post.id, reaction.name);
|
||||
else
|
||||
data = await client.reactPost(post.id, reaction.name);
|
||||
if (!data) {
|
||||
console.error(`Failed to favourite post ${post.id}`);
|
||||
return;
|
||||
}
|
||||
post.favourited = data.favourited;
|
||||
post.favourite_count = data.favourites_count;
|
||||
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if post.reply}
|
||||
<svelte:self post={post.reply} />
|
||||
{/if}
|
||||
|
||||
<article class="post-reply" on:click={() => gotoPost()}>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="post-reply-main">
|
||||
<PostHeader post={post} reply />
|
||||
|
||||
<Body post={post} />
|
||||
|
||||
<footer class="post-footer">
|
||||
<div class="post-reactions" on:click|stopPropagation>
|
||||
{#each post.reactions as reaction}
|
||||
<ReactionButton
|
||||
type="reaction"
|
||||
on:click={() => toggleReaction(reaction)}
|
||||
bind:active={reaction.me}
|
||||
bind:count={reaction.count}
|
||||
disabled={reaction.name.includes('@')}
|
||||
title={reaction.name}
|
||||
label="">
|
||||
{#if reaction.url}
|
||||
<img src={reaction.url} class="emoji" height="20" title={reaction.name} alt={reaction.name}>
|
||||
{:else}
|
||||
{reaction.name}
|
||||
{/if}
|
||||
</ReactionButton>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="post-actions" on:click|stopPropagation>
|
||||
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
|
||||
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
|
||||
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
|
||||
<ActionButton type="react" label="React" disabled>😃</ActionButton>
|
||||
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
|
||||
<ActionButton type="more" label="More" disabled>🛠️</ActionButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.post-reply {
|
||||
padding-bottom: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--text);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.post-avatar-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: relative;
|
||||
top: 24px;
|
||||
left: 25px;
|
||||
border-right: 2px solid var(--bg-700);
|
||||
}
|
||||
|
||||
.post-reply-main {
|
||||
width: 100%;
|
||||
padding-left: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:global(.post-body) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:global(.post-body p) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue