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

Temp commit

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-03-11 00:57:28 +04:00
parent 8eda0f505e
commit 9fa40b50f7
3 changed files with 95 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/sidebarLeft/tabs/chatFolders.ts
View File

@ -1,29 +1,32 @@
import { SliderSuperTab } from "../../slider"; import { SliderSuperTab } from "../../slider";
import lottieLoader, { RLottiePlayer } from "../../../lib/lottieLoader"; import lottieLoader, { RLottiePlayer } from "../../../lib/lottieLoader";
import { RichTextProcessor } from "../../../lib/richtextprocessor"; import { RichTextProcessor } from "../../../lib/richtextprocessor";
import { cancelEvent, positionElementByIndex } from "../../../helpers/dom"; import { attachClickEvent, cancelEvent, positionElementByIndex } from "../../../helpers/dom";
import { ripple } from "../../ripple"; import { ripple } from "../../ripple";
import { toast } from "../../toast"; import { toast } from "../../toast";
import type { MyDialogFilter } from "../../../lib/storages/filters"; import type { MyDialogFilter } from "../../../lib/storages/filters";
import type { DialogFilterSuggested, DialogFilter } from "../../../layer"; import type { DialogFilterSuggested, DialogFilter } from "../../../layer";
import type _rootScope from "../../../lib/rootScope"; import type _rootScope from "../../../lib/rootScope";
import type { BroadcastEvents } from "../../../lib/rootScope";
import Button from "../../button"; import Button from "../../button";
import appMessagesManager from "../../../lib/appManagers/appMessagesManager"; import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
import appPeersManager from "../../../lib/appManagers/appPeersManager"; import appPeersManager from "../../../lib/appManagers/appPeersManager";
import apiManager from "../../../lib/mtproto/mtprotoworker"; import apiManager from "../../../lib/mtproto/mtprotoworker";
import rootScope from "../../../lib/rootScope"; import rootScope from "../../../lib/rootScope";
import AppEditFolderTab from "./editFolder"; import AppEditFolderTab from "./editFolder";
import Row from "../../row";
import { SettingSection } from "..";
export default class AppChatFoldersTab extends SliderSuperTab { export default class AppChatFoldersTab extends SliderSuperTab {
public createFolderBtn: HTMLElement; private createFolderBtn: HTMLElement;
private foldersContainer: HTMLElement; private foldersContainer: HTMLElement;
private suggestedContainer: HTMLElement; private suggestedSection: SettingSection;
private stickerContainer: HTMLElement; private stickerContainer: HTMLElement;
private animation: RLottiePlayer; private animation: RLottiePlayer;
private filtersRendered: {[filterId: number]: HTMLElement} = {}; private filtersRendered: {[filterId: number]: HTMLElement} = {};
private renderFolder(dialogFilter: DialogFilterSuggested | DialogFilter | MyDialogFilter, container?: HTMLElement, div: HTMLElement = document.createElement('div')) { private renderFolder(dialogFilter: DialogFilterSuggested | DialogFilter | MyDialogFilter, container?: HTMLElement, div?: HTMLElement) {
let filter: DialogFilter | MyDialogFilter; let filter: DialogFilter | MyDialogFilter;
let description = ''; let description = '';
let d: string[] = []; let d: string[] = [];
@ -34,15 +37,6 @@ export default class AppChatFoldersTab extends SliderSuperTab {
filter = dialogFilter; filter = dialogFilter;
description = ''; description = '';
const filterId = filter.id;
if(!this.filtersRendered.hasOwnProperty(filter.id)) {
div.addEventListener('click', () => {
new AppEditFolderTab(this.slider).open(appMessagesManager.filtersStorage.filters[filterId]);
});
}
this.filtersRendered[filter.id] = div;
let enabledFilters = Object.keys(filter.pFlags).length; let enabledFilters = Object.keys(filter.pFlags).length;
/* (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => { /* (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => {
enabledFilters += +!!filter[key].length; enabledFilters += +!!filter[key].length;
@ -76,14 +70,26 @@ export default class AppChatFoldersTab extends SliderSuperTab {
} }
} }
div.classList.add('category'); if(!div) {
div.innerHTML = ` const row = new Row({
<div> title: RichTextProcessor.wrapEmojiText(filter.title),
<p>${RichTextProcessor.wrapEmojiText(filter.title)}</p> subtitle: d.length ? d.join(', ') : description,
<p>${d.length ? d.join(', ') : description}</p> clickable: true
</div> });
`;
ripple(div); div = row.container;
if(dialogFilter._ === 'dialogFilter') {
const filterId = filter.id;
if(!this.filtersRendered.hasOwnProperty(filter.id)) {
attachClickEvent(div, () => {
new AppEditFolderTab(this.slider).open(appMessagesManager.filtersStorage.filters[filterId]);
}, {listenerSetter: this.listenerSetter});
}
this.filtersRendered[filter.id] = div;
}
}
if((filter as MyDialogFilter).hasOwnProperty('orderIndex')) { if((filter as MyDialogFilter).hasOwnProperty('orderIndex')) {
// ! header will be at 0 index // ! header will be at 0 index
@ -111,34 +117,28 @@ export default class AppChatFoldersTab extends SliderSuperTab {
icon: 'add' icon: 'add'
}); });
this.foldersContainer = document.createElement('div'); const sec1 = new SettingSection({
this.foldersContainer.classList.add('folders-my'); name: 'Folders'
});
const foldersH2 = document.createElement('div'); this.foldersContainer = sec1.content;
foldersH2.classList.add('sidebar-left-h2');
foldersH2.innerText = 'Folders';
this.foldersContainer.append(foldersH2); const sec2 = new SettingSection({
name: 'Recommended folders'
});
this.suggestedContainer = document.createElement('div'); this.suggestedSection = sec2;
this.suggestedContainer.classList.add('folders-suggested'); this.suggestedSection.container.style.display = 'none';
this.suggestedContainer.style.display = 'none';
const suggestedH2 = document.createElement('div'); this.scrollable.append(this.stickerContainer, caption, this.createFolderBtn, sec1.container, sec2.container);
suggestedH2.classList.add('sidebar-left-h2');
suggestedH2.innerText = 'Recommended folders';
this.suggestedContainer.append(suggestedH2); attachClickEvent(this.createFolderBtn, () => {
this.scrollable.append(this.stickerContainer, caption, this.createFolderBtn, document.createElement('hr'), this.foldersContainer, document.createElement('hr'), this.suggestedContainer);
this.createFolderBtn.addEventListener('click', () => {
if(Object.keys(this.filtersRendered).length >= 10) { if(Object.keys(this.filtersRendered).length >= 10) {
toast('Sorry, you can\'t create more folders.'); toast('Sorry, you can\'t create more folders.');
} else { } else {
new AppEditFolderTab(this.slider).open(); new AppEditFolderTab(this.slider).open();
} }
}); }, {listenerSetter: this.listenerSetter});
lottieLoader.loadAnimationFromURL({ lottieLoader.loadAnimationFromURL({
container: this.stickerContainer, container: this.stickerContainer,
@ -156,7 +156,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
} }
}); });
rootScope.on('filter_update', (e) => { this.listenerSetter.add(rootScope, 'filter_update', (e) => {
const filter = e; const filter = e;
if(this.filtersRendered.hasOwnProperty(filter.id)) { if(this.filtersRendered.hasOwnProperty(filter.id)) {
this.renderFolder(filter, null, this.filtersRendered[filter.id]); this.renderFolder(filter, null, this.filtersRendered[filter.id]);
@ -167,7 +167,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
this.getSuggestedFilters(); this.getSuggestedFilters();
}); });
rootScope.on('filter_delete', (e) => { this.listenerSetter.add(rootScope, 'filter_delete', (e) => {
const filter = e; const filter = e;
if(this.filtersRendered.hasOwnProperty(filter.id)) { if(this.filtersRendered.hasOwnProperty(filter.id)) {
/* for(const suggested of this.suggestedFilters) { /* for(const suggested of this.suggestedFilters) {
@ -182,7 +182,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
} }
}); });
rootScope.on('filter_order', (e) => { this.listenerSetter.add(rootScope, 'filter_order', (e: BroadcastEvents['filter_order']) => {
const order = e; const order = e;
order.forEach((filterId, idx) => { order.forEach((filterId, idx) => {
const div = this.filtersRendered[filterId]; const div = this.filtersRendered[filterId];
@ -195,8 +195,8 @@ export default class AppChatFoldersTab extends SliderSuperTab {
private getSuggestedFilters() { private getSuggestedFilters() {
apiManager.invokeApi('messages.getSuggestedDialogFilters').then(suggestedFilters => { apiManager.invokeApi('messages.getSuggestedDialogFilters').then(suggestedFilters => {
this.suggestedContainer.style.display = suggestedFilters.length ? '' : 'none'; this.suggestedSection.container.style.display = suggestedFilters.length ? '' : 'none';
Array.from(this.suggestedContainer.children).slice(1).forEach(el => el.remove()); Array.from(this.suggestedSection.content.children).slice(1).forEach(el => el.remove());
suggestedFilters.forEach(filter => { suggestedFilters.forEach(filter => {
const div = this.renderFolder(filter); const div = this.renderFolder(filter);
@ -204,9 +204,9 @@ export default class AppChatFoldersTab extends SliderSuperTab {
button.classList.add('btn-primary', 'btn-color-primary'); button.classList.add('btn-primary', 'btn-color-primary');
button.innerText = 'Add'; button.innerText = 'Add';
div.append(button); div.append(button);
this.suggestedContainer.append(div); this.suggestedSection.content.append(div);
button.addEventListener('click', (e) => { attachClickEvent(button, (e) => {
cancelEvent(e); cancelEvent(e);
if(Object.keys(this.filtersRendered).length >= 10) { if(Object.keys(this.filtersRendered).length >= 10) {
@ -223,7 +223,7 @@ export default class AppChatFoldersTab extends SliderSuperTab {
}).finally(() => { }).finally(() => {
button.removeAttribute('disabled'); button.removeAttribute('disabled');
}); });
}); }, {listenerSetter: this.listenerSetter});
}); });
}); });
} }

2
src/lib/rootScope.ts
View File

@ -12,7 +12,7 @@ import EventListenerBase from "../helpers/eventListenerBase";
import { MyDraftMessage } from "./appManagers/appDraftsManager"; import { MyDraftMessage } from "./appManagers/appDraftsManager";
import { MOUNT_CLASS_TO } from "../config/debug"; import { MOUNT_CLASS_TO } from "../config/debug";
type BroadcastEvents = { export type BroadcastEvents = {
'user_update': number, 'user_update': number,
'user_auth': UserAuth, 'user_auth': UserAuth,
'peer_changed': number, 'peer_changed': number,

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

@ -520,7 +520,7 @@
} }
hr { hr {
margin-bottom: 1.5rem; margin-bottom: 1rem;
} }
.scroll-wrapper { .scroll-wrapper {
@ -545,7 +545,9 @@
font-size: 14px; font-size: 14px;
line-height: 1.3; line-height: 1.3;
} }
}
.edit-folder-container {
.sidebar-left-h2 { .sidebar-left-h2 {
padding: 7px 24px 15px 24px; padding: 7px 24px 15px 24px;
@ -556,11 +558,22 @@
} }
.chat-folders-container { .chat-folders-container {
.sidebar-left-section {
&:not(:last-child) {
padding-bottom: 0;
}
/* &-name {
padding-top: .5rem;
padding-bottom: .5rem;
} */
}
.btn-primary { .btn-primary {
width: 160px; width: 160px;
height: 40px; height: 40px;
align-items: center; align-items: center;
margin: 15px auto 24px; margin: 15px auto 1rem;
border-radius: 30px; border-radius: 30px;
padding: 0 12px; padding: 0 12px;
display: flex; display: flex;
@ -571,42 +584,17 @@
margin-right: 6px; margin-right: 6px;
} }
// .folders-container { .row {
// padding: 0 16px;
// }
.category {
padding: 7px 24px 11px 24px;
display: flex;
//padding-bottom: 11px;
justify-content: space-between;
cursor: pointer;
position: relative;
margin-bottom: 10px;
overflow: hidden;
@include respond-to(handhelds) {
padding: 7px 16px 11px 16px;
}
p {
height: unset;
justify-content: flex-start;
margin: 0;
}
p:last-child {
color: #707579;
font-size: 14px;
line-height: 20px;
}
.btn-primary { .btn-primary {
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
width: 52px; width: 52px;
transition: width 0.2s; transition: width 0.2s;
margin: 5px 0 0 0; margin: 0;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
body.animation-level-0 & { body.animation-level-0 & {
transition: none; transition: none;
@ -656,7 +644,7 @@
} }
.user-caption { .user-caption {
padding: 6px 28px; padding: 3px 28px 6px;
} }
p span { p span {
@ -699,8 +687,8 @@
li > .rp { li > .rp {
margin: 0 .5rem; margin: 0 .5rem;
padding: 7px .75rem !important; padding: 7px .75rem !important;
height: 3.875rem; height: 3.75rem;
max-height: 3.875rem; max-height: 3.75rem;
@include respond-to(handhelds) { @include respond-to(handhelds) {
margin: 0; margin: 0;
@ -720,6 +708,13 @@
} }
} }
.popup-forward {
li > .rp {
height: 3.875rem !important;
max-height: 3.875rem !important;
}
}
.included-chatlist-container { .included-chatlist-container {
.sidebar-left-h2 { .sidebar-left-h2 {
padding: 6px 24px 8px 24px; padding: 6px 24px 8px 24px;
@ -844,14 +839,24 @@
&-name { &-name {
padding: 1rem; padding: 1rem;
@include respond-to(handhelds) {
padding: .5rem 1rem;
font-size: .875rem;
}
} }
&-caption { &-caption {
margin-top: 1rem; margin-top: 1rem;
font-size: .875rem; font-size: .875rem;
color: #707579; color: #707579;
line-height: 1.2; line-height: 1.3125;
padding: 0 1rem; padding: 0 1rem;
@include respond-to(handhelds) {
margin: .5rem;
font-size: .875rem;
}
} }
.checkbox-field, .radio-field { .checkbox-field, .radio-field {
@ -1052,6 +1057,11 @@
margin-top: -.375rem; margin-top: -.375rem;
font-size: .875rem; font-size: .875rem;
} }
ul {
margin-top: .3125rem;
padding: 0 3px;
}
} }
.notifications-container { .notifications-container {