Some style and interaction fine-tuning
This commit is contained in:
Scott Nonnenberg
parent
a900792a06
commit
aab2a57b48
12 changed files with 107 additions and 109 deletions
|
|
@ -551,6 +551,16 @@
|
|||
"description":
|
||||
"Shown in toast when user attempts to send .exe file, for example"
|
||||
},
|
||||
"stagedImageAttachment": {
|
||||
"message": "Staged image attachment: $path$",
|
||||
"description": "Alt text for staged attachments",
|
||||
"placeholders": {
|
||||
"path": {
|
||||
"content": "$1",
|
||||
"example": "dog.jpg"
|
||||
}
|
||||
}
|
||||
},
|
||||
"maxOneAttachmentToast": {
|
||||
"message": "The limit is one attachment per message.",
|
||||
"description":
|
||||
|
|
|
|||
|
|
@ -263,7 +263,6 @@ MessageReceiver.prototype.extend({
|
|||
// We do the message decryption here, instead of in the ordered pending queue,
|
||||
// to avoid exposing the time it took us to process messages through the time-to-ack.
|
||||
|
||||
// TODO: handle different types of requests.
|
||||
if (request.path !== '/api/v1/message') {
|
||||
window.log.info('got request', request.verb, request.path);
|
||||
request.respond(200, 'OK');
|
||||
|
|
|
|||
|
|
@ -184,15 +184,10 @@
|
|||
// things in the composition area. A margin on an inner div won't be included in that
|
||||
// height calculation.
|
||||
.bottom-bar .quote-wrapper {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.send .quote-wrapper {
|
||||
margin-left: 37px;
|
||||
margin-right: 73px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
|
|
@ -206,6 +201,7 @@
|
|||
}
|
||||
|
||||
form.send {
|
||||
margin-bottom: 0px;
|
||||
background: $color-white;
|
||||
|
||||
&.video-attachment {
|
||||
|
|
@ -277,6 +273,7 @@
|
|||
display: block;
|
||||
max-height: 100px;
|
||||
padding: 10px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 20px;
|
||||
background-color: $color-light-02;
|
||||
|
|
|
|||
|
|
@ -88,8 +88,10 @@ button.emoji {
|
|||
opacity: 0.5;
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin-top: 3px;
|
||||
|
||||
&:before {
|
||||
margin-top: 4px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: $button-height;
|
||||
|
|
@ -114,7 +116,6 @@ button.emoji {
|
|||
|
||||
.emoji-panel-container {
|
||||
height: 0px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
.ep-emojies {
|
||||
background-color: $color-white;
|
||||
|
|
|
|||
|
|
@ -108,8 +108,10 @@ a {
|
|||
opacity: 0.5;
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin-top: 2px;
|
||||
|
||||
&:before {
|
||||
margin-top: 4px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: $button-height;
|
||||
|
|
|
|||
|
|
@ -31,11 +31,13 @@
|
|||
|
||||
float: left;
|
||||
width: 300px;
|
||||
|
||||
.content {
|
||||
overflow-y: scroll;
|
||||
max-height: calc(100% - 88px);
|
||||
}
|
||||
}
|
||||
|
||||
.network-status-container {
|
||||
.network-status {
|
||||
background: url('../images/error_red.svg') no-repeat left 10px center;
|
||||
|
|
|
|||
|
|
@ -784,6 +784,7 @@
|
|||
flex: initial;
|
||||
min-width: 54px;
|
||||
width: 54px;
|
||||
max-height: 54px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
|
|
@ -2297,7 +2298,7 @@
|
|||
height: 20px;
|
||||
|
||||
z-index: 2;
|
||||
@include color-svg('../images/x-16.svg', $color-black);
|
||||
@include color-svg('../images/x.svg', $color-black);
|
||||
}
|
||||
|
||||
.module-attachments__rail {
|
||||
|
|
@ -2412,10 +2413,10 @@
|
|||
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 2;
|
||||
@include color-svg('../images/x-16.svg', $color-white);
|
||||
@include color-svg('../images/x.svg', $color-white);
|
||||
}
|
||||
|
||||
.module-caption-editor__media-container {
|
||||
|
|
@ -2488,6 +2489,10 @@
|
|||
&::placeholder {
|
||||
color: $color-white-07;
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid $color-signal-blue;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Third-party module: react-contextmenu
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
margin-top: 2px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
}
|
||||
|
||||
&:before {
|
||||
margin-top: 4px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
|
|
@ -36,6 +38,7 @@
|
|||
opacity: 0.5;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -230,50 +230,6 @@ body.dark-theme {
|
|||
}
|
||||
}
|
||||
|
||||
.dropoff {
|
||||
outline: solid 1px $blue;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
color: $color-white;
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
.group-info-input {
|
||||
background: $color-white;
|
||||
|
||||
.thumbnail:after {
|
||||
border-bottom: 10px solid $grey;
|
||||
border-left: 10px solid transparent;
|
||||
}
|
||||
|
||||
input.name {
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.group-member-list,
|
||||
.new-group-update {
|
||||
.members .contact {
|
||||
border-bottom: 1px solid $color-dark-60;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
// what's the right color?
|
||||
background-color: $blue_l;
|
||||
color: black;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.warning {
|
||||
@include color-svg('../images/warning.svg', black);
|
||||
}
|
||||
|
||||
.dismiss {
|
||||
@include color-svg('../images/x.svg', black);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
.number {
|
||||
color: $color-dark-30;
|
||||
|
|
@ -318,15 +274,6 @@ body.dark-theme {
|
|||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='search'],
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.expiredAlert {
|
||||
background: #f3f3a7;
|
||||
|
||||
|
|
@ -714,14 +661,9 @@ body.dark-theme {
|
|||
}
|
||||
|
||||
.module-message__generic-attachment__icon {
|
||||
// TODO: this will eventually be a different image
|
||||
// background: url('../images/file-gradient.svg') no-repeat center;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__icon__extension {
|
||||
// TODO: probably need color
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-name {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
|
|
@ -1012,10 +954,6 @@ body.dark-theme {
|
|||
@include color-svg('../images/movie.svg', $color-signal-blue);
|
||||
}
|
||||
|
||||
.module-quote__generic-file__icon {
|
||||
// TODO: this will eventually be a different icon
|
||||
// background: url('../images/file-gradient.svg');
|
||||
}
|
||||
.module-quote__generic-file__text {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
|
|
@ -1368,6 +1306,10 @@ body.dark-theme {
|
|||
color: $color-dark-05;
|
||||
}
|
||||
|
||||
// Module: Image
|
||||
|
||||
// Module: Image Grid
|
||||
|
||||
// Module: Typing Animation
|
||||
|
||||
.module-typing-animation__dot {
|
||||
|
|
@ -1378,6 +1320,36 @@ body.dark-theme {
|
|||
background-color: $color-white;
|
||||
}
|
||||
|
||||
// Module: Attachments
|
||||
|
||||
.module-attachments {
|
||||
border-top: 1px solid $color-gray-75;
|
||||
}
|
||||
|
||||
.module-attachments__close-button {
|
||||
@include color-svg('../images/x.svg', $color-gray-45);
|
||||
}
|
||||
|
||||
// Module: Staged Generic Attachment
|
||||
|
||||
.module-staged-generic-attachment {
|
||||
box-shadow: inset 0px 0px 0px 1px $color-gray-45;
|
||||
background-color: $color-gray-75;
|
||||
color: $color-dark-05;
|
||||
}
|
||||
|
||||
.module-staged-generic-attachment__close-button {
|
||||
@include color-svg('../images/x.svg', $color-gray-45);
|
||||
}
|
||||
|
||||
.module-staged-generic-attachment__icon {
|
||||
background: url('../images/file-gradient.svg') no-repeat center;
|
||||
}
|
||||
|
||||
.module-staged-generic-attachment__icon__extension {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
// Third-party module: react-contextmenu
|
||||
|
||||
.react-contextmenu {
|
||||
|
|
|
|||
|
|
@ -9,18 +9,19 @@ const attachments = [
|
|||
height: 240,
|
||||
},
|
||||
];
|
||||
|
||||
<AttachmentList
|
||||
attachments={attachments}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAttachment={attachment => {
|
||||
console.log('onClickAttachment', attachment);
|
||||
}}
|
||||
onCloseAttachment={attachment => {
|
||||
console.log('onCloseAttachment', attachment);
|
||||
}}
|
||||
i18n={util.i18n}
|
||||
/>;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<AttachmentList
|
||||
attachments={attachments}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClickAttachment={attachment => {
|
||||
console.log('onClickAttachment', attachment);
|
||||
}}
|
||||
onCloseAttachment={attachment => {
|
||||
console.log('onCloseAttachment', attachment);
|
||||
}}
|
||||
i18n={util.i18n}
|
||||
/>;
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
### Four images
|
||||
|
|
@ -53,7 +54,7 @@ const attachments = [
|
|||
},
|
||||
];
|
||||
|
||||
<div>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<AttachmentList
|
||||
attachments={attachments}
|
||||
onClose={() => console.log('onClose')}
|
||||
|
|
@ -65,7 +66,7 @@ const attachments = [
|
|||
}}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
### A mix of attachment types
|
||||
|
|
@ -90,7 +91,7 @@ const attachments = [
|
|||
},
|
||||
];
|
||||
|
||||
<div>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<AttachmentList
|
||||
attachments={attachments}
|
||||
onClose={() => console.log('onClose')}
|
||||
|
|
@ -102,7 +103,7 @@ const attachments = [
|
|||
}}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>;
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
### No attachments provided
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
// import classNames from 'classnames';
|
||||
|
||||
import {
|
||||
isImageTypeSupported,
|
||||
|
|
@ -28,7 +27,6 @@ export class AttachmentList extends React.Component<Props> {
|
|||
const {
|
||||
attachments,
|
||||
i18n,
|
||||
// onError,
|
||||
onClickAttachment,
|
||||
onCloseAttachment,
|
||||
onClose,
|
||||
|
|
@ -59,7 +57,9 @@ export class AttachmentList extends React.Component<Props> {
|
|||
return (
|
||||
<Image
|
||||
key={getUrl(attachment) || attachment.fileName || index}
|
||||
alt={`TODO: attachment number ${index}`}
|
||||
alt={i18n('stagedImageAttachment', [
|
||||
getUrl(attachment) || attachment.fileName,
|
||||
])}
|
||||
i18n={i18n}
|
||||
attachment={attachment}
|
||||
softCorners={true}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,13 @@ const attachment = {
|
|||
fileName: 'manifesto.txt',
|
||||
};
|
||||
|
||||
<StagedGenericAttachment
|
||||
attachment={attachment}
|
||||
i18n={util.i18n}
|
||||
onClose={attachment => console.log('onClose', attachment)}
|
||||
/>;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedGenericAttachment
|
||||
attachment={attachment}
|
||||
i18n={util.i18n}
|
||||
onClose={attachment => console.log('onClose', attachment)}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
File with long name
|
||||
|
|
@ -21,11 +23,13 @@ const attachment = {
|
|||
fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
|
||||
};
|
||||
|
||||
<StagedGenericAttachment
|
||||
attachment={attachment}
|
||||
i18n={util.i18n}
|
||||
onClose={attachment => console.log('onClose', attachment)}
|
||||
/>;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedGenericAttachment
|
||||
attachment={attachment}
|
||||
i18n={util.i18n}
|
||||
onClose={attachment => console.log('onClose', attachment)}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
File with long extension
|
||||
|
|
@ -36,9 +40,11 @@ const attachment = {
|
|||
fileName: 'manifesto.reallylongtxt',
|
||||
};
|
||||
|
||||
<StagedGenericAttachment
|
||||
attachment={attachment}
|
||||
i18n={util.i18n}
|
||||
onClose={attachment => console.log('onClose', attachment)}
|
||||
/>;
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<StagedGenericAttachment
|
||||
attachment={attachment}
|
||||
i18n={util.i18n}
|
||||
onClose={attachment => console.log('onClose', attachment)}
|
||||
/>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue