diff --git a/styleguide.config.js b/styleguide.config.js index 69a8b8612..ca80d421e 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -126,6 +126,9 @@ module.exports = { { src: 'js/views/timestamp_view.js', }, + { + src: 'js/views/attachment_view.js', + }, { src: 'js/views/message_view.js', }, diff --git a/test/styleguide/legacy_bridge.js b/test/styleguide/legacy_bridge.js index 5b2c58a97..12e8db827 100644 --- a/test/styleguide/legacy_bridge.js +++ b/test/styleguide/legacy_bridge.js @@ -10,12 +10,33 @@ window.PROTO_ROOT = '/protos'; window.nodeSetImmediate = () => {}; +window.libphonenumber = { + parse: number => ({ + e164: number, + isValidNumber: true, + getCountryCode: () => '1', + getNationalNumber: () => number, + }), + isValidNumber: () => true, + getRegionCodeForNumber: () => '1', + format: number => number.e164, + PhoneNumberFormat: {}, +}; + window.Signal = {}; window.Signal.Backup = {}; window.Signal.Crypto = {}; window.Signal.Logs = {}; window.Signal.Migrations = { - getPlaceholderMigrations: () => {}, + getPlaceholderMigrations: () => [{ + migrate: (transaction, next) => { + console.log('migration version 1'); + transaction.db.createObjectStore('conversations'); + next(); + }, + version: 1 + }], + loadAttachmentData: attachment => Promise.resolve(attachment), }; window.Signal.Components = {}; diff --git a/test/styleguide/legacy_templates.js b/test/styleguide/legacy_templates.js index 090c2c085..7710ba98d 100644 --- a/test/styleguide/legacy_templates.js +++ b/test/styleguide/legacy_templates.js @@ -49,4 +49,13 @@ window.Whisper.View.Templates = { expirationTimerUpdate: ` {{ content }} `, + 'file-view': ` +
+
+
+ {{ fileName }} +
+
{{ fileSize }}
+
+ `, }; diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md index 3129936b6..ed26747b9 100644 --- a/ts/components/conversation/Message.md +++ b/ts/components/conversation/Message.md @@ -1,6 +1,161 @@ +Placeholder: + ```jsx ``` + +## With an attachment + +### Image + +```jsx +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', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550100', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +### Video + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + body: "Beatiful, isn't it?", + sent_at: Date.now() - 10000, + attachments: [{ + data: util.mp4, + fileName: 'freezing_bubble.mp4', + contentType: 'video/mp4', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550100', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +### Audio + +```jsx +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', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550100', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +### Voice message + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + body: 'This is a nice song', + sent_at: Date.now() - 15000, + 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: '+12025550100', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +### Other file type + +```jsx +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', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550100', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 8a349f47c..2683d88c7 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -2,8 +2,9 @@ import React from 'react'; /** - * A placeholder Message component, giving the structure of a plain message with none of - * the dynamic functionality. We can build off of this going forward. + * A placeholder Message component for now, giving the structure of a plain message with + * none of the dynamic functionality. This page will be used to build up our corpus of + * permutations before start moving all message functionality to React. */ export class Message extends React.Component<{}, {}> { public render() { diff --git a/ts/components/conversation/Reply.md b/ts/components/conversation/Reply.md index e3a5855c0..ba102464d 100644 --- a/ts/components/conversation/Reply.md +++ b/ts/components/conversation/Reply.md @@ -1,2 +1,20 @@ This is Reply.md. + +```jsx +const model = new Whisper.Message({ + type: 'outgoing', + body: 'text', + sent_at: Date.now() - 18000000, +}) +const View = Whisper.MessageView; +const options = { + model, +}; + + + +``` diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 903adcc4b..8b633fb92 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -82,3 +82,5 @@ parent.Signal.Components = { Reply, }; +parent.ConversationController._initialFetchComplete = true; +parent.ConversationController._initialPromise = Promise.resolve();