ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Attachment Modal: Various fixes (#2327)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-01-24 00:17:55 +01:00
parent 4787d472e4
commit 964a5001ab
10 changed files with 243 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/types/misc.ts
View File

@ -27,6 +27,7 @@ export interface ApiOnProgress {
export interface ApiAttachment {
blobUrl: string;
compressedBlobUrl?: string;
filename: string;
mimeType: string;
size: number;

37
src/components/common/MediaSpoiler.module.scss
View File

@ -14,7 +14,11 @@
mask-composite: exclude;
mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center;
mask-repeat: no-repeat;
animation: 500ms ease-in circle-cut forwards;
mask-size: 0%;
:global(body.animation-level-2) & {
animation: 500ms ease-in circle-cut forwards;
}
.dots {
transform: scale(1.2);
@ -52,7 +56,6 @@
--x-direction: var(--background-size);
--y-direction: 0;
animation: 20s linear infinite dots;
&::before {
content: "";
@ -66,7 +69,8 @@
--x-direction: 0;
--y-direction: var(--background-size);
animation: 20s linear -7s infinite dots;
animation: 2s linear -0.8s infinite opacity-breath;
background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
}
&::after {
@ -81,6 +85,19 @@
--x-direction: calc(-1 * var(--background-size));
--y-direction: calc(-1 * var(--background-size));
animation: 2s linear -1.5s infinite opacity-breath;
background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2);
}
}
:global(body.animation-level-2) .dots {
animation: 20s linear infinite dots;
&::before {
animation: 20s linear -7s infinite dots;
}
&::after {
animation: 20s linear -14s infinite dots;
}
}
@ -103,3 +120,17 @@
mask-size: 350%, 100%;
}
}
@keyframes opacity-breath {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}

2
src/components/middle/MiddleHeader.scss
View File

@ -584,6 +584,8 @@
}
.pinned-thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
}
}

162
src/components/middle/composer/AttachmentModal.module.scss Normal file
View File

@ -0,0 +1,162 @@
.root {
--border-radius-default: 0.625rem;
:global {
.modal-dialog {
max-width: 26.25rem;
@media (max-width: 600px) {
max-height: 100%;
}
}
.modal-header-condensed {
padding: 0.3125rem 0.5rem !important;
border-bottom: 1px solid transparent;
transition: border-color 250ms ease-in-out;
}
.modal-content {
display: flex;
flex-direction: column;
padding: 0;
// Full height - header - margins
max-height: calc(100vh - 3.25rem - 5rem);
overflow-x: auto;
}
}
&.header-border :global(.modal-header-condensed) {
border-bottom-color: var(--color-borders);
}
}
.attachments {
max-height: 26rem;
min-height: 5rem;
overflow: auto;
flex-shrink: 1;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0.25rem;
padding: 0.5rem 0.25rem 0;
@media (max-width: 600px) {
max-height: 80vh;
}
}
.attachments-bottom-padding {
padding-bottom: 0.5rem;
}
.caption-wrapper {
position: relative;
padding: 0 0.5rem;
border-top: 1px solid transparent;
transition: border-color 250ms ease-in-out;
:global {
.form-control {
background: var(--color-background);
}
.MentionTooltip {
right: 0 !important;
z-index: 0;
}
}
}
.caption-top-border {
border-top-color: var(--color-borders);
}
.caption {
display: flex;
align-items: center;
gap: 0.5rem;
}
.drop-target {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
&::before,
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: var(--border-radius-default);
pointer-events: none;
opacity: 0;
transition: 250ms opacity;
z-index: 1;
}
&::before {
background-image: var(--drag-target-border-hovered);
background-color: var(--color-background);
}
&::after {
content: attr(data-attach-description);
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
}
}
.hovered {
.drop-target::before {
opacity: 0.95;
}
.drop-target::after {
opacity: 1;
}
.caption-wrapper,
.attachments,
:global(.input-scroller) {
pointer-events: none;
}
}
.send-wrapper {
align-self: flex-end;
position: relative;
padding-bottom: 0.5rem;
margin-right: 0.375rem;
}
.send {
height: 2.5rem;
padding: 0 1rem;
}
:global {
.CustomSendMenu {
bottom: 2.25rem;
.is-pointer-env & > .backdrop {
width: 100%;
top: -2rem;
bottom: auto;
height: 3.5rem;
}
}
}

172
src/components/middle/composer/AttachmentModal.scss
View File

