Merge pull request #1374 from Bilb/hide-shorten-pubkey-except-public

stylesheets/_modules.scss

@@ -1028,7 +1028,7 @@
 }
 
 .module-conversation-header__title {
-  margin-inline-start: 6px;
+  margin: 0px 20px;
 
   min-width: 0;
   font-size: 16px;
@@ -1046,6 +1046,12 @@
   align-items: center;
 
   -webkit-user-select: text;
+
+  .module-contact-name__profile-name {
+    width: 100%;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+  }
 }
 
 .module-conversation-header__title__profile-name {

ts/components/ConversationListItem.tsx

@@ -348,6 +348,11 @@ class ConversationListItem extends React.PureComponent<Props> {
     const displayedPubkey = profileName ? shortenedPubkey : phoneNumber;
     const displayName = isMe ? i18n('noteToSelf') : profileName;
 
+    let shouldShowPubkey = false;
+    if (!name || name.length === 0) {
+      shouldShowPubkey = true;
+    }
+
     return (
       <div className="module-conversation__user">
         <ContactName
@@ -357,6 +362,7 @@ class ConversationListItem extends React.PureComponent<Props> {
           module="module-conversation__user"
           i18n={window.i18n}
           boldProfileName={true}
+          shouldShowPubkey={shouldShowPubkey}
         />
       </div>
     );

ts/components/MessageSearchResult.tsx

@@ -68,6 +68,7 @@ export class MessageSearchResult extends React.PureComponent<Props> {
         profileName={from.profileName}
         i18n={i18n}
         module="module-message-search-result__header__name"
+        shouldShowPubkey={false}
       />
     );
   }
@@ -86,6 +87,7 @@ export class MessageSearchResult extends React.PureComponent<Props> {
               name={to.name}
               profileName={to.profileName}
               i18n={i18n}
+              shouldShowPubkey={false}
             />
           </span>
         </div>

ts/components/conversation/ContactName.tsx

@@ -12,6 +12,7 @@ interface Props {
   module?: string;
   boldProfileName?: Boolean;
   compact?: Boolean;
+  shouldShowPubkey: Boolean;
 }
 
 export class ContactName extends React.Component<Props> {
@@ -24,19 +25,27 @@ export class ContactName extends React.Component<Props> {
       module,
       boldProfileName,
       compact,
+      shouldShowPubkey,
     } = this.props;
     const prefix = module ? module : 'module-contact-name';
 
     const title = name ? name : phoneNumber;
-    const shouldShowProfile = Boolean(profileName && !name);
+    const shouldShowProfile = Boolean(profileName || name);
     const styles = (boldProfileName
       ? {
           fontWeight: 'bold',
         }
       : {}) as React.CSSProperties;
+    const textProfile = profileName || name || i18n('anonymous');
     const profileElement = shouldShowProfile ? (
       <span style={styles} className={`${prefix}__profile-name`}>
-        <Emojify text={profileName || ''} i18n={i18n} />
+        <Emojify text={textProfile} i18n={i18n} />
+      </span>
+    ) : null;
+
+    const pubKeyElement = shouldShowPubkey ? (
+      <span className={`${prefix}__profile-number`}>
+        <Emojify text={title} i18n={i18n} />
       </span>
     ) : null;
 
@@ -44,14 +53,7 @@ export class ContactName extends React.Component<Props> {
       <span className={classNames(prefix, compact && 'compact')} dir="auto">
         {profileElement}
         {shouldShowProfile ? ' ' : null}
-        <span
+        {pubKeyElement}
-          className={classNames(
-            `${prefix}__profile-number`,
-            shouldShowProfile && 'italic'
-          )}
-        >
-          <Emojify text={title} i18n={i18n} />
-        </span>
       </span>
     );
   }

ts/components/conversation/ConversationHeader.tsx

@@ -179,16 +179,7 @@ class ConversationHeader extends React.Component<Props> {
         <span className="module-conversation-header__title-text">{text}</span>
       );
 
-    let title;
+    const title = profileName || name || phoneNumber;
-    if (profileName) {
-      title = `${profileName} ${window.shortenPubkey(phoneNumber)}`;
-    } else {
-      if (name) {
-        title = `${name}`;
-      } else {
-        title = `User ${window.shortenPubkey(phoneNumber)}`;
-      }
-    }
 
     return (
       <div className="module-conversation-header__title">

ts/components/conversation/Message.tsx

@@ -1074,6 +1074,7 @@ export class Message extends React.PureComponent<Props, State> {
       conversationType,
       direction,
       i18n,
+      isPublic,
     } = this.props;
 
     const title = authorName ? authorName : authorPhoneNumber;
@@ -1097,6 +1098,7 @@ export class Message extends React.PureComponent<Props, State> {
           module="module-message__author"
           i18n={i18n}
           boldProfileName={true}
+          shouldShowPubkey={Boolean(isPublic)}
         />
       </div>
     );

ts/components/conversation/MessageDetail.tsx

@@ -107,6 +107,7 @@ export class MessageDetail extends React.Component<Props> {
               name={contact.name}
               profileName={contact.profileName}
               i18n={i18n}
+              shouldShowPubkey={true}
             />
           </div>
           {errors.map((error, index) => (

ts/components/conversation/Quote.tsx

@@ -302,6 +302,7 @@ export class Quote extends React.Component<Props, State> {
       i18n,
       isFromMe,
       isIncoming,
+      isPublic,
     } = this.props;
 
     return (
@@ -320,6 +321,7 @@ export class Quote extends React.Component<Props, State> {
             profileName={authorProfileName}
             i18n={i18n}
             compact={true}
+            shouldShowPubkey={Boolean(isPublic)}
           />
         )}
       </div>

ts/components/conversation/SafetyNumberNotification.tsx

@@ -42,6 +42,7 @@ export class SafetyNumberNotification extends React.Component<Props> {
                   profileName={contact.profileName}
                   phoneNumber={contact.phoneNumber}
                   module="module-verification-notification__contact"
+                  shouldShowPubkey={true}
                 />
               </span>,
             ]}

ts/components/conversation/TimerNotification.tsx

@@ -51,6 +51,7 @@ export class TimerNotification extends React.Component<Props> {
                 name={name}
                 module="module-message__author"
                 boldProfileName={true}
+                shouldShowPubkey={false}
               />,
               timespan,
             ]}

ts/components/conversation/VerificationNotification.tsx

@@ -53,6 +53,7 @@ export class VerificationNotification extends React.Component<Props> {
             profileName={contact.profileName}
             phoneNumber={contact.phoneNumber}
             module="module-verification-notification__contact"
+            shouldShowPubkey={true}
           />,
         ]}
         i18n={i18n}

ts/components/session/SessionMemberListItem.tsx

@@ -49,8 +49,6 @@ export class SessionMemberListItem extends React.Component<Props, State> {
     const { isSelected } = this.state;
 
     const name = this.props.member.authorProfileName;
-    const pubkey = this.props.member.authorPhoneNumber;
-    const shortPubkey = window.shortenPubkey(pubkey);
 
     return (
       <div
@@ -67,7 +65,6 @@ export class SessionMemberListItem extends React.Component<Props, State> {
             {this.renderAvatar()}
           </span>
           <span className="session-member-item__name">{name}</span>
-          <span className="session-member-item__pubkey">{shortPubkey}</span>
         </div>
         <span
           className={classNames(

ts/components/session/settings/SessionSettings.tsx

@@ -583,8 +583,6 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         title = window.i18n('anonymous');
       }
 
-      title = `${title} ${window.shortenPubkey(blockedNumber)}`;
-
       results.push({
         id: blockedNumber,
         title,