From: Domenic Horner <domenic@tgxn.net> Date: Mon, 7 Aug 2023 17:48:55 +0000 (+0800) Subject: Frontend Settings - "Blur NSFW" and "Auto Expand" (#1640) X-Git-Url: http://these/git/%24%7B%60data:application/static/README.md?a=commitdiff_plain;h=9fd75faa16c975152dfa4c35ab1f4891aba8ae96;p=lemmy-ui.git Frontend Settings - "Blur NSFW" and "Auto Expand" (#1640) * fix for en-AU locale * add setting checkboxes for auto-expand and blur nsfw * mappings for backend * blur and nsfw settings * add icon blur * fix lint * revert remove en-au --- diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 36566b9..f1e0c4d 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -251,7 +251,7 @@ hr { flex: 1; } -.img-blur { +.img-blur-thumb { filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); @@ -259,6 +259,18 @@ hr { -ms-filter: blur(10px); } +.img-blur-icon { + filter: blur(3px); + -webkit-filter: blur(3px); + -moz-filter: blur(3px); + -o-filter: blur(3px); + -ms-filter: blur(3px); +} + +.img-cover { + object-fit: cover; +} + .img-expanded { max-height: 90vh; } diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx index f128512..ab22db0 100644 --- a/src/shared/components/common/pictrs-image.tsx +++ b/src/shared/components/common/pictrs-image.tsx @@ -1,6 +1,8 @@ import classNames from "classnames"; import { Component } from "inferno"; +import { UserService } from "../../services"; + const iconThumbnailSize = 96; const thumbnailSize = 256; @@ -21,6 +23,14 @@ export class PictrsImage extends Component<PictrsImageProps, any> { } render() { + let user_blur_nsfw = true; + if (UserService.Instance.myUserInfo) { + user_blur_nsfw = + UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw; + } + + const blur_image = this.props.nsfw && user_blur_nsfw; + return ( <picture> <source srcSet={this.src("webp")} type="image/webp" /> @@ -38,7 +48,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> { this.props.thumbnail && !this.props.icon && !this.props.banner, "img-expanded slight-radius": !this.props.thumbnail && !this.props.icon, - "img-blur": this.props.thumbnail && this.props.nsfw, + "img-blur-icon": this.props.icon && blur_image, + "img-blur-thumb": this.props.thumbnail && blur_image, "object-fit-cover img-icon me-1": this.props.icon, "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay": this.props.iconOverlay, diff --git a/src/shared/components/community/community-link.tsx b/src/shared/components/community/community-link.tsx index 77accf6..83194ca 100644 --- a/src/shared/components/community/community-link.tsx +++ b/src/shared/components/community/community-link.tsx @@ -58,12 +58,14 @@ export class CommunityLink extends Component<CommunityLinkProps, any> { avatarAndName(displayName: string) { const icon = this.props.community.icon; + const nsfw = this.props.community.nsfw; + return ( <> {!this.props.hideAvatar && !this.props.community.removed && showAvatars() && - icon && <PictrsImage src={icon} icon />} + icon && <PictrsImage src={icon} icon nsfw={nsfw} />} <span className="overflow-wrap-anywhere">{displayName}</span> </> ); diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx index 659c77c..7576a22 100644 --- a/src/shared/components/person/settings.tsx +++ b/src/shared/components/person/settings.tsx @@ -54,6 +54,8 @@ interface SettingsState { // TODO redo these forms saveUserSettingsForm: { show_nsfw?: boolean; + blur_nsfw?: boolean; + auto_expand?: boolean; theme?: string; default_sort_type?: SortType; default_listing_type?: ListingType; @@ -177,6 +179,8 @@ export class Settings extends Component<any, SettingsState> { const { local_user: { show_nsfw, + blur_nsfw, + auto_expand, theme, default_sort_type, default_listing_type, @@ -206,6 +210,8 @@ export class Settings extends Component<any, SettingsState> { saveUserSettingsForm: { ...this.state.saveUserSettingsForm, show_nsfw, + blur_nsfw, + auto_expand, theme: theme ?? "browser", default_sort_type, default_listing_type, @@ -665,6 +671,34 @@ export class Settings extends Component<any, SettingsState> { </label> </div> </div> + <div className="input-group mb-3"> + <div className="form-check"> + <input + className="form-check-input" + id="user-blur-nsfw" + type="checkbox" + checked={this.state.saveUserSettingsForm.blur_nsfw} + onChange={linkEvent(this, this.handleBlurNsfwChange)} + /> + <label className="form-check-label" htmlFor="user-blur-nsfw"> + {I18NextService.i18n.t("blur_nsfw")} + </label> + </div> + </div> + <div className="input-group mb-3"> + <div className="form-check"> + <input + className="form-check-input" + id="user-auto-expand" + type="checkbox" + checked={this.state.saveUserSettingsForm.auto_expand} + onChange={linkEvent(this, this.handleAutoExpandChange)} + /> + <label className="form-check-label" htmlFor="user-auto-expand"> + {I18NextService.i18n.t("auto_expand")} + </label> + </div> + </div> <div className="input-group mb-3"> <div className="form-check"> <input @@ -1009,6 +1043,18 @@ export class Settings extends Component<any, SettingsState> { ); } + handleBlurNsfwChange(i: Settings, event: any) { + i.setState( + s => ((s.saveUserSettingsForm.blur_nsfw = event.target.checked), s), + ); + } + + handleAutoExpandChange(i: Settings, event: any) { + i.setState( + s => ((s.saveUserSettingsForm.auto_expand = event.target.checked), s), + ); + } + handleShowAvatarsChange(i: Settings, event: any) { const mui = UserService.Instance.myUserInfo; if (mui) { diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index c926635..95d1a46 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -169,6 +169,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> { constructor(props: any, context: any) { super(props, context); + if (UserService.Instance.myUserInfo) { + this.state.imageExpanded = + UserService.Instance.myUserInfo.local_user_view.local_user.auto_expand; + } + this.handleEditPost = this.handleEditPost.bind(this); this.handleEditCancel = this.handleEditCancel.bind(this); } @@ -297,6 +302,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { imgThumb(src: string) { const post_view = this.postView; + return ( <PictrsImage src={src}