mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-03 02:10:55 +00:00
Add user mention hover info
This commit is contained in:
parent
5277b01a4e
commit
487fce7432
@ -1,39 +1,54 @@
|
||||
.userMention {
|
||||
position: relative;
|
||||
.userPreview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
z-index: var(--z-index-floater);
|
||||
background-color: var(--background-site);
|
||||
display: none;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--devider);
|
||||
border-radius: 0;
|
||||
color: var(--text-secondary-2);
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
margin-top: 2px;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 4px;
|
||||
|
||||
> div {
|
||||
&.userName {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&.verification {
|
||||
max-width: 170px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
padding-block: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.userPreview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
z-index: var(--z-index-floater);
|
||||
background-color: var(--background-input);
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--text-tertiary-2);
|
||||
border-radius: 8px;
|
||||
color: var(--text-secondary-2);
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
margin-top: 1px;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 4px;
|
||||
|
||||
> div {
|
||||
&.userName {
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
padding-block: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,10 @@
|
||||
import { A } from "@solidjs/router";
|
||||
import { Component, JSXElement } from "solid-js";
|
||||
import { Component, createSignal, JSXElement, onMount, Show } from "solid-js";
|
||||
import { hookForDev } from "../../../lib/devTools";
|
||||
import { userName } from "../../../stores/profile";
|
||||
import { nip05Verification, userName } from "../../../stores/profile";
|
||||
import { PrimalUser } from "../../../types/primal";
|
||||
import Avatar from "../../Avatar/Avatar";
|
||||
import VerificationCheck from "../../VerificationCheck/VerificationCheck";
|
||||
import styles from "./MentionedUserLink.module.scss";
|
||||
|
||||
const MentionedUserLink: Component<{
|
||||
@ -13,13 +15,38 @@ const MentionedUserLink: Component<{
|
||||
|
||||
const LinkComponent: Component<{ children: JSXElement }> = (p) => {
|
||||
return props.openInNewTab ?
|
||||
<a id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`} target="_blank">{p.children}</a> :
|
||||
<A id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`}>{p.children}</A>;
|
||||
<a
|
||||
id={props.id}
|
||||
class={styles.userMention}
|
||||
href={`/p/${props.user.npub}`}
|
||||
target="_blank"
|
||||
>
|
||||
{p.children}
|
||||
</a> :
|
||||
<A
|
||||
id={props.id}
|
||||
class={styles.userMention}
|
||||
href={`/p/${props.user.npub}`}
|
||||
>
|
||||
{p.children}
|
||||
</A>;
|
||||
};
|
||||
|
||||
return (
|
||||
<LinkComponent>
|
||||
@{userName(props.user)}
|
||||
<div class={styles.userPreview}>
|
||||
<Avatar user={props.user} />
|
||||
<div>
|
||||
<div class={styles.userName}>
|
||||
{userName(props.user)}
|
||||
<VerificationCheck user={props.user} />
|
||||
</div>
|
||||
<div class={styles.verification}>
|
||||
{nip05Verification(props.user)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LinkComponent>
|
||||
);
|
||||
}
|
||||
|
@ -84,7 +84,6 @@
|
||||
line-height: 20px;
|
||||
margin-top: 6px;
|
||||
max-width: 518px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.label {
|
||||
|
@ -11,9 +11,7 @@ import { useIntl } from '@cookbook/solid-intl';
|
||||
import { authorName, nip05Verification, truncateNpub, userName } from '../../stores/profile';
|
||||
import { note as t } from '../../translations';
|
||||
import { hookForDev } from '../../lib/devTools';
|
||||
import Avatar from '../Avatar/Avatar';
|
||||
import { date } from '../../lib/dates';
|
||||
import VerificationCheck from '../VerificationCheck/VerificationCheck';
|
||||
import MentionedUserLink from './MentionedUserLink/MentionedUserLink';
|
||||
|
||||
const NoteReplyHeader: Component<{
|
||||
note: PrimalNote,
|
||||
@ -40,7 +38,7 @@ const NoteReplyHeader: Component<{
|
||||
href={`/p/${rootAuthor()?.npub}`}
|
||||
class={styles.author}
|
||||
>
|
||||
@{userName(rootAuthor())}
|
||||
<MentionedUserLink user={rootAuthor()} />
|
||||
</A>
|
||||
</span>
|
||||
</Show>
|
||||
|
Loading…
Reference in New Issue
Block a user