diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index c3d0f33f..9790b37b 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -95,7 +95,7 @@ class AppMediaViewerBase { const message = appMessagesManager.getMessage(msgId); - const {dialog, dom} = appDialogsManager.addDialog(message.peerId, this.scrollable/* searchGroup.list */, false); + const {dialog, dom} = appDialogsManager.addDialogNew({ + dialog: message.peerId, + container: this.scrollable/* searchGroup.list */, + drawStatus: false, + avatarSize: 48 + }); appDialogsManager.setLastMessage(dialog, message, dom, query); }); diff --git a/src/components/appSelectPeers.ts b/src/components/appSelectPeers.ts index 066cbfd6..28a75049 100644 --- a/src/components/appSelectPeers.ts +++ b/src/components/appSelectPeers.ts @@ -316,7 +316,13 @@ export default class AppSelectPeers { } peerIds.forEach(peerId => { - const {dom} = appDialogsManager.addDialog(peerId, this.scrollable, false, false); + const {dom} = appDialogsManager.addDialogNew({ + dialog: peerId, + container: this.scrollable, + drawStatus: false, + rippleEnabled: false, + avatarSize: 48 + }); if(this.multiSelect) { const selected = this.selected.has(peerId); @@ -355,6 +361,7 @@ export default class AppSelectPeers { const avatarEl = document.createElement('avatar-element'); avatarEl.classList.add('selector-user-avatar', 'tgico'); avatarEl.setAttribute('dialog', '1'); + avatarEl.classList.add('avatar-32'); div.dataset.key = '' + peerId; if(typeof(peerId) === 'number') { diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts index 21c6a81d..bf519232 100644 --- a/src/components/chat/markupTooltip.ts +++ b/src/components/chat/markupTooltip.ts @@ -130,6 +130,10 @@ export default class MarkupTooltip { this.wrapper.append(tools1, tools2); this.container.append(this.wrapper); document.body.append(this.container); + + window.addEventListener('resize', () => { + this.hide(); + }); } private applyLink(e: Event) { diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index e39a8562..0bd3fbf2 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -144,6 +144,7 @@ export default class ChatTopbar { this.avatarElement = new AvatarElement(); this.avatarElement.setAttribute('dialog', '1'); this.avatarElement.setAttribute('clickable', ''); + this.avatarElement.classList.add('avatar-40'); this.subtitle = document.createElement('div'); this.subtitle.classList.add('info'); diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index d998a3c7..44372566 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -217,7 +217,13 @@ export class AppSidebarLeft extends SidebarSlider { //console.log('got top categories:', categories); if(peers.length) { peers.forEach((peerId) => { - appDialogsManager.addDialog(peerId, this.searchGroups.people.list, false, true, true); + appDialogsManager.addDialogNew({ + dialog: peerId, + container: this.searchGroups.people.list, + drawStatus: false, + onlyFirstName: true, + avatarSize: 54 + }); }); } @@ -347,7 +353,13 @@ export class AppSidebarLeft extends SidebarSlider { this.recentSearchClearBtn.style.display = this.recentSearch.length ? '' : 'none'; this.recentSearch.slice(0, 20).forEach(peerId => { - let {dialog, dom} = appDialogsManager.addDialog(peerId, this.searchGroups.recent.list, false, true, false, true); + let {dialog, dom} = appDialogsManager.addDialogNew({ + dialog: peerId, + container: this.searchGroups.recent.list, + drawStatus: false, + meAsSaved: true, + avatarSize: 48 + }); dom.lastMessageSpan.innerText = peerId > 0 ? appUsersManager.getUserStatusString(peerId) : appChatsManager.getChatMembersString(peerId); }); diff --git a/src/components/sidebarLeft/tabs/contacts.ts b/src/components/sidebarLeft/tabs/contacts.ts index 5ecc1f36..2f79c37f 100644 --- a/src/components/sidebarLeft/tabs/contacts.ts +++ b/src/components/sidebarLeft/tabs/contacts.ts @@ -90,7 +90,12 @@ export default class AppContactsTab implements SliderTab { let arr = sorted.splice(0, pageCount); // надо splice! arr.forEach(({user}) => { - let {dialog, dom} = appDialogsManager.addDialog(user.id, this.list, false); + let {dialog, dom} = appDialogsManager.addDialogNew({ + dialog: user.id, + container: this.list, + drawStatus: false, + avatarSize: 48 + }); let status = appUsersManager.getUserStatusString(user.id); dom.lastMessageSpan.innerHTML = status == 'online' ? `${status}` : status; diff --git a/src/components/sidebarLeft/tabs/editFolder.ts b/src/components/sidebarLeft/tabs/editFolder.ts index 46f2776e..0c93067e 100644 --- a/src/components/sidebarLeft/tabs/editFolder.ts +++ b/src/components/sidebarLeft/tabs/editFolder.ts @@ -189,7 +189,14 @@ export default class AppEditFolderTab implements SliderTab { for(let i = 0, length = Math.min(peers.length, _length); i < length; ++i) { const peerId = peers.shift(); - const {dom} = appDialogsManager.addDialog(peerId, ul, false, false, undefined, true); + const {dom} = appDialogsManager.addDialogNew({ + dialog: peerId, + container: ul, + drawStatus: false, + rippleEnabled: false, + meAsSaved: true, + avatarSize: 32 + }); dom.lastMessageSpan.parentElement.remove(); } diff --git a/src/components/sidebarLeft/tabs/includedChats.ts b/src/components/sidebarLeft/tabs/includedChats.ts index 88275169..fb288a7b 100644 --- a/src/components/sidebarLeft/tabs/includedChats.ts +++ b/src/components/sidebarLeft/tabs/includedChats.ts @@ -101,7 +101,13 @@ export default class AppIncludedChatsTab implements SliderTab { peerIds.forEach(peerId => { //if(other.includes(peerId)) return; - const {dom} = appDialogsManager.addDialog(peerId, this.selector.scrollable, false, false); + const {dom} = appDialogsManager.addDialogNew({ + dialog: peerId, + container: this.selector.scrollable, + drawStatus: false, + rippleEnabled: false, + avatarSize: 46 + }); const selected = this.selector.selected.has(peerId); dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected)); diff --git a/src/components/sidebarLeft/tabs/newGroup.ts b/src/components/sidebarLeft/tabs/newGroup.ts index cd46ac20..83339d7b 100644 --- a/src/components/sidebarLeft/tabs/newGroup.ts +++ b/src/components/sidebarLeft/tabs/newGroup.ts @@ -75,7 +75,13 @@ export default class AppNewGroupTab implements SliderTab { appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newGroup); this.userIds.forEach(userId => { - let {dom} = appDialogsManager.addDialog(userId, this.searchGroup.list, false, false); + let {dom} = appDialogsManager.addDialogNew({ + dialog: userId, + container: this.searchGroup.list, + drawStatus: false, + rippleEnabled: false, + avatarSize: 48 + }); let subtitle = ''; subtitle = appUsersManager.getUserStatusString(userId); diff --git a/src/components/sidebarRight/tabs/pollResults.ts b/src/components/sidebarRight/tabs/pollResults.ts index 93b4dcc0..9c04b9fc 100644 --- a/src/components/sidebarRight/tabs/pollResults.ts +++ b/src/components/sidebarRight/tabs/pollResults.ts @@ -88,7 +88,14 @@ export default class AppPollResultsTab implements SliderTab { appPollsManager.getVotes(mid, answer.option, offset, limit).then(votesList => { votesList.votes.forEach(vote => { - const {dom} = appDialogsManager.addDialog(vote.user_id, list, false, false, undefined, false); + const {dom} = appDialogsManager.addDialogNew({ + dialog: vote.user_id, + container: list, + drawStatus: false, + rippleEnabled: false, + meAsSaved: false, + avatarSize: 32 + }); dom.lastMessageSpan.parentElement.remove(); }); diff --git a/src/index.hbs b/src/index.hbs index 30c27e95..21e94a06 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -5,7 +5,7 @@ Telegram Web - + @@ -262,7 +262,7 @@
- +
@@ -385,7 +385,7 @@
- +
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 173b0b95..83bcd8e3 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -1108,12 +1108,13 @@ export class AppDialogsManager { rippleEnabled?: boolean, onlyFirstName?: boolean, meAsSaved?: boolean, - append?: boolean + append?: boolean, + avatarSize?: number }) { - return this.addDialog(options.dialog, options.container, options.drawStatus, options.rippleEnabled, options.onlyFirstName, options.meAsSaved, options.append); + return this.addDialog(options.dialog, options.container, options.drawStatus, options.rippleEnabled, options.onlyFirstName, options.meAsSaved, options.append, options.avatarSize); } - public addDialog(_dialog: Dialog | number, container?: HTMLUListElement | Scrollable, drawStatus = true, rippleEnabled = true, onlyFirstName = false, meAsSaved = true, append = true) { + public addDialog(_dialog: Dialog | number, container?: HTMLUListElement | Scrollable, drawStatus = true, rippleEnabled = true, onlyFirstName = false, meAsSaved = true, append = true, avatarSize = 54) { let dialog: Dialog; if(typeof(_dialog) === 'number') { @@ -1147,7 +1148,7 @@ export class AppDialogsManager { const avatarEl = new AvatarElement(); avatarEl.setAttribute('dialog', meAsSaved ? '1' : '0'); avatarEl.setAttribute('peer', '' + peerId); - avatarEl.classList.add('dialog-avatar'); + avatarEl.classList.add('dialog-avatar', 'avatar-' + avatarSize); if(drawStatus && peerId != rootScope.myId && dialog.peer) { const peer = dialog.peer; diff --git a/src/scss/partials/_avatar.scss b/src/scss/partials/_avatar.scss index a8b3a47d..b9530f03 100644 --- a/src/scss/partials/_avatar.scss +++ b/src/scss/partials/_avatar.scss @@ -1,19 +1,25 @@ avatar-element { + --size: 54px; + --multiplier: 1; color: #fff; - width: 54px; - height: 54px; - line-height: 54px; + width: var(--size); + height: var(--size); + line-height: var(--size); border-radius: 50%; background-color: $color-blue; text-align: center; - font-size: 1.25em; + font-size: calc(1.25rem / var(--multiplier)); /* overflow: hidden; */ position: relative; user-select: none; text-transform: uppercase; - - @include respond-to(handhelds) { - font-size: 14px; + + &.tgico-savedmessages:before { + font-size: calc(26px / var(--multiplier)); + } + + &.tgico-avatar_deletedaccount:before { + font-size: calc(56px / var(--multiplier)); } /* kostil */ @@ -32,11 +38,6 @@ avatar-element { } } - &[class*=" tgico-"] { - line-height: 52px; - font-size: 28px; - } - path { fill: white; } @@ -54,11 +55,51 @@ avatar-element { height: 14px; } - &.tgico-avatar_deletedaccount { - font-size: 3rem; - } - &[clickable] { cursor: pointer; } + + /* &.avatar-54 { + width: 54px; + height: 54px; + line-height: 54px; + font-size: 1.25rem; + + &.tgico-savedmessages:before { + font-size: 26px; + } + + &.tgico-avatar_deletedaccount:before { + font-size: 56px; + } + } */ + &.avatar-120 { + --size: 120px; + --multiplier: 0.45; + } + + &.avatar-48 { + --size: 48px; + --multiplier: 1.125; + } + + &.avatar-46 { + --size: 46px; + --multiplier: 1.173913; + } + + &.avatar-44 { + --size: 44px; + --multiplier: 1.227272; + } + + &.avatar-40 { + --size: 40px; + --multiplier: 1.35; + } + + &.avatar-32 { + --size: 32px; + --multiplier: 1.6875; + } } \ No newline at end of file diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index faa99f75..4836d243 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1302,6 +1302,7 @@ $bubble-margin: .25rem; pointer-events: none; // do not show title display: inline-flex; z-index: 1; + cursor: default; /* display: inline-flex; align-items: center; */ @@ -1473,7 +1474,7 @@ $bubble-margin: .25rem; } audio-element, poll-element { - white-space: nowrap; // * fix due to .message white-space prewrap + white-space: normal; // * fix due to .message white-space prewrap } } @@ -1744,7 +1745,7 @@ $bubble-margin: .25rem; .time { padding-right: 4px; - margin-left: -4px; + margin-left: -3px; .inner { color: $darkgreen; diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index e9991f6e..f9dad046 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -202,23 +202,6 @@ } } - avatar-element { - width: 40px; - height: 40px; - line-height: 40px; - //font-size: 16px; - font-size: 16px; - flex: 0 0 auto; - - &:before { - font-size: 20px; - } - - &.tgico-avatar_deletedaccount:before { - font-size: 40px; - } - } - &.hide-pinned + .bubbles { .bubbles-inner { margin-bottom: .25rem; diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index 5bb37486..5ff961f6 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -327,11 +327,6 @@ // use together like class="chatlist-container contacts-container" .contacts-container, .search-group-contacts { - .dialog-avatar { - width: 48px; - height: 48px; - } - li { //margin-bottom: 2px; padding-bottom: 4px; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 5bd0b05a..f7b07694 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -211,11 +211,6 @@ max-width: 77px; } } - - .dialog-avatar { - width: 54px; - height: 54px; - } .dialog-title-details { display: none; @@ -610,12 +605,6 @@ } } - avatar-element { - height: 2rem; - width: 2rem; - font-size: .875rem; - } - .user-caption { padding: 6px 28px; } @@ -695,11 +684,6 @@ } } - .dialog-avatar { - width: 2.875rem; - height: 2.875rem; - } - .user-caption { padding: 0px 0px 0 14px; margin-top: -2px; @@ -792,8 +776,8 @@ } .dialog-avatar { - width: 46px; - height: 46px; + --size: 46px; + --multiplier: 1.173913; } li > .rp { diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 87ea4b5a..d5a22f1f 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -37,8 +37,6 @@ $move-duration: .35s; } &-userpic { - width: 2.75rem; - height: 2.75rem; position: absolute; top: .5rem; left: 1.25rem; diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index df6f5378..0c5a30a6 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -221,10 +221,7 @@ } &-avatar { - width: 120px; - height: 120px; margin: 1px auto 10px; - font-size: 2.5rem !important; //flex: 0 0 auto; @include respond-to(handhelds) { @@ -232,10 +229,6 @@ width: 100px; height: 100px; } - - &.tgico-avatar_deletedaccount { - font-size: 6rem !important; - } } &-name, &-subtitle, &-row, &-avatar { @@ -691,11 +684,6 @@ margin-top: 7px; } - avatar-element { - width: 32px; - height: 32px; - } - .user-caption { padding: 6px 28px; } diff --git a/src/scss/partials/_selector.scss b/src/scss/partials/_selector.scss index 714edb27..12f6815c 100644 --- a/src/scss/partials/_selector.scss +++ b/src/scss/partials/_selector.scss @@ -82,12 +82,9 @@ } &-avatar { - height: 32px !important; - width: 32px !important; float: left; margin-right: 8px; overflow: hidden; - font-size: 14px; html.is-safari & { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow @@ -117,11 +114,6 @@ } ul { - .dialog-avatar { - height: 48px; - width: 48px; - } - .user-caption { padding: 1px 3.5px 1px 12px; } diff --git a/src/scss/style.scss b/src/scss/style.scss index 3e19e70b..78422779 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -797,18 +797,6 @@ img.emoji { } } -#folders-container .rp avatar-element { - font-size: 20px; - - &:before { - font-size: 26px; - } - - &.tgico-avatar_deletedaccount:before { - font-size: 56px; - } -} - // .message .audio .preloader-container { // @include respond-to(handhelds) { // width: 30px;