From aab2a57b48e7b24f66fefddd7044e21353047ffc Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Thu, 10 Jan 2019 12:26:28 -0800 Subject: [PATCH] Some style and interaction fine-tuning --- _locales/en/messages.json | 10 ++ libtextsecure/message_receiver.js | 1 - stylesheets/_conversation.scss | 11 +-- stylesheets/_emoji.scss | 3 +- stylesheets/_global.scss | 2 + stylesheets/_index.scss | 2 + stylesheets/_modules.scss | 13 ++- stylesheets/_recorder.scss | 3 + stylesheets/_theme_dark.scss | 96 +++++++------------ ts/components/conversation/AttachmentList.md | 33 +++---- ts/components/conversation/AttachmentList.tsx | 6 +- .../conversation/StagedGenericAttachment.md | 36 ++++--- 12 files changed, 107 insertions(+), 109 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index dfef44aad14..f137e744a7a 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -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": diff --git a/libtextsecure/message_receiver.js b/libtextsecure/message_receiver.js index 567edf76b88..8ff44571b18 100644 --- a/libtextsecure/message_receiver.js +++ b/libtextsecure/message_receiver.js @@ -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'); diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 1518f5dc512..128560f5712 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -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; diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss index de7192d9113..2ade390c66a 100644 --- a/stylesheets/_emoji.scss +++ b/stylesheets/_emoji.scss @@ -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; diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 43397f7ce6d..77c1c6e96af 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -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; diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index f655c8fd6be..7ac5625322d 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -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; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index d0940e9eb5d..a87509a69fc 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -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 diff --git a/stylesheets/_recorder.scss b/stylesheets/_recorder.scss index 6c1e36065c6..a6b2370cdb9 100644 --- a/stylesheets/_recorder.scss +++ b/stylesheets/_recorder.scss @@ -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 { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 1192655fc00..1b93bad35d9 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -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 { diff --git a/ts/components/conversation/AttachmentList.md b/ts/components/conversation/AttachmentList.md index bde066d2443..4ef3d2570e0 100644 --- a/ts/components/conversation/AttachmentList.md +++ b/ts/components/conversation/AttachmentList.md @@ -9,18 +9,19 @@ const attachments = [ height: 240, }, ]; - - console.log('onClose')} - onClickAttachment={attachment => { - console.log('onClickAttachment', attachment); - }} - onCloseAttachment={attachment => { - console.log('onCloseAttachment', attachment); - }} - i18n={util.i18n} -/>; + + console.log('onClose')} + onClickAttachment={attachment => { + console.log('onClickAttachment', attachment); + }} + onCloseAttachment={attachment => { + console.log('onCloseAttachment', attachment); + }} + i18n={util.i18n} + />; +; ``` ### Four images @@ -53,7 +54,7 @@ const attachments = [ }, ]; -
+ console.log('onClose')} @@ -65,7 +66,7 @@ const attachments = [ }} i18n={util.i18n} /> -
; +; ``` ### A mix of attachment types @@ -90,7 +91,7 @@ const attachments = [ }, ]; -
+ console.log('onClose')} @@ -102,7 +103,7 @@ const attachments = [ }} i18n={util.i18n} /> -
; +; ``` ### No attachments provided diff --git a/ts/components/conversation/AttachmentList.tsx b/ts/components/conversation/AttachmentList.tsx index 6921630a3ee..c7486b2f5df 100644 --- a/ts/components/conversation/AttachmentList.tsx +++ b/ts/components/conversation/AttachmentList.tsx @@ -1,5 +1,4 @@ import React from 'react'; -// import classNames from 'classnames'; import { isImageTypeSupported, @@ -28,7 +27,6 @@ export class AttachmentList extends React.Component { const { attachments, i18n, - // onError, onClickAttachment, onCloseAttachment, onClose, @@ -59,7 +57,9 @@ export class AttachmentList extends React.Component { return ( {`TODO: console.log('onClose', attachment)} -/>; + + console.log('onClose', attachment)} + /> +; ``` File with long name @@ -21,11 +23,13 @@ const attachment = { fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt', }; - console.log('onClose', attachment)} -/>; + + console.log('onClose', attachment)} + /> +; ``` File with long extension @@ -36,9 +40,11 @@ const attachment = { fileName: 'manifesto.reallylongtxt', }; - console.log('onClose', attachment)} -/>; + + console.log('onClose', attachment)} + /> +; ```