keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
unstable
feature/update-crowdin-translations
master
audit2
show
audit
v1.9.1
v1.9.0
v1.8.6
v1.8.5
v1.8.4
v1.8.3
v1.8.2
v1.8.1
v1.8.0
v1.7.9
v1.7.8
v1.7.7
v1.7.6
v1.7.5
v1.7.4
v1.7.3
v1.7.2
v1.7.1
v1.7.0
v1.6.9
v1.6.8
v1.6.7
v1.6.6
v1.6.5
v1.6.4
v1.6.3
v1.6.2
v1.6.11
v1.6.10
v1.6.1
v1.6.0
v1.5.5
v1.5.4
v1.5.3
v1.5.2
v1.5.1
v1.5.0
v1.4.9
v1.4.8
v1.4.7
v1.4.6
v1.4.5
v1.4.4
v1.4.3
v1.4.2
v1.4.11
v1.4.10
v1.4.1
v1.4.0
v1.3.1
v1.3.0
v1.2.1
v1.2.0
v1.14.3
v1.14.2
v1.14.1
v1.14.0
v1.13.2
v1.13.1
v1.13.0
v1.12.5
v1.12.4
v1.12.3
v1.12.2
v1.12.1
v1.12.0
v1.11.5
v1.11.4
v1.11.3
v1.11.2
v1.11.1
v1.11.0
v1.10.8
v1.10.7
v1.10.6
v1.10.5
v1.10.4
v1.10.3
v1.10.2
v1.10.1
v1.10.0
v1.1.2
v1.1.1
v1.0.9
v1.0.8
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1
v1.0.0
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1f10a73e4f'
${ noResults }
session-desktop/ts/components/conversation/EmbeddedContact.md

11 KiB
Raw Blame History

With a contact

Including all data types

const contact = {
  name: {
    displayName: 'Someone Somewhere',
  },
  number: [
    {
      value: '(202) 555-0000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  onClick: () => console.log('onClick'),
  onSendMessage: () => console.log('onSendMessage'),
  hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

Really long data

const contact = {
  name: {
    displayName: 'Dr. First Middle Last Junior Senior and all that and a bag of chips',
  },
  number: [
    {
      value: '(202) 555-0000 0000 0000 0000 0000 0000 0000 0000 0000 0000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme}  ios={util.ios}>
  <li>
    <Message
    authorColor="green"
    direction="incoming"
    i18n={util.i18n}
    timestamp={Date.now()}
    contact={contact}/>
  </li>
  <li>
  <Message
    authorColor="green"
    direction="outgoing"
    status="delivered"
    i18n={util.i18n}
    timestamp={Date.now()}
    contact={contact}/>
  </li>
</util.ConversationContext>;

In group conversation

const contact = {
  name: {
    displayName: 'Someone Somewhere',
  },
  number: [
    {
      value: '(202) 555-0000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      conversationType="group"
      authorName="Mr. Fire"
      authorAvatarPath={util.gifObjectUrl}
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      authorName="Mr. Fire"
      conversationType="group"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      conversationType="group"
      authorName="Mr. Fire"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

If contact has no signal account

const contact = {
  name: {
    displayName: 'Someone Somewhere',
  },
  number: [
    {
      value: '(202) 555-0000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

With organization name instead of name

const contact = {
  organization: 'United Somewheres, Inc.',
  email: [
    {
      value: 'someone@somewheres.com',
      type: 2,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

No displayName or organization

const contact = {
  name: {
    givenName: 'Someone',
  },
  number: [
    {
      value: '(202) 555-1000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

Default avatar

const contact = {
  name: {
    displayName: 'Someone Somewhere',
  },
  number: [
    {
      value: '(202) 555-1001',
      type: 1,
    },
  ],
  hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

Empty contact

const contact = {};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
  <li>
    <Message
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contact}
    />
  </li>
</util.ConversationContext>;

Contact with caption (cannot currently be sent)

const contactWithAccount = {
  name: {
    displayName: 'Someone Somewhere',
  },
  number: [
    {
      value: '(202) 555-0000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: true,
};
const contactWithoutAccount = {
  name: {
    displayName: 'Someone Somewhere',
  },
  number: [
    {
      value: '(202) 555-0000',
      type: 1,
    },
  ],
  avatar: {
    avatar: {
      path: util.gifObjectUrl,
    },
  },
  hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="incoming"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="outgoing"
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithoutAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithoutAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="incoming"
      collapseMetadata
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithoutAccount}
    />
  </li>
  <li>
    <Message
      text="I want to introduce you to Someone..."
      authorColor="green"
      direction="outgoing"
      collapseMetadata
      status="delivered"
      i18n={util.i18n}
      timestamp={Date.now()}
      contact={contactWithoutAccount}
    />
  </li>
</util.ConversationContext>;