@ -1,172 +0,0 @@
.AttachmentModal {
--border-radius-default: 0.625rem;
.modal-dialog {
max-width: 26.25rem;
@media (max-width: 600px) {
max-height: 100%;
}
}
.modal-header-condensed {
padding: 0.3125rem 0.5rem !important;
border-bottom: 1px solid transparent;
transition: border-color 250ms ease-in-out;
}
&.modal-header-border .modal-header-condensed {
border-bottom-color: var(--color-borders);
}
.modal-content {
display: flex;
flex-direction: column;
padding: 0 0 0.5rem;
// Full height - header - margins
max-height: calc(100vh - 3.25rem - 5rem);
overflow-x: auto;
}
.attachments-wrapper {
max-height: 26rem;
min-height: 13rem;
overflow: auto;
flex-shrink: 1;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0.25rem;
padding: 0.5rem 0.25rem;
@media (max-width: 600px) {
max-height: 80vh;
}
}
.attachment-caption-wrapper {
position: relative;
margin: 0 0.5rem;
&::before {
content: '';
position: absolute;
left: -0.5rem;
top: 0;
right: -0.5rem;
border-top: 1px solid transparent;
transition: border-color 250ms ease-in-out;
}
.form-control {
background: var(--color-background);
}
.MentionTooltip {
right: 0 !important;
z-index: 0;
}
}
.caption-top-border::before {
border-top-color: var(--color-borders);
}
.attachment-caption {
display: flex;
align-items: center;
gap: 0.5rem;
}
.attachment-checkbox {
margin-left: -1rem;
}
.drop-target {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
&::before,
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: var(--border-radius-default);
pointer-events: none;
opacity: 0;
transition: 250ms opacity;
z-index: 1;
}
&::before {
background-image: var(--drag-target-border-hovered);
background-color: var(--color-background);
}
&::after {
content: attr(data-attach-description);
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
}
}
&.hovered {
.drop-target::before {
opacity: 0.95;
}
.drop-target::after {
opacity: 1;
}
.attachment-caption-wrapper,
.attachments-wrapper,
.input-scroller {
pointer-events: none;
}
.document-wrapper,
.media-wrapper {
border-radius: var(--border-radius-default);
}
}
&--send-wrapper {
position: relative;
}
.CustomSendMenu {
bottom: 2.25rem;
.is-pointer-env & > .backdrop {
width: 100%;
top: -2rem;
bottom: auto;
height: 3.5rem;
}
}
.AttachmentModal--send-wrapper {
align-self: flex-end;
padding-bottom: 0.25rem;
margin-right: 0.375rem;
}
.AttachmentModal--send {
height: 2.5rem;
padding: 0 1rem;
}
}

33
src/components/middle/composer/AttachmentModal.tsx
View File

