From 1b4bd8081ff1167fd087290ac6964b6c9ff8ff31 Mon Sep 17 00:00:00 2001 From: Xyphyn Date: Sat, 23 Sep 2023 14:54:58 -0700 Subject: [PATCH] feat: add 'cozy' post style --- package.json | 2 +- src/lib/components/lemmy/ViewSelect.svelte | 3 +- .../lemmy/comment/CommentItem.svelte | 4 +- src/lib/components/lemmy/post/Post.svelte | 21 +- src/lib/components/lemmy/post/PostFeed.svelte | 3 +- src/lib/components/ui/SectionTitle.svelte | 3 +- src/lib/settings.ts | 6 +- src/routes/settings/+page.svelte | 444 +++++++++--------- 8 files changed, 259 insertions(+), 227 deletions(-) diff --git a/package.json b/package.json index 9ffefe6f..b9ba74a9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "photon-lemmy", - "version": "1.9.4", + "version": "1.10.0", "private": true, "scripts": { "dev": "vite dev", diff --git a/src/lib/components/lemmy/ViewSelect.svelte b/src/lib/components/lemmy/ViewSelect.svelte index 12b47444..619e2513 100644 --- a/src/lib/components/lemmy/ViewSelect.svelte +++ b/src/lib/components/lemmy/ViewSelect.svelte @@ -9,7 +9,8 @@ View - + + diff --git a/src/lib/components/lemmy/comment/CommentItem.svelte b/src/lib/components/lemmy/comment/CommentItem.svelte index b58b4293..b414200d 100644 --- a/src/lib/components/lemmy/comment/CommentItem.svelte +++ b/src/lib/components/lemmy/comment/CommentItem.svelte @@ -11,9 +11,9 @@ diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte index 0ba11a06..effe13af 100644 --- a/src/lib/components/lemmy/post/Post.svelte +++ b/src/lib/components/lemmy/post/Post.svelte @@ -15,7 +15,7 @@ export let post: PostView export let actions: boolean = true export let hideCommunity = false - export let view: 'card' | 'list' | 'compact' = $userSettings.view + export let view = $userSettings.view let loaded = false @@ -24,13 +24,15 @@ color="distinct" padding="none" class="relative max-w-full min-w-0 w-full group - {view == 'list' || view == 'compact' - ? '!bg-transparent !border-0' - : 'p-5'} {view == 'list' ? 'py-5' : view == 'compact' ? 'py-4' : ''}" + {view != 'card' ? '!bg-transparent !border-0' : 'p-5'} {view == 'compact' + ? 'py-4' + : view == 'list' + ? 'py-5' + : 'py-5'}" > - {#if view == 'list'} + {#if view == 'list' || view == 'cozy'}
{#if isImage(post.post.url)} - {#if view == 'card'} + {#if view == 'card' || view == 'cozy'} {#if posts.length == 0}
diff --git a/src/lib/components/ui/SectionTitle.svelte b/src/lib/components/ui/SectionTitle.svelte index be4d5de8..d890cd16 100644 --- a/src/lib/components/ui/SectionTitle.svelte +++ b/src/lib/components/ui/SectionTitle.svelte @@ -1,5 +1,6 @@ diff --git a/src/lib/settings.ts b/src/lib/settings.ts index 1fc4ef64..a8ed82ed 100644 --- a/src/lib/settings.ts +++ b/src/lib/settings.ts @@ -5,6 +5,8 @@ import { env } from '$env/dynamic/public' console.log('Using the following default settings from the environment:') console.log(env) +export type View = 'card' | 'cozy' | 'list' | 'compact' + export const SSR_ENABLED = env.PUBLIC_SSR_ENABLED?.toLowerCase() == 'true' // Returns a proper boolean or null. Used to set boolean values from env var strings while allowing nullish coalescing to set default values. @@ -29,7 +31,7 @@ interface Settings { // deprecated showCompactPosts: boolean - view: 'card' | 'list' | 'compact' + view: View defaultSort: { sort: SortType @@ -97,7 +99,7 @@ export const defaultSettings: Settings = { modlogCardView: toBool(env.PUBLIC_MODLOG_CARD_VIEW) ?? undefined, debugInfo: false, expandImages: true, - view: 'list', + view: 'cozy', font: 'system', leftAlign: false, hidePhoton: toBool(env.PUBLIC_REMOVE_CREDIT) ?? false, diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 300c6351..9834caa5 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -42,230 +42,254 @@ -
- UI - - Post style - -

- {#if $userSettings.view == 'list'} - Show posts in a list, with post bodies and compact images. - {:else if $userSettings.view == 'compact'} - Show posts in a list, without post bodies and with tighter spacing. - {:else if $userSettings.view == 'card'} - Show posts in cards, with large images. - {/if} -

- - - Random placeholders - - Show a random placeholder for forms for comments, posts, etc. - - - {$userSettings.randomPlaceholders ? 'Enabled' : 'Disabled'} - - +
+ +
+ UI + + Post style + +

+ {#if $userSettings.view == 'list'} + Show posts in a list, with post bodies and compact images. + {:else if $userSettings.view == 'cozy'} + Card view, but without a background. + {:else if $userSettings.view == 'compact'} + Show posts in a list, without post bodies and with tighter spacing. + {:else if $userSettings.view == 'card'} + Show posts in cards, with large images. + {/if} +

+ + + Random placeholders + + Show a random placeholder for forms for comments, posts, etc. + + + {$userSettings.randomPlaceholders ? 'Enabled' : 'Disabled'} + + - - Default sort - The default sort to use for feeds. -
-
- -
-
- -
-
- + + + Location + + + + + +
+
+ +
+
+ + + + + +
-
- - - Use display name - - Show a user's display name instead of their account username. - - - - {$userSettings.displayNames ? 'Enabled' : 'Disabled'} - - + + + Use display name + + Show a user's display name instead of their account username. + - Posts - - Fade read posts - Fade the title of posts you've already read. - - {$userSettings.markReadPosts ? 'Enabled' : 'Disabled'} - - - - NSFW blur - - Blur images and remove post bodies of NSFW content. - - - {$userSettings.nsfwBlur ? 'Enabled' : 'Disabled'} - - - - Expand Images - - Clicking on an image brings you to an expanded view rather than sending - you to the post page. - - - {$userSettings.expandImages ? 'Enabled' : 'Disabled'} - - - - Hide Posts - -

Hide certain types of posts.

-

- Looking to hide read posts? That was moved to your - profile settings. - -

- -
- - Deleted + + {$userSettings.displayNames ? 'Enabled' : 'Disabled'} - - Removed + + + Posts + + Fade read posts + + Fade the title of posts you've already read. + + + {$userSettings.markReadPosts ? 'Enabled' : 'Disabled'} -
- - - Thumbnail Alignment - - Where thumbnails should be on the post in list/compact view. - - - - {#if LINKED_INSTANCE_URL} + - - Remove original project's credit because you don't like the creator as a - person + NSFW blur + + Blur images and remove post bodies of NSFW content. + + {$userSettings.nsfwBlur ? 'Enabled' : 'Disabled'} + + + + Expand Images - Disable the "Powered by Photon" in the top left corner, thus decreasing - visibility of the original project and limiting discovery. The creator - of Photon intentionally made it unobtrusive, but if you want to remove - it because a 120x16 div bothers you so much, you have that option. + Clicking on an image brings you to an expanded view rather than sending + you to the post page. - - {$userSettings.hidePhoton ? 'Enabled' : 'Disabled'} + + {$userSettings.expandImages ? 'Enabled' : 'Disabled'} - {/if} + + Hide Posts + +

Hide certain types of posts.

+

+ Looking to hide read posts? That was moved to your + profile settings. + +

+ +
+ + Deleted + + + Removed + +
+ + + Thumbnail Alignment + + Where thumbnails should be on the post in list/compact view. + + + + {#if LINKED_INSTANCE_URL} + + + Remove original project's credit because you don't like the creator as + a person + + + Disable the "Powered by Photon" in the top left corner, thus + decreasing visibility of the original project and limiting discovery. + The creator of Photon intentionally made it unobtrusive, but if you + want to remove it because a 120x16 div bothers you so much, you have + that option. + + + {$userSettings.hidePhoton ? 'Enabled' : 'Disabled'} + + + {/if} - Instances - - Show instances - Show items' instances. - - Xylight - @example.com - -
- Users - - Comments - - - Communities - -
- + Instances + + Show instances + Show items' instances. + + Xylight + @example.com + +
+ + Users + + + Comments + + + Communities + +
+ - Moderation - - Removal reply preset - -

The preset to use for "Reply reason" in a submission removal.

-
    -
  • Syntax:
    • -
  • - {'{{reason}}'} - : The provided reason -
    • -
  • - {'{{post}}'} - : The title of the post -
    • -
  • - {'{{community}}'} - : The community the submission was removed in. -
    • -
  • - {'{{username}}'} - : The username of the creator of the submission. -
    • -
- - - removalTemplate(input, { - postTitle: '', - communityLink: '[!community@example.com]()', - reason: '', - username: '@Bob', - })} - /> - + Moderation + + Removal reply preset + +

The preset to use for "Reply reason" in a submission removal.

+
    +
  • Syntax:
    • +
  • + {'{{reason}}'} + : The provided reason +
    • +
  • + {'{{post}}'} + : The title of the post +
    • +
  • + {'{{community}}'} + : The community the submission was removed in. +
    • +
  • + {'{{username}}'} + : The username of the creator of the submission. +
    • +
+ + + removalTemplate(input, { + postTitle: '', + communityLink: '[!community@example.com]()', + reason: '', + username: '@Bob', + })} + /> + - Other - - Font - What font Photon should use. - - - - Debug Info - - Show an option to show debug information. (in posts and such) - + Other + + Font + What font Photon should use. + + + + Debug Info + + Show an option to show debug information. (in posts and such) + - - {$userSettings.debugInfo ? 'Enabled' : 'Disabled'} - - + + {$userSettings.debugInfo ? 'Enabled' : 'Disabled'} + + +