|
|
|
@ -9,47 +9,48 @@ import {
|
|
|
|
SessionButtonType,
|
|
|
|
SessionButtonType,
|
|
|
|
} from './SessionButton';
|
|
|
|
} from './SessionButton';
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
|
|
|
|
SessionIcon,
|
|
|
|
import { SessionSearchInput } from './SessionSearchInput';
|
|
|
|
SessionIconSize,
|
|
|
|
import { Session } from 'inspector';
|
|
|
|
SessionIconType,
|
|
|
|
|
|
|
|
} from './icon';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export enum SessionSettingCategory {
|
|
|
|
export enum SessionSettingCategory {
|
|
|
|
|
|
|
|
Account = 'account',
|
|
|
|
Privacy = 'privacy',
|
|
|
|
Privacy = 'privacy',
|
|
|
|
Notifications = 'notifications',
|
|
|
|
Notifications = 'notifications',
|
|
|
|
Devices = 'devices',
|
|
|
|
Devices = 'devices',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export interface Props {
|
|
|
|
export interface Props {}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export interface State {
|
|
|
|
export interface State {
|
|
|
|
settingCategory: SessionSettingCategory;
|
|
|
|
settingCategory: SessionSettingCategory;
|
|
|
|
|
|
|
|
searchQuery: string;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|
|
|
export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|
|
|
|
|
|
|
//private readonly updateSearchBound: (searchedString: string) => void;
|
|
|
|
|
|
|
|
|
|
|
|
public constructor(props: Props) {
|
|
|
|
public constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
this.state = {
|
|
|
|
settingCategory: SessionSettingCategory.Privacy,
|
|
|
|
settingCategory: SessionSettingCategory.Privacy,
|
|
|
|
|
|
|
|
searchQuery: '',
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
this.setCategory = this.setCategory.bind(this);
|
|
|
|
this.setCategory = this.setCategory.bind(this);
|
|
|
|
this.renderRows = this.renderRows.bind(this);
|
|
|
|
this.renderRows = this.renderRows.bind(this);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//this.updateSearchBound = this.updateSearch.bind(this);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public render(): JSX.Element {
|
|
|
|
public render(): JSX.Element {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="left-pane-setting-section">
|
|
|
|
<div className="left-pane-setting-section">
|
|
|
|
{this.renderHeader()}
|
|
|
|
{this.renderHeader()}
|
|
|
|
|
|
|
|
|
|
|
|
{this.renderSettings()}
|
|
|
|
{this.renderSettings()}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -62,67 +63,78 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|
|
|
null,
|
|
|
|
null,
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
undefined
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public renderRows () {
|
|
|
|
public renderRows(): JSX.Element {
|
|
|
|
|
|
|
|
|
|
|
|
const categories = this.getCategories();
|
|
|
|
const categories = this.getCategories();
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
{categories.map((item) => (
|
|
|
|
{categories.map(item => (
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
key={item.id}
|
|
|
|
key={item.id}
|
|
|
|
className={classNames('left-pane-setting-category-list-item', item.id === this.state.settingCategory ? 'active' : '')}
|
|
|
|
className={classNames(
|
|
|
|
onClick={() => this.setCategory(item.id)}
|
|
|
|
'left-pane-setting-category-list-item',
|
|
|
|
>
|
|
|
|
item.id === this.state.settingCategory ? 'active' : ''
|
|
|
|
<div>
|
|
|
|
)}
|
|
|
|
<strong>{ item.title }</strong>
|
|
|
|
onClick={() => this.setCategory(item.id)}
|
|
|
|
<br/>
|
|
|
|
>
|
|
|
|
<span className="text-subtle">
|
|
|
|
<div>
|
|
|
|
{item.description }
|
|
|
|
<strong>{item.title}</strong>
|
|
|
|
</span>
|
|
|
|
<br />
|
|
|
|
</div>
|
|
|
|
<span className="text-subtle">{item.description}</span>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
{ item.id === this.state.settingCategory &&
|
|
|
|
|
|
|
|
<SessionIcon
|
|
|
|
|
|
|
|
iconSize={SessionIconSize.Medium}
|
|
|
|
|
|
|
|
iconType={SessionIconType.Chevron}
|
|
|
|
|
|
|
|
iconRotation={270}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
{item.id === this.state.settingCategory && (
|
|
|
|
|
|
|
|
<SessionIcon
|
|
|
|
|
|
|
|
iconSize={SessionIconSize.Medium}
|
|
|
|
|
|
|
|
iconType={SessionIconType.Chevron}
|
|
|
|
|
|
|
|
iconRotation={270}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
))}
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public renderCategories() {
|
|
|
|
public renderCategories(): JSX.Element {
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="module-left-pane__list" key={0}>
|
|
|
|
<div className="module-left-pane__list" key={0}>
|
|
|
|
<div className="left-pane-setting-category-list">
|
|
|
|
<div className="left-pane-setting-category-list">
|
|
|
|
{this.renderRows()}
|
|
|
|
{this.renderRows()}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public renderSettings(): JSX.Element {
|
|
|
|
public renderSettings(): JSX.Element {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="left-pane-setting-content">
|
|
|
|
<div className="left-pane-setting-content">
|
|
|
|
|
|
|
|
<div className="left-pane-setting-input-group">
|
|
|
|
|
|
|
|
<SessionSearchInput
|
|
|
|
|
|
|
|
searchString={this.state.searchQuery}
|
|
|
|
|
|
|
|
onChange={() => null}
|
|
|
|
|
|
|
|
placeholder=''
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div className="left-pane-setting-input-button">
|
|
|
|
|
|
|
|
<SessionButton
|
|
|
|
|
|
|
|
buttonType={SessionButtonType.Square}
|
|
|
|
|
|
|
|
buttonColor={SessionButtonColor.Green}
|
|
|
|
|
|
|
|
text={'>'}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{this.renderCategories()}
|
|
|
|
{this.renderCategories()}
|
|
|
|
{this.renderBottomButtons()}
|
|
|
|
{this.renderBottomButtons()}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public renderBottomButtons(): JSX.Element {
|
|
|
|
public renderBottomButtons(): JSX.Element {
|
|
|
|
const deleteAccount = window.i18n('deleteAccount');
|
|
|
|
const deleteAccount = window.i18n('deleteAccount');
|
|
|
|
const showSeed = window.i18n('showSeed');
|
|
|
|
const showSeed = window.i18n('showSeed');
|
|
|
|
@ -133,33 +145,54 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|
|
|
text={deleteAccount}
|
|
|
|
text={deleteAccount}
|
|
|
|
buttonType={SessionButtonType.SquareOutline}
|
|
|
|
buttonType={SessionButtonType.SquareOutline}
|
|
|
|
buttonColor={SessionButtonColor.Danger}
|
|
|
|
buttonColor={SessionButtonColor.Danger}
|
|
|
|
|
|
|
|
onClick={this.onDeleteAccount}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<SessionButton
|
|
|
|
<SessionButton
|
|
|
|
text={showSeed}
|
|
|
|
text={showSeed}
|
|
|
|
buttonType={SessionButtonType.SquareOutline}
|
|
|
|
buttonType={SessionButtonType.SquareOutline}
|
|
|
|
buttonColor={SessionButtonColor.White}
|
|
|
|
buttonColor={SessionButtonColor.White}
|
|
|
|
|
|
|
|
onClick={window.showSeedDialog}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public getCategories(){
|
|
|
|
public onDeleteAccount() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
|
|
|
title: window.i18n('deleteAccount'),
|
|
|
|
|
|
|
|
message: window.i18n('deleteAccountWarning'),
|
|
|
|
|
|
|
|
messageSub: window.i18n('deleteAccountWarningSub'),
|
|
|
|
|
|
|
|
resolve: window.deleteAccount,
|
|
|
|
|
|
|
|
okTheme: 'danger',
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.confirmationDialog(params);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public getCategories() {
|
|
|
|
return [
|
|
|
|
return [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: SessionSettingCategory.Account,
|
|
|
|
|
|
|
|
title: window.i18n('accountSettingsTitle'),
|
|
|
|
|
|
|
|
description: window.i18n('accountSettingsDescription'),
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: SessionSettingCategory.Privacy,
|
|
|
|
id: SessionSettingCategory.Privacy,
|
|
|
|
title: 'Privacy',
|
|
|
|
title: window.i18n('privacySettingsTitle'),
|
|
|
|
description: 'Privacy description',
|
|
|
|
description: window.i18n('privacySettingsDescription'),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: SessionSettingCategory.Notifications,
|
|
|
|
id: SessionSettingCategory.Notifications,
|
|
|
|
title: 'Notifications',
|
|
|
|
title: window.i18n('notificationSettingsTitle'),
|
|
|
|
description: "Choose what you're notified about."
|
|
|
|
description: window.i18n('notificationSettingsDescription'),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: SessionSettingCategory.Devices,
|
|
|
|
id: SessionSettingCategory.Devices,
|
|
|
|
title: 'Linked Devices',
|
|
|
|
title: window.i18n('devicesSettingsTitle'),
|
|
|
|
description: "Managed linked devices."
|
|
|
|
description: window.i18n('devicesSettingsDescription'),
|
|
|
|
}
|
|
|
|
},
|
|
|
|
];
|
|
|
|
];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -168,4 +201,34 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
|
|
|
|
settingCategory: category,
|
|
|
|
settingCategory: category,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// public updateSearch(searchTerm: string) {
|
|
|
|
|
|
|
|
// const { updateSearchTerm, clearSearch } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (!searchTerm) {
|
|
|
|
|
|
|
|
// clearSearch();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
|
|
|
|
|
|
|
|
// this.setState({ pubKeyPasted: '' }, () => {
|
|
|
|
|
|
|
|
// window.Session.emptyContentEditableDivs();
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (updateSearchTerm) {
|
|
|
|
|
|
|
|
// updateSearchTerm(searchTerm);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (searchTerm.length < 2) {
|
|
|
|
|
|
|
|
// return;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const cleanedTerm = cleanSearchTerm(searchTerm);
|
|
|
|
|
|
|
|
// if (!cleanedTerm) {
|
|
|
|
|
|
|
|
// return;
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.debouncedSearch(cleanedTerm);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
Vincent
5 years ago