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 'c36d071859'
${ noResults }
session-desktop/ts/components/conversation/Image.md

8.3 KiB
Raw Blame History

Various sizes

<util.ConversationContext theme={util.theme}>
  <Image
    height="200"
    width="199"
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="99"
    width="99"
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="99"
    width="99"
    url={util.pngObjectUrl}
    attachment={{ pending: true }}
    i18n={util.i18n}
  />
</util.ConversationContext>

Various curved corners

<util.ConversationContext theme={util.theme}>
  <Image
    height="149"
    width="149"
    curveTopLeft
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    curveTopRight
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    curveBottomLeft
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    curveBottomRight
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    curveBottomRight
    url={util.pngObjectUrl}
    attachment={{ pending: true }}
    i18n={util.i18n}
  />
</util.ConversationContext>

With bottom overlay

<util.ConversationContext theme={util.theme}>
  <Image
    height="149"
    width="149"
    bottomOverlay
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    bottomOverlay
    curveBottomRight
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    bottomOverlay
    curveBottomLeft
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    bottomOverlay
    curveBottomLeft
    url={util.pngObjectUrl}
    attachment={{ pending: true }}
    i18n={util.i18n}
  />
</util.ConversationContext>

With play icon

<util.ConversationContext theme={util.theme}>
  <Image
    height="200"
    width="199"
    playIconOverlay
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="149"
    width="149"
    playIconOverlay
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="99"
    width="99"
    playIconOverlay
    url={util.pngObjectUrl}
    attachment={{}}
    i18n={util.i18n}
  />
  <Image
    height="99"
    width="99"
    playIconOverlay
    url={util.pngObjectUrl}
    attachment={{ pending: true }}
    i18n={util.i18n}
  />
</util.ConversationContext>

With dark overlay and text

<util.ConversationContext theme={util.theme}>
  <div>
    <Image
      height="200"
      width="199"
      darkOverlay
      attachment={{}}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="149"
      width="149"
      darkOverlay
      attachment={{}}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      darkOverlay
      attachment={{}}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      darkOverlay
      attachment={{ pending: true }}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
  </div>
  <hr />
  <div>
    <Image
      height="200"
      width="199"
      darkOverlay
      attachment={{}}
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="149"
      width="149"
      darkOverlay
      attachment={{}}
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      darkOverlay
      attachment={{}}
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      darkOverlay
      attachment={{ pending: true }}
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
  </div>
</util.ConversationContext>

With caption

<util.ConversationContext theme={util.theme}>
  <div>
    <Image
      height="200"
      width="199"
      attachment={{ caption: 'dogs playing' }}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="149"
      width="149"
      attachment={{ caption: 'dogs playing' }}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      attachment={{ caption: 'dogs playing' }}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      attachment={{ caption: 'dogs playing', pending: true }}
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
  </div>
  <hr />
  <div>
    <Image
      height="200"
      width="199"
      attachment={{ caption: 'dogs playing' }}
      darkOverlay
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="149"
      width="149"
      attachment={{ caption: 'dogs playing' }}
      darkOverlay
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      attachment={{ caption: 'dogs playing' }}
      darkOverlay
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      attachment={{ caption: 'dogs playing', pending: true }}
      darkOverlay
      overlayText="+3"
      url={util.pngObjectUrl}
      i18n={util.i18n}
    />
  </div>
</util.ConversationContext>

With top-right X and soft corners

<util.ConversationContext theme={util.theme}>
  <div>
    <Image
      height="200"
      width="199"
      attachment={{}}
      closeButton={true}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="149"
      width="149"
      attachment={{}}
      closeButton={true}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      attachment={{}}
      closeButton={true}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      attachment={{ pending: true }}
      closeButton={true}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
  </div>
  <br />
  <div>
    <Image
      height="200"
      width="199"
      attachment={{}}
      closeButton={true}
      attachment={{ caption: 'dogs playing' }}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="149"
      width="149"
      attachment={{}}
      closeButton={true}
      attachment={{ caption: 'dogs playing' }}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      closeButton={true}
      attachment={{ caption: 'dogs playing' }}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
    <Image
      height="99"
      width="99"
      closeButton={true}
      attachment={{ caption: 'dogs playing', pending: true }}
      onClick={() => console.log('onClick')}
      onClickClose={attachment => console.log('onClickClose', attachment)}
      softCorners={true}
      url={util.gifObjectUrl}
      i18n={util.i18n}
    />
  </div>
</util.ConversationContext>