From 79aa7b6f62e5bf9f63bc10bc96e29cef72682a6a Mon Sep 17 00:00:00 2001 From: morethanwords Date: Mon, 9 Aug 2021 16:59:38 +0300 Subject: [PATCH] Reply fixes --- src/components/chat/replyContainer.ts | 2 + src/lib/appManagers/appMessagesManager.ts | 8 ++-- src/lib/langPack.ts | 4 +- src/scss/partials/_chat.scss | 45 +++++++++++++++-------- src/scss/partials/_chatPinned.scss | 17 +++++---- tweb-design | 1 + 6 files changed, 48 insertions(+), 29 deletions(-) create mode 160000 tweb-design diff --git a/src/components/chat/replyContainer.ts b/src/components/chat/replyContainer.ts index c85a0ed7..c3df1f0d 100644 --- a/src/components/chat/replyContainer.ts +++ b/src/components/chat/replyContainer.ts @@ -9,6 +9,7 @@ import { getMiddleware } from "../../helpers/middleware"; import { limitSymbols } from "../../helpers/string"; import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager"; import appMessagesManager from "../../lib/appManagers/appMessagesManager"; +import appPhotosManager from "../../lib/appManagers/appPhotosManager"; import { RichTextProcessor } from "../../lib/richtextprocessor"; import DivAndCaption from "../divAndCaption"; import { wrapPhoto, wrapSticker } from "../wrappers"; @@ -80,6 +81,7 @@ export function wrapReplyDivAndCaption(options: { container: mediaEl, boxWidth: MEDIA_SIZE, boxHeight: MEDIA_SIZE, + size: appPhotosManager.choosePhotoSize(photo, MEDIA_SIZE, MEDIA_SIZE), middleware, lazyLoadQueue, noBlur: true, diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index 06040cbf..2b9d0ea1 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -2574,8 +2574,8 @@ export class AppMessagesManager { addPart(undefined, plain ? prefix + media.game.title : RichTextProcessor.wrapEmojiText(prefix + media.game.title)); break; } - case 'messageMediaDocument': - let document = media.document; + case 'messageMediaDocument': { + const document = media.document; if(document.type === 'video') { addPart('AttachVideo', undefined, message.message); @@ -2586,13 +2586,15 @@ export class AppMessagesManager { } else if(document.type === 'round') { addPart('AttachRound', undefined, message.message); } else if(document.type === 'sticker') { - addPart(undefined, ((plain ? document.stickerEmojiRaw : document.stickerEmoji) || '') + 'Sticker'); + addPart(undefined, ((plain ? document.stickerEmojiRaw : document.stickerEmoji) || '')); + addPart('AttachSticker'); text = ''; } else { addPart(undefined, plain ? document.file_name : RichTextProcessor.wrapEmojiText(document.file_name), message.message); } break; + } default: //messageText += media._; diff --git a/src/lib/langPack.ts b/src/lib/langPack.ts index ec42f969..4b7c1b83 100644 --- a/src/lib/langPack.ts +++ b/src/lib/langPack.ts @@ -418,8 +418,8 @@ export {i18n_}; const _i18n = I18n._i18n; export {_i18n}; -export function join(elements: HTMLElement[], useLast = true) { - const arr: HTMLElement[] = elements.slice(0, 1); +export function join(elements: (Node | string)[], useLast = true) { + const arr = elements.slice(0, 1); for(let i = 1; i < elements.length; ++i) { const isLast = (elements.length - 1) === i; const delimiterKey: LangPackKey = isLast && useLast ? 'WordDelimiterLast' : 'WordDelimiter'; diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index ead5ab26..d638505b 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -5,7 +5,7 @@ */ $btn-send-margin: .5rem; -$chat-helper-size: 39px; +$chat-helper-size: 36px; /* #bubble-contextmenu > div { padding: 0 5.25 0 1rem; @@ -136,7 +136,7 @@ $chat-helper-size: 39px; } @media only screen and (max-height: 30rem) { - max-height: unquote('max(39px, calc(100vh - 10rem))'); + max-height: unquote('max(36px, calc(100vh - 10rem))'); } @include respond-to(handhelds) { @@ -861,9 +861,9 @@ $chat-helper-size: 39px; align-items: center; width: 100%; position: relative; - z-index: 2; + // z-index: 2; background-color: inherit; - border-radius: 12px; + border-radius: .75rem; padding: var(--padding); } @@ -879,16 +879,22 @@ $chat-helper-size: 39px; height: 0; width: calc(100% - var(--padding-horizontal) * 2); padding: 0; - margin-top: .3125rem;//var(--padding-vertical); - margin-bottom: -.3125rem; - transition: height var(--layer-transition); + margin-top: .5625rem;//var(--padding-vertical); + margin-bottom: -.5625rem; //height: calc(#{$chat-helper-size} + .3125rem); - align-items: flex-start; + align-items: center; user-select: none; z-index: 2; + opacity: 0; + pointer-events: none; - @include animation-level(0) { - transition: none; + @include animation-level(2) { + transition: height var(--layer-transition), opacity var(--layer-transition); + } + + @include respond-to(esg-bottom-new) { + margin-top: .3125rem; + margin-bottom: -.3125rem; } /* @include respond-to(handhelds) { @@ -902,7 +908,9 @@ $chat-helper-size: 39px; } */ .chat.is-helper-active & { - height: 39px; + pointer-events: unset; + height: #{$chat-helper-size}; + opacity: 1; } /* &.active { @@ -911,15 +919,20 @@ $chat-helper-size: 39px; .reply { width: 100%; - margin-left: .5rem; - min-height: 35px; + margin: 0 .625rem; + // min-height: 35px; + + &-title { + margin-top: -1px; + margin-bottom: 1px; + } } - span.emoji { + /* span.emoji { font-size: .8rem; - } + } */ } - + .new-message-wrapper { //padding: 4.5px 0; //padding-bottom: 4.5px; diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 46171e97..7a452c20 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -128,7 +128,7 @@ overflow: hidden; box-sizing: border-box; margin-right: 1rem; - max-height: 35px; + // max-height: 35px; position: relative; user-select: none; /* padding: .25rem; */ @@ -145,9 +145,6 @@ overflow: hidden; pointer-events: none; position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; margin-left: .5rem; } @@ -169,7 +166,7 @@ overflow: hidden; position: absolute; left: 0; - top: 0; + top: .125rem; &.is-round { border-radius: 50%; @@ -224,13 +221,17 @@ background: var(--primary-color); } - &-content { + /* &-content { height: 2rem; - } + } */ &-media { border-radius: .25rem; } + + &-cancel { + margin-bottom: 0 !important; + } } .pinned-container { @@ -299,7 +300,7 @@ overflow: hidden; align-items: center; padding: .25rem; - border-radius: 4px; + border-radius: .25rem; /* html.no-touch &:hover { background-color: var(--light-secondary-text-color); diff --git a/tweb-design b/tweb-design new file mode 160000 index 00000000..d7664548 --- /dev/null +++ b/tweb-design @@ -0,0 +1 @@ +Subproject commit d7664548de0373baa27e006bbe1f62467f566277