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

Webpage fixes 

Reply fixes
master
morethanwords 3 years ago
parent
645286a40e
commit
ac3ed37da0
8 changed files with 110 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      src/components/chat/bubbles.ts
  2. 20
      src/components/chat/replyContainer.ts
  3. 10
      src/lang.ts
  4. 3
      src/layer.d.ts
  5. 17
      src/scss/partials/_chat.scss
  6. 111
      src/scss/partials/_chatBubble.scss
  7. 14
      src/scss/partials/_chatPinned.scss
  8. 2
      src/scss/style.scss

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

@ -2472,13 +2472,14 @@ export default class ChatBubbles {
} }
} }
if(previewResizer) {
quote.append(previewResizer);
}
let quoteTextDiv = document.createElement('div'); let quoteTextDiv = document.createElement('div');
quoteTextDiv.classList.add('quote-text'); quoteTextDiv.classList.add('quote-text');
if(previewResizer) {
quoteTextDiv.append(previewResizer);
}
let t: HTMLElement;
if(webpage.site_name) { if(webpage.site_name) {
let nameEl = document.createElement('a'); let nameEl = document.createElement('a');
nameEl.classList.add('webpage-name'); nameEl.classList.add('webpage-name');
@ -2486,6 +2487,7 @@ export default class ChatBubbles {
nameEl.href = webpage.url || '#'; nameEl.href = webpage.url || '#';
setInnerHTML(nameEl, RichTextProcessor.wrapEmojiText(webpage.site_name)); setInnerHTML(nameEl, RichTextProcessor.wrapEmojiText(webpage.site_name));
quoteTextDiv.append(nameEl); quoteTextDiv.append(nameEl);
t = nameEl;
} }
if(webpage.rTitle) { if(webpage.rTitle) {
@ -2493,6 +2495,7 @@ export default class ChatBubbles {
titleDiv.classList.add('title'); titleDiv.classList.add('title');
setInnerHTML(titleDiv, webpage.rTitle); setInnerHTML(titleDiv, webpage.rTitle);
quoteTextDiv.append(titleDiv); quoteTextDiv.append(titleDiv);
t = titleDiv;
} }
if(webpage.rDescription) { if(webpage.rDescription) {
@ -2500,6 +2503,13 @@ export default class ChatBubbles {
textDiv.classList.add('text'); textDiv.classList.add('text');
setInnerHTML(textDiv, webpage.rDescription); setInnerHTML(textDiv, webpage.rDescription);
quoteTextDiv.append(textDiv); quoteTextDiv.append(textDiv);
t = textDiv;
}
if(t) {
t.append(timeSpan);
} else {
box.classList.add('no-text');
} }
quote.append(quoteTextDiv); quote.append(quoteTextDiv);
@ -2512,7 +2522,7 @@ export default class ChatBubbles {
if(size.w === size.h && quoteTextDiv.childElementCount) { if(size.w === size.h && quoteTextDiv.childElementCount) {
bubble.classList.add('is-square-photo'); bubble.classList.add('is-square-photo');
isSquare = true; 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) { } else if(size.h > size.w) {
bubble.classList.add('is-vertical-photo'); bubble.classList.add('is-vertical-photo');
} }
@ -2535,7 +2545,8 @@ export default class ChatBubbles {
box.append(quote); box.append(quote);
//bubble.prepend(box); //bubble.prepend(box);
messageDiv.insertBefore(box, messageDiv.lastElementChild); messageDiv.append(box);
// messageDiv.insertBefore(box, messageDiv.lastElementChild);
//this.log('night running', bubble.scrollHeight); //this.log('night running', bubble.scrollHeight);

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

@ -5,7 +5,6 @@
*/ */
import replaceContent from "../../helpers/dom/replaceContent"; import replaceContent from "../../helpers/dom/replaceContent";
import { getMiddleware } from "../../helpers/middleware";
import { limitSymbols } from "../../helpers/string"; import { limitSymbols } from "../../helpers/string";
import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager"; import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager";
import appMessagesManager from "../../lib/appManagers/appMessagesManager"; import appMessagesManager from "../../lib/appManagers/appMessagesManager";
@ -17,9 +16,9 @@ import { wrapPhoto, wrapSticker } from "../wrappers";
const MEDIA_SIZE = 32; const MEDIA_SIZE = 32;
export function wrapReplyDivAndCaption(options: { export function wrapReplyDivAndCaption(options: {
title: string | HTMLElement, title: string | HTMLElement | DocumentFragment,
titleEl: HTMLElement, titleEl: HTMLElement,
subtitle: string | HTMLElement, subtitle: string | HTMLElement | DocumentFragment,
subtitleEl: HTMLElement, subtitleEl: HTMLElement,
message: any, message: any,
mediaEl: HTMLElement, mediaEl: HTMLElement,
@ -98,10 +97,13 @@ export function wrapReplyDivAndCaption(options: {
if(message) { if(message) {
subtitleEl.textContent = ''; subtitleEl.textContent = '';
subtitleEl.append(appMessagesManager.wrapMessageForReply(message, message.message && limitSymbols(message.message, 140))); subtitleEl.append(appMessagesManager.wrapMessageForReply(message, message.message && limitSymbols(message.message, 140)));
} else if(typeof(subtitle) === 'string') { } else {
subtitle = limitSymbols(subtitle, 140); if(typeof(subtitle) === 'string') {
subtitle = RichTextProcessor.wrapEmojiText(subtitle); subtitle = limitSymbols(subtitle, 140);
replaceContent(subtitleEl, subtitle); subtitle = RichTextProcessor.wrapEmojiText(subtitle);
}
replaceContent(subtitleEl, subtitle || '');
} }
} }
@ -117,11 +119,11 @@ export function wrapReplyDivAndCaption(options: {
return setMedia; 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; private mediaEl: HTMLElement;
constructor(protected className: string) { constructor(protected className: string) {
super(className, (title: string | HTMLElement, subtitle: string | HTMLElement = '', message?: any) => { super(className, (title, subtitle = '', message?) => {
if(!this.mediaEl) { if(!this.mediaEl) {
this.mediaEl = document.createElement('div'); this.mediaEl = document.createElement('div');
this.mediaEl.classList.add(this.className + '-media'); this.mediaEl.classList.add(this.className + '-media');

10
src/lang.ts
Unescape View File

@ -143,6 +143,7 @@ const lang = {
//"PushNotification.Action.Mute1d.Success": "Notification settings were successfully saved.", //"PushNotification.Action.Mute1d.Success": "Notification settings were successfully saved.",
// * android // * android
"AccDescrEditing": "Editing",
"ActionCreateChannel": "Channel created", "ActionCreateChannel": "Channel created",
"ActionCreateGroup": "un1 created the group", "ActionCreateGroup": "un1 created the group",
"ActionChangedTitle": "un1 changed the group name to un2", "ActionChangedTitle": "un1 changed the group name to un2",
@ -162,6 +163,10 @@ const lang = {
"ActionUserScored": "un1 scored %1$s", "ActionUserScored": "un1 scored %1$s",
"ActionYouScoredInGame": "You scored %1$s in un2", "ActionYouScoredInGame": "You scored %1$s in un2",
"ActionUserScoredInGame": "un1 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", "AttachPhoto": "Photo",
"AttachVideo": "Video", "AttachVideo": "Video",
"AttachGif": "GIF", "AttachGif": "GIF",
@ -192,6 +197,10 @@ const lang = {
"one_value": "Show %1$d More Chat", "one_value": "Show %1$d More Chat",
"other_value": "Show %1$d More Chats" "other_value": "Show %1$d More Chats"
}, },
"ForwardedMessageCount": {
"one_value": "Forwarded message",
"other_value": "%1$d forwarded messages"
},
"FromYou": "You", "FromYou": "You",
"Add": "Add", "Add": "Add",
"Chats": { "Chats": {
@ -534,6 +543,7 @@ const lang = {
"PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.", "PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.",
"Send": "Send", "Send": "Send",
"ChannelJoin": "JOIN", "ChannelJoin": "JOIN",
"Yesterday": "yesterday",
// * macos // * macos
"AccountSettings.Filters": "Chat Folders", "AccountSettings.Filters": "Chat Folders",

3
src/layer.d.ts vendored
Unescape View File

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

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

@ -922,20 +922,15 @@ $chat-helper-size: 36px;
margin: 0 .625rem; margin: 0 .625rem;
// min-height: 35px; // min-height: 35px;
&-title { /* &-content {
margin-top: -1px; margin-left: .5rem;
margin-bottom: 1px; } */
}
} }
.peer-title { span.emoji {
font-weight: 500; margin: 0 .125rem;
// font-size: .8rem;
} }
/* span.emoji {
font-size: .8rem;
} */
} }
.new-message-wrapper { .new-message-wrapper {

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

@ -814,39 +814,46 @@ $bubble-margin: .25rem;
} }
.web { .web {
padding-top: 1px; margin: .125rem 0;
margin: 4px 0 -5px 1px;
// margin-bottom: 5px;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
line-height: var(--line-height);
.preview { .preview {
max-width: unquote('min(420px, 100%)'); max-width: unquote('min(420px, 100%)');
max-height: unquote('min(340px, 100%)'); max-height: unquote('min(340px, 100%)');
border-radius: 4px; border-radius: 4px;
margin-bottom: 3px;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
width: max-content; width: max-content;
img, video { img, video {
max-width: 100%; max-width: 100%;
} }
&-resizer {
&:first-child {
margin: 3px 0;
}
}
}
&.no-text {
margin-bottom: .625rem;
} }
.title { .title {
letter-spacing: -.2px;
line-height: 1.2;
font-weight: 500 !important; font-weight: 500 !important;
&:not(:first-child) {
margin-top: 1px;
}
} }
.webpage-name { .webpage-name {
letter-spacing: -.3px; font-size: var(--messages-secondary-text-size);
display: block;
font-size: calc(1rem - 1px);
font-weight: 500 !important; font-weight: 500 !important;
@include hover() { @include hover() {
@ -857,18 +864,31 @@ $bubble-margin: .25rem;
.text { .text {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
line-height: 1.2; margin-top: 1px;
letter-spacing: -.3px;
margin-top: 2px;
font-size: var(--messages-secondary-text-size); font-size: var(--messages-secondary-text-size);
} }
.quote { .quote {
// padding-left: .5rem;
padding-left: .55rem;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
width: 100%; 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); font-size: var(--messages-secondary-text-size);
} }
.reply-title {
font-weight: 500 !important;
display: inline !important;
}
&.is-square-photo { &.is-square-photo {
.bubble-content { .bubble-content {
width: fit-content; width: fit-content;
} }
.web { .web {
.quote {
display: flex;
justify-content: space-between;
}
.preview-resizer { .preview-resizer {
order: 2; margin: 0;
flex-shrink: 0; width: 2rem;
max-width: 5rem; height: 2rem;
max-height: 5rem; float: right;
.preview {
max-width: unquote('min(5rem, 100%)');
max-height: unquote('min(5rem, 100%)');
}
} }
.quote-text { .preview {
order: 1; max-width: unquote('min(2rem, 100%)');
padding-right: 1rem; max-height: unquote('min(2rem, 100%)');
margin: 0;
} }
} }
} }
@ -919,7 +925,7 @@ $bubble-margin: .25rem;
.reply { .reply {
padding: 4px; padding: 4px;
margin: 0 4px 6px 4px; margin: 0 4px 6px 6px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
min-width: 10rem; min-width: 10rem;
@ -1859,12 +1865,6 @@ $bubble-margin: .25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.quote {
@include hover() {
background-color: var(--light-primary-color);
}
}
&.is-reply { &.is-reply {
&.emoji-big, &.sticker { &.emoji-big, &.sticker {
.reply { .reply {
@ -1878,11 +1878,9 @@ $bubble-margin: .25rem;
} }
} }
.quote { .quote .webpage-name,
border-left: 2px var(--primary-color) solid; .reply-title
} /* , .reply i */ {
.quote .webpage-name, .reply-title/* , .reply i */ {
color: var(--primary-color); color: var(--primary-color);
} }
@ -2010,12 +2008,6 @@ $bubble-margin: .25rem;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.quote {
@include hover() {
background-color: var(--light-message-background-color);
}
}
&.is-reply { &.is-reply {
&.emoji-big, &.sticker { &.emoji-big, &.sticker {
.web, .reply { .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); background-color: var(--message-out-primary-color);
} }

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

@ -135,7 +135,7 @@
&.is-media { &.is-media {
.emoji:first-child { .emoji:first-child {
margin-right: .25rem; margin: 0 .25rem 0 0;
} }
} }
@ -225,6 +225,10 @@
height: 2rem; height: 2rem;
} */ } */
&-content {
margin-left: .625rem;
}
&-media { &-media {
border-radius: .25rem; border-radius: .25rem;
} }
@ -232,6 +236,14 @@
&-cancel { &-cancel {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
&-title {
margin: -1px 0 1px;
}
.peer-title {
font-weight: 500;
}
} }
.pinned-container { .pinned-container {

2
src/scss/style.scss
Unescape 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); --message-highlightning-color: hsla(85.5319, 36.9171%, 40.402%, .4);//rgba(77, 142, 80, .4);
--messages-container-width: #{$messages-container-width}; --messages-container-width: #{$messages-container-width};
--messages-text-size: 16px; --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; --line-height: 1.3125;
--esg-sticker-size: 80px; --esg-sticker-size: 80px;
--disabled-opacity: .3; --disabled-opacity: .3;

Write Preview
Loading…
Cancel
Save