Edit group layout

Fix input line height

src/components/sidebarRight/tabs/editGroup.ts

@@ -2,11 +2,17 @@ import { SliderSuperTab } from "../../slider"
 import InputField from "../../inputField";
 import EditPeer from "../../editPeer";
 import { SettingSection } from "../../sidebarLeft";
+import Row from "../../row";
+import CheckboxField from "../../checkboxField";
+import Button from "../../button";
+import appChatsManager from "../../../lib/appManagers/appChatsManager";
+import appProfileManager from "../../../lib/appManagers/appProfileManager";
 
 export default class AppEditGroupTab extends SliderSuperTab {
   private groupNameInputField: InputField;
   private descriptionInputField: InputField;
   private editPeer: EditPeer;
+  public peerId: number;
 
   protected init() {
     this.container.classList.add('edit-peer-container', 'edit-group-container');
@@ -29,19 +35,46 @@ export default class AppEditGroupTab extends SliderSuperTab {
         name: 'group-description',
         maxLength: 255
       });
-  
+      
+      this.groupNameInputField.setOriginalValue(appChatsManager.getChat(-this.peerId).title);
+
+      appProfileManager.getChatFull(-this.peerId).then(chatFull => {
+        this.descriptionInputField.setOriginalValue(chatFull.about);
+      });
+
       inputWrapper.append(this.groupNameInputField.container, this.descriptionInputField.container);
       
       inputFields.push(this.groupNameInputField, this.descriptionInputField);
 
       this.editPeer = new EditPeer({
-        peerId: -1408712018,
+        peerId: this.peerId,
         inputFields,
         listenerSetter: this.listenerSetter
       });
       this.content.append(this.editPeer.nextBtn);
 
-      section.content.append(this.editPeer.avatarEdit.container, inputWrapper);
+      const groupTypeRow = new Row({
+        title: 'Group Type',
+        subtitle: 'Private',
+        clickable: true,
+        icon: 'lock'
+      });
+
+      const permissionsRow = new Row({
+        title: 'Permissions',
+        subtitle: '8/8',
+        icon: 'permissions',
+        clickable: true
+      });
+
+      const administratorsRow = new Row({
+        title: 'Administrators',
+        subtitle: '5',
+        icon: 'admin',
+        clickable: true
+      });
+
+      section.content.append(this.editPeer.avatarEdit.container, inputWrapper, groupTypeRow.container, permissionsRow.container, administratorsRow.container);
 
       this.scrollable.append(section.container);
     }
@@ -50,12 +83,34 @@ export default class AppEditGroupTab extends SliderSuperTab {
       const section = new SettingSection({
 
       });
+
+      const membersRow = new Row({
+        title: 'Members',
+        subtitle: '2 500',
+        icon: 'newgroup',
+        clickable: true
+      });
+
+      const showChatHistoryCheckboxField = new CheckboxField({
+        text: 'Show chat history for new members',
+        checked: true
+      });
+
+      section.content.append(membersRow.container, showChatHistoryCheckboxField.label);
+
+      this.scrollable.append(section.container);
     }
 
     {
       const section = new SettingSection({
         
       });
+
+      const btnDelete = Button('btn-primary btn-transparent danger', {icon: 'delete', text: 'Delete Group'});
+
+      section.content.append(btnDelete);
+
+      this.scrollable.append(section.container);
     }
   }
 }

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -126,13 +126,19 @@ export default class AppSharedMediaTab implements SliderTab {
     });
 
     attachClickEvent(this.editBtn, (e) => {
+      let tab: AppEditGroupTab;
       if(appPeersManager.isAnyGroup(this.peerId)) {
-        new AppEditGroupTab(appSidebarRight).open();
+        tab = new AppEditGroupTab(appSidebarRight);
       } else if(this.peerId > 0) {
 
       } else {
 
       }
+
+      if(tab) {
+        tab.peerId = this.peerId;
+        tab.open();
+      }
     });
 
     this.container.prepend(this.closeBtn.parentElement);

src/scss/partials/_input.scss

@@ -59,7 +59,7 @@
   }
   
   &-input {
-    --padding: 1rem;
+    --padding: 1.0625rem;
     --padding-horizontal: 1rem;
     --border-width: 1px;
     --border-width-top: 2px;
@@ -73,12 +73,13 @@
     transition: .2s border-color;
     position: relative;
     z-index: 1;
+    line-height: 1.3125;
     //line-height: calc(54px - var(--border-width));
     /* overflow: hidden;
     white-space: nowrap; */
 
     @include respond-to(handhelds) {
-      --padding: .875rem;
+      --padding: .9375rem;
     }
 
     body.animation-level-0 & {

src/scss/partials/_leftSidebar.scss

@@ -451,13 +451,6 @@
     flex-direction: column;
   }
 
-  .avatar-edit {
-    width: 120px;
-    height: 120px;
-    margin: 1px auto 32px;
-    flex: 0 0 auto;
-  }
-
   .chatlist-container {
     flex: 1 1 auto;
   }

src/scss/partials/_rightSidebar.scss

@@ -768,3 +768,22 @@
     margin-top: -2.5px;
   }
 }
+
+.edit-peer-container {
+  .input-wrapper {
+    padding: 0 .75rem;
+    margin-bottom: .5625rem;
+  }
+
+  .sidebar-left-section {
+    padding-bottom: 0;
+
+    &:first-child {
+      padding-top: 0;
+    }
+  }
+
+  .checkbox-field {
+    margin: 0 1.1875rem;
+  }
+}

src/scss/partials/pages/_chats.scss

@@ -118,4 +118,11 @@
     border-style: solid;
     border-color: #DADCE0;
   }
-}
+
+  .avatar-edit {
+    width: 120px;
+    height: 120px;
+    margin: 1rem auto 2rem;
+    flex: 0 0 auto;
+  }
+}