MrBesen/tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor new channel & new group tabs

Browse Source
This commit is contained in:
morethanwords 2021-01-02 12:59:38 +04:00
parent b7358cf854
commit d40c065ac3
8 changed files with 66 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/avatarEdit.ts
View File

@ -12,6 +12,7 @@ export default class AvatarEdit {
this.container.classList.add('avatar-edit');
this.canvas = document.createElement('canvas');
this.canvas.classList.add('avatar-edit-canvas');
this.icon = document.createElement('span');
this.icon.classList.add('tgico', 'tgico-cameraadd');
@ -22,4 +23,9 @@ export default class AvatarEdit {
new PopupAvatar().open(this.canvas, onChange);
});
}
public clear() {
const ctx = this.canvas.getContext('2d');
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

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

@ -29,19 +29,15 @@ import apiManagerProxy from "../../lib/mtproto/mtprotoworker";
import AppSearchSuper from "../appSearchSuper.";
import { DateData, fillTipDates } from "../../helpers/date";
const newChannelTab = new AppNewChannelTab();
const addMembersTab = new AppAddMembersTab();
const contactsTab = new AppContactsTab();
const newGroupTab = new AppNewGroupTab();
const archivedTab = new AppArchivedTab();
export class AppSidebarLeft extends SidebarSlider {
public static SLIDERITEMSIDS = {
archived: 1,
contacts: 2,
newChannel: 3,
addMembers: 4,
newGroup: 5
addMembers: 3
};
private toolsBtn: HTMLButtonElement;
@ -88,10 +84,8 @@ export class AppSidebarLeft extends SidebarSlider {
Object.assign(this.tabs, {
[AppSidebarLeft.SLIDERITEMSIDS.archived]: archivedTab,
[AppSidebarLeft.SLIDERITEMSIDS.newChannel]: newChannelTab,
[AppSidebarLeft.SLIDERITEMSIDS.contacts]: contactsTab,
[AppSidebarLeft.SLIDERITEMSIDS.addMembers]: addMembersTab,
[AppSidebarLeft.SLIDERITEMSIDS.newGroup]: newGroupTab
[AppSidebarLeft.SLIDERITEMSIDS.addMembers]: addMembersTab
});
//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.archivedTab = archivedTab;
this.newChannelTab = newChannelTab;
this.newChannelTab = new AppNewChannelTab(this);
this.addMembersTab = addMembersTab;
this.contactsTab = contactsTab;
this.newGroupTab = newGroupTab;
this.newGroupTab = new AppNewGroupTab(this);
this.settingsTab = new AppSettingsTab(this);
this.chatFoldersTab = new AppChatFoldersTab(appMessagesManager, appPeersManager, this, apiManagerProxy, rootScope);
this.editFolderTab = new AppEditFolderTab(this);
@ -144,7 +138,7 @@ export class AppSidebarLeft extends SidebarSlider {
});
attachClickEvent(this.newButtons.channel, (e) => {
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newChannel);
this.newChannelTab.open();
});
[this.newButtons.group, this.buttons.newGroup].forEach(btn => {

42
src/components/sidebarLeft/tabs/newChannel.ts
View File

@ -4,24 +4,28 @@ import appChatsManager from "../../../lib/appManagers/appChatsManager";
import Button from "../../button";
import InputField from "../../inputField";
import PopupAvatar from "../../popups/avatar";
import { SliderTab } from "../../slider";
import { SliderTab, SliderSuperTab } from "../../slider";
import AvatarEdit from "../../avatarEdit";
export default class AppNewChannelTab implements SliderTab {
private container = document.querySelector('.new-channel-container') as HTMLDivElement;
export default class AppNewChannelTab extends SliderSuperTab {
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
private uploadAvatar: () => Promise<InputFile> = null;
private channelNameInputField: InputField;
private channelDescriptionInputField: InputField;
private nextBtn: HTMLButtonElement;
private avatarEdit: AvatarEdit;
constructor() {
const content = this.container.querySelector('.sidebar-content');
constructor(appSidebarLeft: AppSidebarLeft) {
super(appSidebarLeft);
}
this.container.querySelector('.avatar-edit').addEventListener('click', () => {
new PopupAvatar().open(this.canvas, (_upload) => {
this.uploadAvatar = _upload;
});
private init() {
this.container.classList.add('new-channel-container');
this.title.innerText = 'New Channel';
this.avatarEdit = new AvatarEdit((_upload) => {
this.uploadAvatar = _upload;
});
const inputWrapper = document.createElement('div');
@ -52,9 +56,7 @@ export default class AppNewChannelTab implements SliderTab {
caption.classList.add('caption');
caption.innerText = 'You can provide an optional description for your channel.';
this.nextBtn = Button('btn-corner btn-circle', {icon: 'next'});
content.append(inputWrapper, caption, this.nextBtn);
this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
this.nextBtn.addEventListener('click', () => {
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);
});
});
this.content.append(this.nextBtn);
this.scrollable.append(this.avatarEdit.container, inputWrapper, caption);
}
public onCloseAfterTimeout() {
let ctx = this.canvas.getContext('2d');
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.avatarEdit.clear();
this.uploadAvatar = null;
this.channelNameInputField.value = '';
this.channelDescriptionInputField.value = '';
this.nextBtn.disabled = false;
}
onOpen() {
if(this.init) {
this.init();
this.init = null;
}
}
}

44
src/components/sidebarLeft/tabs/newGroup.ts
View File

@ -8,23 +8,28 @@ import Button from "../../button";
import InputField from "../../inputField";
import PopupAvatar from "../../popups/avatar";
import Scrollable from "../../scrollable";
import { SliderTab } from "../../slider";
import { SliderSuperTab } from "../../slider";
import AvatarEdit from "../../avatarEdit";
export default class AppNewGroupTab implements SliderTab {
private container = document.querySelector('.new-group-container') as HTMLDivElement;
private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement;
export default class AppNewGroupTab extends SliderSuperTab {
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
private searchGroup = new SearchGroup(' ', 'contacts', true, 'new-group-members disable-hover', false);
private avatarEdit: AvatarEdit;
private uploadAvatar: () => Promise<InputFile> = null;
private userIds: number[];
private nextBtn: HTMLButtonElement;
private groupNameInputField: InputField;
constructor() {
this.container.querySelector('.avatar-edit').addEventListener('click', () => {
new PopupAvatar().open(this.canvas, (_upload) => {
this.uploadAvatar = _upload;
});
constructor(appSidebarLeft: AppSidebarLeft) {
super(appSidebarLeft);
}
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');
@ -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 = Button('btn-corner btn-circle', {icon: 'next'});
this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
this.nextBtn.addEventListener('click', () => {
const title = this.groupNameInputField.value;
@ -55,6 +60,7 @@ export default class AppNewGroupTab implements SliderTab {
});
}
appSidebarLeft.removeTabFromHistory(this.id);
appSidebarLeft.selectTab(0);
});
});
@ -63,9 +69,8 @@ export default class AppNewGroupTab implements SliderTab {
chatsContainer.classList.add('chatlist-container');
chatsContainer.append(this.searchGroup.container);
const scrollable = new Scrollable(chatsContainer);
this.contentDiv.append(inputWrapper, chatsContainer, this.nextBtn);
this.content.append(this.nextBtn);
this.scrollable.append(this.avatarEdit.container, inputWrapper, chatsContainer);
}
public onClose() {
@ -74,20 +79,21 @@ export default class AppNewGroupTab implements SliderTab {
public onCloseAfterTimeout() {
this.searchGroup.clear();
const ctx = this.canvas.getContext('2d');
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.avatarEdit.clear();
this.uploadAvatar = null;
this.groupNameInputField.value = '';
this.nextBtn.disabled = false;
this.searchGroup.clear();
}
public init(userIds: number[]) {
if(this.construct) {
this.construct();
this.construct = null;
}
this.userIds = userIds;
appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newGroup);
this.open();
this.userIds.forEach(userId => {
let {dom} = appDialogsManager.addDialogNew({
dialog: userId,

24
src/index.hbs
View File

@ -187,18 +187,6 @@
</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-header">
<button class="btn-icon tgico-back sidebar-close-button"></button>
@ -208,18 +196,6 @@
<button class="btn-circle rp btn-corner tgico-next"></button>
</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 class="main-column" id="column-center"></div>

2
src/scss/partials/_input.scss
View File

@ -125,7 +125,7 @@
}
&: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;
opacity: 1;
}

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

@ -466,12 +466,6 @@
}
.edit-folder-container {
.input-wrapper {
width: 380px;
margin: 0 auto;
flex: 0 0 auto;
}
.folder-category-button:nth-child(n+2) {
pointer-events: none;
}
@ -657,11 +651,11 @@
}
.sidebar-left-h2 {
padding: 21px 24px 8px 24px;
padding: 21px 24px 8px;
@include respond-to(handhelds) {
width: 100%;
padding: 21px 16px 8px 16px;
padding: 21px 16px 8px;
}
}

7
src/scss/partials/_sidebar.scss
View File

@ -25,12 +25,8 @@
&__title {
flex: 1;
font-weight: 500;
padding-left: 22px;
padding-left: 24px;
font-size: 20px;
@include respond-to(handhelds) {
padding-left: 24px;
}
}
.btn-icon + .btn-icon {
@ -39,7 +35,6 @@
}
&-close-button {
padding-left: 10px;
overflow: inherit !important;
}