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
Split 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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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
Unescape View File

@ -5,7 +5,6 @@ @@ -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"; @@ -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: { @@ -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: { @@ -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
Unescape View File

@ -143,6 +143,7 @@ const lang = { @@ -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 = { @@ -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 = { @@ -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 = { @@ -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
Unescape View File

@ -859,7 +859,8 @@ export namespace Message { @@ -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
Unescape View File

@ -922,20 +922,15 @@ $chat-helper-size: 36px; @@ -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
Unescape View File

@ -814,39 +814,46 @@ $bubble-margin: .25rem; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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
Unescape View File

@ -135,7 +135,7 @@ @@ -135,7 +135,7 @@
&.is-media {
.emoji:first-child {
margin-right: .25rem;
margin: 0 .25rem 0 0;
}
}
@ -225,6 +225,10 @@ @@ -225,6 +225,10 @@
height: 2rem;
} */
&-content {
margin-left: .625rem;
}
&-media {
border-radius: .25rem;
}
@ -232,6 +236,14 @@ @@ -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
Unescape View File

@ -72,7 +72,7 @@ $chat-input-inner-padding-handhelds: .25rem; @@ -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;

Write Preview
Loading…
Cancel
Save