mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Conversation UI update.
This commit is contained in:
parent
aa57693fce
commit
f1d18219ed
3 changed files with 24 additions and 23 deletions
|
@ -1,8 +1,20 @@
|
|||
// Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
|
||||
|
||||
// Module: Contact Name
|
||||
.module-contact-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.module-contact-name__profile-name {
|
||||
.module-contact-name span {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.module-contact-name__profile-number {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
|
@ -21,15 +21,16 @@ export class ContactName extends React.Component<Props> {
|
|||
const shouldShowProfile = Boolean(profileName && !name);
|
||||
const profileElement = shouldShowProfile ? (
|
||||
<span className={`${prefix}__profile-name`}>
|
||||
~<Emojify text={profileName || ''} i18n={i18n} />
|
||||
<Emojify text={profileName || ''} i18n={i18n} />
|
||||
</span>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<span className={prefix}>
|
||||
<Emojify text={title} i18n={i18n} />
|
||||
{shouldShowProfile ? ' ' : null}
|
||||
{profileElement}
|
||||
<span className={shouldShowProfile ? `${prefix}__profile-number` : ''}>
|
||||
<Emojify text={title} i18n={i18n} />
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Emojify } from './Emojify';
|
||||
import { ContactName } from './ContactName';
|
||||
import { Avatar } from '../Avatar';
|
||||
import { Localizer } from '../../types/Util';
|
||||
import {
|
||||
|
@ -90,32 +90,20 @@ export class ConversationHeader extends React.Component<Props> {
|
|||
|
||||
public renderTitle() {
|
||||
const {
|
||||
name,
|
||||
phoneNumber,
|
||||
i18n,
|
||||
profileName,
|
||||
isVerified,
|
||||
isKeysPending,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className="module-conversation-header__title">
|
||||
{name ? <Emojify text={name} i18n={i18n} /> : null}
|
||||
{name && phoneNumber ? ' · ' : null}
|
||||
{phoneNumber ? phoneNumber : null}{' '}
|
||||
{profileName && !name ? (
|
||||
<span className="module-conversation-header__title__profile-name">
|
||||
~<Emojify text={profileName} i18n={i18n} />
|
||||
</span>
|
||||
) : null}
|
||||
{isVerified ? ' · ' : null}
|
||||
{isVerified ? (
|
||||
<span>
|
||||
<span className="module-conversation-header__title__verified-icon" />
|
||||
{i18n('verified')}
|
||||
</span>
|
||||
) : null}
|
||||
{isKeysPending ? '(pending)' : null}
|
||||
<ContactName
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
i18n={i18n}
|
||||
/>
|
||||
{isKeysPending ? ' (pending)' : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue