keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Some style and interaction fine-tuning

Browse Source
pull/272/head
Scott Nonnenberg 6 years ago
parent a900792a06
commit aab2a57b48
12 changed files with 107 additions and 109 deletions
Show Stats Download Patch File Download Diff File

10
_locales/en/messages.json
Unescape Escape View File

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

1
libtextsecure/message_receiver.js
Unescape Escape View File

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

11
stylesheets/_conversation.scss
Unescape Escape View File

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

3
stylesheets/_emoji.scss
Unescape Escape View File

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

2
stylesheets/_global.scss
Unescape Escape View File

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

2
stylesheets/_index.scss
Unescape Escape View File

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

13
stylesheets/_modules.scss
Unescape Escape View File

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

3
stylesheets/_recorder.scss
Unescape Escape View File

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

96
stylesheets/_theme_dark.scss
Unescape Escape View File

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

33
ts/components/conversation/AttachmentList.md
Unescape Escape View File

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

6
ts/components/conversation/AttachmentList.tsx
Unescape Escape View File

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

36
ts/components/conversation/StagedGenericAttachment.md
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save