diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 718c4aaedb11..dd16c76e8c1c 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -12,34 +12,34 @@ locations if you have a question or comment: Lastly, be sure to preview your issue before saving. Thanks! --> -- [ ] I have searched open and closed issues for duplicates - +* [ ] I have searched open and closed issues for duplicates + ----------------------------------------- +--- ### Bug description - ### Steps to reproduce -1. -2. -3. +1. step one +2. step two +3. step three Actual result: + Expected result: - + ### Screenshots @@ -48,19 +48,19 @@ How to take screenshots on all OSes: https://www.take-a-screenshot.org/ You can drag and drop images into this text box. --> - ### Platform info - Signal version: + Operating System: + Linked device version: - + ### Link to debug log diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index bf68e1ea15eb..dfd5bf2afae9 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -8,17 +8,17 @@ Remember, you can preview this before saving it. ### First time contributor checklist: -- [ ] I have read the [README](https://github.com/WhisperSystems/Signal-Desktop/blob/master/README.md) and [Contributor Guidelines](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md) -- [ ] I have signed the [Contributor Licence Agreement](https://whispersystems.org/cla/) +* [ ] I have read the [README](https://github.com/WhisperSystems/Signal-Desktop/blob/master/README.md) and [Contributor Guidelines](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md) +* [ ] I have signed the [Contributor Licence Agreement](https://whispersystems.org/cla/) ### Contributor checklist: -- [ ] My contribution is **not** related to translations. _Please submit translation changes via our [Signal Desktop Transifex project](https://www.transifex.com/liliakai/signal-desktop/)._ -- [ ] My commits are in nice logical chunks with [good commit messages](http://chris.beams.io/posts/git-commit/) -- [ ] My changes are [rebased](https://medium.freecodecamp.org/git-rebase-and-the-golden-rule-explained-70715eccc372) on the latest [`development`](https://github.com/WhisperSystems/Signal-Desktop/tree/development) branch -- [ ] My changes pass 100% of [local tests](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md#tests) -- [ ] My changes are ready to be shipped to users +* [ ] My contribution is **not** related to translations. _Please submit translation changes via our [Signal Desktop Transifex project](https://www.transifex.com/liliakai/signal-desktop/)._ +* [ ] My commits are in nice logical chunks with [good commit messages](http://chris.beams.io/posts/git-commit/) +* [ ] My changes are [rebased](https://medium.freecodecamp.org/git-rebase-and-the-golden-rule-explained-70715eccc372) on the latest [`development`](https://github.com/WhisperSystems/Signal-Desktop/tree/development) branch +* [ ] My changes pass 100% of [local tests](https://github.com/WhisperSystems/Signal-Desktop/blob/master/CONTRIBUTING.md#tests) +* [ ] My changes are ready to be shipped to users ### Description diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 358338685f03..1c54c7be973e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,5 +1,4 @@ -Contributor Guidelines -====================== +# Contributor Guidelines ## Advice for new contributors @@ -20,7 +19,6 @@ Once you've spent a little bit of time planning your solution, it's a good idea back to the issue and talk about your approach. We'd be happy to provide feedback. [An ounce of prevention, as they say!](https://www.goodreads.com/quotes/247269-an-ounce-of-prevention-is-worth-a-pound-of-cure) - ## Developer Setup First, you'll need [Node.js](https://nodejs.org/) which matches our current version. @@ -33,7 +31,7 @@ Then you need `git`, if you don't have that yet: https://git-scm.com/ And for the final step before we actually get started, you'll need build tools to install the native modules used by the application. On Windows, it's easiest to open the [Command -Prompt (`cmd.exe`) as Administrator](https://technet.microsoft.com/en-us/library/cc947813(v=ws.10).aspx) +Prompt (`cmd.exe`) as Administrator]() and run this: ``` @@ -78,7 +76,6 @@ Fear not! You don't have to link the app with your phone. During setup in develo mode, you'll be presented with a 'Standalone' button which goes through the registration process like you would on a phone. But you won't be linked to any other devices. - ## The staging environment Sadly, this default setup results in no contacts and no message history, an entirely @@ -86,9 +83,10 @@ empty application. But you can use the information from your production install Desktop to populate your testing application! First, find your application data: - - OSX: `~/Library/Application Support/Signal` - - Linux: `~/.config/Signal` - - Windows 10: `C:\Users\\AppData\Roaming\Signal` + +* OSX: `~/Library/Application Support/Signal` +* Linux: `~/.config/Signal` +* Windows 10: `C:\Users\\AppData\Roaming\Signal` Now make a copy of this production data directory in the same place, and call it `Signal-development`. Now start up the development version of the app as normal, @@ -105,7 +103,6 @@ message history and contact list. Here's the catch: you can't message any of these contacts, since they haven't done the same thing. Who can you message for testing? - ## Additional storage profiles What you need for proper testing is additional phone numbers, to register additional @@ -134,13 +131,11 @@ NODE_APP_INSTANCE=alice yarn run start This changes the [userData](https://electron.atom.io/docs/all/#appgetpathname) directory from `%appData%/Signal` to `%appData%/Signal-aliceProfile`. - # Making changes So you're in the process of preparing that pull request. Here's how to make that go smoothly. - ## Tests Please write tests! Our testing framework is @@ -163,44 +158,43 @@ the report with `yarn open-coverage`. So you wanna make a pull request? Please observe the following guidelines. - * Please do not submit pull requests for translation fixes. Anyone can update - the translations in - [Transifex](https://www.transifex.com/projects/p/signal-desktop). - * Never use plain strings right in the source code - pull them from `messages.json`! - You **only** need to modify the default locale - [`_locales/en/messages.json`](_locales/en/messages.json). Other locales are generated - automatically based on that file and then periodically uploaded to Transifex for - translation. - * [Rebase](https://nathanleclaire.com/blog/2014/09/14/dont-be-scared-of-git-rebase/) your - changes on the latest `development` branch, resolving any conflicts. - This ensures that your changes will merge cleanly when you open your PR. - * Be sure to add and run tests! - * Make sure the diff between our master and your branch contains only the - minimal set of changes needed to implement your feature or bugfix. This will - make it easier for the person reviewing your code to approve the changes. - Please do not submit a PR with commented out code or unfinished features. - * Avoid meaningless or too-granular commits. If your branch contains commits like - the lines of "Oops, reverted this change" or "Just experimenting, will - delete this later", please [squash or rebase those changes away](https://robots.thoughtbot.com/git-interactive-rebase-squash-amend-rewriting-history). - * Don't have too few commits. If you have a complicated or long lived feature - branch, it may make sense to break the changes up into logical atomic chunks - to aid in the review process. - * Provide a well written and nicely formatted commit message. See [this - link](http://chris.beams.io/posts/git-commit/) - for some tips on formatting. As far as content, try to include in your - summary - 1. What you changed - 2. Why this change was made (including git issue # if appropriate) - 3. Any relevant technical details or motivations for your implementation - choices that may be helpful to someone reviewing or auditing the commit - history in the future. When in doubt, err on the side of a longer - commit message. +* Please do not submit pull requests for translation fixes. Anyone can update + the translations in + [Transifex](https://www.transifex.com/projects/p/signal-desktop). +* Never use plain strings right in the source code - pull them from `messages.json`! + You **only** need to modify the default locale + [`_locales/en/messages.json`](_locales/en/messages.json). Other locales are generated + automatically based on that file and then periodically uploaded to Transifex for + translation. +* [Rebase](https://nathanleclaire.com/blog/2014/09/14/dont-be-scared-of-git-rebase/) your + changes on the latest `development` branch, resolving any conflicts. + This ensures that your changes will merge cleanly when you open your PR. +* Be sure to add and run tests! +* Make sure the diff between our master and your branch contains only the + minimal set of changes needed to implement your feature or bugfix. This will + make it easier for the person reviewing your code to approve the changes. + Please do not submit a PR with commented out code or unfinished features. +* Avoid meaningless or too-granular commits. If your branch contains commits like + the lines of "Oops, reverted this change" or "Just experimenting, will + delete this later", please [squash or rebase those changes away](https://robots.thoughtbot.com/git-interactive-rebase-squash-amend-rewriting-history). +* Don't have too few commits. If you have a complicated or long lived feature + branch, it may make sense to break the changes up into logical atomic chunks + to aid in the review process. +* Provide a well written and nicely formatted commit message. See [this + link](http://chris.beams.io/posts/git-commit/) + for some tips on formatting. As far as content, try to include in your + summary + 1. What you changed + 2. Why this change was made (including git issue # if appropriate) + 3. Any relevant technical details or motivations for your implementation + choices that may be helpful to someone reviewing or auditing the commit + history in the future. When in doubt, err on the side of a longer + commit message. Above all, spend some time with the repository. Follow the pull request template added to your pull request description automatically. Take a look at recent approved pull requests, see how they did things. - ## Linking to a staging mobile device Multiple standalone desktop devices are great for testing of a lot of scenarios. But a lot @@ -226,7 +220,6 @@ Then you can set up your development build of Signal Desktop as normal. If you'v set up as a standalone install, you can switch by opening the DevTools (View -> Toggle Developer Tools) and entering this into the Console and pressing enter: `window.owsDesktopApp.appView.openInstaller();` - ## Changing to production If you're completely sure that your changes will have no impact to the production servers, @@ -244,16 +237,16 @@ you can connect your development build to the production server by putting a fil production servers will _unregister_ your mobile device! All messages from your contacts will go to your new development desktop app instead of your phone. - ## Testing Production Builds To test changes to the build system, build a release using + ``` yarn generate yarn build-release ``` -Then, run the tests using `grunt test-release:osx --dir=release`, replacing `osx` with `linux` or `win` depending on your platform. +Then, run the tests using `grunt test-release:osx --dir=release`, replacing `osx` with `linux` or `win` depending on your platform. ## Dependencies @@ -265,11 +258,11 @@ npm, then run `npm install` to install bower, grunt, and related plugins. ### Adding a bower component -Add the package name and version to bower.json under 'dependencies' or `bower -install package-name --save` +Add the package name and version to bower.json under 'dependencies' or `bower install package-name --save` Next update the "preen" config in bower.json with the list of files we will actually use from the new package, e.g.: + ``` "preen": { "package-name": [ @@ -279,6 +272,7 @@ actually use from the new package, e.g.: ... } ``` + If you'd like to add the new dependency to js/components.js to be included on all html pages, simply append the package name to the concat.app list in `bower.json`. Take care to insert it in the order you would like it diff --git a/README.md b/README.md index 1540294ffcf5..71eee2080790 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Signal Desktop Signal Desktop is an Electron application that links with your [Signal Android](https://github.com/signalapp/Signal-Android) - or [Signal iOS](https://github.com/signalapp/Signal-iOS) app. +or [Signal iOS](https://github.com/signalapp/Signal-iOS) app. ## Install production version: https://signal.org/download/ @@ -12,40 +12,36 @@ Signal Desktop is an Electron application that links with your You can install it on a computer which already has the production version installed. It uses different data and install locations. -- _Windows:_ You can find the most recent build here: https://updates.signal.org/desktop/beta.yml -- _Mac:_ You can find the most recent build here: https://updates.signal.org/desktop/beta-mac.yml -- _Linux:_ same instructions as the production install steps linked above, but run `apt-get install signal-desktop-beta` instead - +* _Windows:_ You can find the most recent build here: https://updates.signal.org/desktop/beta.yml +* _Mac:_ You can find the most recent build here: https://updates.signal.org/desktop/beta-mac.yml +* _Linux:_ same instructions as the production install steps linked above, but run `apt-get install signal-desktop-beta` instead ## Got a question? You can find answers to a number of frequently asked questions on our support site: https://support.signal.org/. The community forum is another good place for questions: https://community.signalusers.org/. - ## Found a Bug? Have a feature request? Please search the existing issues for your bug and create a new one if the issue is not yet tracked! https://github.com/signalapp/Signal-Desktop/issues - ## Contributing Translations + Interested in helping to translate Signal? Contribute here: https://www.transifex.com/projects/p/signal-desktop - ## Contributing Code Please see [CONTRIBUTING.md](https://github.com/signalapp/Signal-Desktop/blob/master/CONTRIBUTING.md) for setup instructions and contributor guidelines. And don't forget to sign the [CLA](https://signal.org/cla/). - ## Contributing Funds -You can donate to Signal development through the [Freedom of the Press Foundation](https://freedom.press/crowdfunding/signal/). +You can donate to Signal development through the [Freedom of the Press Foundation](https://freedom.press/crowdfunding/signal/). ## Cryptography Notice diff --git a/package.json b/package.json index 34973ed75e37..bec36c58a739 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "lint": "yarn format --list-different && yarn lint-windows", "lint-windows": "yarn eslint && yarn grunt lint && yarn tslint", "tslint": "tslint --config tslint.json --format stylish --project .", - "format": "prettier --write \"*.js\" \"js/**/*.js\" \"ts/**/*.{ts,tsx}\" \"test/**/*.js\"", + "format": "prettier --write \"*.js\" \"js/**/*.js\" \"ts/**/*.{ts,tsx}\" \"test/**/*.js\" \"*.md\" \"./**/*.md\"", "transpile": "tsc", "clean-transpile": "rimraf ts/**/*.js ts/*.js", "open-coverage": "open coverage/lcov-report/index.html", diff --git a/ts/components/Lightbox.md b/ts/components/Lightbox.md index 4bc11546d2d6..fb439a92b1fb 100644 --- a/ts/components/Lightbox.md +++ b/ts/components/Lightbox.md @@ -1,7 +1,7 @@ ```js const noop = () => {}; -
+
{}; onPrevious={noop} onSave={noop} /> -
+
; ``` diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md index 66f90e0dc597..7bb78be59350 100644 --- a/ts/components/LightboxGallery.md +++ b/ts/components/LightboxGallery.md @@ -10,10 +10,7 @@ const items = [ { objectURL: 'https://placekitten.com/920/620', contentType: 'image/jpeg' }, ]; -
- -
+
+ +
; ``` diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md index 116d365b94b5..afefcd50786c 100644 --- a/ts/components/conversation/Message.md +++ b/ts/components/conversation/Message.md @@ -1,4 +1,3 @@ - Placeholder component: ```jsx @@ -17,21 +16,17 @@ const outgoing = new Whisper.Message({ body: 'How are you doing this fine day?', sent_at: Date.now() - 18000, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` ### In a group conversation @@ -42,21 +37,17 @@ const outgoing = new Whisper.Message({ body: 'How are you doing this fine day?', sent_at: Date.now() - 200000, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - - + + + +; ``` ### With an error @@ -72,22 +63,18 @@ const outgoing = new Whisper.Message({ sent_at: Date.now() - 200000, errors: [error], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', - body: null, -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + body: null, + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Network error (outgoing only) @@ -103,12 +90,9 @@ const outgoing = new Whisper.Message({ body: "This message won't get through...", }); const View = Whisper.MessageView; - - - + + +; ``` #### Network error, partial send in group (outgoing only) @@ -125,12 +109,9 @@ const outgoing = new Whisper.Message({ body: "This message won't get through...", }); const View = Whisper.MessageView; - - - + + +; ``` #### No message contents @@ -140,22 +121,18 @@ const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 200000, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - - + + + +; ``` ### Disappearing @@ -168,22 +145,18 @@ const outgoing = new Whisper.Message({ expirationStartTimestamp: Date.now() - 1000, body: 'This message will self-destruct in two minutes', }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - - + + + +; ``` ### Notfications @@ -200,7 +173,7 @@ const fromOther = new Whisper.Message({ expirationStartTimestamp: Date.now() - 1000, expirationTimerUpdate: { source: '+12025550003', - } + }, }); const fromUpdate = new Whisper.Message({ type: 'incoming', @@ -212,7 +185,7 @@ const fromUpdate = new Whisper.Message({ expirationTimerUpdate: { fromSync: true, source: util.ourNumber, - } + }, }); const fromMe = new Whisper.Message({ type: 'incoming', @@ -223,23 +196,14 @@ const fromMe = new Whisper.Message({ expirationStartTimestamp: Date.now() - 1000, expirationTimerUpdate: { source: util.ourNumber, - } + }, }); const View = Whisper.ExpirationTimerUpdateView; - - - - - + + + + +; ``` #### Safety number change @@ -251,12 +215,9 @@ const incoming = new Whisper.Message({ key_changed: '+12025550003', }); const View = Whisper.KeyChangeView; - - - + + +; ``` #### Marking as verified @@ -277,16 +238,10 @@ const local = new Whisper.Message({ }); const View = Whisper.VerifiedChangeView; - - - - + + + +; ``` #### Marking as not verified @@ -305,16 +260,10 @@ const local = new Whisper.Message({ }); const View = Whisper.VerifiedChangeView; - - - - + + + +; ``` #### Group update @@ -324,29 +273,21 @@ const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 200000, group_update: { - joined: [ - '+12025550007', - '+12025550008', - '+12025550009', - ], + joined: ['+12025550007', '+12025550008', '+12025550009'], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - - + + + +; ``` #### End session @@ -357,22 +298,18 @@ const outgoing = new Whisper.Message({ sent_at: Date.now() - 200000, flags: textsecure.protobuf.DataMessage.Flags.END_SESSION, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - - + + + +; ``` ### With an attachment @@ -384,27 +321,25 @@ const outgoing = new Whisper.Message({ type: 'outgoing', body: 'I am pretty confused about Pi.', sent_at: Date.now() - 18000000, - attachments: [{ - data: util.gif, - fileName: 'pi.gif', - contentType: 'image/gif', - }], + attachments: [ + { + data: util.gif, + fileName: 'pi.gif', + contentType: 'image/gif', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Image @@ -413,27 +348,25 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 18000000, - attachments: [{ - data: util.gif, - fileName: 'pi.gif', - contentType: 'image/gif', - }], + attachments: [ + { + data: util.gif, + fileName: 'pi.gif', + contentType: 'image/gif', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Image with portrait aspect ratio @@ -442,30 +375,27 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 18000000, - attachments: [{ - data: util.portraitYellow, - fileName: 'portraitYellow.png', - contentType: 'image/png', - }], + attachments: [ + { + data: util.portraitYellow, + fileName: 'portraitYellow.png', + contentType: 'image/png', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +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 @@ -473,27 +403,25 @@ 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', - }], + attachments: [ + { + data: util.portraitYellow, + fileName: 'portraitYellow.png', + contentType: 'image/png', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Image with landscape aspect ratio @@ -502,27 +430,25 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 18000000, - attachments: [{ - data: util.landscapePurple, - fileName: 'landscapePurple.jpg', - contentType: 'image/jpeg', - }], + attachments: [ + { + data: util.landscapePurple, + fileName: 'landscapePurple.jpg', + contentType: 'image/jpeg', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Image with landscape aspect ratio and caption @@ -532,27 +458,25 @@ 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', - }], + attachments: [ + { + data: util.landscapePurple, + fileName: 'landscapePurple.jpg', + contentType: 'image/jpeg', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Video with caption @@ -562,27 +486,25 @@ const outgoing = new Whisper.Message({ type: 'outgoing', body: "Beautiful, isn't it?", sent_at: Date.now() - 10000, - attachments: [{ - data: util.mp4, - fileName: 'freezing_bubble.mp4', - contentType: 'video/mp4', - }], + attachments: [ + { + data: util.mp4, + fileName: 'freezing_bubble.mp4', + contentType: 'video/mp4', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Video @@ -591,27 +513,25 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 10000, - attachments: [{ - data: util.mp4, - fileName: 'freezing_bubble.mp4', - contentType: 'video/mp4', - }], + attachments: [ + { + data: util.mp4, + fileName: 'freezing_bubble.mp4', + contentType: 'video/mp4', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Audio with caption @@ -621,27 +541,25 @@ const outgoing = new Whisper.Message({ type: 'outgoing', body: 'This is a nice song', sent_at: Date.now() - 15000, - attachments: [{ - data: util.mp3, - fileName: 'agnus_dei.mp3', - contentType: 'audio/mp3', - }], + attachments: [ + { + data: util.mp3, + fileName: 'agnus_dei.mp3', + contentType: 'audio/mp3', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Audio @@ -650,27 +568,25 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 15000, - attachments: [{ - data: util.mp3, - fileName: 'agnus_dei.mp3', - contentType: 'audio/mp3', - }], + attachments: [ + { + data: util.mp3, + fileName: 'agnus_dei.mp3', + contentType: 'audio/mp3', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Voice message @@ -679,28 +595,26 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 15000, - attachments: [{ - flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE, - data: util.mp3, - fileName: 'agnus_dei.mp3', - contentType: 'audio/mp3', - }], + attachments: [ + { + flags: textsecure.protobuf.AttachmentPointer.Flags.VOICE_MESSAGE, + data: util.mp3, + fileName: 'agnus_dei.mp3', + contentType: 'audio/mp3', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Other file type with caption @@ -710,27 +624,25 @@ const outgoing = new Whisper.Message({ type: 'outgoing', body: 'My manifesto is now complete!', sent_at: Date.now() - 15000, - attachments: [{ - data: util.txt, - fileName: 'lorum_ipsum.txt', - contentType: 'text/plain', - }], + attachments: [ + { + data: util.txt, + fileName: 'lorum_ipsum.txt', + contentType: 'text/plain', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Other file type @@ -739,25 +651,23 @@ const View = Whisper.MessageView; const outgoing = new Whisper.Message({ type: 'outgoing', sent_at: Date.now() - 15000, - attachments: [{ - data: util.txt, - fileName: 'lorum_ipsum.txt', - contentType: 'text/plain', - }], + attachments: [ + { + data: util.txt, + fileName: 'lorum_ipsum.txt', + contentType: 'text/plain', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550003', - type: 'incoming', -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', + }) +); const View = Whisper.MessageView; - - - + + +; ``` diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md index 64678f9d18f3..7cdf0b514a1f 100644 --- a/ts/components/conversation/Quote.md +++ b/ts/components/conversation/Quote.md @@ -1,4 +1,3 @@ - ### With a quotation, text-only replies #### Plain text @@ -14,24 +13,20 @@ const outgoing = new Whisper.Message({ id: Date.now() - 1000, }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### With emoji @@ -47,24 +42,20 @@ const outgoing = new Whisper.Message({ id: Date.now() - 1000, }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Replies to you or yourself @@ -80,24 +71,20 @@ const outgoing = new Whisper.Message({ id: Date.now() - 1000, }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: util.ourNumber, - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: util.ourNumber, + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### In a group conversation @@ -113,24 +100,20 @@ const outgoing = new Whisper.Message({ id: Date.now() - 1000, }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550007', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550002', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550007', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550002', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### A lot of text in quotation @@ -150,24 +133,20 @@ const outgoing = new Whisper.Message({ id: Date.now() - 1000, }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### A lot of text in quotation, with icon @@ -193,24 +172,20 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### A lot of text in quotation, with image @@ -242,28 +217,24 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); outgoing.quoteThumbnail = thumbnail; incoming.quoteThumbnail = thumbnail; const View = Whisper.MessageView; - - - + + +; ``` #### Image with caption @@ -292,28 +263,24 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); outgoing.quoteThumbnail = thumbnail; incoming.quoteThumbnail = thumbnail; const View = Whisper.MessageView; - - - + + +; ``` #### Image @@ -325,7 +292,7 @@ const thumbnail = { const outgoing = new Whisper.Message({ type: 'outgoing', - body: "Yeah, pi. Tough to wrap your head around.", + body: 'Yeah, pi. Tough to wrap your head around.', sent_at: Date.now() - 18000000, quote: { author: '+12025550011', @@ -341,28 +308,24 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); outgoing.quoteThumbnail = thumbnail; incoming.quoteThumbnail = thumbnail; const View = Whisper.MessageView; - - - + + +; ``` #### Image with no thumbnail @@ -370,7 +333,7 @@ const View = Whisper.MessageView; ```jsx const outgoing = new Whisper.Message({ type: 'outgoing', - body: "Yeah, pi. Tough to wrap your head around.", + body: 'Yeah, pi. Tough to wrap your head around.', sent_at: Date.now() - 18000000, quote: { author: '+12025550011', @@ -383,25 +346,21 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Video with caption @@ -413,7 +372,7 @@ const thumbnail = { const outgoing = new Whisper.Message({ type: 'outgoing', - body: "Sweet the way the video sneaks up on you!", + body: 'Sweet the way the video sneaks up on you!', sent_at: Date.now() - 18000000, quote: { author: '+12025550011', @@ -430,28 +389,24 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); outgoing.quoteThumbnail = thumbnail; incoming.quoteThumbnail = thumbnail; const View = Whisper.MessageView; - - - + + +; ``` #### Video @@ -463,7 +418,7 @@ const thumbnail = { const outgoing = new Whisper.Message({ type: 'outgoing', - body: "Awesome!", + body: 'Awesome!', sent_at: Date.now() - 18000000, quote: { author: '+12025550011', @@ -475,33 +430,29 @@ const outgoing = new Whisper.Message({ thumbnail: { contentType: 'image/gif', data: util.gif, - } + }, }, ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); outgoing.quoteThumbnail = thumbnail; incoming.quoteThumbnail = thumbnail; const View = Whisper.MessageView; - - - + + +; ``` #### Video with no thumbnail @@ -509,7 +460,7 @@ const View = Whisper.MessageView; ```jsx const outgoing = new Whisper.Message({ type: 'outgoing', - body: "Awesome!", + body: 'Awesome!', sent_at: Date.now() - 18000000, quote: { author: '+12025550011', @@ -522,25 +473,21 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Audio with caption @@ -562,24 +509,20 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Audio @@ -600,24 +543,20 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Voice message @@ -640,24 +579,20 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Other file type with caption @@ -679,24 +614,20 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Other file type @@ -717,24 +648,20 @@ const outgoing = new Whisper.Message({ ], }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` ### With a quotation, including attachment @@ -751,30 +678,28 @@ const outgoing = new Whisper.Message({ author: '+12025550011', id: Date.now() - 1000, }, - attachments: [{ - data: util.gif, - fileName: 'pi.gif', - contentType: 'image/gif', - }], + attachments: [ + { + data: util.gif, + fileName: 'pi.gif', + contentType: 'image/gif', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Quote, image attachment @@ -788,30 +713,28 @@ const outgoing = new Whisper.Message({ author: '+12025550011', id: Date.now() - 1000, }, - attachments: [{ - data: util.gif, - fileName: 'pi.gif', - contentType: 'image/gif', - }], + attachments: [ + { + data: util.gif, + fileName: 'pi.gif', + contentType: 'image/gif', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Quote, portrait image attachment @@ -825,33 +748,30 @@ const outgoing = new Whisper.Message({ author: '+12025550011', id: Date.now() - 1000, }, - attachments: [{ - data: util.portraitYellow, - fileName: 'pi.gif', - contentType: 'image/gif', - }], + attachments: [ + { + data: util.portraitYellow, + fileName: 'pi.gif', + contentType: 'image/gif', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` - #### Quote, video attachment ```jsx @@ -863,30 +783,28 @@ const outgoing = new Whisper.Message({ author: '+12025550011', id: Date.now() - 1000, }, - attachments: [{ - data: util.mp4, - fileName: 'freezing_bubble.mp4', - contentType: 'video/mp4', - }], + attachments: [ + { + data: util.mp4, + fileName: 'freezing_bubble.mp4', + contentType: 'video/mp4', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Quote, audio attachment @@ -900,30 +818,28 @@ const outgoing = new Whisper.Message({ author: '+12025550011', id: Date.now() - 1000, }, - attachments: [{ - data: util.mp3, - fileName: 'agnus_dei.mp3', - contentType: 'audio/mp3', - }], + attachments: [ + { + data: util.mp3, + fileName: 'agnus_dei.mp3', + contentType: 'audio/mp3', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Quote, file attachment @@ -937,31 +853,28 @@ const outgoing = new Whisper.Message({ author: '+12025550011', id: Date.now() - 1000, }, - attachments: [{ - data: util.txt, - fileName: 'lorum_ipsum.txt', - contentType: 'text/plain', - }], + attachments: [ + { + data: util.txt, + fileName: 'lorum_ipsum.txt', + contentType: 'text/plain', + }, + ], }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), - -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` #### Quote, but no message @@ -976,24 +889,20 @@ const outgoing = new Whisper.Message({ id: Date.now() - 1000, }, }); -const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { - source: '+12025550011', - type: 'incoming', - quote: Object.assign({}, outgoing.attributes.quote, { - author: '+12025550005', - }), -})); +const incoming = new Whisper.Message( + Object.assign({}, outgoing.attributes, { + source: '+12025550011', + type: 'incoming', + quote: Object.assign({}, outgoing.attributes.quote, { + author: '+12025550005', + }), + }) +); const View = Whisper.MessageView; - - - + + +; ``` ### In bottom bar @@ -1027,10 +936,12 @@ const View = Whisper.MessageView; authorProfileName="Mr. Blue" id={Date.now() - 1000} i18n={window.i18n} - attachments={[{ - contentType: 'image/jpeg', - fileName: 'llama.jpg', - }]} + attachments={[ + { + contentType: 'image/jpeg', + fileName: 'llama.jpg', + }, + ]} /> @@ -1048,13 +959,15 @@ const View = Whisper.MessageView; authorProfileName="Mr. Blue" id={Date.now() - 1000} i18n={window.i18n} - attachments={[{ - contentType: 'image/gif', - fileName: 'llama.gif', - thumbnail: { - objectUrl: util.gifObjectUrl + attachments={[ + { + contentType: 'image/gif', + fileName: 'llama.gif', + thumbnail: { + objectUrl: util.gifObjectUrl, + }, }, - }]} + ]} /> @@ -1091,10 +1004,12 @@ const View = Whisper.MessageView; id={Date.now() - 1000} onClose={() => console.log('Close was clicked!')} i18n={window.i18n} - attachments={[{ - contentType: 'image/jpeg', - fileName: 'llama.jpg', - }]} + attachments={[ + { + contentType: 'image/jpeg', + fileName: 'llama.jpg', + }, + ]} /> @@ -1113,13 +1028,15 @@ const View = Whisper.MessageView; id={Date.now() - 1000} onClose={() => console.log('Close was clicked!')} i18n={window.i18n} - attachments={[{ - contentType: 'image/gif', - fileName: 'llama.gif', - thumbnail: { - objectUrl: util.gifObjectUrl + attachments={[ + { + contentType: 'image/gif', + fileName: 'llama.gif', + thumbnail: { + objectUrl: util.gifObjectUrl, + }, }, - }]} + ]} /> diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md index e6382357dfbe..fb6b0ae566c5 100644 --- a/ts/components/conversation/media-gallery/EmptyState.md +++ b/ts/components/conversation/media-gallery/EmptyState.md @@ -1,11 +1,11 @@ ```js -
- +
+
``` ```js -
- +
+
``` diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md index 729117144897..ee65d6cda2f4 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.md +++ b/ts/components/conversation/media-gallery/MediaGallery.md @@ -18,27 +18,32 @@ const MONTH_MS = 30 * DAY_MS; const YEAR_MS = 12 * MONTH_MS; const tokens = ['foo', 'bar', 'baz', 'qux', 'quux']; const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff']; -const createRandomMessage = ({startTime, timeWindow} = {}) => (props) => { +const createRandomMessage = ({ startTime, timeWindow } = {}) => props => { const now = Date.now(); - const fileName = - `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(fileExtensions)}`; + const fileName = `${_.sample(tokens)}${_.sample(tokens)}.${_.sample( + fileExtensions + )}`; return { id: _.random(now).toString(), received_at: _.random(startTime, startTime + timeWindow), - attachments: [{ - data: null, - fileName, - size: _.random(1000, 1000 * 1000 * 50), - }], + attachments: [ + { + data: null, + fileName, + size: _.random(1000, 1000 * 1000 * 50), + }, + ], - objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random(50, 150)}`, + objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random( + 50, + 150 + )}`, ...props, }; }; -const createRandomMessages = ({startTime, timeWindow}) => - _.range(_.random(5, 10)).map(createRandomMessage({startTime, timeWindow})); - +const createRandomMessages = ({ startTime, timeWindow }) => + _.range(_.random(5, 10)).map(createRandomMessage({ startTime, timeWindow })); const startTime = Date.now(); const messages = _.sortBy( @@ -67,9 +72,5 @@ const messages = _.sortBy( message => -message.received_at ); - +; ``` diff --git a/ts/components/utility/BackboneWrapper.md b/ts/components/utility/BackboneWrapper.md index 7f6c3b56e66f..63ddd8ae638f 100644 --- a/ts/components/utility/BackboneWrapper.md +++ b/ts/components/utility/BackboneWrapper.md @@ -6,15 +6,12 @@ const model = new Whisper.Message({ type: 'outgoing', body: 'text', sent_at: Date.now() - 5000, -}) +}); const View = Whisper.MessageView; const options = { model, }; - - + +; ``` diff --git a/ts/styleguide/ConversationContext.md b/ts/styleguide/ConversationContext.md index 6a314e44e431..c83b35951eb8 100644 --- a/ts/styleguide/ConversationContext.md +++ b/ts/styleguide/ConversationContext.md @@ -1,4 +1,3 @@ - The simplest example of using the `` component: ```jsx