Refactor new channel & new group tabs

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);
+  }
 }

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: 3
-    addMembers: 4,
-    newGroup: 5
   };
 
   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.addMembers]: addMembersTab
-      [AppSidebarLeft.SLIDERITEMSIDS.newGroup]: newGroupTab
     });
 
     //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 => {

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 {
+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 uploadAvatar: () => Promise<InputFile> = null;
 
   private channelNameInputField: InputField;
   private channelDescriptionInputField: InputField;
   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');
@@ -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'});
+    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
-
-    content.append(inputWrapper, caption, this.nextBtn);
 
     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');
+    this.avatarEdit.clear();
-    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
     this.uploadAvatar = null;
     this.channelNameInputField.value = '';
     this.channelDescriptionInputField.value = '';
     this.nextBtn.disabled = false;
   }
+
+  onOpen() {
+    if(this.init) {
+      this.init();
+      this.init = null;
+    }
+  }
 }

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 {
+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 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() {
+  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');
@@ -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.content.append(this.nextBtn);
-
+    this.scrollable.append(this.avatarEdit.container, inputWrapper, chatsContainer);
-    this.contentDiv.append(inputWrapper, chatsContainer, this.nextBtn);
   }
 
   public onClose() {
@@ -74,20 +79,21 @@ export default class AppNewGroupTab implements SliderTab {
 
   public onCloseAfterTimeout() {
     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.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,

src/index.hbs

@@ -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>

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;
     }

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;
     }
   }
 

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;
   }