Skip to content

Commit

Permalink
Show generic attachment for non-loading/too-large images/videos
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottnonnenberg-signal
scottnonnenberg-signal committed Sep 6, 2018
1 parent d0c4152 commit 8290146
Show file tree
Hide file tree
Showing 9 changed files with 469 additions and 106 deletions.
9 changes: 0 additions & 9 deletions _locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -880,15 +880,6 @@
"description":
"Used in alt tag of thumbnail images inside of an embedded message quote"
},
"imageFailedToLoad": {
"message": "Image failed to load",
"description": "When an image attachment is missing, this message is shown"
},
"videoScreenshotFailedToLoad": {
"message": "Video screenshot failed to load",
"description":
"When a attachment video screenshot is missing, this message is shown"
},
"imageAttachmentAlt": {
"message": "Image attached to message",
"description": "Used in alt tag of image attachment"
Expand Down
32 changes: 0 additions & 32 deletions stylesheets/_modules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,21 +293,6 @@
border-bottom-right-radius: 16px;
}

.module-message__broken-image {
font-size: 11px;
line-height: 16px;
letter-spacing: 0.3px;

padding: 10px;
text-align: center;
text-transform: uppercase;
color: $color-light-90;
}

.module-message__broken-image--incoming {
color: $color-white;
}

.module-message__video-overlay__circle {
position: absolute;
top: 50%;
Expand All @@ -331,23 +316,6 @@
@include color-svg('../images/play.svg', $color-signal-blue);
}

.module-message__broken-video-screenshot {
font-size: 11px;
line-height: 16px;
letter-spacing: 0.3px;

padding: 10px;
text-align: center;
text-transform: uppercase;
color: $color-light-90;

cursor: pointer;
}

.module-message__broken-video-screenshot--incoming {
color: $color-white;
}

.module-message__audio-attachment {
margin-top: 2px;
}
Expand Down
37 changes: 37 additions & 0 deletions ts/components/conversation/EmbeddedContact.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const contact = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -36,6 +37,7 @@ const contact = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -45,6 +47,7 @@ const contact = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -54,6 +57,7 @@ const contact = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand Down Expand Up @@ -85,11 +89,13 @@ const contact = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}/></li>
<li><Message
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}/></li>
</util.ConversationContext>;
```
Expand Down Expand Up @@ -123,6 +129,7 @@ const contact = {
authorAvatarPath={util.gifObjectUrl}
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -134,6 +141,7 @@ const contact = {
conversationType="group"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -144,6 +152,7 @@ const contact = {
authorName="Mr. Fire"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand Down Expand Up @@ -176,6 +185,7 @@ const contact = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -184,6 +194,7 @@ const contact = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -193,6 +204,7 @@ const contact = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -202,6 +214,7 @@ const contact = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand Down Expand Up @@ -232,6 +245,7 @@ const contact = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -240,6 +254,7 @@ const contact = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -249,6 +264,7 @@ const contact = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -258,6 +274,7 @@ const contact = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand Down Expand Up @@ -290,6 +307,7 @@ const contact = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -298,6 +316,7 @@ const contact = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -307,6 +326,7 @@ const contact = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -316,6 +336,7 @@ const contact = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand Down Expand Up @@ -343,6 +364,7 @@ const contact = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -351,6 +373,7 @@ const contact = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -360,6 +383,7 @@ const contact = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -369,6 +393,7 @@ const contact = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -385,6 +410,7 @@ const contact = {};
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -393,6 +419,7 @@ const contact = {};
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -402,6 +429,7 @@ const contact = {};
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand All @@ -411,6 +439,7 @@ const contact = {};
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
/>
</li>
Expand Down Expand Up @@ -461,6 +490,7 @@ const contactWithoutAccount = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
/>
</li>
Expand All @@ -470,6 +500,7 @@ const contactWithoutAccount = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
/>
</li>
Expand All @@ -479,6 +510,7 @@ const contactWithoutAccount = {
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
/>
</li>
Expand All @@ -488,6 +520,7 @@ const contactWithoutAccount = {
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
/>
</li>
Expand All @@ -498,6 +531,7 @@ const contactWithoutAccount = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
/>
</li>
Expand All @@ -508,6 +542,7 @@ const contactWithoutAccount = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
/>
</li>
Expand All @@ -518,6 +553,7 @@ const contactWithoutAccount = {
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
/>
</li>
Expand All @@ -528,6 +564,7 @@ const contactWithoutAccount = {
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
/>
</li>
Expand Down

0 comments on commit 8290146

Please sign in to comment.