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

Fix topbar overflow 

Topbar pinned & audio ripple
master
morethanwords 4 years ago
parent
1d9bd1f620
commit
3f3dcdb821
6 changed files with 136 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/chat/audio.ts
  2. 14
      src/components/chat/pinnedContainer.ts
  3. 2
      src/components/sidebarRight/index.ts
  4. 2
      src/components/sidebarRight/tabs/sharedMedia.ts
  5. 42
      src/lib/appManagers/appImManager.ts
  6. 170
      src/scss/partials/_chat.scss

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

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

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

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

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

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

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

@ -315,7 +315,7 @@ export default class AppSharedMediaTab implements SliderTab {
case 'inputMessagesFilterDocument': { case 'inputMessagesFilterDocument': {
for(let message of messages) { 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; continue;
} }

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

@ -28,7 +28,7 @@ import appSidebarLeft from "../../components/sidebarLeft";
import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight'; import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight';
import StickyIntersector from '../../components/stickyIntersector'; import StickyIntersector from '../../components/stickyIntersector';
import { wrapAlbum, wrapDocument, wrapPhoto, wrapPoll, wrapReply, wrapSticker, wrapVideo } from '../../components/wrappers'; 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 { isTouchSupported } from '../../helpers/touchSupport';
import { isAndroid, isApple, isSafari } from '../../helpers/userAgent'; import { isAndroid, isApple, isSafari } from '../../helpers/userAgent';
import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer'; import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer';
@ -178,8 +178,44 @@ export class AppImManager {
this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */); this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */);
const chatUtils = this.chatInfo.nextElementSibling;
this.chatAudio = new ChatAudio(); 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'), () => { this.pinnedMessageContainer = new PinnedContainer('message', new ReplyContainer('pinned-message'), () => {
if(appPeersManager.canPinMessage(this.peerID)) { if(appPeersManager.canPinMessage(this.peerID)) {
@ -2505,7 +2541,7 @@ export class AppImManager {
if(message.grouped_id) additionMsgIDs.splice(i, 1); if(message.grouped_id) additionMsgIDs.splice(i, 1);
} }
maxID = additionMsgIDs[additionMsgIDs.length - 1]; maxID = additionMsgIDs[additionMsgIDs.length - 1] || maxID;
} }
} }

170
src/scss/partials/_chat.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save