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

Fix 0.5 pixel shift in chat

Browse Source 
Fix vertical centering in badges
This commit is contained in:
morethanwords 2021-01-12 15:22:00 +04:00
parent 1099892378
commit 6a813a6275
13 changed files with 95 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/appSelectPeers.ts
View File

@ -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) {

2
src/components/chat/search.ts
View File

@ -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);

2
src/components/dialogsContextMenu.ts
View File

@ -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 => {

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

@ -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) {

4
src/components/sidebarLeft/tabs/includedChats.ts
View File

@ -175,7 +175,7 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
let html = '';
for(const key in details) {
html += `<button class="folder-category-button btn-primary btn-transparent tgico-${details[key].ico}" data-peerId="${key}">${details[key].text}${this.checkbox()}</button>`;
html += `<button class="folder-category-button btn-primary btn-transparent tgico-${details[key].ico}" data-peer-id="${key}">${details[key].text}${this.checkbox()}</button>`;
}
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();
}
}
}

2
src/index.hbs
View File

@ -146,7 +146,7 @@
<div class="folders-tabs-scrollable menu-horizontal-scrollable hide">
<nav class="menu-horizontal" id="folders-tabs">
<ul>
<li class="rp"><span>All<span class="badge badge-20 badge-blue"></span><i></i></span></li>
<li class="rp"><span>All<div class="badge badge-20 badge-blue"></div><i></i></span></li>
</ul>
</nav>
</div>

50
src/lib/appManagers/appDialogsManager.ts
View File

@ -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');

50
src/scss/partials/_badge.scss Normal file
View File

@ -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;
}
}

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

@ -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;

3
src/scss/partials/_chatTopbar.scss
View File

@ -27,9 +27,6 @@
}
@include respond-to(not-handhelds) {
border-left: 1px solid #DADCE0;
border-right: 1px solid #DADCE0;
.menu-search {
display: none;
}

67
src/scss/partials/_chatlist.scss
View File

@ -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;
}

4
src/scss/partials/_leftSidebar.scss
View File

@ -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%;

43
src/scss/style.scss
View File

@ -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;