Fix unpinning dialogs
Join left chat button
This commit is contained in:
Eduard Kuzmenko
parent
9f82f3c9e4
commit
47c34063fd
@ -1,5 +1,17 @@
|
||||
// https://github.com/evgeny-nadymov/telegram-react/blob/master/src/Components/ColumnMiddle/PinnedMessageBorder.js
|
||||
|
||||
enum BAR_HEIGHTS {
|
||||
ONE = 32,
|
||||
TWO = 15,
|
||||
THREE = 10,
|
||||
FOUR = 8,
|
||||
MORE = 8
|
||||
};
|
||||
|
||||
const GAP = 1;
|
||||
const WIDTH = 2;
|
||||
const BASE_CLASS = 'pinned-message-border';
|
||||
|
||||
export default class PinnedMessageBorder {
|
||||
private border: HTMLElement;
|
||||
private wrapper: HTMLElement;
|
||||
@ -20,13 +32,15 @@ export default class PinnedMessageBorder {
|
||||
const radius = 1;
|
||||
|
||||
let d = '';
|
||||
if(count === 3) {
|
||||
d = this.drawRect(0, 0, 2, barHeight, radius)
|
||||
+ this.drawRect(0, 11, 2, barHeight + 1, radius)
|
||||
+ this.drawRect(0, 23, 2, barHeight, radius);
|
||||
/* if(count === 3) {
|
||||
d = this.drawRect(0, 0, WIDTH, barHeight, radius)
|
||||
+ this.drawRect(0, barHeight + GAP, WIDTH, barHeight + 1, radius)
|
||||
+ this.drawRect(0, barHeight * 2 + GAP * 2 + 1, WIDTH, barHeight, radius);
|
||||
} */if(count === 2) {
|
||||
d = this.drawRect(0, 0, WIDTH, barHeight, radius) + this.drawRect(0, barHeight + GAP * 2, WIDTH, barHeight, radius);
|
||||
} else {
|
||||
for(let i = 0; i < count; i++) {
|
||||
d += this.drawRect(0, (barHeight + 2) * i, 2, barHeight, radius);
|
||||
for(let i = 0; i < count; ++i) {
|
||||
d += this.drawRect(0, (barHeight + GAP) * i, WIDTH, barHeight, radius);
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,56 +58,56 @@ export default class PinnedMessageBorder {
|
||||
};
|
||||
|
||||
private getBarHeight = (count: number, index: number) => {
|
||||
let barHeight = 32;
|
||||
if(count === 1) {
|
||||
barHeight = 32;
|
||||
let barHeight: number;
|
||||
if(count <= 1) {
|
||||
barHeight = BAR_HEIGHTS.ONE;
|
||||
} else if(count === 2) {
|
||||
barHeight = 15;
|
||||
barHeight = BAR_HEIGHTS.TWO;
|
||||
} else if(count === 3) {
|
||||
barHeight = 9;
|
||||
barHeight = BAR_HEIGHTS.THREE;
|
||||
} else if(count === 4) {
|
||||
barHeight = 7;
|
||||
barHeight = BAR_HEIGHTS.FOUR;
|
||||
} else if(count > 3) {
|
||||
barHeight = 7;
|
||||
barHeight = BAR_HEIGHTS.MORE;
|
||||
}
|
||||
|
||||
return barHeight;
|
||||
};
|
||||
|
||||
private getMarkHeight = (count: number, index: number) => {
|
||||
let barHeight = 32;
|
||||
if(count === 1) {
|
||||
barHeight = 32;
|
||||
let markHeight: number;
|
||||
if(count <= 1) {
|
||||
markHeight = BAR_HEIGHTS.ONE;
|
||||
} else if(count === 2) {
|
||||
barHeight = 15;
|
||||
markHeight = BAR_HEIGHTS.TWO;
|
||||
} else if(count === 3) {
|
||||
barHeight = index === 1 ? 10 : 9;
|
||||
markHeight = BAR_HEIGHTS.THREE;
|
||||
} else if(count === 4) {
|
||||
barHeight = 7;
|
||||
markHeight = BAR_HEIGHTS.FOUR;
|
||||
} else if(count > 3) {
|
||||
barHeight = 7;
|
||||
markHeight = BAR_HEIGHTS.MORE;
|
||||
}
|
||||
|
||||
return barHeight;
|
||||
return markHeight;
|
||||
};
|
||||
|
||||
private getMarkTranslateY = (index: number, barHeight: number, count: number) => {
|
||||
if(count === 1) {
|
||||
return 0;
|
||||
} else if(count === 2) {
|
||||
return index === 0 ? 0 : barHeight + 2;
|
||||
return !index ? 0 : barHeight + GAP;
|
||||
}
|
||||
|
||||
if(count === 3) {
|
||||
if(index === 0) {
|
||||
if(!index) {
|
||||
return 0;
|
||||
} else if (index === 1) {
|
||||
return 11;
|
||||
} else if(index === 1) {
|
||||
return barHeight + GAP;
|
||||
}
|
||||
|
||||
return 23;
|
||||
return barHeight * 2 + GAP * 2 + 1;
|
||||
} else {
|
||||
return (barHeight + 2) * index;
|
||||
return (barHeight + GAP) * index;
|
||||
}
|
||||
};
|
||||
|
||||
@ -104,21 +118,22 @@ export default class PinnedMessageBorder {
|
||||
|
||||
if(index <= 1) {
|
||||
return 0;
|
||||
} else if(index >= count - 2) {
|
||||
return trackHeight - 32;
|
||||
} else if(index >= (count - 2)) {
|
||||
return trackHeight - BAR_HEIGHTS.ONE - barHeight;
|
||||
}
|
||||
|
||||
return (barHeight + 4) / 2 + (index - 2) * (barHeight + 2);
|
||||
// return (index + 1) * barHeight + index * GAP;
|
||||
return (barHeight + GAP * 2) / 2 + (index - 2) * (barHeight + GAP);
|
||||
};
|
||||
|
||||
private getTrackHeight = (count: number, barHeight: number) => {
|
||||
return count <= 3 ? 32 : barHeight * count + 2 * (count - 1);
|
||||
return count <= 3 ? BAR_HEIGHTS.ONE : barHeight * count + GAP * (count - 1);
|
||||
};
|
||||
|
||||
public render(count: number, index: number) {
|
||||
if(!this.border) {
|
||||
this.border = document.createElement('div');
|
||||
this.border.classList.add('pinned-message-border');
|
||||
this.border.classList.add(BASE_CLASS);
|
||||
|
||||
this.wrapper = document.createElement('div');
|
||||
this.border.append(this.wrapper);
|
||||
@ -126,8 +141,8 @@ export default class PinnedMessageBorder {
|
||||
|
||||
if(count === 1) {
|
||||
if(this.count !== count) {
|
||||
this.wrapper.className = 'pinned-message-border-wrapper-1';
|
||||
this.border.classList.remove('pinned-message-border-mask');
|
||||
this.wrapper.className = BASE_CLASS + '-wrapper-1';
|
||||
this.border.classList.remove(BASE_CLASS + '-mask');
|
||||
this.wrapper.innerHTML = this.wrapper.style.cssText = '';
|
||||
}
|
||||
|
||||
@ -144,9 +159,9 @@ export default class PinnedMessageBorder {
|
||||
const markTranslateY = this.getMarkTranslateY(index, barHeight, count);
|
||||
const trackTranslateY = this.getTrackTranslateY(index, count, barHeight, trackHeight);
|
||||
|
||||
this.border.classList.toggle('pinned-message-border-mask', count > 4);
|
||||
this.border.classList.toggle(BASE_CLASS + '-mask', count > 4);
|
||||
|
||||
this.wrapper.className = 'pinned-message-border-wrapper';
|
||||
this.wrapper.className = BASE_CLASS + '-wrapper';
|
||||
this.wrapper.style.cssText = `clip-path: url(#${clipPathId}); width: 2px; height: ${trackHeight}px; transform: translateY(-${trackTranslateY}px);`;
|
||||
|
||||
if(!this.svg) {
|
||||
@ -160,7 +175,7 @@ export default class PinnedMessageBorder {
|
||||
this.svg.append(this.defs);
|
||||
|
||||
this.mark = document.createElement('div');
|
||||
this.mark.classList.add('pinned-message-border-mark');
|
||||
this.mark.classList.add(BASE_CLASS + '-mark');
|
||||
}
|
||||
|
||||
if(!this.svg.parentElement) {
|
||||
|
||||
@ -34,6 +34,7 @@ import { cancelEvent } from "../../helpers/dom/cancelEvent";
|
||||
import { attachClickEvent } from "../../helpers/dom/clickEvent";
|
||||
import findUpTag from "../../helpers/dom/findUpTag";
|
||||
import { toast } from "../toast";
|
||||
import replaceContent from "../../helpers/dom/replaceContent";
|
||||
|
||||
export default class ChatTopbar {
|
||||
public container: HTMLDivElement;
|
||||
@ -271,8 +272,6 @@ export default class ChatTopbar {
|
||||
this.pinnedMessage = new ChatPinnedMessage(this, this.chat, this.appMessagesManager, this.appPeersManager);
|
||||
|
||||
this.btnJoin = Button('btn-primary btn-color-primary chat-join hide');
|
||||
this.btnJoin.append(i18n('Chat.Subscribe'));
|
||||
|
||||
this.btnPinned = ButtonIcon('pinlist');
|
||||
this.btnMute = ButtonIcon('mute');
|
||||
|
||||
@ -292,11 +291,24 @@ export default class ChatTopbar {
|
||||
cancelEvent(e);
|
||||
|
||||
blurActiveElement();
|
||||
const middleware = this.chat.bubbles.getMiddleware();
|
||||
this.btnJoin.setAttribute('disabled', 'true');
|
||||
this.appChatsManager.joinChannel(-this.peerId).finally(() => {
|
||||
|
||||
const chatId = -this.peerId;
|
||||
let promise: Promise<any>;
|
||||
if(this.appChatsManager.isChannel(chatId)) {
|
||||
promise = this.appChatsManager.joinChannel(chatId);
|
||||
} else {
|
||||
promise = this.appChatsManager.addChatUser(chatId, rootScope.myId);
|
||||
}
|
||||
|
||||
promise.finally(() => {
|
||||
if(!middleware()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.btnJoin.removeAttribute('disabled');
|
||||
});
|
||||
//});
|
||||
}, {listenerSetter: this.listenerSetter});
|
||||
|
||||
this.listenerSetter.add(rootScope)('chat_update', (e) => {
|
||||
@ -419,7 +431,10 @@ export default class ChatTopbar {
|
||||
const isBroadcast = this.appPeersManager.isBroadcast(peerId);
|
||||
|
||||
this.btnMute && this.btnMute.classList.toggle('hide', !isBroadcast);
|
||||
this.btnJoin && this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(-peerId)?.pFlags?.left);
|
||||
if(this.btnJoin) {
|
||||
replaceContent(this.btnJoin, i18n(this.appChatsManager.isChannel(-peerId) ? 'Chat.Subscribe' : 'ChannelJoin'));
|
||||
this.btnJoin.classList.toggle('hide', !this.appChatsManager.getChat(-peerId)?.pFlags?.left);
|
||||
}
|
||||
this.setUtilsWidth();
|
||||
|
||||
const middleware = this.chat.bubbles.getMiddleware();
|
||||
|
||||
@ -533,6 +533,7 @@ const lang = {
|
||||
"OK": "OK",
|
||||
"PinFolderLimitReached": "Sorry, you can\'t pin any more chats to the top.",
|
||||
"Send": "Send",
|
||||
"ChannelJoin": "JOIN",
|
||||
|
||||
// * macos
|
||||
"AccountSettings.Filters": "Chat Folders",
|
||||
|
||||
@ -661,7 +661,7 @@ export class AppDialogsManager {
|
||||
|
||||
if(this.loadDialogsPromise/* || 1 === 1 */) return this.loadDialogsPromise;
|
||||
|
||||
const promise = new Promise<void>(async(resolve, reject) => {
|
||||
const promise = new Promise<void>(async(resolve) => {
|
||||
if(!this.chatList.childElementCount) {
|
||||
const container = this.chatList.parentElement;
|
||||
container.append(this.chatsPreloader);
|
||||
@ -697,7 +697,7 @@ export class AppDialogsManager {
|
||||
|
||||
const result = await getConversationPromise;
|
||||
|
||||
if(this.filterId !== filterId) {
|
||||
if(this.loadDialogsPromise !== promise) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -747,11 +747,11 @@ export class AppDialogsManager {
|
||||
|
||||
this.chatsPreloader.remove();
|
||||
resolve();
|
||||
});
|
||||
|
||||
return this.loadDialogsPromise = promise.finally(() => {
|
||||
}).finally(() => {
|
||||
this.loadDialogsPromise = undefined;
|
||||
});
|
||||
|
||||
return this.loadDialogsPromise = promise;
|
||||
}
|
||||
|
||||
private generateEmptyPlaceholder(options: {
|
||||
@ -788,7 +788,7 @@ export class AppDialogsManager {
|
||||
let placeholderContainer = (Array.from(this.chatList.parentElement.children) as HTMLElement[]).find(el => el.matches('.empty-placeholder'));
|
||||
const needPlaceholder = this.scroll.loadedAll.bottom && !this.chatList.childElementCount/* || true */;
|
||||
// this.chatList.style.display = 'none';
|
||||
|
||||
|
||||
if(needPlaceholder && placeholderContainer) {
|
||||
return;
|
||||
} else if(!needPlaceholder) {
|
||||
|
||||
@ -2913,17 +2913,20 @@ export class AppMessagesManager {
|
||||
public toggleDialogPin(peerId: number, filterId?: number) {
|
||||
if(filterId > 1) {
|
||||
return this.filtersStorage.toggleDialogPin(peerId, filterId);
|
||||
} else {
|
||||
const max = filterId === 1 ? rootScope.config.pinned_infolder_count_max : rootScope.config.pinned_dialogs_count_max;
|
||||
if(this.dialogsStorage.getPinnedOrders(filterId).length >= max) {
|
||||
return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
|
||||
}
|
||||
}
|
||||
|
||||
const dialog = this.getDialogOnly(peerId);
|
||||
if(!dialog) return Promise.reject();
|
||||
|
||||
const pinned = dialog.pFlags?.pinned ? undefined : true;
|
||||
|
||||
if(pinned) {
|
||||
const max = filterId === 1 ? rootScope.config.pinned_infolder_count_max : rootScope.config.pinned_dialogs_count_max;
|
||||
if(this.dialogsStorage.getPinnedOrders(filterId).length >= max) {
|
||||
return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
|
||||
}
|
||||
}
|
||||
|
||||
return apiManager.invokeApi('messages.toggleDialogPin', {
|
||||
peer: appPeersManager.getInputDialogPeerById(peerId),
|
||||
pinned
|
||||
|
||||
@ -272,7 +272,6 @@ namespace I18n {
|
||||
}
|
||||
|
||||
out.push(a);
|
||||
console.log('p4', p4);
|
||||
} else if(args) {
|
||||
out.push(args[indexHolder.i++]);
|
||||
}
|
||||
|
||||
@ -182,12 +182,12 @@ export default class FiltersStorage {
|
||||
public toggleDialogPin(peerId: number, filterId: number) {
|
||||
const filter = this.filters[filterId];
|
||||
|
||||
if(filter.pinned_peers.length >= this.rootScope.config.pinned_infolder_count_max) {
|
||||
return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
|
||||
}
|
||||
|
||||
const wasPinned = filter.pinned_peers.findAndSplice(p => p === peerId);
|
||||
if(!wasPinned) {
|
||||
if(filter.pinned_peers.length >= this.rootScope.config.pinned_infolder_count_max) {
|
||||
return Promise.reject({type: 'PINNED_DIALOGS_TOO_MUCH'});
|
||||
}
|
||||
|
||||
filter.pinned_peers.unshift(peerId);
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
html.no-touch &:hover {
|
||||
html.no-touch &:hover,
|
||||
html.no-touch &:active {
|
||||
@if $property != null {
|
||||
@if $use-transition {
|
||||
transition: .2s #{$property};
|
||||
|
||||
@ -7,21 +7,23 @@
|
||||
.pinned-message {
|
||||
&-border {
|
||||
position: relative;
|
||||
height: 35px;
|
||||
width: 2px;
|
||||
padding: 1.5px 0;
|
||||
//padding: 0 0 6px 6px;
|
||||
//overflow: hidden;
|
||||
height: 2rem;
|
||||
width: .125rem;
|
||||
// padding: .125rem 0;
|
||||
|
||||
&-wrapper-1 {
|
||||
height: 32px;
|
||||
width: 2px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 2rem;
|
||||
width: .125rem;
|
||||
border-radius: 1px;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
&-mask {
|
||||
mask-image: linear-gradient(to bottom, transparent 0, black 6px, black 38px, transparent 44px);
|
||||
height: 2.5rem;
|
||||
mask-image: linear-gradient(to bottom, transparent 0, black 4px, black 36px, transparent 40px);
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
@ -37,7 +39,7 @@
|
||||
bottom: 0;
|
||||
display: block;
|
||||
background: var(--primary-color);
|
||||
opacity: .53;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,10 +62,19 @@
|
||||
body:not(.animation-level-0) & {
|
||||
&-wrapper, &-mark {
|
||||
will-change: transform;
|
||||
transition: transform 0.25s ease-in-out;
|
||||
transition: transform .25s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
--height: 32px;
|
||||
height: var(--height);
|
||||
}
|
||||
|
||||
&-media {
|
||||
border-radius: .1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-message, .reply {
|
||||
@ -86,16 +97,15 @@
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-left: 8px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
&-title {
|
||||
@ -120,7 +130,6 @@
|
||||
&-media {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -167,7 +176,7 @@
|
||||
.reply {
|
||||
&.is-media {
|
||||
.reply-content {
|
||||
padding-left: 2.5rem;
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,6 +190,14 @@
|
||||
min-width: 2px;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
&-content {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
&-media {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-container {
|
||||
@ -267,10 +284,10 @@
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
position: absolute;
|
||||
transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
|
||||
margin-left: -.25rem;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@include animation-level(2) {
|
||||
transition: transform var(--pm-transition)/* , opacity var(--pm-transition) */;
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,13 +302,15 @@
|
||||
} */
|
||||
|
||||
// * fix blink in safari, can't add translateX from nowhere...
|
||||
&-title, &-subtitle {
|
||||
&-title,
|
||||
&-subtitle {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
&.is-media {
|
||||
.pinned-message-title, .pinned-message-subtitle {
|
||||
transform: translateX(2.5rem);
|
||||
.pinned-message-title,
|
||||
.pinned-message-subtitle {
|
||||
transform: translateX(2.25rem);
|
||||
//overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
@ -301,12 +320,16 @@
|
||||
//opacity: 0;
|
||||
}
|
||||
|
||||
.pinned-container-wrapper {
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
&:not(.is-floating) {
|
||||
//width: 15.5rem;
|
||||
|
||||
.pinned-message-content {
|
||||
margin-right: 2.5rem;
|
||||
}
|
||||
/* .pinned-message-content {
|
||||
margin-right: 2.25rem;
|
||||
} */
|
||||
|
||||
.pinned-message-close {
|
||||
display: flex;
|
||||
@ -316,8 +339,9 @@
|
||||
|
||||
&.is-floating {
|
||||
&.is-media {
|
||||
.pinned-message-title, .pinned-message-subtitle {
|
||||
width: calc(100% - 2.5rem);
|
||||
.pinned-message-title,
|
||||
.pinned-message-subtitle {
|
||||
width: calc(100% - 2.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@ -329,21 +353,26 @@
|
||||
}
|
||||
|
||||
&-content {
|
||||
> .pinned-message-title, > .pinned-message-subtitle {
|
||||
.pinned-message-title,
|
||||
.pinned-message-subtitle {
|
||||
position: relative;
|
||||
height: 50%;
|
||||
height: calc(var(--height) / 2);
|
||||
overflow: visible;
|
||||
transition: transform var(--pm-transition);
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none;
|
||||
@include animation-level(2) {
|
||||
transition: transform var(--pm-transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: -.0625rem;
|
||||
margin-bottom: .1875rem;
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
.animated-super-row {
|
||||
font-size: 14px;
|
||||
font-size: .875rem;
|
||||
line-height: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@ -403,7 +432,8 @@
|
||||
} */
|
||||
|
||||
|
||||
&.hide ~ .tgico-pinlist, &:not(.is-many) ~ .tgico-pinlist {
|
||||
&.hide ~ .tgico-pinlist,
|
||||
&:not(.is-many) ~ .tgico-pinlist {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -173,11 +173,11 @@
|
||||
|
||||
.chat-join {
|
||||
width: auto;
|
||||
width: 117px;
|
||||
height: 36px;
|
||||
height: 2.25rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
margin-right: .5rem;
|
||||
padding: 0 1.375rem; // same as in new media popup
|
||||
|
||||
&:not(.hide) + .chat-mute-button {
|
||||
display: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user