From ebda2180966e288df70e310effcc855adcf096e2 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sat, 31 Oct 2020 20:45:49 +0200 Subject: [PATCH] Media viewer new caption (not so good) --- src/components/appMediaViewer.ts | 27 ++++++++++++----- src/components/swipeHandler.ts | 5 ++-- src/lib/appManagers/appImManager.ts | 6 ++-- src/scss/partials/_chatBubble.scss | 8 +++-- src/scss/partials/_mediaViewer.scss | 46 ++++++++++++++++++++++++----- 5 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index e0e25af6..890bf4a6 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -22,6 +22,7 @@ import { LazyLoadQueueBase } from "./lazyLoadQueue"; import { renderImageFromUrl } from "./misc"; import PopupForward from "./popupForward"; import ProgressivePreloader from "./preloader"; +import Scrollable from "./scrollable"; import appSidebarRight, { AppSidebarRight } from "./sidebarRight"; import SwipeHandler from "./swipeHandler"; @@ -206,6 +207,13 @@ class AppMediaViewerBase { + // * Fix for seek input + if((evt.target as HTMLElement).tagName == 'INPUT' || findUpClassName(evt.target, 'media-viewer-caption')) { + return false; + } + + return true; }); } } @@ -274,7 +282,7 @@ class AppMediaViewerBase { + ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author', 'media-viewer-caption'].find(s => { try { mover = findUpClassName(target, s); if(mover) return true; @@ -1093,13 +1101,17 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet constructor(private inputFilter: 'inputMessagesFilterPhotoVideo' | 'inputMessagesFilterChatPhotos' = 'inputMessagesFilterPhotoVideo') { super(['delete', 'forward']); - const stub = document.createElement('div'); + /* const stub = document.createElement('div'); stub.classList.add(MEDIA_VIEWER_CLASSNAME + '-stub'); - this.content.main.prepend(stub); + this.content.main.prepend(stub); */ this.content.caption = document.createElement('div'); - this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'); - this.content.main.append(this.content.caption); + this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */); + + new Scrollable(this.content.caption); + + //this.content.main.append(this.content.caption); + this.wholeDiv.append(this.content.caption); this.setBtnMenuToggle([{ icon: 'forward', @@ -1274,12 +1286,13 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet private setCaption(message: any) { const caption = message.message; + this.content.caption.classList.toggle('hide', !caption); if(caption) { - this.content.caption.innerHTML = RichTextProcessor.wrapRichText(caption, { + this.content.caption.firstElementChild.innerHTML = RichTextProcessor.wrapRichText(caption, { entities: message.totalEntities }); } else { - this.content.caption.innerHTML = ''; + this.content.caption.firstElementChild.innerHTML = ''; } } diff --git a/src/components/swipeHandler.ts b/src/components/swipeHandler.ts index 3e4336ff..ed748776 100644 --- a/src/components/swipeHandler.ts +++ b/src/components/swipeHandler.ts @@ -2,14 +2,13 @@ export default class SwipeHandler { private xDown: number; private yDown: number; - constructor(element: HTMLElement, private onSwipe: (xDiff: number, yDiff: number) => boolean) { + constructor(element: HTMLElement, private onSwipe: (xDiff: number, yDiff: number) => boolean, private verifyTouchTarget?: (evt: TouchEvent) => boolean) { element.addEventListener('touchstart', this.handleTouchStart, false); element.addEventListener('touchmove', this.handleTouchMove, false); } handleTouchStart = (evt: TouchEvent) => { - // * Fix for seek input - if((evt.target as HTMLElement).tagName == 'INPUT') { + if(this.verifyTouchTarget && !this.verifyTouchTarget(evt)) { this.xDown = this.yDown = null; return; } diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 6005e1f5..031be920 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -624,7 +624,7 @@ export class AppImManager { } else if(target.classList.contains('name')) { let peerID = +target.dataset.peerID; - if(!isNaN(peerID)) { + if(peerID) { this.setPeer(peerID); } @@ -632,7 +632,7 @@ export class AppImManager { } else if(target.tagName == "AVATAR-ELEMENT") { let peerID = +target.getAttribute('peer'); - if(!isNaN(peerID)) { + if(peerID) { this.setPeer(peerID); } @@ -652,7 +652,7 @@ export class AppImManager { } else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") { let peerID = +target.parentElement.getAttribute('peer'); - if(!isNaN(peerID)) { + if(peerID) { this.setPeer(peerID); } } diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index e9a19315..c17d6ec4 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -259,13 +259,13 @@ $bubble-margin: .25rem; cursor: pointer; #bubbles.is-selecting & { - transform: scale(1); + transform: scale3d(1, 1, 1); transform-origin: bottom; transition: transform var(--layer-transition); } #bubbles.is-selecting:not(.backwards) & { - transform: scale(.76); + transform: scale3d(.76, .76, 1); } // @include respond-to(handhelds) { @@ -328,6 +328,10 @@ $bubble-margin: .25rem; &.is-group-last { padding-bottom: $bubble-margin; + .bubble-select-checkbox { + bottom: 8px; + } + #bubbles-inner.is-chat &.is-in { .bubble-select-checkbox { bottom: 7px; diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index d379d88f..e5bf5339 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -89,9 +89,10 @@ $move-duration: .35s; overflow: hidden; } - &-stub { + /* &-stub { flex: 1; - } + min-height: 50px; + } */ &-container { align-self: center; @@ -109,17 +110,46 @@ $move-duration: .35s; } &-caption { - flex: 1; + position: absolute; text-align: center; - color: $color-gray; - transition: $open-duration; - max-width: 50vw; + color: #fff; + //color: #707579; word-break: break-word; overflow: hidden; text-overflow: ellipsis; + z-index: 5; + bottom: 3rem; + left: 50%; + transform: translateX(-50%); + padding: 0 .5rem; + background-color: rgba(0, 0, 0, .6); + border-radius: 8px; + opacity: 0; + transition: opacity $open-duration; - html.no-touch &:hover { - color: #fff; + @include respond-to(handhelds) { + border-radius: 0; + width: 100%; + } + + > .scrollable { + padding: .5rem 0; + max-height: 10rem; + max-width: 1280px; + position: relative; + } + + .media-viewer-whole.active & { + opacity: 1; + + html.no-touch & { + opacity: .2; + + &:hover { + opacity: 1; + //color: #fff; + } + } } }