keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Closable overlay finished

Browse Source
pull/1122/head
Vincent 6 years ago
parent 5c02dc9371
commit 21a95ce587
5 changed files with 48 additions and 52 deletions
Show Stats Download Patch File Download Diff File

15
ts/components/MainViewController.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import {
export const MainViewController = { export const MainViewController = {
joinChannelStateManager, joinChannelStateManager,
onCreateClosedGroup, createClosedGroup,
renderMessageView, renderMessageView,
renderSettingsView, renderSettingsView,
}; };
@ -36,7 +36,6 @@ export class MessageView extends React.Component {
} }
} }
// ///////////////////////////////////// // /////////////////////////////////////
// //////////// Management ///////////// // //////////// Management /////////////
// ///////////////////////////////////// // /////////////////////////////////////
@ -106,7 +105,7 @@ function joinChannelStateManager(
return true; return true;
} }
async function onCreateClosedGroup( async function createClosedGroup(
groupName: string, groupName: string,
groupMembers: Array<ContactType>, groupMembers: Array<ContactType>,
onSuccess: any onSuccess: any
@ -172,12 +171,10 @@ function renderSettingsView(category: SessionSettingCategory) {
); );
if (document.getElementById('main-view')) { if (document.getElementById('main-view')) {
ReactDOM.render( ReactDOM.render(
( <SettingsView
<SettingsView category={category}
category={category} isSecondaryDevice={isSecondaryDevice}
isSecondaryDevice={isSecondaryDevice} />,
/>
),
document.getElementById('main-view') document.getElementById('main-view')
); );
} }

7
ts/components/session/LeftPaneContactSection.tsx
Unescape Escape View File

@ -17,11 +17,12 @@ import {
import { AutoSizer, List } from 'react-virtualized'; import { AutoSizer, List } from 'react-virtualized';
import { validateNumber } from '../../types/PhoneNumber'; import { validateNumber } from '../../types/PhoneNumber';
import { ConversationType } from '../../state/ducks/conversations'; import { ConversationType } from '../../state/ducks/conversations';
import { SessionClosableOverlay, SessionClosableOverlayType } from './SessionClosableOverlay'; import {
SessionClosableOverlay,
SessionClosableOverlayType,
} from './SessionClosableOverlay';
import { MainViewController } from '../MainViewController'; import { MainViewController } from '../MainViewController';
export enum SessionClosableOverlayTypeContact { Contact = 'contact'}
export interface Props { export interface Props {
searchTerm: string; searchTerm: string;
isSecondaryDevice: boolean; isSecondaryDevice: boolean;

36
ts/components/session/LeftPaneMessageSection.tsx
Unescape Escape View File

@ -17,7 +17,10 @@ import { cleanSearchTerm } from '../../util/cleanSearchTerm';
import { SearchOptions } from '../../types/Search'; import { SearchOptions } from '../../types/Search';
import { validateNumber } from '../../types/PhoneNumber'; import { validateNumber } from '../../types/PhoneNumber';
import { LeftPane, RowRendererParamsType } from '../LeftPane'; import { LeftPane, RowRendererParamsType } from '../LeftPane';
import { SessionClosableOverlay } from './SessionClosableOverlay'; import {
SessionClosableOverlay,
SessionClosableOverlayType,
} from './SessionClosableOverlay';
import { SessionIconType } from './icon'; import { SessionIconType } from './icon';
import { ContactType } from './SessionMemberListItem'; import { ContactType } from './SessionMemberListItem';
import { import {
@ -91,14 +94,15 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
this.handleToggleOverlay = this.handleToggleOverlay.bind(this); this.handleToggleOverlay = this.handleToggleOverlay.bind(this);
this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this); this.handleMessageButtonClick = this.handleMessageButtonClick.bind(this);
this.handleNewSessionButtonClick = this.handleNewSessionButtonClick.bind(this); this.handleNewSessionButtonClick = this.handleNewSessionButtonClick.bind(
this
);
this.handleJoinChannelButtonClick = this.handleJoinChannelButtonClick.bind( this.handleJoinChannelButtonClick = this.handleJoinChannelButtonClick.bind(
this this
); );
this.handleCreateClosedGroupButtonClick = this.handleCreateClosedGroupButtonClick.bind(this); this.onCreateClosedGroup = this.onCreateClosedGroup.bind(this);
this.renderClosableOverlay = this.renderClosableOverlay.bind(this); this.renderClosableOverlay = this.renderClosableOverlay.bind(this);
this.debouncedSearch = debounce(this.search.bind(this), 20); this.debouncedSearch = debounce(this.search.bind(this), 20);
} }
@ -258,8 +262,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
} }
// reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
this.setState({ valuePasted: '' }); this.setState({ valuePasted: '' });
if (updateSearchTerm) { if (updateSearchTerm) {
updateSearchTerm(searchTerm); updateSearchTerm(searchTerm);
@ -301,7 +304,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
const openGroupElement = ( const openGroupElement = (
<SessionClosableOverlay <SessionClosableOverlay
overlayMode={SessionComposeToType.OpenGroup} overlayMode={SessionClosableOverlayType.OpenGroup}
onChangeSessionID={this.handleOnPaste} onChangeSessionID={this.handleOnPaste}
onCloseClick={() => { onCloseClick={() => {
this.handleToggleOverlay(undefined); this.handleToggleOverlay(undefined);
@ -315,7 +318,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
const closedGroupElement = ( const closedGroupElement = (
<SessionClosableOverlay <SessionClosableOverlay
overlayMode={SessionComposeToType.ClosedGroup} overlayMode={SessionClosableOverlayType.ClosedGroup}
onChangeSessionID={this.handleOnPaste} onChangeSessionID={this.handleOnPaste}
onCloseClick={() => { onCloseClick={() => {
this.handleToggleOverlay(undefined); this.handleToggleOverlay(undefined);
@ -323,7 +326,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
onButtonClick={async ( onButtonClick={async (
groupName: string, groupName: string,
groupMembers: Array<ContactType> groupMembers: Array<ContactType>
) => this.handleCreateClosedGroupButtonClick(groupName, groupMembers)} ) => this.onCreateClosedGroup(groupName, groupMembers)}
searchTerm={searchTerm} searchTerm={searchTerm}
updateSearch={this.updateSearchBound} updateSearch={this.updateSearchBound}
showSpinner={loading} showSpinner={loading}
@ -332,7 +335,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
const messageElement = ( const messageElement = (
<SessionClosableOverlay <SessionClosableOverlay
overlayMode={SessionComposeToType.Message} overlayMode={SessionClosableOverlayType.Message}
onChangeSessionID={this.handleOnPaste} onChangeSessionID={this.handleOnPaste}
onCloseClick={() => { onCloseClick={() => {
this.handleToggleOverlay(undefined); this.handleToggleOverlay(undefined);
@ -398,11 +401,9 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
private handleToggleOverlay(conversationType?: SessionComposeToType) { private handleToggleOverlay(conversationType?: SessionComposeToType) {
const { overlay } = this.state; const { overlay } = this.state;
const overlayState = overlay const overlayState = overlay ? false : conversationType || false;
? false
: conversationType || false;
this.setState({ overlay: overlayState}); this.setState({ overlay: overlayState });
// empty our generalized searchedString (one for the whole app) // empty our generalized searchedString (one for the whole app)
this.updateSearch(''); this.updateSearch('');
@ -440,7 +441,6 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
} }
} }
private handleJoinChannelButtonClick(groupUrl: string) { private handleJoinChannelButtonClick(groupUrl: string) {
const { loading } = this.state; const { loading } = this.state;
@ -478,14 +478,14 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
return true; return true;
} }
private async handleCreateClosedGroupButtonClick ( private async onCreateClosedGroup(
groupName: string, groupName: string,
groupMembers: Array<ContactType> groupMembers: Array<ContactType>
) { ) {
// console.log('[vince] groupName:', groupName); // console.log('[vince] groupName:', groupName);
// console.log('[vince] groupMembers:', groupMembers); // console.log('[vince] groupMembers:', groupMembers);
await MainViewController.onCreateClosedGroup(groupName, groupMembers, () => { await MainViewController.createClosedGroup(groupName, groupMembers, () => {
this.handleToggleOverlay(undefined); this.handleToggleOverlay(undefined);
window.pushToast({ window.pushToast({
@ -498,6 +498,4 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
private handleNewSessionButtonClick() { private handleNewSessionButtonClick() {
this.handleToggleOverlay(SessionComposeToType.Message); this.handleToggleOverlay(SessionComposeToType.Message);
} }
} }

1
ts/components/session/LeftPaneSectionHeader.tsx
Unescape Escape View File

@ -94,7 +94,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
) : ( ) : (
buttonLabel buttonLabel
); );
;
const button = ( const button = (
<SessionButton onClick={buttonClicked} key="compose" disabled={false}> <SessionButton onClick={buttonClicked} key="compose" disabled={false}>
{buttonContent} {buttonContent}

41
ts/components/session/SessionClosableOverlay.tsx
Unescape Escape View File

@ -11,15 +11,14 @@ import {
SessionButtonType, SessionButtonType,
} from './SessionButton'; } from './SessionButton';
import { SessionSpinner } from './SessionSpinner'; import { SessionSpinner } from './SessionSpinner';
import { SessionClosableOverlayTypeContact } from './LeftPaneContactSection';
import { SessionComposeToType } from './LeftPaneMessageSection';
import { PillDivider } from './PillDivider'; import { PillDivider } from './PillDivider';
export const SessionClosableOverlayType = { export enum SessionClosableOverlayType {
...SessionComposeToType, Contact = 'contact',
...SessionClosableOverlayTypeContact, Message = 'message',
}; OpenGroup = 'open-group',
export type SessionClosableOverlayType = SessionComposeToType | SessionClosableOverlayTypeContact; ClosedGroup = 'closed-group',
}
interface Props { interface Props {
overlayMode: SessionClosableOverlayType; overlayMode: SessionClosableOverlayType;
@ -50,7 +49,10 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
}; };
this.inputRef = React.createRef(); this.inputRef = React.createRef();
this.onKeyUp = this.onKeyUp.bind(this);
this.onGroupNameChanged = this.onGroupNameChanged.bind(this); this.onGroupNameChanged = this.onGroupNameChanged.bind(this);
window.addEventListener('keyup', this.onKeyUp);
} }
public componentDidMount() { public componentDidMount() {
@ -106,9 +108,10 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
const isAddContactView = overlayMode === SessionClosableOverlayType.Contact; const isAddContactView = overlayMode === SessionClosableOverlayType.Contact;
const isMessageView = overlayMode === SessionClosableOverlayType.Message; const isMessageView = overlayMode === SessionClosableOverlayType.Message;
const isOpenGroupView =
const isOpenGroupView = overlayMode === SessionClosableOverlayType.OpenGroup; overlayMode === SessionClosableOverlayType.OpenGroup;
const isClosedGroupView = overlayMode === SessionClosableOverlayType.ClosedGroup; const isClosedGroupView =
overlayMode === SessionClosableOverlayType.ClosedGroup;
let title; let title;
let buttonText; let buttonText;
@ -153,8 +156,8 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
const contacts = this.getContacts(); const contacts = this.getContacts();
const noContactsForClosedGroup = const noContactsForClosedGroup =
overlayMode === SessionClosableOverlayType.ClosedGroup && contacts.length === 0; overlayMode === SessionClosableOverlayType.ClosedGroup &&
contacts.length === 0;
return ( return (
<div className="module-left-pane-overlay"> <div className="module-left-pane-overlay">
@ -202,7 +205,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
{isClosedGroupView && ( {isClosedGroupView && (
<> <>
<div className="spacer-lg" /> <div className="spacer-lg" />
<div className="group-member-list__container"> <div className="group-member-list__container">
{noContactsForClosedGroup ? ( {noContactsForClosedGroup ? (
<div className="group-member-list__no-contacts"> <div className="group-member-list__no-contacts">
@ -255,10 +257,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
} }
private renderMemberList(members: any) { private renderMemberList(members: any) {
console.log('[vince] sdsdf:');
console.log('[vince] members:', members);
return members.map((member: ContactType) => ( return members.map((member: ContactType) => (
<SessionMemberListItem <SessionMemberListItem
member={member} member={member}
@ -293,12 +291,15 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
} }
private onGroupNameChanged(event: any) { private onGroupNameChanged(event: any) {
console.log('[vince] event:', event);
this.setState({ this.setState({
groupName: event, groupName: event,
}); });
}
private onKeyUp(event: any) {
if (event.key === 'Escape') {
window.removeEventListener('keyup', this.onKeyUp);
this.props.onCloseClick();
}
} }
} }

Write Preview
Loading…
Cancel
Save