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

be able to show right panel for users too (and display convo medias)

This commit is contained in:
Audric Ackermann 2020-11-04 09:44:06 +11:00
parent 3f538b9be1
commit aad2d3232a
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
5 changed files with 28 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/modules/signal.js
View File

@ -28,12 +28,6 @@ const {
} = require('../../ts/components/conversation/ContactDetail');
const { ContactListItem } = require('../../ts/components/ContactListItem');
const { ContactName } = require('../../ts/components/conversation/ContactName');
const {
ConversationHeaderWithDetails,
} = require('../../ts/components/conversation/ConversationHeader');
const {
SessionRightPanelWithDetails,
} = require('../../ts/components/session/conversation/SessionRightPanel');
const {
EmbeddedContact,
} = require('../../ts/components/conversation/EmbeddedContact');
@ -270,8 +264,6 @@ exports.setup = (options = {}) => {
ContactDetail,
ContactListItem,
ContactName,
ConversationHeaderWithDetails,
SessionRightPanelWithDetails,
SettingsView,
EmbeddedContact,
Emojify,

201
js/views/conversation_view.js
View File

@ -12,7 +12,7 @@
*/
// eslint-disable-next-line func-names
(function() {
(function () {
'use strict';
window.Whisper = window.Whisper || {};
@ -131,171 +131,6 @@
this.toggleMicrophone()
);
const getHeaderProps = () => {
const expireTimer = this.model.get('expireTimer');
const expirationSettingName = expireTimer
? Whisper.ExpirationTimerOptions.getName(expireTimer || 0)
: null;
const members = this.model.get('members') || [];
return {
id: this.model.id,
name: this.model.getName(),
phoneNumber: this.model.getNumber(),
profileName: this.model.getProfileName(),
avatarPath: this.model.getAvatarPath(),
isVerified: this.model.isVerified(),
isMe: this.model.isMe(),
isClosable: this.model.isClosable(),
isBlocked: this.model.isBlocked(),
isGroup: !this.model.isPrivate(),
isPrivate: this.model.isPrivate(),
isOnline: this.model.isOnline(),
isArchived: this.model.get('isArchived'),
isPublic: this.model.isPublic(),
isRss: this.model.isRss(),
amMod: this.model.isModerator(
window.storage.get('primaryDevicePubKey')
),
members,
subscriberCount: this.model.get('subscriberCount'),
selectedMessages: this.model.selectedMessages,
expirationSettingName,
showBackButton: Boolean(this.panels && this.panels.length),
timerOptions: Whisper.ExpirationTimerOptions.map(item => ({
name: item.getName(),
value: item.get('seconds'),
})),
hasNickname: !!this.model.getNickname(),
isKickedFromGroup: this.model.get('isKickedFromGroup'),
onSetDisappearingMessages: seconds =>
this.setDisappearingMessages(seconds),
onDeleteMessages: () => this.destroyMessages(),
onDeleteSelectedMessages: () => this.deleteSelectedMessages(),
onCloseOverlay: () => this.model.resetMessageSelection(),
onDeleteContact: () => this.model.deleteContact(),
onResetSession: () => this.endSession(),
// These are view only and don't update the Conversation model, so they
// need a manual update call.
onShowSafetyNumber: () => {
this.showSafetyNumber();
},
onGoBack: () => {
this.resetPanel();
this.updateHeader();
},
onBlockUser: () => {
this.model.block();
},
onUnblockUser: () => {
this.model.unblock();
},
onCopyPublicKey: () => {
this.model.copyPublicKey();
},
onArchive: () => {
this.unload('archive');
this.model.setArchived(true);
},
onLeaveGroup: () => {
window.Whisper.events.trigger('leaveGroup', this.model);
},
onInviteContacts: () => {
window.Whisper.events.trigger('inviteContacts', this.model);
},
onUpdateGroupName: () => {
window.Whisper.events.trigger('updateGroupName', this.model);
},
onAddModerators: () => {
window.Whisper.events.trigger('addModerators', this.model);
},
onRemoveModerators: () => {
window.Whisper.events.trigger('removeModerators', this.model);
},
onAvatarClick: pubkey => {
if (this.model.isPrivate()) {
window.Whisper.events.trigger('onShowUserDetails', {
userPubKey: pubkey,
});
} else if (!this.model.isRss()) {
this.showGroupSettings();
}
},
};
};
const getGroupSettingsProps = () => {
const members = this.model.get('members') || [];
const ourPK = window.textsecure.storage.user.getNumber();
const isAdmin = this.model.isMediumGroup()
? true
: this.model.get('groupAdmins').includes(ourPK);
return {
id: this.model.id,
name: this.model.getName(),
phoneNumber: this.model.getNumber(),
profileName: this.model.getProfileName(),
avatarPath: this.model.getAvatarPath(),
isGroup: !this.model.isPrivate(),
isPublic: this.model.isPublic(),
isAdmin,
isRss: this.model.isRss(),
memberCount: members.length,
amMod: this.model.isModerator(
window.storage.get('primaryDevicePubKey')
),
isKickedFromGroup: this.model.get('isKickedFromGroup'),
isBlocked: this.model.isBlocked(),
timerOptions: Whisper.ExpirationTimerOptions.map(item => ({
name: item.getName(),
value: item.get('seconds'),
})),
onSetDisappearingMessages: seconds =>
this.setDisappearingMessages(seconds),
onGoBack: () => {
this.hideConversationRight();
},
onUpdateGroupName: () => {
window.Whisper.events.trigger('updateGroupName', this.model);
},
onUpdateGroupMembers: () => {
window.Whisper.events.trigger('updateGroupMembers', this.model);
},
onLeaveGroup: () => {
window.Whisper.events.trigger('leaveGroup', this.model);
},
onInviteContacts: () => {
window.Whisper.events.trigger('inviteContacts', this.model);
},
onShowLightBox: (lightBoxOptions = {}) => {
this.showChannelLightbox(lightBoxOptions);
},
};
};
this.titleView = new Whisper.ReactWrapperView({
className: 'title-wrapper',
Component: window.Signal.Components.ConversationHeaderWithDetails,
props: getHeaderProps(),
});
this.updateHeader = () => this.titleView.update(getHeaderProps());
this.listenTo(this.model, 'change', this.updateHeader);
this.$('.conversation-header').append(this.titleView.el);
this.view = new Whisper.MessageListView({
collection: this.model.messageCollection,
window: this.window,
@ -308,39 +143,6 @@
onClicked: this.selectMember.bind(this),
});
this.hideConversationRight = () => {
this.$('.conversation-content-right').css({
'margin-inline-end': '-22vw',
});
};
this.showConversationRight = () => {
this.$('.conversation-content-right').css({
'margin-inline-end': '0vw',
});
};
this.showGroupSettings = () => {
if (!this.groupSettings) {
this.groupSettings = new Whisper.ReactWrapperView({
className: 'group-settings',
Component: window.Signal.Components.SessionRightPanelWithDetails,
props: getGroupSettingsProps(this.model),
});
this.$('.conversation-content-right').append(this.groupSettings.el);
this.updateGroupSettingsPanel = () =>
this.groupSettings.update(getGroupSettingsProps(this.model));
this.listenTo(this.model, 'change', this.updateGroupSettingsPanel);
} else {
this.groupSettings.update(getGroupSettingsProps(this.model));
}
this.showConversationRight();
};
this.hideGroupSettings = () => {
this.showConversationRight();
};
this.memberView.render();
this.$messageField = this.$('.send-message');
@ -506,7 +308,6 @@
);
this.fileInput.remove();
this.titleView.remove();
if (this.captureAudioView) {
this.captureAudioView.remove();

6
stylesheets/_session_group_panel.scss
View File

@ -1,9 +1,3 @@
.conversation-content-right {
transition: $session-transition-duration;
width: 22vw;
margin-inline-end: -22vw;
}
.group-settings {
display: flex;
flex-direction: column;

25
ts/components/session/conversation/SessionConversation.tsx
View File

@ -108,8 +108,8 @@ export class SessionConversation extends React.Component<Props, State> {
this.dragCounter = 0;
// Group settings panel
this.toggleGroupSettingsPane = this.toggleGroupSettingsPane.bind(this);
this.getGroupSettingsProps = this.getGroupSettingsProps.bind(this);
this.toggleRightPanel = this.toggleRightPanel.bind(this);
this.getRightPanelProps = this.getRightPanelProps.bind(this);
// Recording view
this.onLoadVoiceNoteView = this.onLoadVoiceNoteView.bind(this);
@ -232,8 +232,7 @@ export class SessionConversation extends React.Component<Props, State> {
// TODO VINCE: OPTIMISE FOR NEW SENDING???
const sendMessageFn = conversationModel.sendMessage.bind(conversationModel);
const shouldRenderGroupSettings =
!conversationModel.isPrivate() && !conversationModel.isRss();
const shouldRenderRightPanel = !conversationModel.isRss();
const showSafetyNumber = this.state.infoViewState === 'safetyNumber';
const showMessageDetails = this.state.infoViewState === 'messageDetails';
@ -307,14 +306,14 @@ export class SessionConversation extends React.Component<Props, State> {
)}
</div>
{shouldRenderGroupSettings && (
{shouldRenderRightPanel && (
<div
className={classNames(
'conversation-item__options-pane',
showOptionsPane && 'show'
)}
>
<SessionRightPanelWithDetails {...this.getGroupSettingsProps()} />
<SessionRightPanelWithDetails {...this.getRightPanelProps()} />
</div>
)}
</SessionTheme>
@ -485,12 +484,8 @@ export class SessionConversation extends React.Component<Props, State> {
},
onAvatarClick: (pubkey: any) => {
if (conversation.isPrivate()) {
window.Whisper.events.trigger('onShowUserDetails', {
userPubKey: pubkey,
});
} else if (!conversation.isRss()) {
this.toggleGroupSettingsPane();
if (!conversation.isRss()) {
this.toggleRightPanel();
}
},
};
@ -525,7 +520,7 @@ export class SessionConversation extends React.Component<Props, State> {
};
}
public getGroupSettingsProps() {
public getRightPanelProps() {
const { conversationKey } = this.props;
const conversation = window.ConversationController.getOrThrow(
conversationKey
@ -567,7 +562,7 @@ export class SessionConversation extends React.Component<Props, State> {
},
onGoBack: () => {
this.toggleGroupSettingsPane();
this.toggleRightPanel();
},
onUpdateGroupName: () => {
@ -589,7 +584,7 @@ export class SessionConversation extends React.Component<Props, State> {
};
}
public toggleGroupSettingsPane() {
public toggleRightPanel() {
const { showOptionsPane } = this.state;
this.setState({ showOptionsPane: !showOptionsPane });
}

25
ts/components/session/conversation/SessionRightPanel.tsx
View File

@ -19,7 +19,9 @@ import { save } from '../../../types/Attachment';
interface Props {
id: string;
name: string;
name?: string;
profileName?: string;
phoneNumber: string;
memberCount: number;
description: string;
avatarPath: string;
@ -29,6 +31,7 @@ interface Props {
amMod: boolean;
isKickedFromGroup: boolean;
isBlocked: boolean;
isGroup: boolean;
memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
onGoBack: () => void;
@ -237,6 +240,7 @@ class SessionRightPanel extends React.Component<Props, State> {
isAdmin,
amMod,
isBlocked,
isGroup,
} = this.props;
const { documents, media, onItemClick } = this.state;
const showMemberCount = !!(memberCount && memberCount > 0);
@ -316,12 +320,14 @@ class SessionRightPanel extends React.Component<Props, State> {
media={media}
onItemClick={onItemClick}
/>
<SessionButton
text={leaveGroupString}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.SquareOutline}
onClick={onLeaveGroup}
/>
{isGroup && (
<SessionButton
text={leaveGroupString}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.SquareOutline}
onClick={onLeaveGroup}
/>
)}
</div>
);
}
@ -337,12 +343,15 @@ class SessionRightPanel extends React.Component<Props, State> {
isPublic,
isKickedFromGroup,
isBlocked,
name,
profileName,
phoneNumber,
} = this.props;
const showInviteContacts =
(isPublic || isAdmin) && !isKickedFromGroup && !isBlocked;
const userName = name || profileName || phoneNumber;
const userName = id;
return (
<div className="group-settings-header">
<SessionIconButton