diff --git a/src/assets/fonts/tgico.eot b/src/assets/fonts/tgico.eot index 0bd23a10..6e0ddc74 100644 Binary files a/src/assets/fonts/tgico.eot and b/src/assets/fonts/tgico.eot differ diff --git a/src/assets/fonts/tgico.svg b/src/assets/fonts/tgico.svg index 2ad13550..e314cbfb 100644 --- a/src/assets/fonts/tgico.svg +++ b/src/assets/fonts/tgico.svg @@ -7,102 +7,116 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/tgico.ttf b/src/assets/fonts/tgico.ttf index 9bdcff3a..65da5d36 100644 Binary files a/src/assets/fonts/tgico.ttf and b/src/assets/fonts/tgico.ttf differ diff --git a/src/assets/fonts/tgico.woff b/src/assets/fonts/tgico.woff index ee8dd3ce..c5d66f39 100644 Binary files a/src/assets/fonts/tgico.woff and b/src/assets/fonts/tgico.woff differ diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 32c20eb3..907ed0ac 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -628,7 +628,7 @@ function wrapMediaWithTail(photo: any, message: {mid: number, message: string}, return img; } -export function wrapPhoto(photoID: string, message: any, container: HTMLDivElement, boxWidth = 380, boxHeight = 380, withTail = true, isOut = false, lazyLoadQueue: LazyLoadQueue, middleware: () => boolean, size: MTPhotoSize = null) { +export function wrapPhoto(photoID: string, message: any, container: HTMLDivElement, boxWidth = 480, boxHeight = 480, withTail = true, isOut = false, lazyLoadQueue: LazyLoadQueue, middleware: () => boolean, size: MTPhotoSize = null) { let photo = appPhotosManager.getPhoto(photoID); let image: HTMLImageElement; @@ -940,7 +940,7 @@ export function wrapAlbum({groupID, attachmentDiv, middleware, uploading, lazyLo let m = appMessagesManager.getMessage(+mid); let media = m.media.photo || m.media.document; - let size: any = media._ == 'photo' ? appPhotosManager.choosePhotoSize(media, 380, 380) : {w: media.w, h: media.h}; + let size: any = media._ == 'photo' ? appPhotosManager.choosePhotoSize(media, 480, 480) : {w: media.w, h: media.h}; items.push({size, media, message: m}); } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 62b64374..6347f035 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -1722,8 +1722,8 @@ export class AppImManager { doc, container: attachmentDiv, message, - boxWidth: 380, - boxHeight: 380, + boxWidth: 480, + boxHeight: 480, withTail: doc.type != 'round', isOut: isOut, lazyLoadQueue: this.lazyLoadQueue, @@ -1793,16 +1793,7 @@ export class AppImManager { let quote = document.createElement('div'); quote.classList.add('quote'); - - let nameEl = document.createElement('a'); - nameEl.classList.add('name'); - - let titleDiv = document.createElement('div'); - titleDiv.classList.add('title'); - - let textDiv = document.createElement('div'); - textDiv.classList.add('text'); - + let preview: HTMLDivElement = null; if(webpage.photo || webpage.document) { preview = document.createElement('div'); @@ -1820,8 +1811,8 @@ export class AppImManager { doc, container: preview, message, - boxWidth: 380, - boxHeight: 300, + boxWidth: 480, + boxHeight: 400, lazyLoadQueue: this.lazyLoadQueue, middleware: this.getMiddleware(), isOut @@ -1832,40 +1823,50 @@ export class AppImManager { } } - if(webpage.photo && !doc) { - bubble.classList.add('photo'); - - const size = webpage.photo.sizes[webpage.photo.sizes.length - 1]; - if(size.w == size.h) { - bubble.classList.add('is-square-photo'); - } else if(size.h > size.w) { - bubble.classList.add('is-vertical-photo'); - } - - wrapPhoto(webpage.photo.id, message, preview, 380, 300, false, null, this.lazyLoadQueue, this.getMiddleware()); - } - if(preview) { quote.append(preview); } - nameEl.setAttribute('target', '_blank'); - nameEl.href = webpage.url || '#'; - nameEl.innerHTML = webpage.site_name ? RichTextProcessor.wrapEmojiText(webpage.site_name) : ''; - - if(webpage.description) { - textDiv.innerHTML = RichTextProcessor.wrapRichText(webpage.description); + let quoteTextDiv = document.createElement('div'); + quoteTextDiv.classList.add('quote-text'); + + if(webpage.site_name) { + let nameEl = document.createElement('a'); + nameEl.classList.add('name'); + nameEl.setAttribute('target', '_blank'); + nameEl.href = webpage.url || '#'; + nameEl.innerHTML = RichTextProcessor.wrapEmojiText(webpage.site_name); + quoteTextDiv.append(nameEl); } - + if(webpage.title) { + let titleDiv = document.createElement('div'); + titleDiv.classList.add('title'); titleDiv.innerHTML = RichTextProcessor.wrapRichText(webpage.title); + quoteTextDiv.append(titleDiv); } - let quoteTextDiv = document.createElement('div'); - quoteTextDiv.classList.add('quote-text'); - quoteTextDiv.append(nameEl, titleDiv, textDiv); + if(webpage.description) { + let textDiv = document.createElement('div'); + textDiv.classList.add('text'); + textDiv.innerHTML = RichTextProcessor.wrapRichText(webpage.description); + quoteTextDiv.append(textDiv); + } quote.append(quoteTextDiv); + + if(webpage.photo && !doc) { + bubble.classList.add('photo'); + + const size = webpage.photo.sizes[webpage.photo.sizes.length - 1]; + if(size.w == size.h && quoteTextDiv.childElementCount) { + bubble.classList.add('is-square-photo'); + } else if(size.h > size.w) { + bubble.classList.add('is-vertical-photo'); + } + + wrapPhoto(webpage.photo.id, message, preview, 480, 400, false, null, this.lazyLoadQueue, this.getMiddleware()); + } box.append(quote); @@ -1929,8 +1930,8 @@ export class AppImManager { doc, container: attachmentDiv, message, - boxWidth: 380, - boxHeight: 380, + boxWidth: 480, + boxHeight: 480, withTail: doc.type != 'round', isOut: isOut, lazyLoadQueue: this.lazyLoadQueue, diff --git a/src/lib/appManagers/appPhotosManager.ts b/src/lib/appManagers/appPhotosManager.ts index 02a70e9b..a4b05971 100644 --- a/src/lib/appManagers/appPhotosManager.ts +++ b/src/lib/appManagers/appPhotosManager.ts @@ -231,7 +231,7 @@ export class AppPhotosManager { } } - public setAttachmentSize(photoID: any, element: HTMLElement | SVGForeignObjectElement, boxWidth = 380, boxHeight = 380, isSticker = false) { + public setAttachmentSize(photoID: any, element: HTMLElement | SVGForeignObjectElement, boxWidth = 480, boxHeight = 480, isSticker = false) { let photo: /* MTDocument | MTPhoto */any = null; if(typeof(photoID) === 'string') { diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 82a03f00..d7804ce9 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -414,8 +414,8 @@ &:not(.sticker) { .attachment { - max-width: 380px; - max-height: 380px; + max-width: 480px; + max-height: 480px; width: max-content; } @@ -491,8 +491,8 @@ overflow: hidden; .preview { - max-height: 300px; - max-width: 380px; + max-height: 400px; + max-width: 480px; /* max-height: 100%; max-width: 100%; */ border-radius: 4px; diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss index cd69c73c..86c9360f 100644 --- a/src/scss/partials/_emojiDropdown.scss +++ b/src/scss/partials/_emojiDropdown.scss @@ -9,7 +9,7 @@ background: #fff; box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, 0.14); border-radius: 10px; - z-index: 2; + z-index: 3; /* display: none; */ display: flex; overflow: hidden; diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss index dfa0d3a1..b8d02a4c 100644 --- a/src/scss/partials/_fonts.scss +++ b/src/scss/partials/_fonts.scss @@ -35,294 +35,336 @@ .tgico-check:before { content: $tgico-check; } -.tgico-settings:before { - content: "\e901"; +.tgico-checks:before { + content: $tgico-checks; } -.tgico-smallscreen:before { +.tgico-activesessions:before { content: "\e902"; } -.tgico-smile:before { +.tgico-add:before { content: "\e903"; } -.tgico-sport:before { +.tgico-addmember_filled:before { content: "\e904"; } -.tgico-stop:before { +.tgico-adduser:before { content: "\e905"; } -.tgico-unarchive:before { +.tgico-admin:before { content: "\e906"; } -.tgico-unlock:before { +.tgico-animals:before { content: "\e907"; } -.tgico-unmute:before { +.tgico-archive:before { content: "\e908"; } -.tgico-unpin:before { +.tgico-attach:before { content: "\e909"; } -.tgico-unread:before { +.tgico-avatar_archivedchats:before { content: "\e90a"; } -.tgico-up:before { +.tgico-avatar_deletedaccount:before { content: "\e90b"; } -.tgico-username:before { +.tgico-avatar_savedmessages:before { content: "\e90c"; } -.tgico-user:before { +.tgico-back:before { content: "\e90d"; } -.tgico-play:before { +.tgico-bots:before { content: "\e90e"; } -.tgico-poll:before { +.tgico-calendar:before { content: "\e90f"; } -.tgico-radiooff:before { +.tgico-camera:before { content: "\e910"; } -.tgico-radioon:before { +.tgico-cameraadd:before { content: "\e911"; } -.tgico-recent:before { +.tgico-car:before { content: "\e912"; } -.tgico-reply:before { +.tgico-channel:before { content: "\e913"; } -.tgico-revote:before { +.tgico-channelviews:before { content: "\e914"; } -.tgico-savedmessages:before { +.tgico-chatsplaceholder:before { content: "\e915"; } -.tgico-search:before { +.tgico-check1:before { content: "\e916"; } -.tgico-send:before { +.tgico-checkbox:before { content: "\e917"; } -.tgico-send2:before { +.tgico-checkboxblock:before { content: "\e918"; } -.tgico-sending:before { - content: $tgico-sending; +.tgico-checkboxempty:before { + content: "\e919"; } -.tgico-sendingerror:before { +.tgico-checkboxon:before { content: "\e91a"; } -.tgico-mute:before { - content: "\e91b"; +.tgico-close:before { + content: $tgico-close; } -.tgico-newchannel:before { +.tgico-clouddownload:before { content: "\e91c"; } -.tgico-newchat_filled:before { +.tgico-colorize:before { content: "\e91d"; } -.tgico-newgroup:before { +.tgico-copy:before { content: "\e91e"; } -.tgico-newprivate:before { +.tgico-data:before { content: "\e91f"; } -.tgico-next:before { - content: $tgico-next; +.tgico-delete:before { + content: "\e920"; } -.tgico-nosound:before { +.tgico-delete_filled:before { content: "\e921"; } -.tgico-pause:before { +.tgico-deleteleft:before { content: "\e922"; } -.tgico-permissions:before { +.tgico-deleteuser:before { content: "\e923"; } -.tgico-phone:before { +.tgico-document:before { content: "\e924"; } -.tgico-photo:before { +.tgico-down:before { content: "\e925"; } -.tgico-pin:before { +.tgico-download:before { content: "\e926"; } -.tgico-pinnedchat:before { +.tgico-eats:before { content: "\e927"; } -.tgico-largepause:before { +.tgico-edit:before { content: "\e928"; } -.tgico-largeplay:before { +.tgico-eye1:before { content: "\e929"; } -.tgico-livelocation:before { +.tgico-eye2:before { content: "\e92a"; } -.tgico-location:before { +.tgico-favourites:before { content: "\e92b"; } -.tgico-lock:before { +.tgico-flag:before { content: "\e92c"; } -.tgico-logout:before { +.tgico-folder:before { content: "\e92d"; } -.tgico-menu:before { +.tgico-forward:before { content: "\e92e"; } -.tgico-message:before { +.tgico-FullScreen:before { content: "\e92f"; } -.tgico-microphone:before { +.tgico-gifs:before { content: "\e930"; } -.tgico-microphone2:before { +.tgico-group:before { content: "\e931"; } -.tgico-minus:before { +.tgico-help:before { content: "\e932"; } -.tgico-more:before { +.tgico-info:before { content: "\e933"; } -.tgico-download:before { +.tgico-info2:before { content: "\e934"; } -.tgico-eats:before { +.tgico-keyboard:before { content: "\e935"; } -.tgico-edit:before { +.tgico-lamp:before { content: "\e936"; } -.tgico-eye1:before { +.tgico-language:before { content: "\e937"; } -.tgico-eye2:before { +.tgico-largepause:before { content: "\e938"; } -.tgico-flag:before { +.tgico-largeplay:before { content: "\e939"; } -.tgico-forward:before { +.tgico-livelocation:before { content: "\e93a"; } -.tgico-fullscreen:before { +.tgico-location:before { content: "\e93b"; } -.tgico-group:before { +.tgico-lock:before { content: "\e93c"; } -.tgico-help:before { +.tgico-logout:before { content: "\e93d"; } -.tgico-info:before { +.tgico-menu:before { content: "\e93e"; } -.tgico-lamp:before { +.tgico-message:before { content: "\e93f"; } -.tgico-language:before { +.tgico-microphone:before { content: "\e940"; } -.tgico-checkboxempty:before { +.tgico-microphone2:before { content: "\e941"; } -.tgico-checkboxon:before { +.tgico-minus:before { content: "\e942"; } -.tgico-close:before { +.tgico-more:before { content: "\e943"; } -.tgico-colorize:before { +.tgico-mute:before { content: "\e944"; } -.tgico-copy:before { +.tgico-muted:before { content: "\e945"; } -.tgico-data:before { +.tgico-newchannel:before { content: "\e946"; } -.tgico-delete_filled:before { +.tgico-newchat_filled:before { content: "\e947"; } -.tgico-delete:before { +.tgico-newgroup:before { content: "\e948"; } -.tgico-deleteuser:before { +.tgico-newprivate:before { content: "\e949"; } -.tgico-document:before { - content: "\e94a"; +.tgico-next:before { + content: $tgico-next; } -.tgico-down:before { +.tgico-noncontacts:before { content: "\e94b"; } -.tgico-attach:before { +.tgico-nosound:before { content: "\e94c"; } -.tgico-avatar_archivedchats:before { +.tgico-pause:before { content: "\e94d"; } -.tgico-avatar_deletedaccount:before { +.tgico-permissions:before { content: "\e94e"; } -.tgico-avatar_savedmessages:before { +.tgico-phone:before { content: "\e94f"; } -.tgico-back:before { +.tgico-photo:before { content: "\e950"; } -.tgico-camera:before { +.tgico-pin:before { content: "\e951"; } -.tgico-cameraadd:before { +.tgico-pinnedchat:before { content: "\e952"; } -.tgico-car:before { +.tgico-play:before { content: "\e953"; } -.tgico-channel:before { +.tgico-poll:before { content: "\e954"; } -.tgico-channelviews:before { +.tgico-radiooff:before { content: "\e955"; } -.tgico-chatsplaceholder:before { +.tgico-radioon:before { content: "\e956"; } -.tgico-check1:before { +.tgico-readchats:before { content: "\e957"; } -.tgico-checkbox:before { +.tgico-recent:before { content: "\e958"; } -.tgico-checkboxblock:before { +.tgico-reply:before { content: "\e959"; } -.tgico-checks:before { - content: $tgico-checks; +.tgico-revote:before { + content: "\e95a"; } -.tgico-activesessions:before { +.tgico-savedmessages:before { content: "\e95b"; } -.tgico-add:before { +.tgico-search:before { content: "\e95c"; } -.tgico-addmember_filled:before { +.tgico-send:before { content: "\e95d"; } -.tgico-adduser:before { +.tgico-send2:before { content: "\e95e"; } -.tgico-admin:before { - content: "\e95f"; +.tgico-sending:before { + content: $tgico-sending; } -.tgico-animals:before { +.tgico-sendingerror:before { content: "\e960"; } -.tgico-archive:before { +.tgico-settings:before { content: "\e961"; } +.tgico-smallscreen:before { + content: "\e962"; +} +.tgico-smile:before { + content: "\e963"; +} +.tgico-sport:before { + content: "\e964"; +} +.tgico-stickers:before { + content: "\e965"; +} +.tgico-stop:before { + content: "\e966"; +} +.tgico-tip:before { + content: "\e967"; +} +.tgico-unarchive:before { + content: "\e968"; +} +.tgico-unlock:before { + content: "\e969"; +} +.tgico-unmute:before { + content: "\e96a"; +} +.tgico-unpin:before { + content: "\e96b"; +} +.tgico-unread:before { + content: "\e96c"; +} +.tgico-up:before { + content: "\e96d"; +} +.tgico-user:before { + content: "\e96e"; +} +.tgico-username:before { + content: "\e96f"; +} diff --git a/src/scss/partials/_ico.scss b/src/scss/partials/_ico.scss index f5528316..f729b540 100644 --- a/src/scss/partials/_ico.scss +++ b/src/scss/partials/_ico.scss @@ -2,7 +2,7 @@ $tgico-font-family: "tgico" !default; $tgico-font-path: "../../assets/fonts" !default; $tgico-check: "\e900"; -$tgico-checks: "\e95a"; -$tgico-sending: "\e919"; -$tgico-close: "\e943"; -$tgico-next: "\e920"; +$tgico-checks: "\e901"; +$tgico-sending: "\e95f"; +$tgico-close: "\e91b"; +$tgico-next: "\e94a";