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 {
|
.userMention {
|
||||||
position: relative;
|
position: relative;
|
||||||
.userPreview {
|
.userPreview {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 220px;
|
||||||
|
z-index: var(--z-index-floater);
|
||||||
|
background-color: var(--background-site);
|
||||||
display: none;
|
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 {
|
&:hover {
|
||||||
.userPreview {
|
.userPreview {
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 220px;
|
|
||||||
z-index: var(--z-index-floater);
|
|
||||||
background-color: var(--background-input);
|
|
||||||
display: flex;
|
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 { 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 { hookForDev } from "../../../lib/devTools";
|
||||||
import { userName } from "../../../stores/profile";
|
import { nip05Verification, userName } from "../../../stores/profile";
|
||||||
import { PrimalUser } from "../../../types/primal";
|
import { PrimalUser } from "../../../types/primal";
|
||||||
|
import Avatar from "../../Avatar/Avatar";
|
||||||
|
import VerificationCheck from "../../VerificationCheck/VerificationCheck";
|
||||||
import styles from "./MentionedUserLink.module.scss";
|
import styles from "./MentionedUserLink.module.scss";
|
||||||
|
|
||||||
const MentionedUserLink: Component<{
|
const MentionedUserLink: Component<{
|
||||||
@ -13,13 +15,38 @@ const MentionedUserLink: Component<{
|
|||||||
|
|
||||||
const LinkComponent: Component<{ children: JSXElement }> = (p) => {
|
const LinkComponent: Component<{ children: JSXElement }> = (p) => {
|
||||||
return props.openInNewTab ?
|
return props.openInNewTab ?
|
||||||
<a id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`} target="_blank">{p.children}</a> :
|
<a
|
||||||
<A id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`}>{p.children}</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 (
|
return (
|
||||||
<LinkComponent>
|
<LinkComponent>
|
||||||
@{userName(props.user)}
|
@{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>
|
</LinkComponent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -84,7 +84,6 @@
|
|||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
max-width: 518px;
|
max-width: 518px;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
.label {
|
.label {
|
||||||
|
@ -11,9 +11,7 @@ import { useIntl } from '@cookbook/solid-intl';
|
|||||||
import { authorName, nip05Verification, truncateNpub, userName } from '../../stores/profile';
|
import { authorName, nip05Verification, truncateNpub, userName } from '../../stores/profile';
|
||||||
import { note as t } from '../../translations';
|
import { note as t } from '../../translations';
|
||||||
import { hookForDev } from '../../lib/devTools';
|
import { hookForDev } from '../../lib/devTools';
|
||||||
import Avatar from '../Avatar/Avatar';
|
import MentionedUserLink from './MentionedUserLink/MentionedUserLink';
|
||||||
import { date } from '../../lib/dates';
|
|
||||||
import VerificationCheck from '../VerificationCheck/VerificationCheck';
|
|
||||||
|
|
||||||
const NoteReplyHeader: Component<{
|
const NoteReplyHeader: Component<{
|
||||||
note: PrimalNote,
|
note: PrimalNote,
|
||||||
@ -40,7 +38,7 @@ const NoteReplyHeader: Component<{
|
|||||||
href={`/p/${rootAuthor()?.npub}`}
|
href={`/p/${rootAuthor()?.npub}`}
|
||||||
class={styles.author}
|
class={styles.author}
|
||||||
>
|
>
|
||||||
@{userName(rootAuthor())}
|
<MentionedUserLink user={rootAuthor()} />
|
||||||
</A>
|
</A>
|
||||||
</span>
|
</span>
|
||||||
</Show>
|
</Show>
|
||||||
|
Loading…
Reference in New Issue
Block a user