From de1564fd37551374508c1eb00ecf37b377a9f899 Mon Sep 17 00:00:00 2001 From: Josh Perez <60019601+josh-signal@users.noreply.github.com> Date: Mon, 30 Jan 2023 15:16:09 -0500 Subject: [PATCH] Moves link previews into the composer --- stylesheets/_modules.scss | 192 --------------- stylesheets/components/CompositionInput.scss | 242 +++++++++++++++++++ stylesheets/manifest.scss | 1 + ts/components/CompositionArea.tsx | 15 +- ts/components/CompositionInput.tsx | 41 +++- 5 files changed, 277 insertions(+), 214 deletions(-) create mode 100644 stylesheets/components/CompositionInput.scss diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index a6d4175047b7..edbc886a6496 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -6341,198 +6341,6 @@ button.module-image__border-overlay:focus { @include emoji-size(66px); } -// Module: CompositionInput -.module-composition-input { - &__quill { - height: 100%; - - .ql-editor { - caret-color: transparent; - padding: 0; - text-align: start; - white-space: break-spaces; - line-height: inherit; - - &--loaded { - caret-color: auto; - } - - &.ql-blank::before { - left: 0; - right: 0; - font-style: normal; - } - - .emoji-blot { - width: 20px; - height: 20px; - vertical-align: text-bottom; - } - } - } - - &__at-mention { - background-color: $color-gray-20; - border-radius: 4px; - display: inline; - padding-left: 4px; - padding-right: 4px; - height: 22px; - line-height: 22px; - - @include dark-theme { - background-color: $color-gray-60; - } - } - - &__input { - $border-size: 1px; - - border-radius: 18px; - overflow: hidden; - word-break: break-word; - - // Override Quill styles - .ql-container { - @include font-body-1; - } - - .ql-blank::before { - @include light-theme() { - color: $color-gray-45; - } - - @include dark-theme() { - color: $color-gray-25; - } - } - - @include light-theme() { - // Same as background color - background-color: $color-gray-05; - color: $color-gray-90; - } - - @include dark-theme() { - // Same as background color - background-color: $color-gray-75; - color: $color-gray-05; - } - - &__scroller { - $padding-top: 5px; - padding: $padding-top 10px $padding-top 10px; - - min-height: calc(32px - 2 * $border-size); - max-height: calc(72px - 2 * $border-size); - overflow: auto; - - &::-webkit-scrollbar-thumb { - @include light-theme { - border: 2px solid $color-gray-05; - } - @include dark-theme { - border: 2px solid $color-gray-75; - } - } - - &--large { - max-height: calc(212px - 2 * $border-size); - min-height: calc(212px - 2 * $border-size); - - .DraftEditor-root { - height: calc(212px - 2 * $padding-top - 2 * $border-size); - } - } - } - - border: $border-size solid transparent; - - &:focus-within { - outline: 0; - @include keyboard-mode { - border: $border-size solid $color-ultramarine; - } - } - } - - &__suggestions { - padding: 0; - margin-bottom: 6px; - border-radius: 8px; - z-index: $z-index-above-popup; - overflow: hidden; - - &--scroller { - max-height: 300px; - overflow-y: auto; - } - - @include popper-shadow(); - - @include light-theme() { - background: $color-white; - } - - @include dark-theme() { - background: $color-gray-75; - } - - &__row { - height: 34px; - padding: 0 12px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - background: none; - border: none; - width: 100%; - - &--mention { - height: 40px; - } - - &:focus { - outline: 0; - } - - @include font-body-2; - - @include light-theme() { - color: $color-gray-60; - } - - @include dark-theme() { - color: $color-gray-25; - } - - &__short-name { - margin-left: 4px; - } - - &--selected, - &:hover { - @include light-theme() { - background: $color-gray-05; - color: $color-gray-90; - } - - @include dark-theme() { - background: $color-gray-60; - color: $color-gray-05; - } - } - } - - &__title { - padding-left: 8px; - } - - stroke: $color-white; - } -} - // Module: Last Seen Indicator .module-last-seen-indicator { diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss new file mode 100644 index 000000000000..17bde4abf6e5 --- /dev/null +++ b/stylesheets/components/CompositionInput.scss @@ -0,0 +1,242 @@ +// Copyright 2021 Signal Messenger, LLC +// SPDX-License-Identifier: AGPL-3.0-only + +.module-composition-input { + &__quill { + height: 100%; + padding-left: 6px; + + .ql-editor { + caret-color: transparent; + padding: 0; + text-align: start; + white-space: break-spaces; + line-height: inherit; + + &--loaded { + caret-color: auto; + } + + &.ql-blank::before { + left: 0; + right: 0; + font-style: normal; + } + + .emoji-blot { + width: 20px; + height: 20px; + vertical-align: text-bottom; + } + } + } + + &__at-mention { + background-color: $color-gray-20; + border-radius: 4px; + display: inline; + padding-left: 4px; + padding-right: 4px; + height: 22px; + line-height: 22px; + + @include dark-theme { + background-color: $color-gray-60; + } + } + + &__input { + $border-size: 1px; + + border-radius: 18px; + overflow: hidden; + word-break: break-word; + + // Override Quill styles + .ql-container { + @include font-body-1; + } + + .ql-blank::before { + @include light-theme() { + color: $color-gray-45; + } + + @include dark-theme() { + color: $color-gray-25; + } + } + + @include light-theme() { + // Same as background color + background-color: $color-gray-05; + color: $color-gray-90; + } + + @include dark-theme() { + // Same as background color + background-color: $color-gray-75; + color: $color-gray-05; + } + + &__scroller { + $padding-top: 6px; + padding: $padding-top; + + min-height: calc(32px - 2 * $border-size); + max-height: calc(72px - 2 * $border-size); + overflow: auto; + + &::-webkit-scrollbar-thumb { + @include light-theme { + border: 2px solid $color-gray-05; + } + @include dark-theme { + border: 2px solid $color-gray-75; + } + } + + &--large { + max-height: calc(212px - 2 * $border-size); + min-height: calc(212px - 2 * $border-size); + + .DraftEditor-root { + height: calc(212px - 2 * $padding-top - 2 * $border-size); + } + } + + &--link-preview { + min-height: 110px; + max-height: 200px; + } + } + + border: $border-size solid transparent; + + &:focus-within { + outline: 0; + @include keyboard-mode { + border: $border-size solid $color-ultramarine; + } + } + } + + &__suggestions { + padding: 0; + margin-bottom: 6px; + border-radius: 8px; + z-index: $z-index-above-popup; + overflow: hidden; + + &--scroller { + max-height: 300px; + overflow-y: auto; + } + + @include popper-shadow(); + + @include light-theme() { + background: $color-white; + } + + @include dark-theme() { + background: $color-gray-75; + } + + &__row { + height: 34px; + padding: 0 12px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + background: none; + border: none; + width: 100%; + + &--mention { + height: 40px; + } + + &:focus { + outline: 0; + } + + @include font-body-2; + + @include light-theme() { + color: $color-gray-60; + } + + @include dark-theme() { + color: $color-gray-25; + } + + &__short-name { + margin-left: 4px; + } + + &--selected, + &:hover { + @include light-theme() { + background: $color-gray-05; + color: $color-gray-90; + } + + @include dark-theme() { + background: $color-gray-60; + color: $color-gray-05; + } + } + } + + &__title { + padding-left: 8px; + } + + stroke: $color-white; + } +} + +div.CompositionInput__link-preview { + background: $color-gray-02; + border-radius: 8px; + flex-direction: row-reverse; + margin-bottom: 4px; + overflow: hidden; + + &__icon-container { + align-items: center; + display: flex; + margin-left: 8px; + margin-right: 0; + } + + &__content { + margin-right: 0; + padding-bottom: 8px; + padding-left: 12px; + padding-top: 8px; + } +} + +button.CompositionInput__link-preview__close-button { + -webkit-mask: none; + @include rounded-corners; + align-items: center; + backdrop-filter: blur(32px); + background: $color-white-alpha-80; + display: flex; + height: 20px; + justify-content: center; + right: 6px; + top: 6px; + width: 20px; + + &::before { + @include color-svg('../images/icons/v2/x-24.svg', $color-gray-75); + content: ''; + height: 16px; + width: 16px; + } +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index cae5d8ecfde2..eb59b5c7deb5 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -51,6 +51,7 @@ @import './components/Checkbox.scss'; @import './components/CircleCheckbox.scss'; @import './components/CompositionArea.scss'; +@import './components/CompositionInput.scss'; @import './components/CompositionTextArea.scss'; @import './components/ContactModal.scss'; @import './components/ContactName.scss'; diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx index eee0da8ae6b1..f631fda16537 100644 --- a/ts/components/CompositionArea.tsx +++ b/ts/components/CompositionArea.tsx @@ -52,7 +52,6 @@ import { MandatoryProfileSharingActions } from './conversation/MandatoryProfileS import { MediaQualitySelector } from './MediaQualitySelector'; import type { Props as QuoteProps } from './conversation/Quote'; import { Quote } from './conversation/Quote'; -import { StagedLinkPreview } from './conversation/StagedLinkPreview'; import { countStickers } from './stickers/lib'; import { useAttachFileShortcut, @@ -691,15 +690,6 @@ export function CompositionArea({ /> )} - {linkPreviewLoading && linkPreviewResult && ( -
- onCloseLinkPreview(conversationId)} - /> -
- )} {draftAttachments.length ? (
) => void; getQuotedMessage?(): unknown; clearQuotedMessage?(): unknown; + linkPreviewLoading?: boolean; + linkPreviewResult?: LinkPreviewType; + onCloseLinkPreview?(conversationId: string): unknown; }>; const MAX_LENGTH = 64 * 1024; @@ -110,22 +115,25 @@ const BASE_CLASS_NAME = 'module-composition-input'; export function CompositionInput(props: Props): React.ReactElement { const { children, + clearQuotedMessage, conversationId, - i18n, disabled, - large, - inputApi, - moduleClassName, - onPickEmoji, - onSubmit, - onScroll, - placeholder, - skinTone, - draftText, draftBodyRanges, + draftText, getPreferredBadge, getQuotedMessage, - clearQuotedMessage, + i18n, + inputApi, + large, + linkPreviewLoading, + linkPreviewResult, + moduleClassName, + onCloseLinkPreview, + onPickEmoji, + onScroll, + onSubmit, + placeholder, + skinTone, sortedGroupMembers, theme, } = props; @@ -698,10 +706,21 @@ export function CompositionInput(props: Props): React.ReactElement { onScroll={onScroll} className={classNames( getClassName('__input__scroller'), + linkPreviewResult + ? getClassName('__input__scroller--link-preview') + : null, large ? getClassName('__input__scroller--large') : null, children ? getClassName('__input--with-children') : null )} > + {conversationId && linkPreviewLoading && linkPreviewResult && ( + onCloseLinkPreview?.(conversationId)} + /> + )} {reactQuill} {emojiCompletionElement} {mentionCompletionElement}