diff --git a/src/components/row.ts b/src/components/row.ts index 10361e3c..cdd1d3d9 100644 --- a/src/components/row.ts +++ b/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) { diff --git a/src/components/sidebarLeft/tabs/activeSessions.ts b/src/components/sidebarLeft/tabs/activeSessions.ts new file mode 100644 index 00000000..77defaf5 --- /dev/null +++ b/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); + } + } +} diff --git a/src/components/sidebarLeft/tabs/privacyAndSecurity.ts b/src/components/sidebarLeft/tabs/privacyAndSecurity.ts index bbc68c82..83154a7a 100644 --- a/src/components/sidebarLeft/tabs/privacyAndSecurity.ts +++ b/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); diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 48248d1e..7613c9b9 100644 --- a/src/scss/partials/_button.scss +++ b/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(); diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 3b45eaca..6bbf2c30 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/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) { - margin: 0 .625rem; - } + //@include respond-to(not-handhelds) { + 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 { - padding-bottom: .1875rem; + .sidebar-left-section.no-delimiter { + 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 { - &:first-child { - margin-top: 0; +.active-sessions-container { + .row { + 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; } } diff --git a/src/scss/style.scss b/src/scss/style.scss index f76d208b..8bf0f2a3 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1089,26 +1089,47 @@ middle-ellipsis-element { } .row { - min-height: 3.375rem; - margin-top: .5rem; + min-height: 3.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; - font-size: 14px !important; + color: var(--color-text-secondary) !important; + font-size: .875rem !important; } }