Refactor new channel & new group tabs
This commit is contained in:
parent
26999987db
commit
158a242193
@ -12,6 +12,7 @@ export default class AvatarEdit {
|
|||||||
this.container.classList.add('avatar-edit');
|
this.container.classList.add('avatar-edit');
|
||||||
|
|
||||||
this.canvas = document.createElement('canvas');
|
this.canvas = document.createElement('canvas');
|
||||||
|
this.canvas.classList.add('avatar-edit-canvas');
|
||||||
|
|
||||||
this.icon = document.createElement('span');
|
this.icon = document.createElement('span');
|
||||||
this.icon.classList.add('tgico', 'tgico-cameraadd');
|
this.icon.classList.add('tgico', 'tgico-cameraadd');
|
||||||
@ -22,4 +23,9 @@ export default class AvatarEdit {
|
|||||||
new PopupAvatar().open(this.canvas, onChange);
|
new PopupAvatar().open(this.canvas, onChange);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public clear() {
|
||||||
|
const ctx = this.canvas.getContext('2d');
|
||||||
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
}
|
||||||
}
|
}
|
@ -29,19 +29,15 @@ import apiManagerProxy from "../../lib/mtproto/mtprotoworker";
|
|||||||
import AppSearchSuper from "../appSearchSuper.";
|
import AppSearchSuper from "../appSearchSuper.";
|
||||||
import { DateData, fillTipDates } from "../../helpers/date";
|
import { DateData, fillTipDates } from "../../helpers/date";
|
||||||
|
|
||||||
const newChannelTab = new AppNewChannelTab();
|
|
||||||
const addMembersTab = new AppAddMembersTab();
|
const addMembersTab = new AppAddMembersTab();
|
||||||
const contactsTab = new AppContactsTab();
|
const contactsTab = new AppContactsTab();
|
||||||
const newGroupTab = new AppNewGroupTab();
|
|
||||||
const archivedTab = new AppArchivedTab();
|
const archivedTab = new AppArchivedTab();
|
||||||
|
|
||||||
export class AppSidebarLeft extends SidebarSlider {
|
export class AppSidebarLeft extends SidebarSlider {
|
||||||
public static SLIDERITEMSIDS = {
|
public static SLIDERITEMSIDS = {
|
||||||
archived: 1,
|
archived: 1,
|
||||||
contacts: 2,
|
contacts: 2,
|
||||||
newChannel: 3,
|
addMembers: 3
|
||||||
addMembers: 4,
|
|
||||||
newGroup: 5
|
|
||||||
};
|
};
|
||||||
|
|
||||||
private toolsBtn: HTMLButtonElement;
|
private toolsBtn: HTMLButtonElement;
|
||||||
@ -88,10 +84,8 @@ export class AppSidebarLeft extends SidebarSlider {
|
|||||||
|
|
||||||
Object.assign(this.tabs, {
|
Object.assign(this.tabs, {
|
||||||
[AppSidebarLeft.SLIDERITEMSIDS.archived]: archivedTab,
|
[AppSidebarLeft.SLIDERITEMSIDS.archived]: archivedTab,
|
||||||
[AppSidebarLeft.SLIDERITEMSIDS.newChannel]: newChannelTab,
|
|
||||||
[AppSidebarLeft.SLIDERITEMSIDS.contacts]: contactsTab,
|
[AppSidebarLeft.SLIDERITEMSIDS.contacts]: contactsTab,
|
||||||
[AppSidebarLeft.SLIDERITEMSIDS.addMembers]: addMembersTab,
|
[AppSidebarLeft.SLIDERITEMSIDS.addMembers]: addMembersTab
|
||||||
[AppSidebarLeft.SLIDERITEMSIDS.newGroup]: newGroupTab
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//this._selectTab(0); // make first tab as default
|
//this._selectTab(0); // make first tab as default
|
||||||
@ -104,10 +98,10 @@ export class AppSidebarLeft extends SidebarSlider {
|
|||||||
this.backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
|
this.backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
|
||||||
|
|
||||||
this.archivedTab = archivedTab;
|
this.archivedTab = archivedTab;
|
||||||
this.newChannelTab = newChannelTab;
|
this.newChannelTab = new AppNewChannelTab(this);
|
||||||
this.addMembersTab = addMembersTab;
|
this.addMembersTab = addMembersTab;
|
||||||
this.contactsTab = contactsTab;
|
this.contactsTab = contactsTab;
|
||||||
this.newGroupTab = newGroupTab;
|
this.newGroupTab = new AppNewGroupTab(this);
|
||||||
this.settingsTab = new AppSettingsTab(this);
|
this.settingsTab = new AppSettingsTab(this);
|
||||||
this.chatFoldersTab = new AppChatFoldersTab(appMessagesManager, appPeersManager, this, apiManagerProxy, rootScope);
|
this.chatFoldersTab = new AppChatFoldersTab(appMessagesManager, appPeersManager, this, apiManagerProxy, rootScope);
|
||||||
this.editFolderTab = new AppEditFolderTab(this);
|
this.editFolderTab = new AppEditFolderTab(this);
|
||||||
@ -144,7 +138,7 @@ export class AppSidebarLeft extends SidebarSlider {
|
|||||||
});
|
});
|
||||||
|
|
||||||
attachClickEvent(this.newButtons.channel, (e) => {
|
attachClickEvent(this.newButtons.channel, (e) => {
|
||||||
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newChannel);
|
this.newChannelTab.open();
|
||||||
});
|
});
|
||||||
|
|
||||||
[this.newButtons.group, this.buttons.newGroup].forEach(btn => {
|
[this.newButtons.group, this.buttons.newGroup].forEach(btn => {
|
||||||
|
@ -4,24 +4,28 @@ import appChatsManager from "../../../lib/appManagers/appChatsManager";
|
|||||||
import Button from "../../button";
|
import Button from "../../button";
|
||||||
import InputField from "../../inputField";
|
import InputField from "../../inputField";
|
||||||
import PopupAvatar from "../../popups/avatar";
|
import PopupAvatar from "../../popups/avatar";
|
||||||
import { SliderTab } from "../../slider";
|
import { SliderTab, SliderSuperTab } from "../../slider";
|
||||||
|
import AvatarEdit from "../../avatarEdit";
|
||||||
|
|
||||||
export default class AppNewChannelTab implements SliderTab {
|
export default class AppNewChannelTab extends SliderSuperTab {
|
||||||
private container = document.querySelector('.new-channel-container') as HTMLDivElement;
|
|
||||||
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
|
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
|
||||||
private uploadAvatar: () => Promise<InputFile> = null;
|
private uploadAvatar: () => Promise<InputFile> = null;
|
||||||
|
|
||||||
private channelNameInputField: InputField;
|
private channelNameInputField: InputField;
|
||||||
private channelDescriptionInputField: InputField;
|
private channelDescriptionInputField: InputField;
|
||||||
private nextBtn: HTMLButtonElement;
|
private nextBtn: HTMLButtonElement;
|
||||||
|
private avatarEdit: AvatarEdit;
|
||||||
|
|
||||||
constructor() {
|
constructor(appSidebarLeft: AppSidebarLeft) {
|
||||||
const content = this.container.querySelector('.sidebar-content');
|
super(appSidebarLeft);
|
||||||
|
}
|
||||||
|
|
||||||
this.container.querySelector('.avatar-edit').addEventListener('click', () => {
|
private init() {
|
||||||
new PopupAvatar().open(this.canvas, (_upload) => {
|
this.container.classList.add('new-channel-container');
|
||||||
this.uploadAvatar = _upload;
|
this.title.innerText = 'New Channel';
|
||||||
});
|
|
||||||
|
this.avatarEdit = new AvatarEdit((_upload) => {
|
||||||
|
this.uploadAvatar = _upload;
|
||||||
});
|
});
|
||||||
|
|
||||||
const inputWrapper = document.createElement('div');
|
const inputWrapper = document.createElement('div');
|
||||||
@ -52,9 +56,7 @@ export default class AppNewChannelTab implements SliderTab {
|
|||||||
caption.classList.add('caption');
|
caption.classList.add('caption');
|
||||||
caption.innerText = 'You can provide an optional description for your channel.';
|
caption.innerText = 'You can provide an optional description for your channel.';
|
||||||
|
|
||||||
this.nextBtn = Button('btn-corner btn-circle', {icon: 'next'});
|
this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
|
||||||
|
|
||||||
content.append(inputWrapper, caption, this.nextBtn);
|
|
||||||
|
|
||||||
this.nextBtn.addEventListener('click', () => {
|
this.nextBtn.addEventListener('click', () => {
|
||||||
const title = this.channelNameInputField.value;
|
const title = this.channelNameInputField.value;
|
||||||
@ -68,19 +70,27 @@ export default class AppNewChannelTab implements SliderTab {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
appSidebarLeft.removeTabFromHistory(AppSidebarLeft.SLIDERITEMSIDS.newChannel);
|
appSidebarLeft.removeTabFromHistory(this.id);
|
||||||
appSidebarLeft.addMembersTab.init(channelId, 'channel', true);
|
appSidebarLeft.addMembersTab.init(channelId, 'channel', true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.content.append(this.nextBtn);
|
||||||
|
this.scrollable.append(this.avatarEdit.container, inputWrapper, caption);
|
||||||
}
|
}
|
||||||
|
|
||||||
public onCloseAfterTimeout() {
|
public onCloseAfterTimeout() {
|
||||||
let ctx = this.canvas.getContext('2d');
|
this.avatarEdit.clear();
|
||||||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
|
|
||||||
this.uploadAvatar = null;
|
this.uploadAvatar = null;
|
||||||
this.channelNameInputField.value = '';
|
this.channelNameInputField.value = '';
|
||||||
this.channelDescriptionInputField.value = '';
|
this.channelDescriptionInputField.value = '';
|
||||||
this.nextBtn.disabled = false;
|
this.nextBtn.disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onOpen() {
|
||||||
|
if(this.init) {
|
||||||
|
this.init();
|
||||||
|
this.init = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
@ -8,23 +8,28 @@ import Button from "../../button";
|
|||||||
import InputField from "../../inputField";
|
import InputField from "../../inputField";
|
||||||
import PopupAvatar from "../../popups/avatar";
|
import PopupAvatar from "../../popups/avatar";
|
||||||
import Scrollable from "../../scrollable";
|
import Scrollable from "../../scrollable";
|
||||||
import { SliderTab } from "../../slider";
|
import { SliderSuperTab } from "../../slider";
|
||||||
|
import AvatarEdit from "../../avatarEdit";
|
||||||
|
|
||||||
export default class AppNewGroupTab implements SliderTab {
|
export default class AppNewGroupTab extends SliderSuperTab {
|
||||||
private container = document.querySelector('.new-group-container') as HTMLDivElement;
|
|
||||||
private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement;
|
|
||||||
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
|
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
|
||||||
private searchGroup = new SearchGroup(' ', 'contacts', true, 'new-group-members disable-hover', false);
|
private searchGroup = new SearchGroup(' ', 'contacts', true, 'new-group-members disable-hover', false);
|
||||||
|
private avatarEdit: AvatarEdit;
|
||||||
private uploadAvatar: () => Promise<InputFile> = null;
|
private uploadAvatar: () => Promise<InputFile> = null;
|
||||||
private userIds: number[];
|
private userIds: number[];
|
||||||
private nextBtn: HTMLButtonElement;
|
private nextBtn: HTMLButtonElement;
|
||||||
private groupNameInputField: InputField;
|
private groupNameInputField: InputField;
|
||||||
|
|
||||||
constructor() {
|
constructor(appSidebarLeft: AppSidebarLeft) {
|
||||||
this.container.querySelector('.avatar-edit').addEventListener('click', () => {
|
super(appSidebarLeft);
|
||||||
new PopupAvatar().open(this.canvas, (_upload) => {
|
}
|
||||||
this.uploadAvatar = _upload;
|
|
||||||
});
|
private construct() {
|
||||||
|
this.container.classList.add('new-group-container');
|
||||||
|
this.title.innerText = 'New Group';
|
||||||
|
|
||||||
|
this.avatarEdit = new AvatarEdit((_upload) => {
|
||||||
|
this.uploadAvatar = _upload;
|
||||||
});
|
});
|
||||||
|
|
||||||
const inputWrapper = document.createElement('div');
|
const inputWrapper = document.createElement('div');
|
||||||
@ -42,7 +47,7 @@ export default class AppNewGroupTab implements SliderTab {
|
|||||||
this.nextBtn.classList.toggle('is-visible', !!value.length && !this.groupNameInputField.input.classList.contains('error'));
|
this.nextBtn.classList.toggle('is-visible', !!value.length && !this.groupNameInputField.input.classList.contains('error'));
|
||||||
});
|
});
|
||||||
|
|
||||||
this.nextBtn = Button('btn-corner btn-circle', {icon: 'next'});
|
this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
|
||||||
|
|
||||||
this.nextBtn.addEventListener('click', () => {
|
this.nextBtn.addEventListener('click', () => {
|
||||||
const title = this.groupNameInputField.value;
|
const title = this.groupNameInputField.value;
|
||||||
@ -55,6 +60,7 @@ export default class AppNewGroupTab implements SliderTab {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
appSidebarLeft.removeTabFromHistory(this.id);
|
||||||
appSidebarLeft.selectTab(0);
|
appSidebarLeft.selectTab(0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -63,9 +69,8 @@ export default class AppNewGroupTab implements SliderTab {
|
|||||||
chatsContainer.classList.add('chatlist-container');
|
chatsContainer.classList.add('chatlist-container');
|
||||||
chatsContainer.append(this.searchGroup.container);
|
chatsContainer.append(this.searchGroup.container);
|
||||||
|
|
||||||
const scrollable = new Scrollable(chatsContainer);
|
this.content.append(this.nextBtn);
|
||||||
|
this.scrollable.append(this.avatarEdit.container, inputWrapper, chatsContainer);
|
||||||
this.contentDiv.append(inputWrapper, chatsContainer, this.nextBtn);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public onClose() {
|
public onClose() {
|
||||||
@ -74,20 +79,21 @@ export default class AppNewGroupTab implements SliderTab {
|
|||||||
|
|
||||||
public onCloseAfterTimeout() {
|
public onCloseAfterTimeout() {
|
||||||
this.searchGroup.clear();
|
this.searchGroup.clear();
|
||||||
|
this.avatarEdit.clear();
|
||||||
const ctx = this.canvas.getContext('2d');
|
|
||||||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
|
|
||||||
this.uploadAvatar = null;
|
this.uploadAvatar = null;
|
||||||
this.groupNameInputField.value = '';
|
this.groupNameInputField.value = '';
|
||||||
this.nextBtn.disabled = false;
|
this.nextBtn.disabled = false;
|
||||||
this.searchGroup.clear();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public init(userIds: number[]) {
|
public init(userIds: number[]) {
|
||||||
|
if(this.construct) {
|
||||||
|
this.construct();
|
||||||
|
this.construct = null;
|
||||||
|
}
|
||||||
|
|
||||||
this.userIds = userIds;
|
this.userIds = userIds;
|
||||||
|
|
||||||
appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newGroup);
|
this.open();
|
||||||
this.userIds.forEach(userId => {
|
this.userIds.forEach(userId => {
|
||||||
let {dom} = appDialogsManager.addDialogNew({
|
let {dom} = appDialogsManager.addDialogNew({
|
||||||
dialog: userId,
|
dialog: userId,
|
||||||
|
@ -187,18 +187,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-slider-item new-channel-container">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<button class="btn-icon tgico-back sidebar-close-button"></button>
|
|
||||||
<div class="sidebar-header__title">New Channel</div>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-content">
|
|
||||||
<div class="avatar-edit">
|
|
||||||
<canvas class="avatar-edit-canvas"></canvas>
|
|
||||||
<span class="tgico tgico-cameraadd"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-slider-item addmembers-container">
|
<div class="sidebar-slider-item addmembers-container">
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<button class="btn-icon tgico-back sidebar-close-button"></button>
|
<button class="btn-icon tgico-back sidebar-close-button"></button>
|
||||||
@ -208,18 +196,6 @@
|
|||||||
<button class="btn-circle rp btn-corner tgico-next"></button>
|
<button class="btn-circle rp btn-corner tgico-next"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-slider-item new-group-container">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<button class="btn-icon tgico-back sidebar-close-button"></button>
|
|
||||||
<div class="sidebar-header__title">New Group</div>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-content">
|
|
||||||
<div class="avatar-edit">
|
|
||||||
<canvas class="avatar-edit-canvas"></canvas>
|
|
||||||
<span class="tgico tgico-cameraadd"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main-column" id="column-center"></div>
|
<div class="main-column" id="column-center"></div>
|
||||||
|
@ -125,7 +125,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label {
|
&:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label {
|
||||||
transform: translate(-.215rem, -2.375rem) scale(0.75);
|
transform: translate(-.3125rem, -2.375rem) scale(0.75);
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
@ -466,12 +466,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.edit-folder-container {
|
.edit-folder-container {
|
||||||
.input-wrapper {
|
|
||||||
width: 380px;
|
|
||||||
margin: 0 auto;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-category-button:nth-child(n+2) {
|
.folder-category-button:nth-child(n+2) {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@ -657,11 +651,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-left-h2 {
|
.sidebar-left-h2 {
|
||||||
padding: 21px 24px 8px 24px;
|
padding: 21px 24px 8px;
|
||||||
|
|
||||||
@include respond-to(handhelds) {
|
@include respond-to(handhelds) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 21px 16px 8px 16px;
|
padding: 21px 16px 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,12 +25,8 @@
|
|||||||
&__title {
|
&__title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding-left: 22px;
|
padding-left: 24px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
||||||
@include respond-to(handhelds) {
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon + .btn-icon {
|
.btn-icon + .btn-icon {
|
||||||
@ -39,7 +35,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-close-button {
|
&-close-button {
|
||||||
padding-left: 10px;
|
|
||||||
overflow: inherit !important;
|
overflow: inherit !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user