Active sessions layout

Fix row layout

src/components/row.ts

@@ -20,6 +20,7 @@ export default class Row {
     radioField: Row['radioField'],
     checkboxField: Row['checkboxField'],
     title: string,
+    titleRight: string,
     clickable: boolean | ((e: Event) => void),
     navigationTab: SliderSuperTab
   }> = {}) {
@@ -46,10 +47,26 @@ export default class Row {
       }
     } else {
       if(options.title) {
+        let c: HTMLElement;
+        if(options.titleRight) {
+          c = document.createElement('div');
+          c.classList.add('row-title-row');
+          this.container.append(c);
+        } else {
+          c = this.container;
+        }
+
         this.title = document.createElement('div');
         this.title.classList.add('row-title');
         this.title.innerHTML = options.title;
-        this.container.append(this.title);
+        c.append(this.title);
+
+        if(options.titleRight) {
+          const titleRight = document.createElement('div');
+          titleRight.classList.add('row-title', 'row-title-right');
+          titleRight.innerHTML = options.titleRight;
+          c.append(titleRight);
+        }
       }
 
       if(options.icon) {

src/components/sidebarLeft/tabs/activeSessions.ts

@@ -0,0 +1,76 @@
+import { SliderSuperTab } from "../../slider";
+import { SettingSection } from "..";
+import Button from "../../button";
+import Row from "../../row";
+
+export default class AppActiveSessionsTab extends SliderSuperTab {
+  protected init() {
+    this.container.classList.add('active-sessions-container');
+    this.title.innerText = 'Active Sessions';
+
+    const Session = (options: {
+      application: string,
+      device: string,
+      ip: string,
+      location: string,
+      time?: string
+    }) => {
+      const row = new Row({
+        title: options.application,
+        subtitle: options.ip + ' - ' + options.location,
+        clickable: true,
+        titleRight: options.time
+      });
+
+      const midtitle = document.createElement('div');
+      midtitle.classList.add('row-midtitle');
+      midtitle.innerHTML = options.device;
+
+      row.subtitle.parentElement.insertBefore(midtitle, row.subtitle);
+
+      return row;
+    };
+
+    {
+      const section = new SettingSection({
+        name: 'Current Session'
+      });
+
+      const btnTerminate = Button('btn-primary btn-transparent danger', {icon: 'stop', text: 'Terminate all other sessions'});
+
+      const session = Session({
+        application: 'Telegram Web 1.0',
+        device: 'Safari, macOS',
+        ip: '216.3.128.12',
+        location: 'Paris, France'
+      });
+
+      section.content.append(session.container, btnTerminate);
+      this.scrollable.append(section.container);
+    }
+
+    {
+      const section = new SettingSection({
+        name: 'Other Sessions'
+      });
+
+      [Session({
+        application: 'Telegram iOS 5.12',
+        device: 'iPhone X, iOS 13.2',
+        ip: '216.3.128.12',
+        location: 'Paris, France',
+        time: '19:25'
+      }), Session({
+        application: 'Telegram Android 5.11',
+        device: 'Samsung Galaxy S9, Android 9P',
+        ip: '216.3.128.12',
+        location: 'Paris, France',
+        time: '16:34'
+      })].forEach(session => {
+        section.content.append(session.container);
+      });
+
+      this.scrollable.append(section.container);
+    }
+  }
+}

src/components/sidebarLeft/tabs/privacyAndSecurity.ts

@@ -13,6 +13,7 @@ import AppPrivacyProfilePhotoTab from "./privacy/profilePhoto";
 import AppPrivacyForwardMessagesTab from "./privacy/forwardMessages";
 import AppPrivacyAddToGroupsTab from "./privacy/addToGroups";
 import AppPrivacyCallsTab from "./privacy/calls";
+import AppActiveSessionsTab from "./activeSessions";
 
 export default class AppPrivacyAndSecurityTab extends SliderSuperTab {
   protected init() {
@@ -62,7 +63,9 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTab {
         icon: 'activesessions',
         title: 'Active Sessions',
         subtitle: '3 devices',
-        clickable: true
+        clickable: () => {
+          new AppActiveSessionsTab(this.slider).open();
+        }
       });
 
       section.content.append(blockedUsersRow.container, twoFactorRow.container, activeSessionRow.container);

src/scss/partials/_button.scss

@@ -257,10 +257,16 @@
   background-color: transparent;
   display: flex;
   align-items: center;
-  padding: 0 .875rem;
+  padding: 0 1rem;
+  height: 3.5rem;
   //width: auto;
   //text-transform: capitalize;
   font-weight: normal;
+  line-height: 1.3125; // * it centers the text
+
+  @include respond-to(handhelds) {
+    height: 3rem;
+  }
 
   @include hover-background-effect();
 

src/scss/partials/_leftSidebar.scss

@@ -484,14 +484,7 @@
 .settings-container {
   .profile {
     &-button {
-      display: flex;
-      padding: 0 1rem;
-      font-weight: normal;
-      text-transform: unset;
-      margin: 0 0 2px 0;
-
       @include respond-to(handhelds) {
-        height: 48px;
         border-radius: 0;
       }
     }
@@ -502,7 +495,7 @@
       padding: 0 .4375rem;
 
       @include respond-to(handhelds) {
-        margin-top: 0.6875rem;
+        margin-top: .6875rem;
         padding: 0;
       }
     }
@@ -838,11 +831,11 @@
     padding: .5rem 0 1rem;
   
     &-content {
-      margin: 0 .125rem;
+      //margin: 0 .125rem;
 
-      @include respond-to(not-handhelds) {
+      //@include respond-to(not-handhelds) {
-        margin: 0 .625rem;
+        margin: 0 .5rem;
-      }
+      //}
 
       > .btn-primary {
         margin: 0;
@@ -850,7 +843,7 @@
     }
   
     &-name {
-      padding: 1rem .875rem;
+      padding: 1rem;
     }
 
     &-caption {
@@ -858,7 +851,7 @@
       font-size: .875rem;
       color: #707579;
       line-height: 1.2;
-      padding: 0 .875rem;
+      padding: 0 1rem;
     }
 
     .checkbox-field, .radio-field {
@@ -977,8 +970,13 @@
 }
 
 .privacy-container {
-  .sidebar-left-section:first-child {
+  .sidebar-left-section.no-delimiter {
-    padding-bottom: .1875rem;
+    padding-bottom: 0;
+    padding-top: .75rem;
+  }
+
+  .sidebar-left-section:last-child {
+    padding-top: .4375rem;
   }
 
   /* .privacy-navigation-container {
@@ -1000,15 +998,29 @@
   }
 
   form {
-    padding: .0625rem 0 .125rem;
+    padding-bottom: .0625rem;
   }
+}
 
-  form .row {
+.active-sessions-container {
-    &:first-child {
+  .row {
-      margin-top: 0;
+    margin-top: 0;
+    padding-top: 1rem;
+    padding-bottom: .9375rem;
+
+    &-title-row {
+      align-items: flex-end;
     }
 
-    margin-top: .125rem;
+    &-title-right {
+      font-size: .75rem;
+      color: var(--color-text-secondary);
+      line-height: 1.5;
+    }
+  }
+
+  .sidebar-left-section:first-child {
+    padding-bottom: 0;
   }
 }
 

src/scss/style.scss

@@ -1089,26 +1089,47 @@ middle-ellipsis-element {
 }
 
 .row {
-  min-height: 3.375rem;
+  min-height: 3.5rem;
-  margin-top: .5rem;
   position: relative;
-  padding: .6875rem .875rem;
+  padding: .9375rem 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 
+  &-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .row-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1 1 auto;
+    }
+  }
+
   &-title {
     line-height: 1.3125;
+
+    &-right {
+      flex: 0 0 auto !important;
+      margin-left: 1rem;
+    }
+  }
+
+  &-midtitle {
+    font-size: .875rem;
   }
 
   &-with-padding {
-    padding-left: 4.375rem;
+    padding-left: 4.5rem;
 
     .row-title.tgico:before {
       position: absolute;
-      left: .875rem;
+      left: 1rem;
       font-size: 1.5rem;
-      color: #707579;
+      color: var(--color-text-secondary);
     }
   }
 
@@ -1126,8 +1147,8 @@ middle-ellipsis-element {
   }
 
   &-subtitle {
-    color: #707579 !important;
+    color: var(--color-text-secondary) !important;
-    font-size: 14px !important;
+    font-size: .875rem !important;
   }
 }