add the left pane sections on main page
Audric Ackermann
5 years ago
parent
ea0ab2c7cc
commit
c883d20bd7
@ -0,0 +1,37 @@
|
||||
.dark-theme {
|
||||
.module-conversation-list-item {
|
||||
background-color: $session-shade-4;
|
||||
&:hover {
|
||||
background-color: $session-shade-11;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-left-pane {
|
||||
border-right: none !important;
|
||||
width: 300px;
|
||||
|
||||
&-session {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__sections-container {
|
||||
height: -webkit-fill-available;
|
||||
width: 80px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background: $session-shade-2;
|
||||
|
||||
.module-avatar,
|
||||
.session-icon-button {
|
||||
margin: 30px auto 30px auto;
|
||||
&:last-child {
|
||||
margin: auto auto 30px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gutter {
|
||||
width: 380px;
|
||||
}
|
||||
@ -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 (
|
||||
<Avatar
|
||||
avatarPath={avatarPath}
|
||||
conversationType="direct"
|
||||
i18n={window.i18n}
|
||||
// tslint:disable-next-line: no-backbone-get-set-outside-model
|
||||
phoneNumber={window.storage.get('primaryDevicePubKey')}
|
||||
size={28}
|
||||
onAvatarClick={handleClick}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Avatar
|
||||
avatarPath={avatarPath}
|
||||
conversationType="direct"
|
||||
i18n={window.i18n}
|
||||
// tslint:disable-next-line: no-backbone-get-set-outside-model
|
||||
phoneNumber={window.storage.get('primaryDevicePubKey')}
|
||||
size={28}
|
||||
onAvatarClick={handleClick}
|
||||
borderColor={'#fff'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconType={iconType}
|
||||
notificationCount={notificationCount}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconType={iconType}
|
||||
notificationCount={notificationCount}
|
||||
onClick={handleClick}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="module-left-pane__sections-container">
|
||||
<Section
|
||||
type={SectionType.Profile}
|
||||
avatarPath={this.state.avatarPath}
|
||||
isSelected={isProfileSelected}
|
||||
onSelect={this.handleSectionSelect}
|
||||
/>
|
||||
<Section
|
||||
type={SectionType.Message}
|
||||
isSelected={isMessageSelected}
|
||||
onSelect={this.handleSectionSelect}
|
||||
notificationCount={0}
|
||||
/>
|
||||
<Section
|
||||
type={SectionType.People}
|
||||
isSelected={isPeopleSelected}
|
||||
onSelect={this.handleSectionSelect}
|
||||
/>
|
||||
<Section
|
||||
type={SectionType.Globe}
|
||||
isSelected={isGlobeSelected}
|
||||
onSelect={this.handleSectionSelect}
|
||||
/>
|
||||
<Section
|
||||
type={SectionType.Settings}
|
||||
isSelected={isSettingsSelected}
|
||||
onSelect={this.handleSectionSelect}
|
||||
/>
|
||||
<Section
|
||||
type={SectionType.Moon}
|
||||
isSelected={isMoonSelected}
|
||||
onSelect={this.handleSectionSelect}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private readonly handleSectionSelect = (section: SectionType): void => {
|
||||
this.setState({ selectedSection: section });
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue