From c654dfd67414d8882a3a90e64d63153efdad8017 Mon Sep 17 00:00:00 2001 From: Julian Jelfs Date: Thu, 28 Sep 2023 12:10:35 +0100 Subject: [PATCH] Profile link component (#4459) Co-authored-by: Matt Grogan --- frontend/app/rollup.config.mjs | 13 +++- frontend/app/src/components/App.svelte | 1 + .../src/components/home/ChatMessage.svelte | 32 ++------- .../components/home/CurrentChatHeader.svelte | 19 +++--- frontend/app/src/components/home/Home.svelte | 41 +++++++++++ .../app/src/components/home/Markdown.svelte | 2 +- .../home/groupdetails/BlockedUser.svelte | 6 +- .../home/groupdetails/InvitedUser.svelte | 6 +- .../home/groupdetails/Member.svelte | 7 +- .../home/groupdetails/Members.svelte | 35 +--------- .../components/home/groupdetails/User.svelte | 13 ++-- .../home/pinned/PinnedMessage.svelte | 32 +++------ .../components/home/profile/ReferUsers.svelte | 37 +++------- .../components/web-components/profileLink.ts | 68 +++++++++++++++++++ frontend/app/src/types.d.ts | 1 + frontend/app/src/utils/domPurify.ts | 15 +++- 16 files changed, 183 insertions(+), 145 deletions(-) create mode 100644 frontend/app/src/components/web-components/profileLink.ts diff --git a/frontend/app/rollup.config.mjs b/frontend/app/rollup.config.mjs index 15147e156e..d623403b73 100644 --- a/frontend/app/rollup.config.mjs +++ b/frontend/app/rollup.config.mjs @@ -78,7 +78,7 @@ const development = build_env === "development"; const testnet = !development && !production; const watch = process.env.ROLLUP_WATCH; -const env = process.env.NODE_ENV ?? (development ? "development": "production"); +const env = process.env.NODE_ENV ?? (development ? "development" : "production"); const version = process.env.OPENCHAT_WEBSITE_VERSION; if (!development && !version) { throw Error("OPENCHAT_WEBSITE_VERSION environment variable not set"); @@ -335,6 +335,17 @@ export default { .join("")} ${inlineScripts.map((s) => ``).join("")} + + `; diff --git a/frontend/app/src/components/App.svelte b/frontend/app/src/components/App.svelte index 6937c75ed5..3d78a39e7c 100644 --- a/frontend/app/src/components/App.svelte +++ b/frontend/app/src/components/App.svelte @@ -24,6 +24,7 @@ redirectLandingPageLinksIfNecessary, removeQueryStringParam, } from "../utils/urls"; + import "../components/web-components/profileLink"; import page from "page"; import { menuStore } from "../stores/menu"; import { framed } from "../stores/xframe"; diff --git a/frontend/app/src/components/home/ChatMessage.svelte b/frontend/app/src/components/home/ChatMessage.svelte index 5ea1a03bd3..12aad6bafe 100644 --- a/frontend/app/src/components/home/ChatMessage.svelte +++ b/frontend/app/src/components/home/ChatMessage.svelte @@ -45,7 +45,6 @@ import TimeAndTicks from "./TimeAndTicks.svelte"; import { iconSize } from "../../stores/iconSize"; import MessageReaction from "./MessageReaction.svelte"; - import ViewUserProfile from "./profile/ViewUserProfile.svelte"; import ThreadSummary from "./ThreadSummary.svelte"; import { pathParams } from "../../routes"; import { canShareMessage } from "../../utils/share"; @@ -56,6 +55,7 @@ import { longpress } from "../../actions/longpress"; import TipBuilder from "./TipBuilder.svelte"; import TipThumbnail from "./TipThumbnail.svelte"; + import type { ProfileLinkClickedEvent } from "../web-components/profileLink"; const client = getContext("client"); const dispatch = createEventDispatcher(); @@ -100,8 +100,6 @@ let multiUserChat = chatType === "group_chat" || chatType === "channel"; let showEmojiPicker = false; let debug = false; - let viewProfile = false; - let alignProfileTo: DOMRect | undefined = undefined; let crypto = msg.content.kind === "crypto_content"; let poll = msg.content.kind === "poll_content"; let canRevealDeleted = false; @@ -176,11 +174,6 @@ } }); - function chatWithUser() { - closeUserProfile(); - dispatch("chatWith", { kind: "direct_chat", userId: msg.sender }); - } - function createReplyContext(): EnhancedReplyContext { return { kind: "rehydrated_reply_context", @@ -327,14 +320,12 @@ } function openUserProfile(ev: Event) { - if (ev.target) { - alignProfileTo = (ev.target as HTMLElement).getBoundingClientRect(); - } - viewProfile = true; - } - - function closeUserProfile() { - viewProfile = false; + ev.target?.dispatchEvent( + new CustomEvent("profile-clicked", { + detail: { userId: msg.sender, chatButton: multiUserChat, inGlobalContext: false }, + bubbles: true, + }) + ); } function registerVote(ev: CustomEvent<{ answerIndex: number; type: "register" | "delete" }>) { @@ -420,15 +411,6 @@ on:close={() => (showReport = false)} /> {/if} -{#if viewProfile} - -{/if} -
("client"); const dispatch = createEventDispatcher(); @@ -28,7 +28,6 @@ export let unreadMessages: number; export let hasPinned: boolean; - let viewProfile = false; let showSuspendUserModal = false; $: typersByContext = client.typersByContext; @@ -90,16 +89,17 @@ } } - function openUserProfile() { + function openUserProfile(ev: Event) { if (hasUserProfile) { - viewProfile = true; + ev.target?.dispatchEvent( + new CustomEvent("profile-clicked", { + detail: { userId, chatButton: false, inGlobalContext: false }, + bubbles: true, + }) + ); } } - function closeUserProfile() { - viewProfile = false; - } - $: chat = normaliseChatSummary($now, selectedChatSummary, $typersByContext); @@ -119,9 +119,6 @@
{/if} - {#if viewProfile} - - {/if}
("client"); const user = client.user; @@ -87,6 +96,7 @@ let candidateCommunity: CommunitySummary | undefined; let candidateCommunityRules: Rules = defaultChatRules("community"); let convertGroup: GroupChatSummary | undefined = undefined; + let showProfileCard: ViewProfileConfig | undefined = undefined; type ConfirmActionEvent = | ConfirmLeaveEvent @@ -899,10 +909,39 @@ page(`/community/${ev.detail.communityId}`); } + function profileLinkClicked(ev: CustomEvent) { + showProfileCard = { + userId: ev.detail.userId, + chatButton: ev.detail.chatButton, + inGlobalContext: ev.detail.inGlobalContext, + alignTo: ev.target ? (ev.target as HTMLElement).getBoundingClientRect() : undefined, + }; + } + + function chatWithFromProfileCard() { + if (showProfileCard === undefined) return; + chatWith( + new CustomEvent("chatWith", { + detail: { kind: "direct_chat", userId: showProfileCard.userId }, + }) + ); + showProfileCard = undefined; + } + $: bgHeight = $dimensions.height * 0.9; $: bgClip = (($dimensions.height - 32) / bgHeight) * 361; +{#if showProfileCard !== undefined} + (showProfileCard = undefined)} /> +{/if} +
{#if $layoutStore.showNav} + +