diff --git a/src/components/avatarEdit.ts b/src/components/avatarEdit.ts index 6082b8dc..da9c13ce 100644 --- a/src/components/avatarEdit.ts +++ b/src/components/avatarEdit.ts @@ -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); + } } \ No newline at end of file diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 95fc5cb5..1c015d76 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -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 => { diff --git a/src/components/sidebarLeft/tabs/newChannel.ts b/src/components/sidebarLeft/tabs/newChannel.ts index 0c2e71ae..45250469 100644 --- a/src/components/sidebarLeft/tabs/newChannel.ts +++ b/src/components/sidebarLeft/tabs/newChannel.ts @@ -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 = 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; + } + } } \ No newline at end of file diff --git a/src/components/sidebarLeft/tabs/newGroup.ts b/src/components/sidebarLeft/tabs/newGroup.ts index 9941991e..ecd6555b 100644 --- a/src/components/sidebarLeft/tabs/newGroup.ts +++ b/src/components/sidebarLeft/tabs/newGroup.ts @@ -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 = 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, diff --git a/src/index.hbs b/src/index.hbs index f9a987fd..ec4b3096 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -187,18 +187,6 @@ - -
diff --git a/src/scss/partials/_input.scss b/src/scss/partials/_input.scss index 58b33803..3e6ac95f 100644 --- a/src/scss/partials/_input.scss +++ b/src/scss/partials/_input.scss @@ -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; } diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index df8428f7..6688ba45 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -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; } } diff --git a/src/scss/partials/_sidebar.scss b/src/scss/partials/_sidebar.scss index 63c17def..c347fea2 100644 --- a/src/scss/partials/_sidebar.scss +++ b/src/scss/partials/_sidebar.scss @@ -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; }