- {showArchived ? this.renderArchivedHeader() : renderMainHeader()}
+
+
+
+
+ {showArchived ? this.renderArchivedHeader() : renderMainHeader()}
+
+ {this.renderList()}
- {this.renderList()}
);
}
diff --git a/ts/components/LeftPaneSections.tsx b/ts/components/LeftPaneSections.tsx
new file mode 100644
index 000000000..ffa8da0c2
--- /dev/null
+++ b/ts/components/LeftPaneSections.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import {
+ SessionIconButton,
+ SessionIconSize,
+ SessionIconType,
+} from './session/icon';
+import { Avatar } from './Avatar';
+
+enum SectionType {
+ Profile,
+ Message,
+ People,
+ Globe,
+ Settings,
+ Moon,
+}
+
+interface State {
+ selectedSection: SectionType;
+ avatarPath: string;
+}
+
+const Section = ({
+ isSelected,
+ onSelect,
+ type,
+ avatarPath,
+ notificationCount,
+}: {
+ isSelected: boolean;
+ onSelect?: (event: SectionType) => void;
+ type: SectionType;
+ avatarPath?: string;
+ avatarColor?: string;
+ notificationCount?: number;
+}) => {
+ const handleClick = onSelect
+ ? () => {
+ onSelect(type);
+ }
+ : undefined;
+
+ if (type === SectionType.Profile) {
+ if (!isSelected) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+
+ let iconType: SessionIconType;
+ switch (type) {
+ case SectionType.Message:
+ iconType = SessionIconType.Reply;
+ break;
+ case SectionType.People:
+ iconType = SessionIconType.Users;
+ break;
+ case SectionType.Globe:
+ iconType = SessionIconType.Globe;
+ break;
+ case SectionType.Settings:
+ iconType = SessionIconType.Gear;
+ break;
+ case SectionType.Moon:
+ iconType = SessionIconType.Moon;
+ break;
+
+ default:
+ iconType = SessionIconType.Moon;
+ }
+ if (!isSelected) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+};
+
+export class LeftPaneSections extends React.Component<{}, State> {
+ constructor() {
+ super({});
+ this.state = {
+ avatarPath: '',
+ selectedSection: SectionType.Message,
+ };
+ }
+ public componentDidMount() {
+ // tslint:disable-next-line: no-backbone-get-set-outside-model
+ const ourNumber = window.storage.get('primaryDevicePubKey');
+
+ window.ConversationController.getOrCreateAndWait(ourNumber, 'private').then(
+ (conversation: any) => {
+ this.setState({
+ avatarPath: conversation.getAvatarPath(),
+ });
+ }
+ );
+ }
+
+ public render(): JSX.Element {
+ const isProfileSelected =
+ this.state.selectedSection === SectionType.Profile;
+ const isMessageSelected =
+ this.state.selectedSection === SectionType.Message;
+ const isPeopleSelected = this.state.selectedSection === SectionType.People;
+ const isGlobeSelected = this.state.selectedSection === SectionType.Globe;
+ const isSettingsSelected =
+ this.state.selectedSection === SectionType.Settings;
+ const isMoonSelected = this.state.selectedSection === SectionType.Moon;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ private readonly handleSectionSelect = (section: SectionType): void => {
+ this.setState({ selectedSection: section });
+ };
+}
diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index 610c506e4..8c87d172d 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -387,7 +387,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
if (signUpMode === SignUpMode.EnterDetails) {
return (
- {this.renderNamePasswordAndVerifyPasswordFields()};
+ {this.renderNamePasswordAndVerifyPasswordFields()}
);
}
diff --git a/ts/components/session/icon/SessionIconButton.tsx b/ts/components/session/icon/SessionIconButton.tsx
index ddf53615c..aab0ab76a 100644
--- a/ts/components/session/icon/SessionIconButton.tsx
+++ b/ts/components/session/icon/SessionIconButton.tsx
@@ -5,11 +5,15 @@ import { Props, SessionIcon } from '../icon';
interface SProps extends Props {
onClick: any;
+ notificationCount: number | undefined;
+ isSelected: boolean;
}
export class SessionIconButton extends React.PureComponent
{
public static readonly extendedDefaults = {
onClick: () => null,
+ notificationCount: undefined,
+ isSelected: false,
};
public static readonly defaultProps = {
...SessionIcon.defaultProps,
@@ -28,14 +32,24 @@ export class SessionIconButton extends React.PureComponent {
iconColor,
iconRotation,
iconPadded,
+ isSelected,
} = this.props;
+ let { notificationCount } = this.props;
+
+ if (notificationCount === 0) {
+ notificationCount = undefined;
+ } else if (notificationCount !== undefined && notificationCount > 9) {
+ notificationCount = 9;
+ }
+
return (
{
@@ -48,6 +62,9 @@ export class SessionIconButton extends React.PureComponent {
iconColor={iconColor}
iconRotation={iconRotation}
/>
+ {notificationCount !== undefined && (
+ {notificationCount}
+ )}
);
}
diff --git a/ts/global.d.ts b/ts/global.d.ts
index 9e1d3dbc4..cd129dcea 100644
--- a/ts/global.d.ts
+++ b/ts/global.d.ts
@@ -16,6 +16,7 @@ interface Window {
friends: any;
generateID: any;
pushToast: any;
+ storage: any;
}
interface Promise {
-