blisstown/campfire
3
0
Fork 0
Code Issues 19 Pull requests Projects Releases Packages Wiki Activity Actions

click-drag no longer opens posts

Browse source
This commit is contained in:
ari melody 2024-06-30 21:08:14 +01:00
parent 7715e747a2
commit 73afcf6123
Signed by: ari
GPG key ID: CF99829C92678188
8 changed files with 23 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/img/campfire-logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

11
src/lib/ui/Navigation.svelte
View file

@ -188,12 +188,17 @@
border-radius: 8px; border-radius: 8px;
} }
:global(.app-logo) { .app-logo {
max-width: 80%; max-width: 70%;
max-height: 80%; max-height: 70%;
margin: auto; margin: auto;
} }
.app-logo :global(svg) {
width: 100%;
height: 100%;
}
#nav-items { #nav-items {
margin-bottom: auto; margin-bottom: auto;
padding: 16px; padding: 16px;

2
src/lib/ui/post/ActionBar.svelte
View file

@ -65,7 +65,7 @@
} }
</script> </script>
<div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation> <div class="post-actions" aria-label="Post actions" on:mouseup|stopPropagation on:keydown|stopPropagation>
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled> <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
<ReplyIcon/> <ReplyIcon/>
</ActionButton> </ActionButton>

4
src/lib/ui/post/Body.svelte
View file

@ -8,7 +8,7 @@
<div class="post-body"> <div class="post-body">
{#if post.warning} {#if post.warning}
<button class="post-warning" on:click|stopPropagation={() => { open_warned = !open_warned }}> <button class="post-warning" on:click|stopPropagation={() => { open_warned = !open_warned }} on:mouseup|stopPropagation>
<strong> <strong>
{post.warning} {post.warning}
<span class="warning-instructions"> <span class="warning-instructions">
@ -28,7 +28,7 @@
{#if post.files && post.files.length > 0} {#if post.files && post.files.length > 0}
<div class="post-media-container" data-count={post.files.length}> <div class="post-media-container" data-count={post.files.length}>
{#each post.files as file} {#each post.files as file}
<div class="post-media {file.type}" on:click|stopPropagation={null}> <div class="post-media {file.type}" on:click|stopPropagation on:mouseup|stopPropagation>
{#if file.type === "image"} {#if file.type === "image"}
<a href={file.url} target="_blank"> <a href={file.url} target="_blank">
<img src={file.url} alt={file.description} title={file.description} height="200" loading="lazy" decoding="async"> <img src={file.url} alt={file.description} title={file.description} height="200" loading="lazy" decoding="async">

7
src/lib/ui/post/Post.svelte
View file

@ -22,9 +22,11 @@
post = post_data.boost; post = post_data.boost;
} }
let mouse_pos = { top: 0, left: 0 };
function gotoPost() { function gotoPost() {
if (focused) return; if (focused) return;
if (event.key && event.key !== "Enter") return; if (event && event.key && event.key !== "Enter") return;
console.log(`/post/${post.id}`); console.log(`/post/${post.id}`);
goto(`/post/${post.id}`); goto(`/post/${post.id}`);
} }
@ -50,7 +52,8 @@
class={"post" + (focused ? " focused" : "")} class={"post" + (focused ? " focused" : "")}
aria-label={aria_label} aria-label={aria_label}
bind:this={el} bind:this={el}
on:click={gotoPost} on:mousedown={e => {mouse_pos.left = e.pageX; mouse_pos.top = e.pageY; console.log(mouse_pos)}}
on:mouseup={e => {if (e.pageX == mouse_pos.left && e.pageY == mouse_pos.top) gotoPost()}}
on:keydown={gotoPost}> on:keydown={gotoPost}>
<PostHeader post={post} /> <PostHeader post={post} />
<Body post={post} /> <Body post={post} />

2
src/lib/ui/post/PostHeader.svelte
View file

@ -8,7 +8,7 @@
let time_string = post.created_at.toLocaleString(); let time_string = post.created_at.toLocaleString();
</script> </script>
<div class={"post-header-container" + (reply ? " reply" : "")}> <div class={"post-header-container" + (reply ? " reply" : "")} on:mouseup|stopPropagation>
<a href={post.user.url} target="_blank" class="post-avatar-container"> <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"> <img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a> </a>

2
src/lib/ui/post/ReactionBar.svelte
View file

@ -5,7 +5,7 @@
export let post; export let post;
</script> </script>
<div class="post-reactions" aria-label="Reactions" on:click|stopPropagation on:keydown|stopPropagation> <div class="post-reactions" aria-label="Reactions" on:mouseup|stopPropagation on:keydown|stopPropagation>
{#each post.reactions as reaction} {#each post.reactions as reaction}
<ReactionButton <ReactionButton
type="reaction" type="reaction"

56
src/lib/ui/post/ReplyContext.svelte
View file

@ -16,60 +16,13 @@
let time_string = post.created_at.toLocaleString(); let time_string = post.created_at.toLocaleString();
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at; let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
let mouse_pos = { top: 0, left: 0 };
function gotoPost() { function gotoPost() {
if (event.key && event.key !== "Enter") return; if (event && event.key && event.key !== "Enter") return;
console.log(`/post/${post.id}`); console.log(`/post/${post.id}`);
goto(`/post/${post.id}`); goto(`/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> </script>
{#if post.reply} {#if post.reply}
@ -79,7 +32,8 @@
<article <article
class="post-reply" class="post-reply"
aria-label={aria_label} aria-label={aria_label}
on:click={gotoPost} on:mousedown={e => {mouse_pos.left = e.pageX; mouse_pos.top = e.pageY; console.log(mouse_pos)}}
on:mouseup={e => {if (e.pageX == mouse_pos.left && e.pageY == mouse_pos.top) gotoPost()}}
on:keydown={gotoPost}> on:keydown={gotoPost}>
<div class="line"></div> <div class="line"></div>