Browse Source

Active sessions layout

Fix row layout
master
Eduard Kuzmenko 4 years ago
parent
commit
0330059dd0
  1. 19
      src/components/row.ts
  2. 76
      src/components/sidebarLeft/tabs/activeSessions.ts
  3. 5
      src/components/sidebarLeft/tabs/privacyAndSecurity.ts
  4. 8
      src/scss/partials/_button.scss
  5. 54
      src/scss/partials/_leftSidebar.scss
  6. 37
      src/scss/style.scss

19
src/components/row.ts

@ -20,6 +20,7 @@ export default class Row { @@ -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 { @@ -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) {

76
src/components/sidebarLeft/tabs/activeSessions.ts

@ -0,0 +1,76 @@ @@ -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);
}
}
}

5
src/components/sidebarLeft/tabs/privacyAndSecurity.ts

@ -13,6 +13,7 @@ import AppPrivacyProfilePhotoTab from "./privacy/profilePhoto"; @@ -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 { @@ -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);

8
src/scss/partials/_button.scss

@ -257,10 +257,16 @@ @@ -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();

54
src/scss/partials/_leftSidebar.scss

@ -484,14 +484,7 @@ @@ -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 @@ @@ -502,7 +495,7 @@
padding: 0 .4375rem;
@include respond-to(handhelds) {
margin-top: 0.6875rem;
margin-top: .6875rem;
padding: 0;
}
}
@ -838,11 +831,11 @@ @@ -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 @@ @@ -850,7 +843,7 @@
}
&-name {
padding: 1rem .875rem;
padding: 1rem;
}
&-caption {
@ -858,7 +851,7 @@ @@ -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 @@ @@ -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 @@ @@ -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;
}
}

37
src/scss/style.scss

@ -1089,26 +1089,47 @@ middle-ellipsis-element { @@ -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 { @@ -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;
}
}

Loading…
Cancel
Save