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 '1e7cd24b1b'
${ noResults }
session-desktop/ts/components/Avatar.md

6.1 KiB
Raw Blame History

With avatar

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="pink"
    name="John Smith"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="pink"
    name="Puppies"
    avatarPath={util.gifObjectUrl}
    conversationType="group"
    i18n={util.i18n}
  />
</util.ConversationContext>

With only name

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="blue"
    name="John"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="green"
    name="John Smith"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="red"
    name="Puppies"
    conversationType="group"
    i18n={util.i18n}
  />
</util.ConversationContext>

Just phone number

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="pink"
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
</util.ConversationContext>

Note to self

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={80}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={48}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={36}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
</util.ConversationContext>

All colors

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="signal-blue"
    name="Group"
    conversationType="group"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="red"
    name="Red"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="deep_orange"
    name="Deep Orange"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="brown"
    name="Broen"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="pink"
    name="Pink"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="purple"
    name="Purple"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="indigo"
    name="Indigo"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="blue"
    name="Blue"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="teal"
    name="Teal"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="green"
    name="Green"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="light_green"
    name="Light Green"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="blue_grey"
    name="Blue Grey"
    conversationType="direct"
    i18n={util.i18n}
  />
</util.ConversationContext>

36px

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={36}
    color="teal"
    name="John Smith"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={36}
    color="teal"
    name="John"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={36}
    color="teal"
    name="John Smith"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
  <Avatar
    size={36}
    color="teal"
    name="Pupplies"
    conversationType="group"
    i18n={util.i18n}
  />
</util.ConversationContext>

48px

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={48}
    color="teal"
    name="John Smith"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={48}
    color="teal"
    name="John"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={48}
    color="teal"
    name="John Smith"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
  <Avatar
    size={48}
    color="teal"
    name="Pupplies"
    conversationType="group"
    i18n={util.i18n}
  />
</util.ConversationContext>

80px

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={80}
    color="teal"
    name="John Smith"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={80}
    color="teal"
    name="John"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={80}
    color="teal"
    name="John Smith"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
  <Avatar
    size={80}
    color="teal"
    name="Pupplies"
    conversationType="group"
    i18n={util.i18n}
  />
</util.ConversationContext>

Broken color

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="fake"
    name="F"
    conversationType="direct"
    i18n={util.i18n}
  />
</util.ConversationContext>

Broken image

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="pink"
    name="John Smith"
    avatarPath="nonexistent"
    conversationType="direct"
    i18n={util.i18n}
  />
</util.ConversationContext>

Broken image for group

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    avatarPath="nonexistent"
    color="pink"
    name="Puppies"
    avatarPath="nonexistent"
    conversationType="group"
    i18n={util.i18n}
  />
</util.ConversationContext>