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

Fix topbar overflow

Browse Source 
Topbar pinned & audio ripple
This commit is contained in:
morethanwords 2020-10-31 17:58:13 +02:00
parent 1d9bd1f620
commit 3f3dcdb821
6 changed files with 137 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/chat/audio.ts
View File

@ -23,14 +23,14 @@ export class ChatAudio extends PinnedContainer {
this.divAndCaption.border.remove();
this.toggleEl = document.createElement('div');
this.toggleEl.classList.add('pinned-audio-ico', 'tgico');
this.toggleEl = document.createElement('button');
this.toggleEl.classList.add('pinned-audio-ico', 'tgico', 'btn-icon');
this.toggleEl.addEventListener('click', (e) => {
cancelEvent(e);
appMediaPlaybackController.toggle();
});
this.divAndCaption.container.prepend(this.toggleEl);
this.wrapper.prepend(this.toggleEl);
$rootScope.$on('audio_play', (e) => {
const {doc, mid} = e.detail;

14
src/components/chat/pinnedContainer.ts
View File

@ -2,6 +2,7 @@ import mediaSizes from "../../helpers/mediaSizes";
import appImManager from "../../lib/appManagers/appImManager";
import { cancelEvent } from "../../lib/utils";
import DivAndCaption from "../divAndCaption";
import { ripple } from "../ripple";
const classNames: string[] = [];
const CLASSNAME_BASE = 'pinned-container';
@ -9,6 +10,7 @@ const HEIGHT = 52;
export default class PinnedContainer {
private close: HTMLElement;
protected wrapper: HTMLElement;
constructor(protected className: string, public divAndCaption: DivAndCaption<(title: string, subtitle: string, message?: any) => void>, onClose?: () => void | Promise<boolean>) {
/* const prev = this.divAndCaption.fill;
@ -22,11 +24,19 @@ export default class PinnedContainer {
divAndCaption.container.classList.add(CLASSNAME_BASE, 'hide');
divAndCaption.title.classList.add(CLASSNAME_BASE + '-title');
divAndCaption.subtitle.classList.add(CLASSNAME_BASE + '-subtitle');
divAndCaption.content.classList.add(CLASSNAME_BASE + '-content');
this.close = document.createElement('button');
this.close.classList.add(CLASSNAME_BASE + '-close', `pinned-${className}-close`, 'btn-icon', 'tgico-close');
divAndCaption.container.append(this.close);
//divAndCaption.container.prepend(this.close);
this.wrapper = document.createElement('div');
this.wrapper.classList.add(CLASSNAME_BASE + '-wrapper');
this.wrapper.append(...Array.from(divAndCaption.container.children));
ripple(this.wrapper);
divAndCaption.container.append(this.close, this.wrapper);
this.close.addEventListener('click', (e) => {
cancelEvent(e);
@ -47,6 +57,8 @@ export default class PinnedContainer {
return;
}
this.divAndCaption.container.classList.toggle('is-floating', mediaSizes.isMobile);
const scrollTop = mediaSizes.isMobile /* && !appImManager.scrollable.isScrolledDown */ ? appImManager.scrollable.scrollTop : undefined;
this.divAndCaption.container.classList.toggle('hide', hide);
const className = `is-pinned-${this.className}-shown`;

2
src/components/sidebarRight/index.ts
View File

@ -55,7 +55,7 @@ export class AppSidebarRight extends SidebarSlider {
this.gifsTab = gifsTab;
mediaSizes.addListener('changeScreen', (from, to) => {
if(from !== undefined && to == ScreenSize.medium && from !== ScreenSize.mobile) {
if(to == ScreenSize.medium && from !== ScreenSize.mobile) {
this.toggleSidebar(false);
}
});

2
src/components/sidebarRight/tabs/sharedMedia.ts
View File

@ -315,7 +315,7 @@ export default class AppSharedMediaTab implements SliderTab {
case 'inputMessagesFilterDocument': {
for(let message of messages) {
if(!message.media.document || ['voice', 'audio', 'gif', 'sticker'].includes(message.media.document.type)) {
if(!message.media.document || ['voice', 'audio', 'gif', 'sticker', 'round'].includes(message.media.document.type)) {
continue;
}

42
src/lib/appManagers/appImManager.ts
View File

@ -28,7 +28,7 @@ import appSidebarLeft from "../../components/sidebarLeft";
import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight';
import StickyIntersector from '../../components/stickyIntersector';
import { wrapAlbum, wrapDocument, wrapPhoto, wrapPoll, wrapReply, wrapSticker, wrapVideo } from '../../components/wrappers';
import mediaSizes from '../../helpers/mediaSizes';
import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes';
import { isTouchSupported } from '../../helpers/touchSupport';
import { isAndroid, isApple, isSafari } from '../../helpers/userAgent';
import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer';
@ -178,8 +178,44 @@ export class AppImManager {
this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */);
const chatUtils = this.chatInfo.nextElementSibling;
this.chatAudio = new ChatAudio();
this.chatInfo.nextElementSibling.prepend(this.chatAudio.divAndCaption.container);
chatUtils.prepend(this.chatAudio.divAndCaption.container);
// * fix topbar overflow section
const setUtilsWidth = () => {
this.log('utils width:', chatUtils.scrollWidth);
this.chatInfo.style.setProperty('--utils-width', chatUtils.scrollWidth + 'px');
};
let mutationRAF: number;
const mutationObserver = new MutationObserver((mutationList) => {
if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
//mutationRAF = window.setTimeout(() => {
mutationRAF = window.requestAnimationFrame(() => {
//mutationRAF = window.requestAnimationFrame(() => {
setUtilsWidth();
//});
});
//}, 64);
});
mutationObserver.observe(chatUtils, {
attributes: true,
childList: true,
subtree: true
});
mediaSizes.addListener('changeScreen', (from, to) => {
setUtilsWidth();
this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile);
this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile
/* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
});
// * fix topbar overflow section end
this.pinnedMessageContainer = new PinnedContainer('message', new ReplyContainer('pinned-message'), () => {
if(appPeersManager.canPinMessage(this.peerID)) {
@ -2505,7 +2541,7 @@ export class AppImManager {
if(message.grouped_id) additionMsgIDs.splice(i, 1);
}
maxID = additionMsgIDs[additionMsgIDs.length - 1];
maxID = additionMsgIDs[additionMsgIDs.length - 1] || maxID;
}
}

174
src/scss/partials/_chat.scss
View File

@ -101,27 +101,11 @@ $chat-helper-size: 39px;
flex: 1 1 auto;
overflow: hidden;
max-width: calc(100% - var(--utils-width));
@include respond-to(medium-screens) {
body.is-right-column-shown & {
max-width: calc(100% - var(--right-column-width) * 1.6);
}
}
}
@include respond-to(medium-screens) {
&.is-pinned-message-shown {
body.is-right-column-shown & {
.chat-info {
max-width: calc(100% - var(--right-column-width) * 1.75);
}
}
&.is-pinned-audio-shown {
body.is-right-column-shown & {
.chat-info {
max-width: calc(100% - var(--right-column-width) * 2.25);
}
}
max-width: calc(100% - var(--right-column-width) - var(--utils-width));
}
}
}
@ -162,10 +146,6 @@ $chat-helper-size: 39px;
padding-left: 10px;
max-width: 100%;
overflow: hidden;
@include respond-to(handhelds) {
max-width: 208px;
}
}
.person {
@ -609,10 +589,7 @@ $chat-helper-size: 39px;
cursor: pointer;
font-size: 18px;
line-height: 24px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 1.5rem);
overflow: hidden;
/* @include respond-to(handhelds) {
text-overflow: ellipsis;
@ -625,7 +602,13 @@ $chat-helper-size: 39px;
}
}
.info#im-subtitle {
#im-title, #im-subtitle {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#im-subtitle {
margin-top: -2px;
}
@ -696,31 +679,6 @@ $chat-helper-size: 39px;
}
}
@include respond-to(handhelds) {
.pinned-message {
position: absolute !important;
top: 100%;
width: 100% !important;
background: #fff !important;
left: 0;
// border-top: 1px solid #ccc;
max-height: 100% !important;
// height: 100%;
height: 52px;
padding: 1rem;
&-subtitle {
max-width: 280px;
}
}
/* .pinned-message, .reply {
&-subtitle {
line-height: 16px !important;
}
} */
}
.pinned-message, .reply {
cursor: pointer;
display: flex;
@ -728,10 +686,10 @@ $chat-helper-size: 39px;
align-items: center;
overflow: hidden;
box-sizing: border-box;
width: 187px;
margin-right: 1rem;
max-height: 35px;
position: relative;
user-select: none;
/* padding: .25rem; */
&.is-media {
@ -744,10 +702,6 @@ $chat-helper-size: 39px;
}
}
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
&-border {
height: 2rem;
border-radius: 1px;
@ -837,12 +791,9 @@ $chat-helper-size: 39px;
} */
}
.pinned-message {
display: none;
&-close {
visibility: visible !important;
left: -3rem;
.reply {
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
}
@ -850,6 +801,28 @@ $chat-helper-size: 39px;
flex: 0 0 auto;
overflow: visible;
&.is-floating {
position: absolute !important;
top: 100%;
width: 100% !important;
background: #fff !important;
left: 0;
max-height: 100% !important;
height: 52px;
.pinned-container-close {
position: absolute;
font-size: 1.4rem;
right: 9px;
display: flex;
}
.pinned-container-wrapper {
padding: 0 1rem;
height: 100%;
}
}
@include respond-to(handhelds) {
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
@ -865,27 +838,53 @@ $chat-helper-size: 39px;
}
}
&-content {
width: 100%;
overflow: hidden;
}
&-close, .pinned-audio-ico {
font-size: 1.5rem;
position: absolute;
display: flex;
justify-content: center;
right: 0;
z-index: 1;
flex: 0 0 auto;
}
&-close {
visibility: hidden;
//left: -3rem;
display: none;
}
@include respond-to(handhelds) {
font-size: 1.4rem;
right: 9px;
left: auto;
visibility: visible;
&-wrapper {
display: flex;
flex: 1 1 auto;
overflow: hidden;
align-items: center;
padding: .25rem;
border-radius: 4px;
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
}
}
.pinned-message {
display: none;
width: auto;
&:not(.is-floating) {
.pinned-message-close {
display: flex;
margin-right: .75rem;
}
}
&.is-floating .pinned-message-subtitle {
max-width: 280px;
}
}
.pinned-audio {
display: flex;
flex-direction: column;
@ -893,32 +892,19 @@ $chat-helper-size: 39px;
cursor: pointer;
//width: 210px;
@include respond-to(handhelds) {
height: 52px;
padding-left: 58px;
background: #fff;
width: 100%;
position: absolute;
left: 0;
top: 100%;
}
@include respond-to(not-handhelds) {
padding-left: 2.5rem;
padding-right: 2.5rem;
&:not(.is-floating) {
padding-right: 1.75rem;
max-width: 210px;
position: relative;
}
&-ico {
left: 0;
right: auto !important;
color: #50a2e9;
@include respond-to(handhelds) {
margin-left: 20px;
}
&.is-floating .pinned-audio-ico {
margin-left: -.25rem;
}
&-ico {
color: #50a2e9;
margin-right: .375rem;
&:before {
content: $tgico-largeplay;