diff options
author | Dessalines <tyhou13@gmx.com> | 2020-01-02 16:55:54 -0500 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-01-02 16:55:54 -0500 |
commit | 5b42dc3393431184293ded2f9d30a11fe5548d52 (patch) | |
tree | e906ad2afdd3d7e9f8e0f6116d6023a42ba92d03 /ui/src | |
parent | 576980bf64fcde5ec66e0260c81ef3225dd264bd (diff) |
Adding show_avatar user setting, and option to send notifications to inbox.
- Fixes #254
- Fixes #394
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/comment-node.tsx | 3 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 3 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 3 | ||||
-rw-r--r-- | ui/src/components/search.tsx | 3 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 9 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 56 | ||||
-rw-r--r-- | ui/src/interfaces.ts | 5 | ||||
-rw-r--r-- | ui/src/translations/en.ts | 2 | ||||
-rw-r--r-- | ui/src/utils.ts | 7 |
10 files changed, 86 insertions, 9 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index b3ca682b..64bc7134 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -23,6 +23,7 @@ import { canMod, isMod, pictshareAvatarThumbnail, + showAvatars, } from '../utils'; import * as moment from 'moment'; import { MomentTime } from './moment-time'; @@ -138,7 +139,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { className="text-info" to={`/u/${node.comment.creator_name}`} > - {node.comment.creator_avatar && ( + {node.comment.creator_avatar && showAvatars() && ( <img height="32" width="32" diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index d1042f38..373889f9 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -32,6 +32,7 @@ import { routeListingTypeToEnum, postRefetchSeconds, pictshareAvatarThumbnail, + showAvatars, } from '../utils'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -345,7 +346,7 @@ export class Main extends Component<any, MainState> { {this.state.site.admins.map(admin => ( <li class="list-inline-item"> <Link class="text-info" to={`/u/${admin.name}`}> - {admin.avatar && ( + {admin.avatar && showAvatars() && ( <img height="32" width="32" diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index f1a98941..f1c35b1f 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -13,7 +13,7 @@ import { GetSiteResponse, Comment, } from '../interfaces'; -import { msgOp, pictshareAvatarThumbnail } from '../utils'; +import { msgOp, pictshareAvatarThumbnail, showAvatars } from '../utils'; import { version } from '../version'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -152,7 +152,7 @@ export class Navbar extends Component<any, NavbarState> { to={`/u/${UserService.Instance.user.username}`} > <span> - {UserService.Instance.user.avatar && ( + {UserService.Instance.user.avatar && showAvatars() && ( <img src={pictshareAvatarThumbnail( UserService.Instance.user.avatar diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 1f3a74ac..8b4c1cb6 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -26,6 +26,7 @@ import { isVideo, getUnixTime, pictshareAvatarThumbnail, + showAvatars, } from '../utils'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -249,7 +250,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { <li className="list-inline-item"> <span>{i18n.t('by')} </span> <Link className="text-info" to={`/u/${post.creator_name}`}> - {post.creator_avatar && ( + {post.creator_avatar && showAvatars() && ( <img height="32" width="32" diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx index d92c06e1..00c670d8 100644 --- a/ui/src/components/search.tsx +++ b/ui/src/components/search.tsx @@ -20,6 +20,7 @@ import { routeSearchTypeToEnum, routeSortTypeToEnum, pictshareAvatarThumbnail, + showAvatars, } from '../utils'; import { PostListing } from './post-listing'; import { SortSelect } from './sort-select'; @@ -288,7 +289,7 @@ export class Search extends Component<any, SearchState> { className="text-info" to={`/u/${(i.data as UserView).name}`} > - {(i.data as UserView).avatar && ( + {(i.data as UserView).avatar && showAvatars() && ( <img height="32" width="32" diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 0e95666f..089dd558 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -8,7 +8,12 @@ import { UserView, } from '../interfaces'; import { WebSocketService, UserService } from '../services'; -import { mdToHtml, getUnixTime, pictshareAvatarThumbnail } from '../utils'; +import { + mdToHtml, + getUnixTime, + pictshareAvatarThumbnail, + showAvatars, +} from '../utils'; import { CommunityForm } from './community-form'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -194,7 +199,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { {this.props.moderators.map(mod => ( <li class="list-inline-item"> <Link class="text-info" to={`/u/${mod.user_name}`}> - {mod.avatar && ( + {mod.avatar && showAvatars() && ( <img height="32" width="32" diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 99c340c5..30ee3dcf 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -28,6 +28,7 @@ import { themes, setTheme, languages, + showAvatars, } from '../utils'; import { PostListing } from './post-listing'; import { SortSelect } from './sort-select'; @@ -80,6 +81,8 @@ export class User extends Component<any, UserState> { comment_score: null, banned: null, avatar: null, + show_avatars: null, + send_notifications_to_email: null, }, user_id: null, username: null, @@ -99,6 +102,8 @@ export class User extends Component<any, UserState> { default_sort_type: null, default_listing_type: null, lang: null, + show_avatars: null, + send_notifications_to_email: null, auth: null, }, userSettingsLoading: null, @@ -207,7 +212,7 @@ export class User extends Component<any, UserState> { <div class="row"> <div class="col-12 col-md-8"> <h5> - {this.state.user.avatar && ( + {this.state.user.avatar && showAvatars() && ( <img height="80" width="80" @@ -611,6 +616,41 @@ export class User extends Component<any, UserState> { </div> )} <div class="form-group"> + <div class="form-check"> + <input + class="form-check-input" + type="checkbox" + checked={this.state.userSettingsForm.show_avatars} + onChange={linkEvent( + this, + this.handleUserSettingsShowAvatarsChange + )} + /> + <label class="form-check-label"> + <T i18nKey="show_avatars">#</T> + </label> + </div> + </div> + <div class="form-group"> + <div class="form-check"> + <input + class="form-check-input" + type="checkbox" + disabled={!this.state.user.email} + checked={ + this.state.userSettingsForm.send_notifications_to_email + } + onChange={linkEvent( + this, + this.handleUserSettingsSendNotificationsToEmailChange + )} + /> + <label class="form-check-label"> + <T i18nKey="send_notifications_to_email">#</T> + </label> + </div> + </div> + <div class="form-group"> <button type="submit" class="btn btn-block btn-secondary mr-4"> {this.state.userSettingsLoading ? ( <svg class="icon icon-spinner spin"> @@ -804,6 +844,17 @@ export class User extends Component<any, UserState> { i.setState(i.state); } + handleUserSettingsShowAvatarsChange(i: User, event: any) { + i.state.userSettingsForm.show_avatars = event.target.checked; + UserService.Instance.user.show_avatars = event.target.checked; // Just for instant updates + i.setState(i.state); + } + + handleUserSettingsSendNotificationsToEmailChange(i: User, event: any) { + i.state.userSettingsForm.send_notifications_to_email = event.target.checked; + i.setState(i.state); + } + handleUserSettingsThemeChange(i: User, event: any) { i.state.userSettingsForm.theme = event.target.value; setTheme(event.target.value); @@ -957,6 +1008,9 @@ export class User extends Component<any, UserState> { this.state.userSettingsForm.lang = UserService.Instance.user.lang; this.state.userSettingsForm.avatar = UserService.Instance.user.avatar; this.state.userSettingsForm.email = this.state.user.email; + this.state.userSettingsForm.send_notifications_to_email = this.state.user.send_notifications_to_email; + this.state.userSettingsForm.show_avatars = + UserService.Instance.user.show_avatars; } document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`; window.scrollTo(0, 0); diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts index 1762bd60..7fc7a252 100644 --- a/ui/src/interfaces.ts +++ b/ui/src/interfaces.ts @@ -81,6 +81,7 @@ export interface User { default_listing_type: ListingType; lang: string; avatar?: string; + show_avatars: boolean; } export interface UserView { @@ -95,6 +96,8 @@ export interface UserView { number_of_comments: number; comment_score: number; banned: boolean; + show_avatars: boolean; + send_notifications_to_email: boolean; } export interface CommunityUser { @@ -486,6 +489,8 @@ export interface UserSettingsForm { new_password?: string; new_password_verify?: string; old_password?: string; + show_avatars: boolean; + send_notifications_to_email: boolean; auth: string; } diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts index 5e0adbaa..bd7e39cc 100644 --- a/ui/src/translations/en.ts +++ b/ui/src/translations/en.ts @@ -29,6 +29,7 @@ export const en = { preview: 'Preview', upload_image: 'upload image', avatar: 'Avatar', + show_avatars: 'Show Avatars', formatting_help: 'formatting help', view_source: 'view source', unlock: 'unlock', @@ -126,6 +127,7 @@ export const en = { new_password: 'New Password', no_email_setup: "This server hasn't correctly set up email.", email: 'Email', + send_notifications_to_email: 'Send notifications to Email', optional: 'Optional', expires: 'Expires', language: 'Language', diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 29aabdcf..b9da6cb6 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -345,3 +345,10 @@ export function pictshareAvatarThumbnail(src: string): string { let out = `${split[0]}pictshare/96x96${split[1]}`; return out; } + +export function showAvatars(): boolean { + return ( + (UserService.Instance.user && UserService.Instance.user.show_avatars) || + !UserService.Instance.user + ); +} |