diff --git a/_locales/en/messages.json b/_locales/en/messages.json index bc650b908..fbdaaecb1 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1097,6 +1097,10 @@ "description": "Used as a 'commit changes' button in the Caption Editor for outgoing image attachments", "androidKey": "media_preview__save_title" }, + "saved": { + "message": "Saved", + "description": "Used to display when an action was saved." + }, "emojiAlt": { "message": "Emoji image of '$title$'", "description": "Used in the alt tag of all emoji images", diff --git a/js/modules/signal.js b/js/modules/signal.js index 6cf322fe7..457a5e6a2 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -18,10 +18,6 @@ const AttachmentDownloads = require('./attachment_downloads'); const { ConversationLoadingScreen, } = require('../../ts/components/ConversationLoadingScreen'); -const { - AttachmentList, -} = require('../../ts/components/conversation/AttachmentList'); -const { CaptionEditor } = require('../../ts/components/CaptionEditor'); const { ContactDetail, } = require('../../ts/components/conversation/ContactDetail'); @@ -231,8 +227,6 @@ exports.setup = (options = {}) => { const Components = { ConversationLoadingScreen, - AttachmentList, - CaptionEditor, ContactDetail, ContactListItem, ContactName, diff --git a/preload.js b/preload.js index 347e6fb14..43c737296 100644 --- a/preload.js +++ b/preload.js @@ -377,6 +377,7 @@ setInterval(() => { const { autoOrientImage } = require('./js/modules/auto_orient_image'); window.autoOrientImage = autoOrientImage; +window.loadImage = require('blueimp-load-image'); window.dataURLToBlobSync = require('blueimp-canvas-to-blob'); window.filesize = require('filesize'); window.getGuid = require('uuid/v4'); diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 1dbb2da95..d0bab63db 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -273,7 +273,6 @@ input { height: 38px; - width: 142px; border-radius: 5px; text-align: center; font-size: $session-font-md; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 9480288bb..c28ce6eca 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2155,7 +2155,9 @@ // Module: Caption Editor .module-caption-editor { - background-color: $color-black; + @include themify($themes) { + background-color: themed('inboxBackground'); + } z-index: 20; position: absolute; @@ -2179,13 +2181,14 @@ width: 30px; height: 30px; z-index: 2; - @include color-svg('../images/x-16.svg', $color-white); + @include themify($themes) { + @include color-svg('../images/x-16.svg', themed('textColor')); + } } .module-caption-editor__media-container { flex-grow: 1; flex-shrink: 1; - background-color: $color-black; text-align: center; margin: 50px; overflow: hidden; @@ -2221,58 +2224,49 @@ flex-grow: 0; flex-shrink: 0; height: 52px; + width: 100%; padding: 8px; + justify-content: center; display: inline-flex; flex-direction: row; - align-items: middle; margin-inline-start: auto; margin-inline-end: auto; } .module-caption-editor__input-container { - position: relative; + display: flex; +} + +.module-caption-editor { + .session-button { + margin-inline-start: 15px; + } } .module-caption-editor__caption-input { height: 36px; - width: 40em; - font-size: 14px; - color: $color-white; - border: 1px solid $color-white; + @include themify($themes) { + color: themed('textColor'); + border: 1px solid themed('textColor'); + background-color: themed('inputBackground'); + } border-radius: 18px; - background-color: $color-black; padding: 9px; padding-inline-start: 12px; padding-inline-end: 65px; &::placeholder { color: $color-white-07; + @include themify($themes) { + color: subtle(themed('textColor')); + border: 1px solid themed('textColor'); + background-color: themed('inputBackground'); + } } - &:focus { - border: 1px solid $color-loki-green; - outline: none; - } -} - -.module-caption-editor__save-button { - position: absolute; - background-color: $color-loki-green; - color: $color-white; - cursor: pointer; - - height: 28px; - border-radius: 15px; - - padding: 5px; - padding-inline-start: 12px; - padding-inline-end: 12px; - - right: 4px; - top: 4px; } // Module: Staged Placeholder Attachment diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 0702294da..0dcae69a5 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -774,11 +774,6 @@ } } - .module-caption-editor__save-button { - background-color: $color-loki-green; - color: $color-white; - } - // Module: Search Results .module-search-results__conversations-header { diff --git a/ts/components/CaptionEditor.tsx b/ts/components/CaptionEditor.tsx index 309c154b9..0dff89507 100644 --- a/ts/components/CaptionEditor.tsx +++ b/ts/components/CaptionEditor.tsx @@ -5,15 +5,19 @@ import * as GoogleChrome from '../util/GoogleChrome'; import { AttachmentType } from '../types/Attachment'; -import { LocalizerType } from '../types/Util'; +import { SessionInput } from './session/SessionInput'; +import { + SessionButton, + SessionButtonColor, + SessionButtonType, +} from './session/SessionButton'; interface Props { attachment: AttachmentType; - i18n: LocalizerType; url: string; caption?: string; - onSave?: (caption: string) => void; - close?: () => void; + onSave: (caption: string) => void; + onClose: () => void; } interface State { @@ -21,15 +25,7 @@ interface State { } export class CaptionEditor extends React.Component { - private readonly handleKeyUpBound: ( - event: React.KeyboardEvent - ) => void; - private readonly setFocusBound: () => void; - private readonly onChangeBound: ( - event: React.FormEvent - ) => void; - private readonly onSaveBound: () => void; - private readonly inputRef: React.RefObject; + private readonly inputRef: React.RefObject; constructor(props: Props) { super(props); @@ -38,60 +34,26 @@ export class CaptionEditor extends React.Component { this.state = { caption: caption || '', }; - - this.handleKeyUpBound = this.handleKeyUp.bind(this); - this.setFocusBound = this.setFocus.bind(this); - this.onChangeBound = this.onChange.bind(this); - this.onSaveBound = this.onSave.bind(this); + this.onSave = this.onSave.bind(this); + this.onChange = this.onChange.bind(this); this.inputRef = React.createRef(); } - public componentDidMount() { - // Forcing focus after a delay due to some focus contention with ConversationView - setTimeout(() => { - this.setFocus(); - }, 200); - } - - public handleKeyUp(event: React.KeyboardEvent) { - const { close, onSave } = this.props; - - if (close && event.key === 'Escape') { - close(); - } - - if (onSave && event.key === 'Enter') { - const { caption } = this.state; - onSave(caption); - } - } - - public setFocus() { - if (this.inputRef.current) { - this.inputRef.current.focus(); - } - } - public onSave() { const { onSave } = this.props; const { caption } = this.state; - if (onSave) { - onSave(caption); - } + onSave(caption); } - public onChange(event: React.FormEvent) { - // @ts-ignore - const { value } = event.target; - + public onChange(value: string) { this.setState({ caption: value, }); } public renderObject() { - const { url, i18n, attachment } = this.props; + const { url, attachment } = this.props; const { contentType } = attachment || { contentType: null }; const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType); @@ -99,7 +61,7 @@ export class CaptionEditor extends React.Component { return ( {i18n('imageAttachmentAlt')} ); @@ -118,19 +80,14 @@ export class CaptionEditor extends React.Component { } public render() { - const { i18n, close } = this.props; + const { onClose } = this.props; const { caption } = this.state; - const onKeyUp = close ? this.handleKeyUpBound : undefined; return ( -
+
@@ -138,24 +95,24 @@ export class CaptionEditor extends React.Component {
- {caption ? ( -
- {i18n('save')} -
+ ) : null}
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index 5c7c6854f..0e0a4b49d 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -66,11 +66,16 @@ const styles = { display: 'inline-flex', justifyContent: 'center', } as React.CSSProperties, + objectParentContainer: { + flexGrow: 1, + textAlign: 'center' as 'center', + margin: 'auto', + }, object: { flexGrow: 1, flexShrink: 0, - maxWidth: '100%', - maxHeight: '100%', + maxWidth: '80vw', + maxHeight: '80vh', objectFit: 'contain', } as React.CSSProperties, caption: { @@ -79,11 +84,11 @@ const styles = { left: 0, right: 0, textAlign: 'center', - color: 'white', + color: 'black', padding: '1em', paddingLeft: '3em', paddingRight: '3em', - backgroundColor: 'rgba(192, 192, 192, .20)', + backgroundColor: 'rgba(192, 192, 192, .40)', } as React.CSSProperties, controlsOffsetPlaceholder: { width: CONTROLS_WIDTH, @@ -229,11 +234,13 @@ export class Lightbox extends React.Component { >
-
- {!is.undefined(contentType) - ? this.renderObject({ objectURL, contentType }) - : null} - {caption ?
{caption}
: null} +
+
+ {!is.undefined(contentType) + ? this.renderObject({ objectURL, contentType }) + : null} + {caption ?
{caption}
: null} +
diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx index 2c5535bc0..47e643158 100644 --- a/ts/components/session/SessionInput.tsx +++ b/ts/components/session/SessionInput.tsx @@ -4,16 +4,17 @@ import classNames from 'classnames'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon'; interface Props { - label: string; + label?: string; error?: string; - type: string; + type?: string; value?: string; placeholder: string; maxLength?: number; enableShowHide?: boolean; - onValueChanged?: any; + onValueChanged?: (value: string) => any; onEnterPressed?: any; autoFocus?: boolean; + ref?: any; } interface State { diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 36b0abb5a..4c511a527 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -26,6 +26,7 @@ import { AbortController } from 'abort-controller'; import { SessionQuotedMessageComposition } from './SessionQuotedMessageComposition'; import { Mention, MentionsInput } from 'react-mentions'; import { MemberItem } from '../../conversation/MemberList'; +import { CaptionEditor } from '../../CaptionEditor'; export interface ReplyingToMessageProps { convoId: string; @@ -83,6 +84,7 @@ interface State { voiceRecording?: Blob; ignoredLink?: string; // set the the ignored url when users closed the link preview stagedLinkPreview?: StagedLinkPreviewData; + showCaptionEditor?: AttachmentType; } const sendMessageStyle = { @@ -156,6 +158,8 @@ export class SessionCompositionBox extends React.Component { // Attachments this.onChoseAttachment = this.onChoseAttachment.bind(this); this.onChooseAttachment = this.onChooseAttachment.bind(this); + this.onClickAttachment = this.onClickAttachment.bind(this); + this.renderCaptionEditor = this.renderCaptionEditor.bind(this); // On Sending this.onSendMessage = this.onSendMessage.bind(this); @@ -451,7 +455,7 @@ export class SessionCompositionBox extends React.Component { if (!conversationModel) { return; } - const allPubKeys = conversationModel.get('members'); + const allPubKeys = conversationModel.get('members') as Array; const allMembers = allPubKeys.map(pubKey => { const conv = window.ConversationController.get(pubKey); @@ -619,18 +623,70 @@ export class SessionCompositionBox extends React.Component { return <>; } + private onClickAttachment(attachment: AttachmentType) { + // const onSave = (caption: string) => { + // // eslint-disable-next-line no-param-reassign + // attachment.caption = caption; + // // this.captionEditorView.remove(); + // // Signal.Backbone.Views.Lightbox.hide(); + // this.render(); + // }; + this.setState({ showCaptionEditor: attachment }); + + // this.captionEditorView = new Whisper.ReactWrapperView({ + // className: 'attachment-list-wrapper', + // Component: window.Signal.Components.CaptionEditor, + // props: getProps(), + // onClose: () => Signal.Backbone.Views.Lightbox.hide(), + // }); + // Signal.Backbone.Views.Lightbox.show(this.captionEditorView.el); + } + + private renderCaptionEditor(attachment?: AttachmentType) { + if (attachment) { + const onSave = (caption: string) => { + // eslint-disable-next-line no-param-reassign + attachment.caption = caption; + ToastUtils.pushToastInfo('saved', window.i18n('saved')); + // close the lightbox on save + this.setState({ + showCaptionEditor: undefined, + }); + }; + + const url = attachment.videoUrl || attachment.url; + return ( + { + this.setState({ + showCaptionEditor: undefined, + }); + }} + /> + ); + } + return <>; + } + private renderAttachmentsStaged() { const { stagedAttachments } = this.props; + const { showCaptionEditor } = this.state; if (stagedAttachments && stagedAttachments.length) { return ( - {}} - onAddAttachment={this.onChooseAttachment} - onCloseAttachment={this.props.removeAttachment} - onClose={this.props.clearAttachments} - /> + <> + + {this.renderCaptionEditor(showCaptionEditor)} + ); } return <>; diff --git a/ts/util/attachmentsUtil.ts b/ts/util/attachmentsUtil.ts index c5ed673c8..46998f4a3 100644 --- a/ts/util/attachmentsUtil.ts +++ b/ts/util/attachmentsUtil.ts @@ -40,7 +40,10 @@ export async function autoScale( return; } - if (file.type === 'image/gif' && file.size <= Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES) { + if ( + file.type === 'image/gif' && + file.size <= Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES + ) { resolve(attachment); return; } @@ -68,15 +71,12 @@ export async function autoScale( if (quality > 1) { quality = 0.95; } - } while (i > 0 && blob.size > maxSize); - resolve({ ...attachment, file: blob, }); - }; img.src = url; });