mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-19 06:33:32 +00:00
badges, badges everywhere
This commit is contained in:
parent
a0b8e70192
commit
cb31e0a8c7
@ -1183,11 +1183,15 @@ a.msg {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg-sender-link .badge {
|
||||
.badge {
|
||||
margin-left: 5px;
|
||||
text-shadow: white 0 0 1px;
|
||||
}
|
||||
|
||||
.text-color {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.public-messages-view .msg-sender .msg-menu-btn {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
|
43
src/js/components/Badge.tsx
Normal file
43
src/js/components/Badge.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import iris from 'iris-lib';
|
||||
|
||||
import Icons from '../Icons';
|
||||
import Nostr from '../Nostr';
|
||||
import { translate as t } from '../translations/Translation';
|
||||
|
||||
export default function Badge(props) {
|
||||
const myPub = iris.session.getKey().secp256k1.rpub;
|
||||
const hexAddress = Nostr.toNostrHexAddress(props.pub);
|
||||
if (hexAddress === myPub) {
|
||||
return (
|
||||
<span class="badge positive tooltip">
|
||||
{Icons.checkmark}
|
||||
<span class="tooltiptext right">{t('you')}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (!hexAddress) {
|
||||
return null;
|
||||
}
|
||||
const following = Nostr.followedByUser.get(myPub)?.has(hexAddress);
|
||||
if (following) {
|
||||
return (
|
||||
<span class="badge positive tooltip">
|
||||
{Icons.checkmark}
|
||||
<span class="tooltiptext right">{t('following')}</span>
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
const count = Nostr.followedByFriendsCount(hexAddress);
|
||||
if (count > 0) {
|
||||
const className = count > 10 ? 'neutral' : 'text-color';
|
||||
return (
|
||||
<span class={`badge ${className} tooltip`}>
|
||||
{Icons.checkmark}
|
||||
<span class="tooltiptext right">
|
||||
{count} {t('friends_following')}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
@ -4,16 +4,19 @@ import Component from '../BaseComponent';
|
||||
import Helpers from '../Helpers';
|
||||
import Nostr from '../Nostr';
|
||||
|
||||
import Badge from './Badge';
|
||||
|
||||
type Props = {
|
||||
pub: string;
|
||||
placeholder?: string;
|
||||
hideBadge?: boolean;
|
||||
};
|
||||
|
||||
type State = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
class Name extends Component<Props, State> {
|
||||
export default class Name extends Component<Props, State> {
|
||||
componentDidMount(): void {
|
||||
const nostrAddr = Nostr.toNostrHexAddress(this.props.pub);
|
||||
if (nostrAddr) {
|
||||
@ -27,11 +30,14 @@ class Name extends Component<Props, State> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
this.state.name ??
|
||||
this.props.placeholder ??
|
||||
Helpers.generateName(Nostr.toNostrBech32Address(this.props.pub, 'npub') || this.props.pub)
|
||||
<>
|
||||
{this.state.name ??
|
||||
this.props.placeholder ??
|
||||
Helpers.generateName(
|
||||
Nostr.toNostrBech32Address(this.props.pub, 'npub') || this.props.pub,
|
||||
)}
|
||||
{!this.props.hideBadge && <Badge pub={this.props.pub} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Name;
|
@ -9,6 +9,7 @@ import Icons from '../Icons';
|
||||
import Nostr from '../Nostr';
|
||||
import { translate as t } from '../translations/Translation';
|
||||
|
||||
import Badge from './Badge';
|
||||
import CopyButton from './CopyButton';
|
||||
import Dropdown from './Dropdown';
|
||||
import FeedMessageForm from './FeedMessageForm';
|
||||
@ -419,37 +420,6 @@ class PublicMessage extends Message {
|
||||
this.setState({ showBoosts: !this.state.showBoosts, showLikes: false });
|
||||
}
|
||||
|
||||
getBadge() {
|
||||
const myPub = iris.session.getKey().secp256k1.rpub;
|
||||
const hexAddress = Nostr.toNostrHexAddress(this.state.msg.info.from);
|
||||
if (hexAddress === myPub) {
|
||||
return null;
|
||||
}
|
||||
if (!hexAddress) {
|
||||
return null;
|
||||
}
|
||||
const following = Nostr.followedByUser.get(myPub)?.has(hexAddress);
|
||||
if (following) {
|
||||
return html`
|
||||
<span class="badge positive tooltip">
|
||||
${Icons.checkmark}
|
||||
<span class="tooltiptext right">${t('following')}</span>
|
||||
</span>
|
||||
`;
|
||||
} else {
|
||||
const count = Nostr.followedByFriendsCount(hexAddress);
|
||||
if (count > 0) {
|
||||
const className = count > 10 ? 'neutral' : '';
|
||||
return html`
|
||||
<span class="badge ${className} tooltip">
|
||||
${Icons.checkmark}
|
||||
<span class="tooltiptext right">${count} ${t('friends_following')}</span>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const isThumbnail = this.props.thumbnail ? 'thumbnail-item' : '';
|
||||
if (!this.state.msg) {
|
||||
@ -582,8 +552,14 @@ class PublicMessage extends Message {
|
||||
<div class="msg-sender">
|
||||
<div class="msg-sender-link" onclick=${(e) => this.onClickName(e)}>
|
||||
${s.msg.info.from ? html`<${Identicon} str=${s.msg.info.from} width="40" />` : ''}
|
||||
${name && this.props.showName && html`<div class="msgSenderName">${name}</div>`}
|
||||
${this.getBadge()}
|
||||
${name &&
|
||||
this.props.showName &&
|
||||
html`
|
||||
<div class="msgSenderName">
|
||||
${name}
|
||||
<${Badge} pub=${s.msg.info.from} />
|
||||
</div>
|
||||
`}
|
||||
<div class="time">
|
||||
<a
|
||||
href="#/post/${encodeURIComponent(s.msg.noteId || this.props.hash)}"
|
||||
|
@ -8,6 +8,7 @@ import Helpers from '../Helpers';
|
||||
import Nostr from '../Nostr';
|
||||
import { translate as t } from '../translations/Translation';
|
||||
|
||||
import Badge from './Badge';
|
||||
import Identicon from './Identicon';
|
||||
import Name from './Name';
|
||||
|
||||
@ -263,7 +264,7 @@ class SearchBox extends Component<Props, State> {
|
||||
<Identicon key={`${i.key}ic`} str={i.key} width={40} />
|
||||
)}
|
||||
<div>
|
||||
{i.name || ''}
|
||||
{i.name || ''} <Badge pub={i.key} />
|
||||
<br />
|
||||
<small>{followText}</small>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user