diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 3c3e4ee6..e988993b 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -2472,13 +2472,14 @@ export default class ChatBubbles { } } - if(previewResizer) { - quote.append(previewResizer); - } - let quoteTextDiv = document.createElement('div'); quoteTextDiv.classList.add('quote-text'); + if(previewResizer) { + quoteTextDiv.append(previewResizer); + } + + let t: HTMLElement; if(webpage.site_name) { let nameEl = document.createElement('a'); nameEl.classList.add('webpage-name'); @@ -2486,6 +2487,7 @@ export default class ChatBubbles { nameEl.href = webpage.url || '#'; setInnerHTML(nameEl, RichTextProcessor.wrapEmojiText(webpage.site_name)); quoteTextDiv.append(nameEl); + t = nameEl; } if(webpage.rTitle) { @@ -2493,6 +2495,7 @@ export default class ChatBubbles { titleDiv.classList.add('title'); setInnerHTML(titleDiv, webpage.rTitle); quoteTextDiv.append(titleDiv); + t = titleDiv; } if(webpage.rDescription) { @@ -2500,6 +2503,13 @@ export default class ChatBubbles { textDiv.classList.add('text'); setInnerHTML(textDiv, webpage.rDescription); quoteTextDiv.append(textDiv); + t = textDiv; + } + + if(t) { + t.append(timeSpan); + } else { + box.classList.add('no-text'); } quote.append(quoteTextDiv); @@ -2512,7 +2522,7 @@ export default class ChatBubbles { if(size.w === size.h && quoteTextDiv.childElementCount) { bubble.classList.add('is-square-photo'); isSquare = true; - this.appPhotosManager.setAttachmentSize(webpage.photo, preview, 80, 80, false); + this.appPhotosManager.setAttachmentSize(webpage.photo, preview, 32, 32, false); } else if(size.h > size.w) { bubble.classList.add('is-vertical-photo'); } @@ -2535,7 +2545,8 @@ export default class ChatBubbles { box.append(quote); //bubble.prepend(box); - messageDiv.insertBefore(box, messageDiv.lastElementChild); + messageDiv.append(box); + // messageDiv.insertBefore(box, messageDiv.lastElementChild); //this.log('night running', bubble.scrollHeight); diff --git a/src/components/chat/replyContainer.ts b/src/components/chat/replyContainer.ts index f9a14577..fc9c2676 100644 --- a/src/components/chat/replyContainer.ts +++ b/src/components/chat/replyContainer.ts @@ -5,7 +5,6 @@ */ import replaceContent from "../../helpers/dom/replaceContent"; -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"; @@ -17,9 +16,9 @@ import { wrapPhoto, wrapSticker } from "../wrappers"; const MEDIA_SIZE = 32; export function wrapReplyDivAndCaption(options: { - title: string | HTMLElement, + title: string | HTMLElement | DocumentFragment, titleEl: HTMLElement, - subtitle: string | HTMLElement, + subtitle: string | HTMLElement | DocumentFragment, subtitleEl: HTMLElement, message: any, mediaEl: HTMLElement, @@ -98,10 +97,13 @@ export function wrapReplyDivAndCaption(options: { if(message) { subtitleEl.textContent = ''; subtitleEl.append(appMessagesManager.wrapMessageForReply(message, message.message && limitSymbols(message.message, 140))); - } else if(typeof(subtitle) === 'string') { - subtitle = limitSymbols(subtitle, 140); - subtitle = RichTextProcessor.wrapEmojiText(subtitle); - replaceContent(subtitleEl, subtitle); + } else { + if(typeof(subtitle) === 'string') { + subtitle = limitSymbols(subtitle, 140); + subtitle = RichTextProcessor.wrapEmojiText(subtitle); + } + + replaceContent(subtitleEl, subtitle || ''); } } @@ -117,11 +119,11 @@ export function wrapReplyDivAndCaption(options: { return setMedia; } -export default class ReplyContainer extends DivAndCaption<(title: string | HTMLElement, subtitle: string | HTMLElement, message?: any) => void> { +export default class ReplyContainer extends DivAndCaption<(title: string | HTMLElement | DocumentFragment, subtitle: string | HTMLElement | DocumentFragment, message?: any) => void> { private mediaEl: HTMLElement; constructor(protected className: string) { - super(className, (title: string | HTMLElement, subtitle: string | HTMLElement = '', message?: any) => { + super(className, (title, subtitle = '', message?) => { if(!this.mediaEl) { this.mediaEl = document.createElement('div'); this.mediaEl.classList.add(this.className + '-media'); diff --git a/src/lang.ts b/src/lang.ts index 13919ed4..756a8e80 100644 --- a/src/lang.ts +++ b/src/lang.ts @@ -143,6 +143,7 @@ const lang = { //"PushNotification.Action.Mute1d.Success": "Notification settings were successfully saved.", // * android + "AccDescrEditing": "Editing", "ActionCreateChannel": "Channel created", "ActionCreateGroup": "un1 created the group", "ActionChangedTitle": "un1 changed the group name to un2", @@ -162,6 +163,10 @@ const lang = { "ActionUserScored": "un1 scored %1$s", "ActionYouScoredInGame": "You scored %1$s in un2", "ActionUserScoredInGame": "un1 scored %1$s in un2", + "AndOther": { + "one_value": "and %1$d other", + "other_value": "and %1$d others" + }, "AttachPhoto": "Photo", "AttachVideo": "Video", "AttachGif": "GIF", @@ -192,6 +197,10 @@ const lang = { "one_value": "Show %1$d More Chat", "other_value": "Show %1$d More Chats" }, + "ForwardedMessageCount": { + "one_value": "Forwarded message", + "other_value": "%1$d forwarded messages" + }, "FromYou": "You", "Add": "Add", "Chats": { @@ -534,6 +543,7 @@ const lang = { "PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.", "Send": "Send", "ChannelJoin": "JOIN", + "Yesterday": "yesterday", // * macos "AccountSettings.Filters": "Chat Folders", diff --git a/src/layer.d.ts b/src/layer.d.ts index 6f15c469..338a1fcf 100644 --- a/src/layer.d.ts +++ b/src/layer.d.ts @@ -859,7 +859,8 @@ export namespace Message { clear_history?: boolean, pending?: boolean, error?: any, - send?: () => Promise + send?: () => Promise, + totalEntities?: MessageEntity[] }; export type messageService = { diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index fcc9a232..abf3ec79 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -922,20 +922,15 @@ $chat-helper-size: 36px; margin: 0 .625rem; // min-height: 35px; - &-title { - margin-top: -1px; - margin-bottom: 1px; - - } + /* &-content { + margin-left: .5rem; + } */ } - .peer-title { - font-weight: 500; + span.emoji { + margin: 0 .125rem; + // font-size: .8rem; } - - /* span.emoji { - font-size: .8rem; - } */ } .new-message-wrapper { diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 073304d1..077fb3c9 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -814,39 +814,46 @@ $bubble-margin: .25rem; } .web { - padding-top: 1px; - margin: 4px 0 -5px 1px; - // margin-bottom: 5px; + margin: .125rem 0; max-width: 100%; overflow: hidden; + line-height: var(--line-height); .preview { max-width: unquote('min(420px, 100%)'); max-height: unquote('min(340px, 100%)'); border-radius: 4px; - margin-bottom: 3px; overflow: hidden; user-select: none; cursor: pointer; position: relative; - width: max-content; img, video { max-width: 100%; } + + &-resizer { + &:first-child { + margin: 3px 0; + } + } + } + + &.no-text { + margin-bottom: .625rem; } .title { - letter-spacing: -.2px; - line-height: 1.2; font-weight: 500 !important; + + &:not(:first-child) { + margin-top: 1px; + } } .webpage-name { - letter-spacing: -.3px; - display: block; - font-size: calc(1rem - 1px); + font-size: var(--messages-secondary-text-size); font-weight: 500 !important; @include hover() { @@ -857,18 +864,31 @@ $bubble-margin: .25rem; .text { overflow: hidden; text-overflow: ellipsis; - line-height: 1.2; - letter-spacing: -.3px; - margin-top: 2px; + margin-top: 1px; font-size: var(--messages-secondary-text-size); } .quote { - // padding-left: .5rem; - padding-left: .55rem; max-width: 100%; overflow: hidden; width: 100%; + display: flex; + + &-text { + // max-width: calc(100% - .625rem); // left border + max-width: 100%; + padding-left: .625rem; + margin-left: -.625rem; + } + + &:before { + flex: 0 0 auto; + width: .125rem; + border-radius: .125rem; + background-color: var(--primary-color); + margin: .1875rem .5rem .125rem 0; + content: " "; + } } } @@ -876,37 +896,23 @@ $bubble-margin: .25rem; font-size: var(--messages-secondary-text-size); } - .reply-title { - font-weight: 500 !important; - display: inline !important; - } - &.is-square-photo { .bubble-content { width: fit-content; } .web { - .quote { - display: flex; - justify-content: space-between; - } - .preview-resizer { - order: 2; - flex-shrink: 0; - max-width: 5rem; - max-height: 5rem; - - .preview { - max-width: unquote('min(5rem, 100%)'); - max-height: unquote('min(5rem, 100%)'); - } + margin: 0; + width: 2rem; + height: 2rem; + float: right; } - - .quote-text { - order: 1; - padding-right: 1rem; + + .preview { + max-width: unquote('min(2rem, 100%)'); + max-height: unquote('min(2rem, 100%)'); + margin: 0; } } } @@ -919,7 +925,7 @@ $bubble-margin: .25rem; .reply { padding: 4px; - margin: 0 4px 6px 4px; + margin: 0 4px 6px 6px; cursor: pointer; border-radius: 4px; min-width: 10rem; @@ -1859,12 +1865,6 @@ $bubble-margin: .25rem; border-top-right-radius: 0; } - .quote { - @include hover() { - background-color: var(--light-primary-color); - } - } - &.is-reply { &.emoji-big, &.sticker { .reply { @@ -1878,11 +1878,9 @@ $bubble-margin: .25rem; } } - .quote { - border-left: 2px var(--primary-color) solid; - } - - .quote .webpage-name, .reply-title/* , .reply i */ { + .quote .webpage-name, + .reply-title + /* , .reply i */ { color: var(--primary-color); } @@ -2010,12 +2008,6 @@ $bubble-margin: .25rem; border-top-right-radius: 0; } - .quote { - @include hover() { - background-color: var(--light-message-background-color); - } - } - &.is-reply { &.emoji-big, &.sticker { .web, .reply { @@ -2023,12 +2015,9 @@ $bubble-margin: .25rem; } } } - - .quote { - border-left: 2px solid var(--message-out-primary-color); - } - .reply-border { + .reply-border, + .quote:before { background-color: var(--message-out-primary-color); } diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 7a452c20..f23c6981 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -135,7 +135,7 @@ &.is-media { .emoji:first-child { - margin-right: .25rem; + margin: 0 .25rem 0 0; } } @@ -225,6 +225,10 @@ height: 2rem; } */ + &-content { + margin-left: .625rem; + } + &-media { border-radius: .25rem; } @@ -232,6 +236,14 @@ &-cancel { margin-bottom: 0 !important; } + + &-title { + margin: -1px 0 1px; + } + + .peer-title { + font-weight: 500; + } } .pinned-container { diff --git a/src/scss/style.scss b/src/scss/style.scss index 1f7eac1c..1def2547 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -72,7 +72,7 @@ $chat-input-inner-padding-handhelds: .25rem; --message-highlightning-color: hsla(85.5319, 36.9171%, 40.402%, .4);//rgba(77, 142, 80, .4); --messages-container-width: #{$messages-container-width}; --messages-text-size: 16px; - --messages-secondary-text-size: calc(var(--messages-text-size) - 1px); + --messages-secondary-text-size: calc(var(--messages-text-size) - 2px); --line-height: 1.3125; --esg-sticker-size: 80px; --disabled-opacity: .3;