r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Webpage fixes

Browse Source 
Reply fixes
This commit is contained in:
morethanwords 2021-08-09 23:29:40 +03:00
parent 645286a40e
commit ac3ed37da0
8 changed files with 110 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/chat/bubbles.ts
View File

@ -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);

20
src/components/chat/replyContainer.ts
View File

@ -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');

10
src/lang.ts
View File

@ -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",

3
src/layer.d.ts vendored
View File

@ -859,7 +859,8 @@ export namespace Message {
clear_history?: boolean,
pending?: boolean,
error?: any,
send?: () => Promise<any>
send?: () => Promise<any>,
totalEntities?: MessageEntity[]
};
export type messageService = {

17
src/scss/partials/_chat.scss
View File

@ -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 {

111
src/scss/partials/_chatBubble.scss
View File

@ -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);
}

14
src/scss/partials/_chatPinned.scss
View File

@ -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 {

2
src/scss/style.scss
View File

@ -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;