@ -46,7 +46,7 @@ import AttachmentModalItem from './AttachmentModalItem';
import DropdownMenu from '../../ui/DropdownMenu';
import MenuItem from '../../ui/MenuItem';
import './AttachmentModal.scss';
import styles from './AttachmentModal.module.scss';
export type OwnProps = {
chatId: string;
@ -233,12 +233,12 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
const { relatedTarget: toTarget, target: fromTarget } = e;
// Esc button pressed during drag event
if ((fromTarget as HTMLDivElement).matches('.drop-target') && !toTarget) {
if ((fromTarget as HTMLDivElement).matches(styles.dropTarget) && !toTarget) {
hideTimeoutRef.current = window.setTimeout(unmarkHovered, DROP_LEAVE_TIMEOUT_MS);
}
// Prevent DragLeave event from firing when the pointer moves inside the AttachmentModal drop target
if (fromTarget && (fromTarget as HTMLElement).closest('.AttachmentModal.hovered')) {
if (fromTarget && (fromTarget as HTMLElement).closest(styles.hovered)) {
return;
}
@ -422,20 +422,22 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
);
}
const isBottomDividerShown = !areAttachmentsScrolledToBottom || !isCaptionNotScrolled;
return (
<Modal
isOpen={isOpen}
onClose={onClear}
header={renderHeader()}
className={buildClassName(
'AttachmentModal',
isHovered && 'hovered',
!areAttachmentsNotScrolled && 'modal-header-border',
styles.root,
isHovered && styles.hovered,
!areAttachmentsNotScrolled && styles.headerBorder,
)}
noBackdropClose
>
<div
className="drop-target"
className={styles.dropTarget}
onDragEnter={markHovered}
onDrop={handleFilesDrop}
onDragOver={handleDragOver}
@ -445,13 +447,16 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
data-dropzone
>
<div
className="attachments-wrapper custom-scroll"
className={buildClassName(
styles.attachments,
'custom-scroll',
isBottomDividerShown && styles.attachmentsBottomPadding,
)}
onScroll={handleAttachmentsScroll}
>
{renderingAttachments.map((attachment, i) => (
<AttachmentModalItem
attachment={attachment}
className="attachment-modal-item"
shouldDisplayCompressed={shouldSendCompressed}
shouldDisplayGrouped={shouldSendGrouped}
isSingle={renderingAttachments.length === 1}
@ -464,8 +469,8 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
</div>
<div
className={buildClassName(
'attachment-caption-wrapper',
(!areAttachmentsScrolledToBottom || !isCaptionNotScrolled) && 'caption-top-border',
styles.captionWrapper,
isBottomDividerShown && styles.captionTopBorder,
)}
>
<MentionTooltip
@ -490,7 +495,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
onCustomEmojiSelect={insertCustomEmoji}
addRecentCustomEmoji={addRecentCustomEmoji}
/>
<div className="attachment-caption">
<div className={styles.caption}>
<MessageInput
id="caption-input-text"
chatId={chatId}
@ -505,10 +510,10 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
canAutoFocus={Boolean(isReady && attachments.length)}
captionLimit={leftChars}
/>
<div className="AttachmentModal--send-wrapper">
<div className={styles.sendWrapper}>
<Button
ref={mainButtonRef}
className="AttachmentModal--send"
className={styles.send}
onClick={handleSendClick}
onContextMenu={canShowCustomSendMenu ? handleContextMenu : undefined}
>

2
src/components/middle/composer/AttachmentModalItem.module.scss
View File

@ -33,7 +33,7 @@
.single .preview {
height: auto;
max-height: 25rem;
max-height: 24rem;
}
.no-grouping {

6
src/components/middle/composer/Composer.scss
View File

@ -459,7 +459,7 @@
flex-grow: 1;
.form-control {
padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2)
padding: calc((3.5rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2)
calc(0.9rem - var(--border-width));
overflow: hidden;
height: auto;
@ -601,8 +601,8 @@
#caption-input-text {
.input-scroller {
min-height: 3rem;
max-height: 15rem;
min-height: 3.5rem;
max-height: 10rem;
margin-right: -5.625rem;

2
src/components/middle/composer/MessageInput.tsx
View File

@ -63,7 +63,7 @@ type StateProps = {
};
const MAX_INPUT_HEIGHT = IS_SINGLE_COLUMN_LAYOUT ? 256 : 416;
const MAX_ATTACHMENT_MODAL_INPUT_HEIGHT = 240;
const MAX_ATTACHMENT_MODAL_INPUT_HEIGHT = 160;
const TAB_INDEX_PRIORITY_TIMEOUT = 2000;
// Heuristics allowing the user to make a triple click
const SELECTION_RECALCULATE_DELAY_MS = 260;

30
src/components/middle/composer/helpers/buildAttachment.ts
View File

@ -9,7 +9,6 @@ import {
preloadImage,
preloadVideo,
createPosterForVideo,
fetchBlob,
} from '../../../../util/files';
import { scaleImage } from '../../../../util/imageResize';
@ -30,13 +29,14 @@ export default async function buildAttachment(
const { width, height } = img;
const shouldShrink = Math.max(width, height) > MAX_QUICK_IMG_SIZE;
if (shouldShrink || mimeType !== 'image/jpeg') {
if (!options?.compressedBlobUrl && (shouldShrink || mimeType !== 'image/jpeg')) {
const resizedUrl = await scaleImage(
blobUrl, shouldShrink ? MAX_QUICK_IMG_SIZE / Math.max(width, height) : 1, 'image/jpeg',
);
URL.revokeObjectURL(blobUrl);
const newBlob = await fetchBlob(resizedUrl);
return buildAttachment(filename, newBlob, options);
return buildAttachment(filename, blob, {
compressedBlobUrl: resizedUrl,
});
}
if (mimeType === 'image/jpeg') {
@ -76,11 +76,21 @@ export default async function buildAttachment(
}
export function prepareAttachmentsToSend(attachments: ApiAttachment[], shouldSendCompressed?: boolean) {
return !shouldSendCompressed
? attachments.map((attachment) => ({
...attachment,
shouldSendAsFile: !attachment.voice ? true : undefined,
return attachments.map((attach) => {
if (shouldSendCompressed) {
if (attach.compressedBlobUrl) {
return {
...attach,
blobUrl: attach.compressedBlobUrl,
};
}
return attach;
}
return {
...attach,
shouldSendAsFile: !attach.voice ? true : undefined,
shouldSendAsSpoiler: undefined,
}))
: attachments;
};
});
}