diff --git a/src/components/chat/replyContainer.ts b/src/components/chat/replyContainer.ts index 1affce57..7b21ecbe 100644 --- a/src/components/chat/replyContainer.ts +++ b/src/components/chat/replyContainer.ts @@ -1,7 +1,9 @@ +import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager"; import appPhotosManager from "../../lib/appManagers/appPhotosManager"; import { RichTextProcessor } from "../../lib/richtextprocessor"; import DivAndCaption from "../divAndCaption"; import { renderImageFromUrl } from "../misc"; +import { wrapSticker } from "../wrappers"; export default class ReplyContainer extends DivAndCaption<(title: string, subtitle: string, message?: any) => void> { private mediaEl: HTMLElement; @@ -29,25 +31,37 @@ export default class ReplyContainer extends DivAndCaption<(title: string, subtit //console.log('wrap reply', media); - if(media.photo || (media.document && ['video'].indexOf(media.document.type) !== -1)) { + if(media.photo || (media.document && ['video', 'sticker'].indexOf(media.document.type) !== -1)) { const replyMedia = document.createElement('div'); replyMedia.classList.add(this.className + '-media'); - const photo = media.photo || media.document; + if(media.document?.type == 'sticker') { + wrapSticker({ + doc: media.document, + div: replyMedia, + lazyLoadQueue: appImManager.lazyLoadQueue, + group: CHAT_ANIMATION_GROUP, + onlyThumb: media.document.sticker == 2, + width: 32, + height: 32 + }); + } else { + const photo = media.photo || media.document; - if(photo._ == 'document' || !photo.downloaded) { - const sizes = photo.sizes || photo.thumbs; - if(sizes && sizes[0].bytes) { - appPhotosManager.setAttachmentPreview(sizes[0].bytes, replyMedia, false, true); + if(photo._ == 'document' || !photo.downloaded) { + const sizes = photo.sizes || photo.thumbs; + if(sizes && sizes[0].bytes) { + appPhotosManager.setAttachmentPreview(sizes[0].bytes, replyMedia, false, true); + } } + + const size = appPhotosManager.choosePhotoSize(photo, 32, 32/* mediaSizes.active.regular.width, mediaSizes.active.regular.height */); + appPhotosManager.preloadPhoto(photo, size) + .then(() => { + renderImageFromUrl(replyMedia, photo._ == 'photo' ? photo.url : appPhotosManager.getDocumentCachedThumb(photo.id).url); + }); } - const size = appPhotosManager.choosePhotoSize(photo, 32, 32/* mediaSizes.active.regular.width, mediaSizes.active.regular.height */); - appPhotosManager.preloadPhoto(photo, size) - .then(() => { - renderImageFromUrl(replyMedia, photo._ == 'photo' ? photo.url : appPhotosManager.getDocumentCachedThumb(photo.id).url); - }); - this.content.prepend(this.mediaEl = replyMedia); this.container.classList.add('is-media'); } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 45a63ca4..eec1e5d3 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -59,7 +59,7 @@ const TEST_SCROLL = false; const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown'; -const ANIMATION_GROUP = 'chat'; +export const CHAT_ANIMATION_GROUP = 'chat'; export class AppImManager { public columnEl = document.getElementById('column-center') as HTMLDivElement; @@ -1185,7 +1185,7 @@ export class AppImManager { //console.timeEnd('appImManager setPeer pre promise'); - animationIntersector.lockGroup(ANIMATION_GROUP); + animationIntersector.lockGroup(CHAT_ANIMATION_GROUP); this.setPeerPromise = Promise.all([ promise.then(() => { ////this.log('setPeer removing preloader'); @@ -1204,8 +1204,8 @@ export class AppImManager { } this.scrollable.container.append(this.chatInner); - animationIntersector.unlockGroup(ANIMATION_GROUP); - animationIntersector.checkAnimations(false, ANIMATION_GROUP/* , true */); + animationIntersector.unlockGroup(CHAT_ANIMATION_GROUP); + animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP/* , true */); //this.scrollable.attachSentinels(); //this.scrollable.container.insertBefore(this.chatInner, this.scrollable.container.lastElementChild); @@ -1387,7 +1387,7 @@ export class AppImManager { //bubble.remove(); }); - animationIntersector.checkAnimations(false, ANIMATION_GROUP); + animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP); this.deleteEmptyDateGroups(); } @@ -1905,7 +1905,7 @@ export class AppImManager { isOut: isOut, lazyLoadQueue: this.lazyLoadQueue, middleware: null, - group: ANIMATION_GROUP + group: CHAT_ANIMATION_GROUP }); preloader.attach(attachmentDiv, false); @@ -2017,7 +2017,7 @@ export class AppImManager { lazyLoadQueue: this.lazyLoadQueue, middleware: this.getMiddleware(), isOut, - group: ANIMATION_GROUP + group: CHAT_ANIMATION_GROUP }); //} } else { @@ -2103,7 +2103,7 @@ export class AppImManager { div: attachmentDiv, middleware: this.getMiddleware(), lazyLoadQueue: this.lazyLoadQueue, - group: ANIMATION_GROUP, + group: CHAT_ANIMATION_GROUP, //play: !!message.pending || !multipleRender, play: true, loop: true, @@ -2139,7 +2139,7 @@ export class AppImManager { isOut: isOut, lazyLoadQueue: this.lazyLoadQueue, middleware: this.getMiddleware(), - group: ANIMATION_GROUP + group: CHAT_ANIMATION_GROUP }); } diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss new file mode 100644 index 00000000..30c1845d --- /dev/null +++ b/src/scss/partials/_button.scss @@ -0,0 +1,244 @@ +.btn-icon { + text-align: center; + font-size: 1.5rem; + line-height: 1.5rem; + border-radius: 50% !important; + transition: background-color .15s ease-in-out, opacity .15s ease-in-out; + color: $color-gray; + cursor: pointer; + background-color: transparent; + border: none; + padding: .5rem; + position: relative; + overflow: hidden; + + /* kostil */ + display: flex; + align-items: center; + justify-content: center; + + &.active { + color: $color-blue; + } + + html.no-touch &:hover { + background-color: var(--color-gray-hover); + } + + &:disabled { + color: #cacaca; + pointer-events: none !important; + opacity: .25; + } +} + +.btn-corner { + --translateY: calc(100% + 20px); + position: absolute !important; + bottom: 20px; + right: 20px; + //transition: .2s ease; + transition: var(--btn-corner-transition) !important; + transform: translate3d(0, var(--translateY), 0); + z-index: 3; + user-select: none; + + &.is-visible { + --translateY: 0; + } + + body.animation-level-0 & { + transition: none !important; + } +} + +.btn-menu { + visibility: hidden; + position: absolute; + background: #fff; + box-shadow: 0 5px 8px 1px rgba(0,0,0,.24); + z-index: 3; + top: 100%; + margin-top: 8px; + padding: 9px 0; + border-radius: $border-radius-medium; + opacity: 0; + transform: scale(.8); + transition-property: opacity,transform,visibility; + transition-duration: .2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + font-size: 16px; + + -webkit-user-select: none; /* disable selection/Copy of UIWebView */ + -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ + + &.active { + visibility: visible; + opacity: 1; + transform: scale(1); + } + + &.bottom-left { + right: 0; + top: 100%; + transform-origin: top right; + } + + &.bottom-right { + left: 0; + top: 100%; + transform-origin: top left; + } + + &.top-left { + top: initial; + right: 0; + bottom: 100%; + transform-origin: bottom right; + } + + &.top-right { + top: initial; + left: 0; + bottom: 100%; + transform-origin: bottom left; + } + + &-item { + display: flex; + position: relative; + padding: 0 40px 0 20px; + height: 56px; + cursor: pointer !important; + pointer-events: all !important; + background-position: 16px center; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #000; + text-transform: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + align-items: center; + + html.no-touch &:hover { + background-color: rgba(112, 117, 121, 0.06); + } + + &:before { + color: $color-gray; + font-size: 1.5rem; + margin-right: 32px; + } + + @include respond-to(handhelds) { + padding: 0 30px 0 16px; + height: 50px; + } + } +} + +.btn-primary { + background-color: $color-blue; + color: #fff; + border-radius: $border-radius-medium; + width: 100%; + text-align: center; + height: 54px; + border: none; + font-weight: 500; + cursor: pointer; + overflow: hidden; + position: relative; + padding: 0; // new + transition: .2s opacity; + + html.no-touch &:hover { + transition: .2s background-color, .2s opacity; + background: darken($color-blue, 8%); + } + + svg, use { + height: calc(100% - 20px); + right: 15px; + left: auto; + } + + &:disabled { + pointer-events: none !important; + opacity: .25; + } +} + +// ! example: multiselect input +.btn-transparent { + color: #000; + background-color: transparent; + display: flex; + align-items: center; + padding: 0 .875rem; + //width: auto; + + html.no-touch &:hover { + background-color: var(--color-gray-hover); + } + + // * tgico + &:before { + color: #707579; + font-size: 1.5rem; + margin-right: 1rem; + } +} + +.btn-primary.btn-circle { + .preloader-circular { + height: calc(100% - 20px); + right: auto; + left: auto; + margin: 0; + top: 10px; + + .preloader-path { + stroke: #fff; + } + } +} + +.btn-menu-toggle { + position: relative; + overflow: visible !important; + font-weight: normal !important; + cursor: pointer !important; + pointer-events: all !important; + + &:not(.btn-primary).menu-open { + background-color: var(--color-gray-hover); + } +} + +.btn-circle { + border-radius: 50%; + height: 54px; + width: 54px; + line-height: 54px; + + @include respond-to(handhelds) { + height: 46px; + width: 46px; + } + + path { + fill: white; + } +} + +.btn-disabled { + pointer-events: none !important; + cursor: default !important; + color: #707579 !important; + + &:before { + color: #707579 !important; + } +} \ No newline at end of file diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 234adf4c..3daa649c 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -792,6 +792,22 @@ $chat-helper-size: 39px; background-repeat: no-repeat; background-size: cover; background-position: center center; + + /* > img, > video { + + } */ + + // sticker + /* > img { + object-fit: contain !important; + max-width: 100%; + max-height: 100%; + } */ + > img { + object-fit: cover; + width: 100%; + height: 100%; + } } i { @@ -1216,6 +1232,7 @@ $chat-helper-size: 39px; //display: flex; // for end //flex-direction: unset; display: block; + //transform: none; /* display: flex; flex-direction: column; @@ -1385,9 +1402,8 @@ $chat-helper-size: 39px; bottom: 17.5px; cursor: default; opacity: 0; - user-select: none; z-index: 2; - transition: var(--btn-corner-transition), opacity .2s; + transition: var(--btn-corner-transition), opacity .2s !important; overflow: hidden; @include respond-to(handhelds) { @@ -1401,7 +1417,7 @@ $chat-helper-size: 39px; } @include respond-to(medium-screens) { - transition: transform var(--layer-transition), opacity .2s; + transition: transform var(--layer-transition), opacity .2s !important; body.is-right-column-shown & { transform: translate3d(calc(var(--right-column-width) * -.5), var(--translateY), 0); diff --git a/src/scss/style.scss b/src/scss/style.scss index 0c9a9050..b3034263 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -101,6 +101,7 @@ $messages-container-width: 728px; } @import "partials/ico"; +@import "partials/button"; @import "partials/checkbox"; @import "partials/chatlist"; @import "partials/chat"; @@ -300,152 +301,10 @@ input, textarea { line-height: 1.35; } -.btn-icon { - text-align: center; - font-size: 1.5rem; - line-height: 1.5rem; - border-radius: 50%; - transition: background-color .15s ease-in-out, opacity .15s ease-in-out; - color: $color-gray; - cursor: pointer; - background-color: transparent; - border: none; - padding: .5rem; - position: relative; - overflow: hidden; - - /* kostil */ - display: flex; - align-items: center; - justify-content: center; - - &.active { - color: $color-blue; - } - - html.no-touch &:hover { - background-color: var(--color-gray-hover); - } - - &:disabled { - pointer-events: none !important; - opacity: .25; - } -} - -.btn-icon:disabled { - color: #cacaca; -} - -.btn-corner { - --translateY: calc(100% + 20px); - position: absolute !important; - bottom: 20px; - right: 20px; - //transition: .2s ease; - transition: var(--btn-corner-transition) !important; - transform: translate3d(0, var(--translateY), 0); - z-index: 3; - - &.is-visible { - --translateY: 0; - } - - body.animation-level-0 & { - transition: none !important; - } -} - .danger, .danger:before { color: $color-error!important; } -.btn-menu { - visibility: hidden; - position: absolute; - background: #fff; - box-shadow: 0 5px 8px 1px rgba(0,0,0,.24); - z-index: 3; - top: 100%; - margin-top: 8px; - padding: 9px 0; - border-radius: $border-radius-medium; - opacity: 0; - transform: scale(.8); - transition-property: opacity,transform,visibility; - transition-duration: .2s; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - font-size: 16px; - - -webkit-user-select: none; /* disable selection/Copy of UIWebView */ - -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ - - &.active { - visibility: visible; - opacity: 1; - transform: scale(1); - } - - &.bottom-left { - right: 0; - top: 100%; - transform-origin: top right; - } - - &.bottom-right { - left: 0; - top: 100%; - transform-origin: top left; - } - - &.top-left { - top: initial; - right: 0; - bottom: 100%; - transform-origin: bottom right; - } - - &.top-right { - top: initial; - left: 0; - bottom: 100%; - transform-origin: bottom left; - } - - &-item { - display: flex; - position: relative; - padding: 0 40px 0 20px; - height: 56px; - cursor: pointer !important; - pointer-events: all !important; - background-position: 16px center; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #000; - text-transform: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - align-items: center; - - html.no-touch &:hover { - background-color: rgba(112, 117, 121, 0.06); - } - - &:before { - color: $color-gray; - font-size: 1.5rem; - margin-right: 32px; - } - - @include respond-to(handhelds) { - padding: 0 30px 0 16px; - height: 50px; - } - } -} - #bubble-contextmenu, #dialogs-contextmenu { position: fixed; right: auto; @@ -827,85 +686,6 @@ input:focus, button:focus { } } -.btn-primary { - background-color: $color-blue; - color: #fff; - border-radius: $border-radius-medium; - width: 100%; - text-align: center; - height: 54px; - border: none; - font-weight: 500; - cursor: pointer; - overflow: hidden; - position: relative; - padding: 0; // new - transition: .2s opacity; - - html.no-touch &:hover { - transition: .2s background-color, .2s opacity; - background: darken($color-blue, 8%); - } - - svg, use { - height: calc(100% - 20px); - right: 15px; - left: auto; - } - - &:disabled { - pointer-events: none !important; - opacity: .25; - } -} - -// ! example: multiselect input -.btn-transparent { - color: #000; - background-color: transparent; - display: flex; - align-items: center; - padding: 0 .875rem; - //width: auto; - - html.no-touch &:hover { - background-color: var(--color-gray-hover); - } - - // * tgico - &:before { - color: #707579; - font-size: 1.5rem; - margin-right: 1rem; - } -} - -.btn-primary.btn-circle { - .preloader-circular { - height: calc(100% - 20px); - right: auto; - left: auto; - margin: 0; - top: 10px; - - .preloader-path { - stroke: #fff; - } - } -} - -.btn-menu-toggle { - position: relative; - overflow: visible !important; - font-weight: normal !important; - cursor: pointer !important; - pointer-events: all !important; - - &:not(.btn-primary).menu-open { - background-color: var(--color-gray-hover); - } -} - span.emoji { display: inline !important; vertical-align: unset !important; @@ -928,22 +708,6 @@ img.emoji { vertical-align: middle; } -.btn-circle { - border-radius: 50%; - height: 54px; - width: 54px; - line-height: 54px; - - @include respond-to(handhelds) { - height: 46px; - width: 46px; - } - - path { - fill: white; - } -} - .overlay::selection { background: transparent; } @@ -1084,16 +848,6 @@ img.emoji { // } // } -.btn-disabled { - pointer-events: none !important; - cursor: default !important; - color: #707579 !important; - - &:before { - color: #707579 !important; - } -} - .content-empty { color: #707579; }