From 6a813a6275023e91cb687b2ccd0f76eed65de34e Mon Sep 17 00:00:00 2001 From: morethanwords Date: Tue, 12 Jan 2021 15:22:00 +0400 Subject: [PATCH] Fix 0.5 pixel shift in chat Fix vertical centering in badges --- src/components/appSelectPeers.ts | 6 +- src/components/chat/search.ts | 2 +- src/components/dialogsContextMenu.ts | 2 +- src/components/sidebarLeft/index.ts | 2 +- .../sidebarLeft/tabs/includedChats.ts | 4 +- src/index.hbs | 2 +- src/lib/appManagers/appDialogsManager.ts | 50 +++++++------- src/scss/partials/_badge.scss | 50 ++++++++++++++ src/scss/partials/_chat.scss | 4 ++ src/scss/partials/_chatTopbar.scss | 3 - src/scss/partials/_chatlist.scss | 67 ++----------------- src/scss/partials/_leftSidebar.scss | 4 +- src/scss/style.scss | 43 +----------- 13 files changed, 95 insertions(+), 144 deletions(-) create mode 100644 src/scss/partials/_badge.scss diff --git a/src/components/appSelectPeers.ts b/src/components/appSelectPeers.ts index da943dc3..94dbeb00 100644 --- a/src/components/appSelectPeers.ts +++ b/src/components/appSelectPeers.ts @@ -100,7 +100,7 @@ export default class AppSelectPeers { if(!target) return; const peerId = target.dataset.key; - const li = this.chatsContainer.querySelector('[data-peerid="' + peerId + '"]') as HTMLElement; + const li = this.chatsContainer.querySelector('[data-peer-id="' + peerId + '"]') as HTMLElement; if(!li) { this.remove(+peerId || peerId); } else { @@ -117,13 +117,13 @@ export default class AppSelectPeers { this.scrollable.setVirtualContainer(this.list); this.chatsContainer.addEventListener('click', (e) => { - const target = findUpAttribute(e.target, 'data-peerId') as HTMLElement; + const target = findUpAttribute(e.target, 'data-peer-id') as HTMLElement; cancelEvent(e); if(!target) return; if(this.freezed) return; - let key: any = target.getAttribute('data-peerId'); + let key: any = target.dataset.peerId; key = +key || key; if(!this.multiSelect) { diff --git a/src/components/chat/search.ts b/src/components/chat/search.ts index e3714cd9..1456363c 100644 --- a/src/components/chat/search.ts +++ b/src/components/chat/search.ts @@ -128,7 +128,7 @@ export default class ChatSearch { selectResult = (elem: HTMLElement) => { if(this.setPeerPromise) return this.setPeerPromise; - const peerId = +elem.getAttribute('data-peerId'); + const peerId = +elem.dataset.peerId; const lastMsgId = +elem.dataset.mid || undefined; const index = whichChild(elem); diff --git a/src/components/dialogsContextMenu.ts b/src/components/dialogsContextMenu.ts index 8e2a217e..8d16c809 100644 --- a/src/components/dialogsContextMenu.ts +++ b/src/components/dialogsContextMenu.ts @@ -139,7 +139,7 @@ export default class DialogsContextMenu { this.filterId = appDialogsManager.filterId; - this.selectedId = +li.getAttribute('data-peerId'); + this.selectedId = +li.dataset.peerId; this.dialog = appMessagesManager.getDialogByPeerId(this.selectedId)[0]; this.buttons.forEach(button => { diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 292844ef..ddcecb74 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -367,7 +367,7 @@ export class AppSidebarLeft extends SidebarSlider { return; } - const peerId = +target.getAttribute('data-peerId'); + const peerId = +target.getAttribute('data-peer-id'); appStateManager.getState().then(state => { const recentSearch = state.recentSearch || []; if(recentSearch[0] != peerId) { diff --git a/src/components/sidebarLeft/tabs/includedChats.ts b/src/components/sidebarLeft/tabs/includedChats.ts index efa18941..d00ccbca 100644 --- a/src/components/sidebarLeft/tabs/includedChats.ts +++ b/src/components/sidebarLeft/tabs/includedChats.ts @@ -175,7 +175,7 @@ export default class AppIncludedChatsTab extends SliderSuperTab { let html = ''; for(const key in details) { - html += ``; + html += ``; } categories.innerHTML = html; @@ -219,7 +219,7 @@ export default class AppIncludedChatsTab extends SliderSuperTab { for(const flag in filter.pFlags) { // @ts-ignore if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) { - (categories.querySelector(`[data-peerId="${flag}"]`) as HTMLElement).click(); + (categories.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click(); } } } diff --git a/src/index.hbs b/src/index.hbs index d67e3c94..4882d5f5 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -146,7 +146,7 @@
diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 7c79ac33..2121233d 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -265,8 +265,8 @@ export class AppDialogsManager { const dialog = appMessagesManager.getDialogByPeerId(user.id)[0]; //console.log('updating user:', user, dialog); - if(dialog && !appUsersManager.isBot(dialog.peerId) && dialog.peerId != rootScope.myId) { - const online = user.status?._ == 'userStatusOnline'; + if(dialog && !appUsersManager.isBot(dialog.peerId) && dialog.peerId !== rootScope.myId) { + const online = user.status?._ === 'userStatusOnline'; const dom = this.getDialogDom(dialog.peerId); if(dom) { @@ -348,13 +348,13 @@ export class AppDialogsManager { //const perf = performance.now(); for(const element of this.lastActiveElements) { - if(+element.getAttribute('data-peerid') !== peerId) { + if(+element.dataset.peerId !== peerId) { element.classList.remove('active'); this.lastActiveElements.delete(element); } } - const elements = Array.from(document.querySelectorAll(`[data-autonomous="0"] li[data-peerid="${peerId}"]`)) as HTMLElement[]; + const elements = Array.from(document.querySelectorAll(`[data-autonomous="0"] li[data-peer-id="${peerId}"]`)) as HTMLElement[]; elements.forEach(element => { element.classList.add('active'); this.lastActiveElements.add(element); @@ -367,7 +367,7 @@ export class AppDialogsManager { if(!this.filtersRendered[filter.id]) { this.addFilter(filter); return; - } else if(filter.id == this.filterId) { // это нет тут смысла вызывать, так как будет dialogs_multiupdate + } else if(filter.id === this.filterId) { // это нет тут смысла вызывать, так как будет dialogs_multiupdate //this.validateForFilter(); const folder = appMessagesManager.dialogsStorage.getFolder(filter.id); this.validateForFilter(); @@ -442,7 +442,7 @@ export class AppDialogsManager { id = +tabContent.dataset.filterId || 0; - if(this.filterId == id) return; + if(this.filterId === id) return; this.chatLists[id].innerHTML = ''; this.scroll.setVirtualContainer(this.chatLists[id]); @@ -492,9 +492,9 @@ export class AppDialogsManager { get topOffsetIndex() { if(!this.scroll.loadedAll['top']) { - const element = this.chatList.firstElementChild; + const element = this.chatList.firstElementChild as HTMLElement; if(element) { - const peerId = +element.getAttribute('data-peerId'); + const peerId = +element.dataset.peerId; const dialog = appMessagesManager.getDialogByPeerId(peerId)[0]; return dialog.index; } @@ -584,7 +584,7 @@ export class AppDialogsManager { const span = document.createElement('span'); const titleSpan = document.createElement('span'); titleSpan.innerHTML = RichTextProcessor.wrapEmojiText(filter.title); - const unreadSpan = document.createElement('span'); + const unreadSpan = document.createElement('div'); unreadSpan.classList.add('badge', 'badge-20', 'badge-blue'); const i = document.createElement('i'); span.append(titleSpan, unreadSpan, i); @@ -643,18 +643,18 @@ export class AppDialogsManager { let offsetIndex = 0; if(side == 'top') { - const element = this.chatList.firstElementChild; + const element = this.chatList.firstElementChild as HTMLElement; if(element) { - const peerId = +element.getAttribute('data-peerId'); + const peerId = +element.dataset.peerId; const index = storage.findIndex(dialog => dialog.peerId == peerId); const needIndex = Math.max(0, index - loadCount); loadCount = index - needIndex; offsetIndex = storage[needIndex].index + 1; } } else { - const element = this.chatList.lastElementChild; + const element = this.chatList.lastElementChild as HTMLElement; if(element) { - const peerId = +element.getAttribute('data-peerId'); + const peerId = +element.dataset.peerId; const dialog = storage.find(dialog => dialog.peerId == peerId); offsetIndex = dialog.index; } @@ -786,7 +786,7 @@ export class AppDialogsManager { sliced.forEach(el => { el.remove(); - const peerId = +el.getAttribute('data-peerId'); + const peerId = +el.dataset.peerId; delete this.doms[peerId]; }); @@ -848,7 +848,7 @@ export class AppDialogsManager { if(elem) { if(onFound) onFound(); - let peerId = +elem.getAttribute('data-peerId'); + let peerId = +elem.dataset.peerId; let lastMsgId = +elem.dataset.mid || undefined; appImManager.setPeer(peerId, lastMsgId); @@ -861,7 +861,7 @@ export class AppDialogsManager { list.addEventListener('dblclick', (e) => { const li = findUpTag(e.target, 'LI'); if(li) { - const peerId = +li.getAttribute('data-peerId'); + const peerId = +li.dataset.peerId; this.log('debug dialog:', appMessagesManager.getDialogByPeerId(peerId)); } }); @@ -879,16 +879,16 @@ export class AppDialogsManager { this.reorderDialogsTimeout = 0; let offset = 0; if(this.topOffsetIndex) { - const element = this.chatList.firstElementChild; + const element = this.chatList.firstElementChild as HTMLElement; if(element) { - const peerId = +element.getAttribute('data-peerId'); + const peerId = +element.dataset.peerId; const firstDialog = appMessagesManager.getDialogByPeerId(peerId); offset = firstDialog[1]; } } const dialogs = appMessagesManager.dialogsStorage.getFolder(this.filterId); - const currentOrder = (Array.from(this.chatList.children) as HTMLElement[]).map(el => +el.getAttribute('data-peerId')); + const currentOrder = (Array.from(this.chatList.children) as HTMLElement[]).map(el => +el.dataset.peerId); dialogs.forEach((dialog, index) => { const dom = this.getDialogDom(dialog.peerId); @@ -936,7 +936,7 @@ export class AppDialogsManager { lastMessage = appMessagesManager.getMessageByPeer(dialog.peerId, dialog.top_message); } - if(lastMessage._ == 'messageEmpty' || (lastMessage._ == 'messageService' && !lastMessage.rReply)) { + if(lastMessage._ === 'messageEmpty' || (lastMessage._ === 'messageService' && !lastMessage.rReply)) { dom.lastMessageSpan.innerHTML = ''; dom.lastTimeSpan.innerHTML = ''; delete dom.listEl.dataset.mid; @@ -1071,7 +1071,7 @@ export class AppDialogsManager { } else dom.statusSpan.classList.remove('tgico-check', 'tgico-checks'); dom.unreadMessagesSpan.innerText = ''; - dom.unreadMessagesSpan.classList.remove('tgico-pinnedchat'); + dom.unreadMessagesSpan.classList.remove('tgico-pinnedchat', 'tgico'); const filter = appMessagesManager.filtersStorage.filters[this.filterId]; let isPinned: boolean; @@ -1088,7 +1088,7 @@ export class AppDialogsManager { } else { dom.unreadMessagesSpan.classList.remove('unread'); if(isPinned) { - dom.unreadMessagesSpan.classList.add('tgico-pinnedchat'); + dom.unreadMessagesSpan.classList.add('tgico-pinnedchat', 'tgico'); } } } @@ -1222,7 +1222,7 @@ export class AppDialogsManager { const li = document.createElement('li'); li.append(paddingDiv); - li.setAttribute('data-peerId', '' + peerId); + li.dataset.peerId = '' + peerId; const statusSpan = document.createElement('span'); statusSpan.classList.add('message-status'); @@ -1230,8 +1230,8 @@ export class AppDialogsManager { const lastTimeSpan = document.createElement('span'); lastTimeSpan.classList.add('message-time'); - const unreadMessagesSpan = document.createElement('span'); - unreadMessagesSpan.classList.add('dialog-subtitle-badge'); + const unreadMessagesSpan = document.createElement('div'); + unreadMessagesSpan.className = 'dialog-subtitle-badge badge badge-24'; const titleP = document.createElement('p'); titleP.classList.add('dialog-title'); diff --git a/src/scss/partials/_badge.scss b/src/scss/partials/_badge.scss new file mode 100644 index 00000000..d191fdf1 --- /dev/null +++ b/src/scss/partials/_badge.scss @@ -0,0 +1,50 @@ +.badge { + border-radius: .75rem; + font-weight: 500; + color: white; + font-size: .875rem; + transition: background-color .2s ease-in-out; + + &:not(.tgico):empty { + display: none; + } + + &-20 { + height: 1.25rem; + min-width: 1.25rem; + line-height: 1.25rem !important; + padding: 0 5.75px; + + html.is-safari & { + line-height: 22px !important; + } + } + + &-24 { + height: 1.5rem; + min-width: 1.5rem; + line-height: 1.5rem !important; + padding: 0 7.75px; + + &.tgico { + font-size: 1.5rem; + width: 1.5rem; + } + } + + &.tgico { + padding: 0; + } + + &-green { + background-color: $color-green; + } + + &-blue { + background-color: $color-blue; + } + + &-gray { + background-color: #c5c9cc; + } +} \ No newline at end of file diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 4277b9d2..14a060df 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -462,6 +462,10 @@ $chat-helper-size: 39px; } } + @include respond-to(not-handhelds) { + border-left: 1px solid #DADCE0; + } + @include respond-to(floating-left-sidebar) { position: fixed !important; left: 0; diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index 99a34751..5161890c 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -27,9 +27,6 @@ } @include respond-to(not-handhelds) { - border-left: 1px solid #DADCE0; - border-right: 1px solid #DADCE0; - .menu-search { display: none; } diff --git a/src/scss/partials/_chatlist.scss b/src/scss/partials/_chatlist.scss index b1ba963f..1b079e9b 100644 --- a/src/scss/partials/_chatlist.scss +++ b/src/scss/partials/_chatlist.scss @@ -1,12 +1,6 @@ .chatlist-container { position: relative; - /* .scrollable { - html.is-mac & { - overflow-y: scroll; - } - } */ - .search-group-recent.search-group { @include respond-to(handhelds) { padding: 2px 0 0; @@ -15,27 +9,16 @@ ul { margin: 0; - //padding: 0 .5rem; - /* display: grid; - grid-auto-columns: 1fr; */ display: flex; flex-direction: column; - /* grid-gap: 4px; */ width: 100%; user-select: none; -webkit-user-select: none; /* disable selection/Copy of UIWebView */ -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */ - - /* html.is-mac & { - transform: translateZ(0); - } */ } li { - //padding: 0 0 2px 0; - //padding-bottom: 4px; - DO MAKETA JS3 - //overflow: hidden; background-color: #fff; @include respond-to(handhelds) { @@ -50,12 +33,12 @@ color: #a3a3a3; font-size: 1.125rem; margin-left: .125rem; - animation: fade-in-opacity .2s ease forwards; + animation: fade-in-opacity .2s ease-in-out forwards; } } &.backwards .user-title:after { - animation: fade-in-backwards-opacity .2s ease forwards; + animation: fade-in-backwards-opacity .2s ease-in-out forwards; } } } @@ -64,9 +47,6 @@ height: 72px; max-height: 72px; border-radius: $border-radius-medium; - //align-items: center; - /* display: grid; - grid-template-columns: 64px calc(100% - 64px - 6.5px); */ display: flex; align-items: flex-start; flex-direction: row; @@ -104,34 +84,18 @@ } } - .pinned-delimiter { - display: flex; - padding: 8px 0 4px; - - span { - margin: 0; - width: 100%; - height: 1px; - background-color: #DADCE0; - } - } - p { margin: 0; display: flex; justify-content: space-between; flex-direction: row; - //align-items: center; align-items: flex-start; - //height: 1.7rem; // hot-fix - height: 27px; // maybe new hot-fix + height: 27px; } .dialog { &-title { &-details { - /* font-size: .9rem; */ - //font-size: .8rem; font-size: .75rem; padding: 1px 0px 0px 0px; flex: 0 0 auto; @@ -141,13 +105,6 @@ &-subtitle { &-badge { - font-size: .9rem; - - &.tgico-pinnedchat { - width: 24px; - font-size: 1.5rem; - } - &:not(:empty), &.tgico-pinnedchat { margin-left: .5rem; } @@ -250,28 +207,12 @@ } } - .unread, .tgico-pinnedchat { - height: 24px; - text-align: center; - line-height: 24px; - color: #fff; - border-radius: 12px; + .dialog-subtitle-badge { margin-top: 4px; margin-right: -3px; flex: 0 0 auto; } - .unread { - min-width: 24px; - padding: 0 7.75px; // ! fix initial width due to font-size: .9rem; - font-weight: 500; - transition: .2s background-color; - } - - .unread:empty { - visibility: hidden; - } - .unread, li.is-muted.backwards .unread { background: $color-green; } diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index b1e0d529..6c899546 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -3,8 +3,8 @@ flex-direction: column; flex: 1; min-width: 18rem; - // ! -.5 because of border-left and border-right on whole page - max-width: calc(#{$large-screen} / 4); + // ! -1 because of border-left and border-right on whole page + max-width: calc(#{$large-screen} / 4 - 1px); @include respond-to(handhelds) { width: 100%; diff --git a/src/scss/style.scss b/src/scss/style.scss index b43c2624..5989921a 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -135,6 +135,7 @@ $chat-padding-handhelds: .5rem; @import "partials/ico"; @import "partials/input"; @import "partials/button"; +@import "partials/badge"; @import "partials/checkbox"; @import "partials/chatlist"; @import "partials/chat"; @@ -1068,48 +1069,6 @@ middle-ellipsis-element { } } -.badge { - border-radius: .75rem; - font-weight: 500; - color: white; - font-size: .9rem; // ! this will fix vertical center - transition: background-color .2s ease-in-out; - - &:empty { - display: none; - } - - &-20 { - height: 1.25rem; - min-width: 1.25rem; - line-height: 1.25rem !important; - padding: 0 5.75px; - - html.is-safari & { - line-height: 22px !important; - } - } - - &-24 { - height: 1.5rem; - min-width: 1.5rem; - line-height: 1.5rem !important; - padding: 0 7.75px; - } - - &-green { - background-color: $color-green; - } - - &-blue { - background-color: $color-blue; - } - - &-gray { - background-color: #c5c9cc; - } -} - .row { min-height: 3.375rem; margin-top: .5rem;