From 5af5bbdb0f498420072a7fe4d9de9859a67cea2b Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Mon, 16 Apr 2018 16:23:05 -0700 Subject: [PATCH] Add style guide examples for portrait/landscape images --- fixtures/1000x50-green.jpeg | Bin 0 -> 15083 bytes fixtures/200x50-purple.png | Bin 0 -> 340 bytes fixtures/20x200-yellow.png | Bin 0 -> 489 bytes fixtures/300x1-red.jpeg | Bin 0 -> 706 bytes fixtures/50x1000-teal.jpeg | Bin 0 -> 14678 bytes styleguide.config.js | 2 +- ts/components/conversation/Message.md | 119 ++++++++++++++++++++++++++ ts/styleguide/StyleGuideUtil.ts | 27 ++++++ 8 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 fixtures/1000x50-green.jpeg create mode 100644 fixtures/200x50-purple.png create mode 100644 fixtures/20x200-yellow.png create mode 100644 fixtures/300x1-red.jpeg create mode 100644 fixtures/50x1000-teal.jpeg diff --git a/fixtures/1000x50-green.jpeg b/fixtures/1000x50-green.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..37121f4ebd04f2312da368dd4bd7236d9c5a09c9 GIT binary patch literal 15083 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 A8UO$Q literal 0 HcmV?d00001 diff --git a/fixtures/200x50-purple.png b/fixtures/200x50-purple.png new file mode 100644 index 0000000000000000000000000000000000000000..083e1e47ef5126ea2f550675ceccb723c6596c3e GIT binary patch literal 340 zcmeAS@N?(olHy`uVBq!ia0y~yU^v0Rz#ziG24XEKI>o@iz*rpQ?!>U}oXkrG1_sUo zkH}&M1~F9-X7mhF`M|)y@YB=9F(iZa?X8VmhYSRcea!CgD4TBAmVAHNdxa9cFDGl{ zc8gnu98^ru+v0K>-a8feB1} zsw^BFk$&abLw*enH*Wqf z$$P(+XT9Qk-|L>+N>88H$zhTDcQ%{ZKU|)vhW%rqpHHTWgG0}Q%-7Bh4L>Z@mzfAD qD7byt@>S8np=OS7uoPzv!wD(=ckNnB3m6y}7(8A5T-G@yGywp&%zr=t literal 0 HcmV?d00001 diff --git a/fixtures/20x200-yellow.png b/fixtures/20x200-yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..f3ff95271d281f2ad5e193b4904fdee4363e70a1 GIT binary patch literal 489 zcmeAS@N?(olHy`uVBq!ia0y~yU=U$oU^v0S#=yYvqV!-S0|NtNage(c!@6@aFBupZ zI14-?iy0WiR6&^0Gf3qF0|R59r;B4q2J72f2R)qw1zI1fa3pbmQ^=6b%Q+wvv#e`M zBJa98yF{foaEU7^9TWc8$aC*AUvk+`d6`L-#>K+>Ql{%{zkRf9yp5v8xGpq5@HkFIuprL#GX;{ zWTxMhc_DFMYyK^Nky%ynuKC^mKTjh2&6{_|Z!h29(EoYGy{Jgd@KfzYt9r`Q?mhf+ zYJOGG@;#d3m(SYEr}LCsKR>m#XyqH3_ftQL%2X_SoBY%>Qv3a>A6$HUu6|3aaeCR( zmU?=M_rK=}C7Z6@vlrnz^Wd&Xo1gmY#2J=5HF@UxT{~=0Tof!}HFr&W;6`eXWRqOm%*nG4U3i&d%VVr=-n#Je$tsC7zdSDI<&(b}oSAb6he72HZSg*h XA)l9-Zf{{=U|{fc^>bP0l+XkKp;6Kn literal 0 HcmV?d00001 diff --git a/fixtures/300x1-red.jpeg b/fixtures/300x1-red.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..2bb34c2e785ee65224b185867337e5ef9f81ffac GIT binary patch literal 706 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 O&;;6lhJ^Y5-vj_wW7HA= literal 0 HcmV?d00001 diff --git a/styleguide.config.js b/styleguide.config.js index 7c2eea7d6..ea2955031 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -163,7 +163,7 @@ module.exports = { }, { // To test handling of attachments, we need arraybuffers in memory - test: /\.(gif|mp3|mp4|txt)$/, + test: /\.(gif|mp3|mp4|txt|jpg|jpeg|png)$/, loader: 'arraybuffer-loader', }, ], diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md index 262ec7db4..aeaa9e119 100644 --- a/ts/components/conversation/Message.md +++ b/ts/components/conversation/Message.md @@ -120,6 +120,125 @@ const View = Whisper.MessageView; ``` +#### Image with portrait aspect ratio + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.portraitYellow, + fileName: 'portraitYellow.png', + contentType: 'image/png', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + + +#### Image with portrait aspect ratio and caption + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + body: 'This is an odd yellow bar. Cool, huh?', + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.portraitYellow, + fileName: 'portraitYellow.png', + contentType: 'image/png', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +#### Image with landscape aspect ratio + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.landscapePurple, + fileName: 'landscapePurple.jpg', + contentType: 'image/jpeg', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +#### Image with landscape aspect ratio and caption + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + body: "An interesting horizontal bar. It's art.", + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.landscapePurple, + fileName: 'landscapePurple.jpg', + contentType: 'image/jpeg', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + #### Video with caption ```jsx diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 7b0dfd99d..abd694822 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -41,6 +41,23 @@ const txtObjectUrl = makeObjectUrl(txt, 'text/plain'); import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4'; const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4'); +// @ts-ignore +import landscapeGreen from '../../fixtures/1000x50-green.jpeg'; +const landscapeGreenObjectUrl = makeObjectUrl(landscapeGreen, 'image/jpeg'); +// @ts-ignore +import landscapePurple from '../../fixtures/200x50-purple.png'; +const landscapePurpleObjectUrl = makeObjectUrl(landscapePurple, 'image/png'); +// @ts-ignore +import portraitYellow from '../../fixtures/20x200-yellow.png'; +const portraitYellowObjectUrl = makeObjectUrl(portraitYellow, 'image/png'); +// @ts-ignore +import landscapeRed from '../../fixtures/300x1-red.jpeg'; +const landscapeRedObjectUrl = makeObjectUrl(landscapeRed, 'image/png'); +// @ts-ignore +import portraitTeal from '../../fixtures/50x1000-teal.jpeg'; +const portraitTealObjectUrl = makeObjectUrl(portraitTeal, 'image/png'); + + function makeObjectUrl(data: ArrayBuffer, contentType: string): string { const blob = new Blob([data], { type: contentType, @@ -59,6 +76,16 @@ export { mp4ObjectUrl, txt, txtObjectUrl, + landscapeGreen, + landscapeGreenObjectUrl, + landscapePurple, + landscapePurpleObjectUrl, + portraitYellow, + portraitYellowObjectUrl, + landscapeRed, + landscapeRedObjectUrl, + portraitTeal, + portraitTealObjectUrl, ourNumber, };