oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

Conversation UI update.

Browse source
This commit is contained in:
Mikunj 2018-11-26 15:50:53 +11:00
parent aa57693fce
commit f1d18219ed
3 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
stylesheets/_modules.scss
View file

@ -1,8 +1,20 @@
// Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ // Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
// Module: Contact Name // 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; font-style: italic;
} }

7
ts/components/conversation/ContactName.tsx
View file

@ -21,15 +21,16 @@ export class ContactName extends React.Component<Props> {
const shouldShowProfile = Boolean(profileName && !name); const shouldShowProfile = Boolean(profileName && !name);
const profileElement = shouldShowProfile ? ( const profileElement = shouldShowProfile ? (
<span className={`${prefix}__profile-name`}> <span className={`${prefix}__profile-name`}>
~<Emojify text={profileName || ''} i18n={i18n} /> <Emojify text={profileName || ''} i18n={i18n} />
</span> </span>
) : null; ) : null;
return ( return (
<span className={prefix}> <span className={prefix}>
<Emojify text={title} i18n={i18n} />
{shouldShowProfile ? ' ' : null}
{profileElement} {profileElement}
<span className={shouldShowProfile ? `${prefix}__profile-number` : ''}>
<Emojify text={title} i18n={i18n} />
</span>
</span> </span>
); );
} }

26
ts/components/conversation/ConversationHeader.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Emojify } from './Emojify'; import { ContactName } from './ContactName';
import { Avatar } from '../Avatar'; import { Avatar } from '../Avatar';
import { Localizer } from '../../types/Util'; import { Localizer } from '../../types/Util';
import { import {
@ -90,32 +90,20 @@ export class ConversationHeader extends React.Component<Props> {
public renderTitle() { public renderTitle() {
const { const {
name,
phoneNumber, phoneNumber,
i18n, i18n,
profileName, profileName,
isVerified,
isKeysPending, isKeysPending,
} = this.props; } = this.props;
return ( return (
<div className="module-conversation-header__title"> <div className="module-conversation-header__title">
{name ? <Emojify text={name} i18n={i18n} /> : null} <ContactName
{name && phoneNumber ? ' · ' : null} phoneNumber={phoneNumber}
{phoneNumber ? phoneNumber : null}{' '} profileName={profileName}
{profileName && !name ? ( i18n={i18n}
<span className="module-conversation-header__title__profile-name"> />
~<Emojify text={profileName} i18n={i18n} /> {isKeysPending ? ' (pending)' : null}
</span>
) : null}
{isVerified ? ' · ' : null}
{isVerified ? (
<span>
<span className="module-conversation-header__title__verified-icon" />
{i18n('verified')}
</span>
) : null}
{isKeysPending ? '(pending)' : null}
</div> </div>
); );
} }