mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Use fit: cover for non-square thumbnails, better movie icon

Browse source 
Also: Match Android's X button in the quote composition area
This commit is contained in:
Scott Nonnenberg 2018-04-18 18:20:36 -07:00
parent 12257e1560
commit 37cac717cb
No known key found for this signature in database
GPG key ID: 5F82280C35134661
5 changed files with 41 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/movie.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 401 B

23
stylesheets/_conversation.scss
View file

@ -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;
}
}
}

3
stylesheets/_ios.scss
View file

@ -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;

41
ts/components/conversation/Quote.md
View file

@ -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}>

2
ts/components/conversation/Quote.tsx
View file

@ -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