Use fit: cover for non-square thumbnails, better movie icon
Also: Match Android's X button in the quote composition area
This commit is contained in:
Scott Nonnenberg
parent
12257e1560
commit
37cac717cb
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18,4L20,8H17L15,4H13L15,8H12L10,4H8L10,8H7L5,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V4H18Z" /></svg>
|
||||
|
After Width: | Height: | Size: 401 B |
|
|
@ -788,15 +788,18 @@ span.status {
|
|||
|
||||
.close-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 50%;
|
||||
|
||||
.close-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include color-svg('../images/x.svg', white);
|
||||
@include color-svg('../images/x.svg', $grey);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -840,6 +843,9 @@ span.status {
|
|||
&.play {
|
||||
@include color-svg('../images/play.svg', white);
|
||||
}
|
||||
&.movie {
|
||||
@include color-svg('../images/movie.svg', white);
|
||||
}
|
||||
|
||||
@include avatar-colors;
|
||||
}
|
||||
|
|
@ -853,9 +859,12 @@ span.status {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
object-fit: cover;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,6 +194,9 @@ $ios-border-color: rgba(0,0,0,0.1);
|
|||
height: 48px;
|
||||
position: relative;
|
||||
|
||||
top: auto;
|
||||
right: auto;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -183,9 +183,8 @@ const View = Whisper.MessageView;
|
|||
#### A lot of text in quotation, with image
|
||||
|
||||
```jsx
|
||||
const quotedMessage = {
|
||||
imageUrl: util.gifObjectUrl,
|
||||
id: '3234-23423-2342',
|
||||
const thumbnail = {
|
||||
objectUrl: util.gifObjectUrl,
|
||||
};
|
||||
const outgoing = new Whisper.Message({
|
||||
type: 'outgoing',
|
||||
|
|
@ -218,8 +217,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
|
|||
}),
|
||||
}));
|
||||
|
||||
outgoing.quotedMessage = quotedMessage;
|
||||
incoming.quotedMessage = quotedMessage;
|
||||
outgoing.quoteThumbnail = thumbnail;
|
||||
incoming.quoteThumbnail = thumbnail;
|
||||
|
||||
const View = Whisper.MessageView;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
|
|
@ -237,8 +236,8 @@ const View = Whisper.MessageView;
|
|||
#### Image with caption
|
||||
|
||||
```jsx
|
||||
const quotedMessage = {
|
||||
imageUrl: util.gifObjectUrl,
|
||||
const thumbnail = {
|
||||
objectUrl: util.gifObjectUrl,
|
||||
id: '3234-23423-2342',
|
||||
};
|
||||
const outgoing = new Whisper.Message({
|
||||
|
|
@ -268,8 +267,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
|
|||
}),
|
||||
}));
|
||||
|
||||
outgoing.quotedMessage = quotedMessage;
|
||||
incoming.quotedMessage = quotedMessage;
|
||||
outgoing.quoteThumbnail = thumbnail;
|
||||
incoming.quoteThumbnail = thumbnail;
|
||||
|
||||
const View = Whisper.MessageView;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
|
|
@ -287,8 +286,8 @@ const View = Whisper.MessageView;
|
|||
#### Image
|
||||
|
||||
```jsx
|
||||
const quotedMessage = {
|
||||
imageUrl: util.gifObjectUrl,
|
||||
const thumbnail = {
|
||||
objectUrl: util.gifObjectUrl,
|
||||
};
|
||||
|
||||
const outgoing = new Whisper.Message({
|
||||
|
|
@ -317,8 +316,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
|
|||
}),
|
||||
}));
|
||||
|
||||
outgoing.quotedMessage = quotedMessage;
|
||||
incoming.quotedMessage = quotedMessage;
|
||||
outgoing.quoteThumbnail = thumbnail;
|
||||
incoming.quoteThumbnail = thumbnail;
|
||||
|
||||
const View = Whisper.MessageView;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
|
|
@ -375,8 +374,8 @@ const View = Whisper.MessageView;
|
|||
#### Video with caption
|
||||
|
||||
```jsx
|
||||
const quotedMessage = {
|
||||
imageUrl: util.gifObjectUrl,
|
||||
const thumbnail = {
|
||||
objectUrl: util.gifObjectUrl,
|
||||
};
|
||||
|
||||
const outgoing = new Whisper.Message({
|
||||
|
|
@ -406,8 +405,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
|
|||
}),
|
||||
}));
|
||||
|
||||
outgoing.quotedMessage = quotedMessage;
|
||||
incoming.quotedMessage = quotedMessage;
|
||||
outgoing.quoteThumbnail = thumbnail;
|
||||
incoming.quoteThumbnail = thumbnail;
|
||||
|
||||
const View = Whisper.MessageView;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
|
|
@ -425,8 +424,8 @@ const View = Whisper.MessageView;
|
|||
#### Video
|
||||
|
||||
```jsx
|
||||
const quotedMessage = {
|
||||
imageUrl: util.gifObjectUrl,
|
||||
const thumbnail = {
|
||||
objectUrl: util.gifObjectUrl,
|
||||
};
|
||||
|
||||
const outgoing = new Whisper.Message({
|
||||
|
|
@ -456,8 +455,8 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
|
|||
}),
|
||||
}));
|
||||
|
||||
outgoing.quotedMessage = quotedMessage;
|
||||
incoming.quotedMessage = quotedMessage;
|
||||
outgoing.quoteThumbnail = thumbnail;
|
||||
incoming.quoteThumbnail = thumbnail;
|
||||
|
||||
const View = Whisper.MessageView;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ export class Quote extends React.Component<Props, {}> {
|
|||
if (Mime.isVideo(contentType)) {
|
||||
return objectUrl
|
||||
? this.renderImage(objectUrl, 'play')
|
||||
: this.renderIcon('play');
|
||||
: this.renderIcon('movie');
|
||||
}
|
||||
if (Mime.isImage(contentType)) {
|
||||
return objectUrl
|
||||
|
|
|
|||
Loading…
Reference in New Issue